Alaw16 Alaw16 - 7 months ago 26
Javascript Question

Simple ternary operation is not working

I am attempting to make a div change position on click and then revert to it's original position when clicked again. I cannot for the life of me figure out what the problem is.

$("#bottom").click(function() {

var $about = $('#bottom'),
top = $about.css('top') === '50%' ? '90%' : '50%';

$about.stop().animate({top: top}, 500);
});


my css is:

#bottom {
top: 90%;
left: 0; right: 0;
height: 100%;
}


When I click #bottom, the div positions itself at 50%, but when I hit it again, nothing happens.

Answer

.css('top') doesn't give you the literal CSS top declaration; it gives you the calculated pixel amount of the top. If your container for #bottom is 100px tall, then $('#bottom').css('top') will give you 90px, not 90%.

Here's a fiddle with a solution for you.