Forums

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);
  });
});

knittingfrenzy18

Thanks!

This is a good solution, however, I'm not moving it off the screen and then bringing it in, I'm using .slideToggle on a click div. Here's a demo.

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");
    });
});

knittingfrenzy18

Ah!

That is better!
Is it the position:fixed that helped, or the .stop()? What does .stop do? Is there a way to bring the pulldown on the bottom of the screen?

Thanks a lot, Mottie, you're awesome!

Red

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;

knittingfrenzy18

Thanks so much, Mottie! You're very helpful!

I will just have the screen coming down as far as the content expands it. i.e. if I don't have enough content it just won't go down the whole page. Thanks for helping with that though.

Thanks again! I'll be looking for you the next time I need help!

treehouse : what would you like to learn today?

Forums

[Solved] jQuery Animated Slider