Grow your CSS skills. Land your dream job.

jQuery Animated Slider

  • # February 5, 2012 at 9:26 am

    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)

    # February 5, 2012 at 12:21 pm

    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);
    });
    });
    # February 6, 2012 at 11:33 am

    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.

    # February 6, 2012 at 12:58 pm

    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");
    });
    });
    # February 7, 2012 at 9:02 am

    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

    # February 7, 2012 at 3:47 pm

    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;
    # February 7, 2012 at 5:12 pm

    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!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".