CODEWITHSUNDEEP
javascriptjquery
Brooke.
Brooke.

Reputation: 3731

Jquery slide content off bottom of page

I'm trying to figure out how to slide content off the bottom of the page. I have figured out how to get it to scroll down to the bottom of the page but not off. For instance when the image is clicked it should slide off the bottom of the page. The problem is it just pushes the content down. I think I need an overflow:hidden type thing

Here is what I have so far.

HTML

<div id="myGallery">
    <img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png"/>
</div>

JavaScript

$('#myGallery').click(function() {
    $(this).animate({
        top: $(document).height() + 300 }, 1500);
     return false;
});

Fiddle: http://jsfiddle.net/BandonRandon/wykR7/4/
Fiddle fullscreen: http://jsfiddle.net/BandonRandon/wykR7/4/embedded/result/

Edit: Overflow:hiddento the body only works if the bodies content is not longer than the browser window. See updated fiddle from problem:
http://jsfiddle.net/BandonRandon/wykR7/11/
http://jsfiddle.net/BandonRandon/wykR7/11/embedded/result/

See http://bandonrandon.com/blog for exact usage, (click on the girl holding the lights)

Upvotes: 0

Views: 998

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206008

jsBin demo

CSS:

#girl{
    position:absolute;
    top:0px;
}
#content{
    position:absolute;
    top:20px;
    left:300px;
    width:400px; 
}
  #girl_wrapper{
    position:absolute;
    top:0px;
    overflow:hidden;
}

HTML:

<div id="girl">
    <img src="http://bandonrandon.com/wp-content/themes/BR2011/images/xmas/brooke_xmas.png" class="active" />
</div>

<div id="content">
  Cras volutpat mattis ullamcorper. Mauris sit amet sapien non quam  convallis fermentum. Nunc mauris est, dapibus in imperdiet commodo,  egestas et est. Sed tortor enim, adipiscing in consectetur quis, luc...

more and more IPSUM ...
</div>

jQuery:

var girlW = $('#girl').width();

$('#girl').click(function() {
    var winH = $(window).height();
    $(this)
      .wrap('<div id="girl_wrapper" style="height:'+winH+'px; width: '+girlW+'px"/>')
      .animate({top: winH}, 1500 )
    ;
    return false; 
});

I had the idea to (at click) wrap your DIV with image into a absolute positioned element that will dynamically set it's width and height depending on the window height and girl image width, but with overflow hidden.
Doing so, the girl animation will happen INSIDE that element.

After the animation is done I would suggest to .remove() that wrapper (If you don't need any more the girl element) anyway, to prevent that div disallow clicks to possible future elements underneath.

Ask if you have questions!

Happy coding/designing!

Upvotes: 1

GregL
GregL

Reputation: 38103

Yep - adding an "overflow: hidden" to the body tag solved the problem for me - at least in Chrome.

CSS added:

body {
    height: 100%;
    overflow: hidden;  
}

jsFiddle link: http://jsfiddle.net/greglockwood/G63UJ/

Upvotes: 3

Related Questions