Element will not go away using click() method to transition element opacity - javascript

I am trying to program the element with an ID of "opacity" to change its opacity from 1 to 0 upon clicking the element. But then I click the element, nothing happens. What am I doing wrong?
#message {
height: 300px;
width: 300px;
background-color: rgb(255, 10, 10, .5);
overflow: scroll;
}
.box {
background-color: blue;
}
#background {
background-color: red;
}
.submenu {
background-color: purple;
color: green;
width: 150px;
}
.option {
background-color: cyan;
}
#dashboard {
margin-left: -70px;
background-color: blue;
width: 80px;
border: 5px solid;
}
#opacity {
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
img.faded {
opacity: 0;
}
<!DOCTYPE html>
<!-- The above DOCTYPE declaration tells the browser that this page conforms to HTML 5 standards -->
<head>
<meta http-equiv="author" content="Chris" />
<link href="jquery.css" type="text/css" rel="stylesheet" />
<script src="jquery.js"></script>
<script>
$(function() {
jQuery('#one').hide();
jQuery('#fadeToggle').click(function() {
jQuery('#one').fadeToggle(500);
});
jQuery('#fadeTo').click(function() {
jQuery('#two').fadeTo(500, .5);
});
jQuery('#congrats').animate({
marginLeft: '+=1200px',
},
10000,
);
jQuery('#congrats').fadeOut(11000);
jQuery('#opacity').click(function() {
jQuery(this).addClass('faded');
});
});
</script>
</head>
<body>
<div id="one">
<p>This is the fadeToggle() method carrying out a "well-defined operation on data," the jQuery object ('#box'), in this case. The parameter is "500," which stands for half a second.</p>
</div>
<input type="submit" id="fadeToggle" value="fadeToggle()" />
<div id="two">
<p>This is the fadeTo() method.</p>
</div>
<input type="submit" id="fadeTo" value="fadeToggle()" />
<div id="heading">
<img id="congrats" src="congrats.gif" />
</div>
<img id="opacity" src="congrats.gif" />
</body>
</html>
I am trying to program the element with an ID of "opacity" to change its opacity from 1 to 0 upon clicking the element. But then I click the element, nothing happens. What am I doing wrong?
Thanks.

You just need to update the css. Your css #opacity is overwriting your img.faded. All you need to do is #opacity.faded JSBin
#opacity.faded {
opacity: 0;
}

You have an id that is setting opacity: 1 and then you're adding a class with opacity: 0, this creates a conflict.
If you wanted to make a simple change to this, then you can just add !important to your faded class css so it takes presidents over the id.
Like this:
.faded {
opacity: 0 !important;
}

You need to use the jQuery .css() method to set the opacity to 0.
This is because in your CSS stylesheet, you have given #opacity an opacity of 1, which can not be overriden by adding another class with an opacity of 0. You have to add an inline style to override the CSS properties set in the stylesheet with .css().
#message {
height: 300px;
width: 300px;
background-color: rgb(255, 10, 10, .5);
overflow: scroll;
}
.box {
background-color: blue;
}
#background {
background-color: red;
}
.submenu {
background-color: purple;
color: green;
width: 150px;
}
.option {
background-color: cyan;
}
#dashboard {
margin-left: -70px;
background-color: blue;
width: 80px;
border: 5px solid;
}
#opacity {
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
img.faded {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<!-- The above DOCTYPE declaration tells the browser that this page conforms to HTML 5 standards -->
<head>
<meta http-equiv="author" content="Chris" />
<script>
$(function() {
jQuery('#one').hide();
jQuery('#fadeToggle').click(function() {
jQuery('#one').fadeToggle(500);
});
jQuery('#fadeTo').click(function() {
jQuery('#two').fadeTo(500, .5);
});
jQuery('#congrats').animate({
marginLeft: '+=1200px',
},
10000,
);
jQuery('#congrats').fadeOut(11000);
jQuery('#opacity').click(function() {
jQuery(this).css("opacity", "0");
});
});
</script>
</head>
<body>
<div id="one">
<p>This is the fadeToggle() method carrying out a "well-defined operation on data," the jQuery object ('#box'), in this case. The parameter is "500," which stands for half a second.</p>
</div>
<input type="submit" id="fadeToggle" value="fadeToggle()" />
<div id="two">
<p>This is the fadeTo() method.</p>
</div>
<input type="submit" id="fadeTo" value="fadeToggle()" />
<div id="heading">
<img id="congrats" src="congrats.gif" />
</div>
<img id="opacity" src="congrats.gif" />
</body>
</html>
You can make the opacity rule in .faded more important by adding !important.
#message {
height: 300px;
width: 300px;
background-color: rgb(255, 10, 10, .5);
overflow: scroll;
}
.box {
background-color: blue;
}
#background {
background-color: red;
}
.submenu {
background-color: purple;
color: green;
width: 150px;
}
.option {
background-color: cyan;
}
#dashboard {
margin-left: -70px;
background-color: blue;
width: 80px;
border: 5px solid;
}
#opacity {
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
img.faded {
opacity: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<head>
<meta http-equiv="author" content="Chris" />
<script>
$(function() {
jQuery('#one').hide();
jQuery('#fadeToggle').click(function() {
jQuery('#one').fadeToggle(500);
});
jQuery('#fadeTo').click(function() {
jQuery('#two').fadeTo(500, .5);
});
jQuery('#congrats').animate({
marginLeft: '+=1200px',
},
10000,
);
jQuery('#congrats').fadeOut(11000);
jQuery('#opacity').click(function() {
jQuery(this).addClass("faded");
});
});
</script>
</head>
<body>
<div id="one">
<p>This is the fadeToggle() method carrying out a "well-defined operation on data," the jQuery object ('#box'), in this case. The parameter is "500," which stands for half a second.</p>
</div>
<input type="submit" id="fadeToggle" value="fadeToggle()" />
<div id="two">
<p>This is the fadeTo() method.</p>
</div>
<input type="submit" id="fadeTo" value="fadeToggle()" />
<div id="heading">
<img id="congrats" src="congrats.gif" />
</div>
<img id="opacity" src="congrats.gif" />
</body>
</html>

The faded class will not change the opacity attribute since there's a direct rule related to #opacity element that force the opacity attribute value to be 1 :
#opacity {
opacity: 1;
____^^^^^^^^^^
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
That will be always applied since according to the specificity hierarchy the id attribute has more weight than the class, to force the class rule you could use !important :
img.faded {
opacity: 0.5 !important;
}
$(function() {
jQuery('#opacity').click(function() {
jQuery(this).addClass('faded');
});
});
#opacity {
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
img.faded {
opacity: 0.5 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div>
<img id="opacity" src="congrats.gif" />
You could write a more specific rule using the id #opacity like :
img#opacity.faded {
opacity: 0.5;
}
$(function() {
jQuery('#opacity').click(function() {
jQuery(this).addClass('faded');
});
});
#opacity {
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
img#opacity.faded {
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div>
<img id="opacity" src="congrats.gif" />
I prefer the use of css() method to set the opacity instead, like :
jQuery(this).css({opacity: 0});
$(function() {
jQuery('#opacity').click(function() {
jQuery(this).css({
opacity: 0
});
});
});
#opacity {
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
img.faded {
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div>
<img id="opacity" src="congrats.gif" />

Related

Is there a way to add a delay on a hover efect?

What I would like to accomplish is that when the image changes after the hover it stays like that for a few seconds, and then it returns to the original image.
What I would like to know is if there's a way to add that kind of delay. I have attached my code below.
<html>
<body>
<img src='http://www.freedigitalphotos.net/images/img/homepage/87357.jpg'
width='142' height='162'
onmouseover="this.src='http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg';"
onmouseout="this.src=http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg';" />
</body>
</html>
Use CSS transitions with the transition-delay property.
.classname {
width: 100px;
height: 100px;
background-color: red;
transition-property: background-color;
transition-delay: 1s;
transition-duration: 0.1s;
}
.classname:hover {
transition-delay: 0s;
background-color: blue;
}
.image {
width: 142px;
height: 162px;
background-image: url('http://www.freedigitalphotos.net/images/img/homepage/87357.jpg');
background-size: 100% 100%;
transition-property: background-image;
transition-delay: 1s;
transition-duration: 0.1s;
}
.image:hover {
transition-delay: 0s;
background-image: url('http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg')
}
<div class="classname"></div>
<div class="image"></div>
Change your onmouseout event to call a JS function with setTimeout
setTimeout(function(){
this.src= "...";
}, 5000);
Where 5000 is the time in milliseconds you want to delay.
You could just use CSS transitions.
.button {
background-color: #222;
color: #fff;
padding: 14px 36px;
text-decoration: none;
transition: 0.6s background-color ease
}
.button:hover {
background-color: #555;
}
<a href='#' class='button'>Hover me</a>
See this example to change <img> src with onmouseover event and wait 3's then get back to original image onmouseout
//copy original img to variable
var original = $("img")[0].src;
//mouse over event
$("img").mouseover(function() {
$(this).fadeOut("fast").fadeIn("fast");
//change image
$(this)[0].src = "http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg";
});
//mouse out event
$("img").mouseout(function() {
var img = $(this);
//on mouse over wait 3 second and getback to original img
setTimeout(function() {
img.fadeOut("fast").fadeIn("fast");
img[0].src = original;
}, 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src='http://www.freedigitalphotos.net/images/img/homepage/87357.jpg' width='142' height='162' />
There is a several ways to do this.
You can try the snippet below:
<div>
<img src='http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg' width='142' height='162'/>
<img src='http://www.freedigitalphotos.net/images/img/homepage/87357.jpg' width='142' height='162'/>
</div>
div{
width:142px;
height:162px;
overflow: hidden; /*required*/
}
div img{
position: absolute;
transition: opacity .5s ease;
transition-delay: .5s; /*time of transition that you want*/
}
div img:hover{
opacity: 0;
}
Another way is just use a background of this images and manage each one.
Full example: jsbin

Sliding div's and stacking them (JavaScript)

I'm in the middle of making my website and I got a little road bump. This is how my code looks right now, and what I want to do is have the "About" box right below the "Home" box and have the above box slide down with the description that comes when you click the "Home" box. How may I do that?
This is the code to my JS file.
$(document).ready(function (event) {
var clicked=false;
$(".one").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"top": -40}); //Slides upwards 40pixels
}
else
{
clicked=true;
$(".two").css({"top": 0}); //Slides righ under "one"
}
});
var clicked2=false;
$(".three").on('click', function(){
if(clicked2)
{
clicked2=false;
$(".four").css({"top": -100}); //Slides upwards 40pixels
}
else
{
clicked2=true;
$(".four").css({"top": 0}); //Slides righ under "one"
}
});
});
On a complete side note, how could I get the boxes to start from the top of the page and how could I make he box be a huge box rater than a tiny strip of color?
you can try this one:
.container {
overflow:hidden;
}
.one {
position: relative;
top: 0;
background-color: #FFC300;
z-index: 1;
cursor:pointer;
}
.two {
position: relative;
top: -40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
.three{
position: relative;
top: 0;
background-color: #E9A1B9;
z-index: 1;
cursor:pointer;
}
.four {
position: relative;
top: -18px;
background-color: #02C9C9;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
DEMO HERE
I would use a negative margins and toggle a simple .open class on the .one and .three divs :
$(".one, .three").click(function(){
$(this).toggleClass('open');
});
CSS :
.one, .three {
margin-bottom: -40px;
-webkit-transition: margin-bottom 1s;
-moz-transition: margin-bottom 1s;
-o-transition: margin-bottom 1s;
transition: margin-bottom 1s;
}
.open {margin-bottom: 0}
jsFiddle demo
You can simplify this a bit by using the jQuery toggle() function to do the work for you. (edit: you could also use slideToggle() for a different effect)
$(selector).toggle(speed,callback);
The optional speed parameter can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after toggle() completes.
html
<div class="container">
<div class="one">Main</div>
<div class="two" style="display: none">Welcome to my page!</div>
<div class="three">About</div>
<div class="four" style="display: none">All about me</div>
</div>
css
.one {
background-color: #FFC300;
cursor:pointer;
}
.two {
background-color: yellow;
}
.three{
background-color: #E9A1B9;
cursor:pointer;
}
.four {
background-color: #02C9C9;
}
js
$(document).ready(function (event) {
$(".one").on('click', function(){
$(".two").toggle("slow");
});
$(".three").on('click', function(){
$(".four").toggle("slow");
});
});
DEMO:
https://jsfiddle.net/qbuatjrm/4/

Javascript Slideshow Glitches When Clicking Empty Space Around Image

So I got this slideshow code working, where when you click an image, it fades into another image. However, if, for example, there was a vertical orientated image with empty space on its right, if you click that space the whole slideshow kind of glitches out.
Here's my website where you can test it out:
http://danielshultz.github.io
The code:
$(document).ready(function() {
$.fn.nextOrFirst = function (selector) {
var next = this.next(selector);
return (next.length) ? next : this.prevAll(selector).last();
};
$("#cf2 img").click(function() {
$(this)
.removeClass('visible')
.nextOrFirst()
.addClass('visible');
});
});
CSS:
#cf2 {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf2 img {
position:absolute;
left:0;
max-height: 600px;
max-width: 600px;
opacity: 0;
z-index: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf2 img.visible {
opacity: 1;
z-index: 1;
}
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cf2" class="shadow">
<img class="visible" src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" alt="1"/>
<img src="http://economictimes.indiatimes.com/thumb/msid-45891755,width-640,resizemode-4/nasas-images-of-most-remarkable-events-you-cant-miss.jpg" alt="2"/>
<img src="http://i.dailymail.co.uk/i/pix/2013/11/03/article-2486855-192ACC5200000578-958_964x682.jpg" alt="3"/>
<img src="http://mstatic.mit.edu/nom150/items/199-HybridImage.jpg" alt="4"/>
</div>
If i understood, the problem here is when you click outside the image but inside the square of the previous image, then the slide does not change.
This approach, makes no changes in yout javascript but changes the html and some selectors.
In the example below, I wrapped each <img> into a '<div>' and changed the selectors to match with those divisions. Minor stylings too.
So, if you click outside the image but over the div, the slide changes as expected.
$(document).ready(function() {
$.fn.nextOrFirst = function (selector) {
var next = this.next(selector);
return (next.length) ? next : this.prevAll(selector).last();
};
$("#cf2 div.holder").click(function() {
$(this)
.removeClass('visible')
.nextOrFirst()
.addClass('visible');
});
});
body {
font-family: verdana;
font-size: 8pt;
color: #000;
}
#cf2 {
position: relative;
height: 600px;
width: 600px;
margin: 0 auto;
}
#cf2 div.holder {
position: absolute;
left: 0;
height: 600px;
width: 600px;
opacity: 0;
z-index: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf2 div.holder img {
max-height: 600px;
max-width: 600px;
}
#cf2 div.holder.visible {
opacity: 1;
z-index: 1;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<td valign="center">
<div id="cf2" class="shadow">
<div class="holder visible">
<img src="//danielshultz.github.io/Images/Cute-Door-1.jpg" alt="1"/></div>
<div class="holder"><img src="//danielshultz.github.io/Images/Cute-Door-2.jpg" alt="2"/></div>
<div class="holder"><img src="//danielshultz.github.io/Images/Cute-Door-3.jpg" alt="3"/></div>
</div>
</td>
</table>

Javascript Fade Into New Image When Clicked

Right now I have a code to switch between two images when clicking text, but I'd like to create a function where I can click on the image itself and it fades into the next one, and be able to do this with more than two images. Also the images I want to use vary in width and height, but all have a max height and width of 600px. Here's my current code:
HTML:
<div id="cf2" class="shadow">
<img class="bottom" src="/images/Cirques.jpg" />
<img class="top" src="/images/Clown%20Fish.jpg" />
</div>
<p id="cf_onclick">Click me to toggle</p>
CSS:
#cf2 {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf2 img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf2 img.transparent {
opacity:0;
}
#cf_onclick {
cursor:pointer;
}
JavaScript:
$(document).ready(function() {
$("#cf_onclick").click(function() {
$("#cf2 img.top").toggleClass("transparent");
});
});
Try adding #cf2 img to selector initiating click event
$("#cf_onclick, #cf2 img")
$(document).ready(function() {
var n = -1
, imgs = $("#cf2 img")
, fx = function(i, el) {
return (el || imgs.eq(i)).fadeToggle(1000);
};
$("#cf_onclick, #cf2 img").click(function() {
if (n === (-imgs.length)) {
fx(n);
n = -1;
fx(null, imgs);
} else {
fx(n);
--n
};
});
});
#cf2 {
position: relative;
height: 281px;
width: 450px;
margin: 0 auto;
}
#cf2 img {
position: absolute;
left: 0;
}
#cf_onclick {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="cf2" class="shadow">
<img class="bottom" src="http://lorempixel.com/400/400/cats" />
<img class="top" src="http://lorempixel.com/400/400/technics" />
<img class="top" src="http://lorempixel.com/400/400/nature" />
<img class="top" src="http://lorempixel.com/400/400/animals" />
</div>
<p id="cf_onclick">Click me to toggle</p>
This will work for multiple images:
$(document).ready(function() {
$.fn.nextOrFirst = function (selector) {
var next = this.next(selector);
return (next.length) ? next : this.prevAll(selector).last();
};
$("#cf2 img").click(function() {
$(this)
.removeClass('visible')
.nextOrFirst()
.addClass('visible');
});
});
#cf2 {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf2 img {
position:absolute;
left:0;
max-height: 600px;
max-width: 600px;
opacity: 0;
z-index: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf2 img.visible {
opacity: 1;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cf2" class="shadow">
<img class="visible" src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" alt="1"/>
<img src="http://economictimes.indiatimes.com/thumb/msid-45891755,width-640,resizemode-4/nasas-images-of-most-remarkable-events-you-cant-miss.jpg" alt="2"/>
<img src="http://i.dailymail.co.uk/i/pix/2013/11/03/article-2486855-192ACC5200000578-958_964x682.jpg" alt="3"/>
<img src="http://mstatic.mit.edu/nom150/items/199-HybridImage.jpg" alt="4"/>
</div>
Instead of having an .invisible class, I used a .visible class, which also has a z-index of 1, greater than that of the default images. So the image that has that class, will be visible, while the others will have opacity: 0 by default.
I also extended the jQuery object to have a nextOrFirst method (which I stole from here), so that when the visible image is the last one of the images in the stack, the next one will be the first. So now, the order of the images, as they appear, goes from top to bottom.
I decided to do it like this in order to keep your CSS transitions, but you can also use jQuery's fadeIn and fadeOut methods.
Something like this should do it:
$(document).ready(function() {
$("#cf_onclick").click(function() {
var current = $("#cf2 img.top").removeClass('top');
var next = current.next();
next = next.length ? next : current.siblings().first();
next.addClass('top');
});
});
#cf2 {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf2 img {
position:absolute;
left:0;
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf2 img.top {
opacity: 1;
}
#cf_onclick {
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="cf_onclick">Click me to toggle</p>
<div id="cf2" class="shadow">
<img src="http://icons.iconarchive.com/icons/google/chrome/256/Google-Chrome-icon.png" />
<img class="top" src="http://icons.iconarchive.com/icons/kyo-tux/aeon/256/Apps-Safari-icon.png" />
</div>

Obtaining page maximum height in Jquery

I don't know if I am specific enough,
But I created a lightbox-style fadein background but it appears to me that the background won't reach the very bottom of the page. So when I scroll, the white background appears again.
Here is the demo:
http://jsbin.com/limiyisi/1/
HTML
<body>
<div id="overlay"></div>
<a style="position:absolute;" href="#" class="btn btn-default" data-toggle="active">
Button </a>
<div class="ex-height"></div>
CSS
#overlay {
position:absolute;
width: 100%;
height : 100%;
background: #000;
top: 0;
left: 0;
opacity:0;
transition: opacity .3s;
-moz-transition: opacity .3s;
-webkit-transition: opacity .3s;
}
.backdrop {
opacity: 0.4 !important;
}
.ex-height {
height: 1204px;
}
Jquery
$(function() {
function toggle() {
$('#overlay').toggleClass('backdrop');
}
$('[data-toggle="active"]').click(toggle);
});
Thanks for any helpful advice!
Set the height of the overlay to the document's height:
$('#overlay').toggleClass('backdrop').height($(document).height());
Change the #overlay to
#overlay {
position:absolute;
background: #000;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity:0;
transition: opacity .3s;
-moz-transition: opacity .3s;
-webkit-transition: opacity .3s;
}
If that doesn't quite work - try changing the bottom and right values to 100%
demo
$(function() {
function toggle() {
var pageHeight = $('html, body').innerHeight();
$('#overlay').toggleClass('backdrop').height( pageHeight );
}
$('[data-toggle="active"]').click(toggle);
});

Categories

Resources