jQuery Animated Slider

[knittingfrenzy18]

Hi guys,

I’ve got this awesome jQuery animation going on my local server. It’s at the top of the page, and symbolizes a projector screen coming down over a billboard (which is what it’s trying to be designed like). At default, the screen is display:none; When I click on a div, the screen slides down and shows itself with .slideToggle, I think it is.

Now the animation works great, only when I open the slider, anything under it (the rest of the page) slides down to make room for it. I want the slider to slide over the rest of the content. Fixed positioning didn’t work–I don’t know where to turn next but you awesome guys!

Tell me if it needs clarification on what I’m trying to do.

Red(just call me that although it’s not my name)

[Mottie]

It sounds like you need to position the projector screen element absolutely. Try something like this (demo; I made the screen red to see it easier):

CSS

#screen {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1000;

background: #fff url(screen.jpg);

}

Code

$(function(){

var win = $(window),

wh = win.height(),

s = $('#screen');



// move the projector screen up and out of view

s.css({ top: -wh + 'px' });



// once the window has loaded, slide down the screen

win.load(function(){

s.animate({ top: 0 }, 2000);

});

});

[Mottie]

Try something like this then (demo):

CSS

#screen {

background: #FFFFFF;

border: 2px solid #000000;

margin: 0 5px;

padding: 20px;

overflow: auto;

display: none;

position: fixed;

left: 0;

right: 0;

}

Code

$(document).ready(function(){

$("#pulldown, #screen").click(function(){

$("#screen").stop().slideToggle("slow");

});

});

[Mottie]

Hiya!

What fixed it was the “position:fixed”. The stop() just prevents the animation from endlessly running if someone gets click happy and spams on the panel.

To get the pulldown to the bottom of the screen, you’ll probably need some jQuery to set the height of the p inside with this addition (demo):

$('#screen p').height( $(window).height() );

But if the user resizes the screen, it will also need to be adjusted, so just include this bit of code as well:

$(window).resize(function(){

$('#screen p').height( $(this).height() );

});

If it’s too tall, then just subtract out whatever height you want from the measured window height, e.g. subtract out 500 pixels:

$(window).height() - 500;

[Author]

Posts