I have this application that shows small windows after clicking a button
JsFiddle
$('.modules').draggable();
$('.glyphicon').click(function() {
$(this).next('.modules').slideToggle();
});
.glyphicon {
font-size: 2em;
color: #A70000;
position:absolute;
z-index: 10;
display: block;
}
.glyphicon:hover {
cursor: pointer;
color: #000;
}
.modules{
position: absolute;
width: 30%;
box-shadow: 5px 5px 15px #000;
z-index: 5;
display: none;
overflow: hidden;
}
.modules_box {
color: white;
background-color: rgba(159,159,159,0.8)
}
.module img{
padding: 5px;
}
#module1 {
left: 10%;
top: 7%;
}
#button_module1 {
left: 10%;
top: 7%;
}
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span id="button_module1" class="glyphicon glyphicon-info-sign"></span>
<div class="modules" id="module1" draggable="true">
<img src="http://www.touronline.ag/Portals/0/Products/alle_module.jpg" alt=""/>
<div class="modules_box">
<h5>DANE:</h5>
<ul>
<li>Parametr 1: 500</li>
<li>Parametr 2: 700</li>
<li>Parametr 3: 1500 cm</li>
</ul>
</div>
</div>
Windows are draggable so a user can move them around. What I want to achieve is to reset the window position after it's hidden so it always shows at its origin. I would like the universal solution that doesn't require writing separate code for every window. There will be many windows placed at different spots using absolute position. Any suggestions how this could be achieved?
Resetting the 'style' attribute on toggle will ensure the module always reverts to it's original position in the stylesheet.
if(!$this.is(":visible")){
$this.attr('style','');
}
http://jsfiddle.net/vrww6fcm/3/
Related
Here I have a Div(div1 in figure) that I want it to center in the page(now I used margin-left to forced it at a center place of my own pc, but when other person with different resolution screen open it, it is not at the center.) I have tried make each relative/fixed/absolute/padding/margin, and search online for two days, but either each part in div1 falls apart or it doesn't work.
And At the same time, I added a text div(div2) and want it to below this current div(div1), and it doesn't goes below it, it goes hide under div 1. I searched online and know that it will do this if there is a relative/fixed position div before it, it will be ignored. So i can only use fixed position for div 2 as well. which I don't want it to.And I also want it go to the center of the page.
The main problem here is my page is not fix every screen and at the center.
view example page at http://circleofallnations.ca/
the big circle is the div1, 5 parts in it and form that circle, thats why div1 has to be a relative div
the text under the big circle is div 2.(you can see it is a picture on texting page, and I changed it to a text div in below code.)
Here is the example figure
html code:
<!DOCTYPE html>
<html>
<title>circle of all nations home page</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<a href ="http://www.circleofallnations.ca/canhome">
<img onmouseover="circle2()" onmouseout="circle1()" src="pictures/circle.png" alt="centre circle" class="circle" id="circle"></a>
<a href ="http://develop.gcrc.carleton.ca:8053/index.html">
<img onmouseover="above2()" onmouseout="above1()" src="pictures/above.png" alt="above" class="above" id="above"></a>
<a href ="https://www.asinabka.com/">
<img onmouseover="left2()" onmouseout="left1()" src="pictures/left.png" alt="left" class="left" id="left"></a>
<div class="rightCon" onmouseenter="right2()" onmouseleave="right1()">
<img src="pictures/right.png" alt="right" class="right" id = "right">
<div id= "right1" class = "text1"><pre> 2000<br>ARCHIVAL<br> SITE<br></pre></div>
<div id= "right2" class = "text1"><pre> 2012<br>ARCHIVAL<br> SITE<br></pre></div>
</div>
<div class="bottomCon" onmouseenter="bottom2()" onmouseleave="bottom1()">
<img src="pictures/bottom.png" alt="bottom" class="bottom" id = "bottom">
<div id="bottomtext"><center>
<div id= "bottom1" class = "text2">Circle of All Nations</div>
<div id= "bottom2" class = "text2">William Commanda</div>
<div id= "bottom3" class = "text2">William Commanda Legacy - Asinabka</div>
<div id= "bottom4" class = "text2">Romola Vasantha Thumbadoo</div>
<div id= "bottom5" class = "text2">Romola's Nature CAN Photo-Art</div></center>
</div>
</div>
<div class="footer" style="color:#FFFFFF; font-family:Arial black;font-size:13pt; "><center>
<div><center>WILLIAM COMMANDA LEGACY</div>
<div><center>A CIRCLE OF ALL Nations</div>
<div><center>GLOBAL ECO PEACE COMMUNITY</div>
<div><center>All the original material on this website is © 2020</div>
<div><center>Asinabka and Circle of All nations</div>
<div><center>Romola#circleofallnations.ca</div>
<div><center>All rights reserved</div>
</div>
<div class="lastLine">
CIRCLE OF ALL NATIONS (CAN) 2020 HOME PAGE |>
<a id="sites">
<select onChange="window.location.href=this.value">
<option selected disabled hidden>CAN ARCHIVAL SITES |</option>
<option value="http://www.angelfire.com/ns/circleofallnations/page3.html">2000 Archival Site | </option>
<option value="http://www.circleofallnations.ca/http___circleofallnations_2014NEW_Welcome.html/Welcome.html">2012 Archival Site |</option>
</select></a>>
ASINABKA |>
DIGITAL ATLAS |
<a id="facebooks">
<select onChange="window.location.href=this.value">
<option selected disabled hidden>FACEBOOK PAGES</option>
<option value="https://www.facebook.com/circleofallnations/">Circle of All Nations |</option>
<option value="https://www.facebook.com/William-Commanda-124359520927182/">William Commanda |</option>
<option value="https://www.facebook.com/William-Commanda-Legacy-Asinabka-701369829887220/">William Commanda Legacy-Asinabka |</option>
<option value="https://www.facebook.com/romola.thumbadoo">Romola Vasantha Thumbadoo |</option>
<option value="https://www.facebook.com/Romolas-Nature-CAN-TEACH-PhotoArt-Page-937319673008841/">Romola's Nature CAN Photo-Art |</option>
</select></a>
</div>
<div class="under" style="color:#FFFF00; font-family:Arial;font-size:13pt; ">(under development)</div>
<div class="under2" style="color:#FFFF00; font-family:Arial;font-size:13pt; ">(under development)</div>
<script src="landingpage.js"></script>
</body>
</html>
and here is css sheet
body{
background-color: black;
}
img{
padding: 0px;
transition: transform .2s;
}
a{
color:black;
text-decoration: none;
}
pre{
font-family: "Arial black", sans-serif;
font-size: 25px;
}
select {
/* for Firefox */
-moz-appearance: none;
/* for Chrome */
-webkit-appearance: none;
color: #FFFF00;
background-color: transparent;
border-color: transparent;
cursor: pointer;
font-size: 13pt;
}
select option {
margin: 40px;
background: black;
color: #FFFF00;
border-color: black;
font-size: 13pt;
}
/* For IE10 */
select::-ms-expand {
display: none;
}
.text1{
font-family: "Arial black", sans-serif;
}
.text2{
font-family: "Arial black", sans-serif;
font-size: 15px;
}
a:hover {
color: blue;
}
.container{
position:relative;
margin-left:15%;
background-color: black;
}
.circle{
position:absolute;
left:480px;
top: 107px;
}
.above{
position: absolute;
top:10px;
left:437px;
}
.left{
position: absolute;
left:337px;
top:109px;
}
.right{
position: absolute;
left:813px;
top:109px;
}
.bottom{
position: absolute;
top:485px;
left:437px;
}
#first{
font-size: 45px;
}
#second{
font-size: 25px;
}
#last{
font-size: 12px;
}
.rightCon {
position: absolute;
color: white;
}
#right1{
z-index: 10;
position: absolute;
left:850px;
top:163px;
opacity: 0;
}
#right2{
z-index: 10;
position: absolute;
left:853px;
top:350px;
opacity: 0;
}
.bottomCon {
position: relative;
}
#bottomtext{
z-index: 10;
position: absolute;
left:520px;
top:545px;
opacity: 0;
}
.lastLine{
position: absolute;
top:930px;
left:450px;
}
.under{
position: absolute;
top:900px;
left:450px;
}
.under2{
position: absolute;
top:900px;
left:1170px;
}
js code(not too important)
if(performance.navigation.type == 2){
location.reload(true);
}
function circle2(){
document.getElementById("circle").src = "pictures/circle1.png";
}
function circle1(){
document.getElementById("circle").src = "pictures/circle.png";
}
function right2(){
document.getElementById("right").src = "pictures/right2.png";
document.getElementById("right1").style.opacity=1;
document.getElementById("right2").style.opacity=1;
}
function right1(){
document.getElementById("right").src = "pictures/right.png";
document.getElementById("right1").style.opacity=0;
document.getElementById("right2").style.opacity=0;
}
function bottom2(){
document.getElementById("bottom").src = "pictures/bottom2.png";
document.getElementById("bottomtext").style.opacity=1;
}
function bottom1(){
document.getElementById("bottom").src = "pictures/bottom.png";
document.getElementById("bottomtext").style.opacity=0;
}
function above2(){
document.getElementById("above").src = "pictures/above2.png";
}
function above1(){
document.getElementById("above").src = "pictures/above.png";
}
function left2(){
document.getElementById("left").src = "pictures/left2.png";
}
function left1(){
document.getElementById("left").src = "pictures/left.png";
}
Please help, thank you in advance.
Hello There! I think you should try margin: auto property. First of all, remove the position:relative and margin left properties from your container. And then add a width or height to your container(according to your need), and add margin:auto to it. Here's an example code:
.container {
display: block;
width: 500px;
height: auto;
margin: auto;
background-color: black;
}
This will definitely center align it.
And if you want to make your div go to next line, just add display: block; property to it. And if it gets hide under div1, add z-index: +1 property to it. Try all these edits, and let me know if it fixed your problem.
I am having an issue getting tabs to open based on the selection I am choosing. In the snippet you will see 4 boxes. If you click on box 1, I am wanting #marketing1 to open below it and so on.
The method I am using is to get the specific id of the button selection (the 1,2,3,4 box) and then declare a variable to just get the number. Then to add that number to the id of #marketing to show the appropriate section. I am not sure what I am doing wrong. No errors are showing.
Ps - I am also trying to add an .active class to the #marketing-service for when one of the selection boxes is clicked on to show my the active class (it creates a down arrow under the box. Am I implementing the .active wrong to the :before and :after?
//For tabs to stay active
$('.marketing-service').click(function() {
$('.marketing-service.active').removeClass('active');
$(this).toggleClass('active');
//To get the service display box to show
var item_number = $(this).attr('id').replace('marketing-tab', '');
/* $('html, body').animate({
scrollTop: $("#service-display-box").offset().top
}, 1500);*/
$('#marketing'+item_number).show().siblings('.marketing-section-wrap').hide();
});
.marketing-section-wrap, .marketing-section-wrap-main {
width: 100%;
height: auto;
padding: 80px 0;
border-bottom: 1px solid #EBEBEB;
}
.marketing-section-wrap {
display: none;
}
#marketing-services {
width: 95%;
margin: 0 2.5%;
}
.marketing-service {
display: inline-block;
width: 22%;
margin: 0 1%;
height: 400px;
background: #F0F0F0;
position: relative;
cursor: pointer;
}
.marketing-service:first-child {
margin-left: 0;
}
.marketing-service:last-child {
margin-right: 0;
}
.marketing-service:hover {
background: rgba(0, 255, 170, .4);
z-index: 1;
}
/*-- Down Arrow for boxes --*/
.marketing-service:after.active, .marketing-service:before.active {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
}
.marketing-service:after.active {
border-width: 0px;
margin-left: 0px;
border-color: rgba(136, 183, 213, 0);
border-right-color: #88b7d5;
margin-top: -30px;
}
.marketing-service:before.active {
border-color: #FFF;
border-top-color: #88b7d5;
border-width: 36px;
margin-left: -36px;
margin-top: 0;
}
.marketing-service-wrap {
padding: 10%;
width: 80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="marketing-services">
<div class="marketing-service" id="marketing-tab1">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">1</h2>
</div>
</div>
<div class="marketing-service" id="marketing-tab2">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">2</h2>
</div>
</div>
<div class="marketing-service" id="marketing-tab3">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">3</h2>
</div>
</div>
<div class="marketing-service" id="marketing-tab4">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">4</h2>
</div>
</div>
</div>
<div id="marketing1">
<div class="marketing-section-wrap">
1
</div>
</div>
<div id="marketing2">
<div class="marketing-section-wrap">
2
</div>
</div>
Quite simple just try $('#marketing'+item_number).children().show() because marketing-section-wrap is display:none;
first run this to hide all marketing-section-wrap
$('.marketing-section-wrap').hide();
then this will show only the one which corresponds to this click.
$('#marketing'+item_number).children().show();
I have a simple site with two sections. Ideally the section at the top would load at a particular size, but then with the click of a button located at the bottom of this section, the section would increase size to fit screen. If clicked again the section would go back to its original size.
Functionality should be exactly as the one on this site:
http://www.urbandisplacement.org/map/la
I have a couple of questions:
What is the best way to accomplish this effect through JQuery/CSS?
How do I make sure the button stays fixed at the bottom of the growing/shrinking div and moves as the div does?
I've tried resetting the height of the top div when the button is clicked, using JQuery, but this neither animates nor keeps the button at the bottom of the div when it's used.
Thank you!
Here's a simple CSS only version:
https://jsfiddle.net/otenf0fy/
body,#wrapper {
height: 100%;
}
#expand {
display: none;
}
#top {
background: black;
color: white;
padding: 1em;
position: relative;
}
label {
background: blue;
color: white;
border-radius: .5em;
padding: 1em;
display: block;
width: 5em;
text-align: center;
cursor: pointer;
position: absolute;
bottom: 1em;
left: 50%;
transform: translate(-2.5em,0);
}
#expand:checked ~ #top {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<body>
<div id="wrapper">
<input id="expand" type="checkbox">
<div id="top">
<p>
This is just a test
</p>
<label for="expand">Expand</label>
</div>
</div>
</body>
I'm trying to make a web page to time a race and I had the idea to make the html page with the timer slide from the right with hitting a button
here's the html of the main menu:
<!DOCTYPE HTML>
<body style="background:#f2f2f2;">
<div id="options" style="background:#0c0c0c; float:right;">
<div class="menu" onclick="openChronometre()" ></div>
</div>
</body>
here's a js fiddle of the main menu (without images)
here's a js fiddle of the timer (the layout isn't that great, still WIP)
when hitting the black bar in the main menu, the entire page html page for the timer should come from the right, is there any way to do that?
Sorry I didn't do the animation part. But as a basic idea...
You're probably better off keeping the timer as a div on the main menu page.
If it has to be another page then use an iframe or ajax to load the contents to the div I guess.
Either way it should be contained in the element you're clicking on. Then you can use some JavaScript to modify the CSS and show it/slide it on the page. The jQuery library has a lot of animation/slide functions for example.
I basically combined your 2 fiddles into one and added:
#options {position: absolute; left: 90%; }
and
onclick="opts = document.getElementById('options'); if (opts.style.left == '0px') { opts.style.left = '90%'; } else { opts.style.left = '0px';}"
html {
overflow: hidden;
}
body {
font-family: 'Century Gothic';
font-size: 34px;
}
#options {
box-shadow: 0 0 5px 1px;
margin-top: 100px;
margin-right: -8px;
height: 450px;
cursor: pointer;
position: absolute;
left: 90%;
}
#Chrono1,
#Chrono2 {
overflow: hidden;
background-color: #2d2d2d;
box-shadow: 0 0 4px 0 #0c0c0c;
padding: 6px 20px;
}
#Panel1,
#Panel2 {
overflow: hidden;
background-color: #2d2d2d;
box-shadow: 0 0 4px 0 #0c0c0c;
width: 400px;
height: 450px;
}
#Panel1:hover,
#Panel2:hover {
transition: opacity 0.5s;
-webkit-animation: PanelSlide 2s;
/* Chrome, Safari, Opera */
animation: PanelSlide 2s;
/* IE */
}
<body style="background:#f2f2f2;">
<div id="options" style="background-color: #262626; font-family: Century Gothic; color: #8c8c8c;" onclick="opts = document.getElementById('options');
if (opts.style.left == '0px') {
opts.style.left = '90%';
} else {
opts.style.left = '0px';
}
">
<div id="Title" style="font-size: 55px; text-align: center; margin-top: 3%">Timer</div>
<div id="Temps" style="text-align: center; font-size: 30px; margin: 7%;">
<div id="Chrono1" style="display: inline-block; margin-right: 540px; position:relative;">
00:00:00
</div>
<div id="Chrono2" style="display: inline-block; position:relative;">
00:00:00
</div>
</div>
<div id="Panels" style="text-align: center; font-size: 30px; margin-top: -5%;">
<div id="Panel1" style="display: inline-block; position:relative; margin-right: 300px; opacity: 0;">
</div>
<div id="Panel2" style="display: inline-block; position:relative; opacity: 0;">
</div>
</div>
</div>
</body>
Just have (or load) the chronometre page in a div that is outside of the visibility, then use the animations to slide it in:
#next_page {
position:fixed;
top:0px;
left:100%;
z-index:222;
height:100%;
width:100%;
background:rgba(0,0,0,0.6);
}
And then with JS (I used jQuery for convenience):
function openChronometre(){
$("#next_page").stop(0,0).animate(
{ left: 0 },
1000
);
}
You can see it working here: http://jsfiddle.net/1uggfw32/5/ (I made the options as a green box so you can click on them).
Does any know how Google plus trigger a button to then open a file input field?
Could they be using an iframe for legacy browsers, or is it a HTML 5 thing???
Any help would be greatly appreciated, as I am needing to make firefox 3.6 trigger an input file via a button. I have read around not possible, but some how google plus can do it.
I can only test with current firefox and chrom version. If it works in IE, you need at least IE 9 (I can't test in IE9).
HTML:
<div class="button_wrapper">
<div class="button_visible" role="button">button description</div>
<div class="button_invisible">
<input type="file" class="button_input" tabindex="-1" multiple="" />
</div>
</div>
CSS:
.button_wrapper {
display: inline-block;
position: relative;
}
.button_visible {
display: inline-block;
position: relative;
padding: 6px 6px;
background-color: #EEE;
border: 1px solid #CCC;
color: #666;
font-size: 12px;
font-weight: bold;
}
.button_invisible {
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
}
.button_input {
position: absolute;
top: -10px;
left: -445px;
opacity: 0;
font: 40px arial,sans-serif;
cursor: pointer;
}
Because I didn't want to set the width and height in all css classes, I added this JS:
$('.button_invisible').each(function() {
$(this).width($(this).parent().width());
$(this).height($(this).parent().height());
});
Also see my jsfiddle.