jquery doing some weird number crunching

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

my jquery is doing some weird things.

JAVASCRIPT Code: [ Select ]
   var trueHeight = ($(".item").outerHeight() + parseInt($('.item').css('marginTop')) + parseInt($('.item').css('marginBottom')));
 
   $("#next").click(function(){
      $("#movethem").animate({
         top : - trueHeight
                     }, 500);
   
      });
   
   $("#previous").click(function(){
      $("#movethem").animate({
         top : trueHeight
                     }, 500);
   
      });  
 
  1.    var trueHeight = ($(".item").outerHeight() + parseInt($('.item').css('marginTop')) + parseInt($('.item').css('marginBottom')));
  2.  
  3.    $("#next").click(function(){
  4.       $("#movethem").animate({
  5.          top : - trueHeight
  6.                      }, 500);
  7.    
  8.       });
  9.    
  10.    $("#previous").click(function(){
  11.       $("#movethem").animate({
  12.          top : trueHeight
  13.                      }, 500);
  14.    
  15.       });  
  16.  


you can see this function in action here

When you click next, it should scroll to the next item, and when you click previous it should go to the previous item. Instead, when clicking previous it scrolls completely off the page.

here's my html if it helps (abridged)
HTML Code: [ Select ]
<div id="maincontentwrap">
<div id="movethem">
<div class="item">
<div class="content">
<img name="" src="" alt="" style="background-color: #333" align="left" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis erat et ligula imperdiet convallis... </p>
<p>...</p>
<p class="more"><a href="#">More...</a></p>
</div>
</div>
<div class="item">
<div class="content">
<img name="" src="" alt="" style="background-color: #333" align="left" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis erat et ligula imperdiet convallis...</p>
<p>...</p>
<p class="more"><a href="#">More...</a></p>
</div>
</div>
 
<div class="item">
<div class="content">
<img name="" src="" alt="" style="background-color: #333" align="left" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis erat et ligula imperdiet convallis... </p>
<p>...</p>
<p class="more"><a href="#">More...</a></p>
</div>
</div>
 
</div>
</div>
<div class="buttons">
<a href="#" id="previous">&lt;&lt; Previous</a>
<a href="#" id="next">Next &gt;&gt;</a></div>
</div>
 
  1. <div id="maincontentwrap">
  2. <div id="movethem">
  3. <div class="item">
  4. <div class="content">
  5. <img name="" src="" alt="" style="background-color: #333" align="left" />
  6. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis erat et ligula imperdiet convallis... </p>
  7. <p>...</p>
  8. <p class="more"><a href="#">More...</a></p>
  9. </div>
  10. </div>
  11. <div class="item">
  12. <div class="content">
  13. <img name="" src="" alt="" style="background-color: #333" align="left" />
  14. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis erat et ligula imperdiet convallis...</p>
  15. <p>...</p>
  16. <p class="more"><a href="#">More...</a></p>
  17. </div>
  18. </div>
  19.  
  20. <div class="item">
  21. <div class="content">
  22. <img name="" src="" alt="" style="background-color: #333" align="left" />
  23. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis erat et ligula imperdiet convallis... </p>
  24. <p>...</p>
  25. <p class="more"><a href="#">More...</a></p>
  26. </div>
  27. </div>
  28.  
  29. </div>
  30. </div>
  31. <div class="buttons">
  32. <a href="#" id="previous">&lt;&lt; Previous</a>
  33. <a href="#" id="next">Next &gt;&gt;</a></div>
  34. </div>
  35.  
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

nevermind, decided to use a plugin here

Seems to work pretty good.

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 136 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.