Page 1 of 1

Vertical scrolling div problems

Posted: Mon Aug 10, 2009 2:38 pm
by roberthindle
Hello. I would like to create a vertical scrolling div that doesn't use a scroll bar or buttons but that scrolls when you move your mouse over the contents of the div depending on where you place the mouse in the div. I have found the perfect solution here - http://valums.com/wp-content/uploads/20 ... /final.htm

However this only works if the contents of the scrolling div are images. I need my scrolling div to contain a series of divs that sit one after the other. So instead of an image I have a containment div (which contains some divs inside of it)

Code: Select all

 
<div class="sc_menu_wrapper">
  <div class="sc_menu">
 <!-- START recent movies -->
<div id="recentmovies">
<div id="recentmoviesthumb">
<img src="images/thumbs/push_on.jpg" alt="alt text" />
</div>
<div id="recentmoviesright">
<div id="recentmoviestitle">
Will you.
</div>
<div id="recentmoviestype">
Music video
</div>
<br />
<div id="recentmoviesdescription">
A music video about lovers.  And all the things they do to each other.
</div>
<div id="recentmoviesfooter">
<img src="images/site_images/more.gif" width="50" /></div>
</div>
</div>
<div id="padding"><div id="recentmoviesaward"><img src="images/additionalbanner/winner.jpg" width="50px" /></div></div>
 <!-- END recent movies -->
  <!-- START recent movies -->
<div id="recentmovies">
<div id="recentmoviesthumb">
<img src="images/thumbs/push_on.jpg" alt="alt text" />
</div>
<div id="recentmoviesright">
<div id="recentmoviestitle">
Will you.
</div>
<div id="recentmoviestype">
Music video
</div>
<br />
<div id="recentmoviesdescription">
A music video about lovers.  And all the things they do to each other.
</div>
<div id="recentmoviesfooter">
<img src="images/site_images/more.gif" width="50" /></div>
</div>
</div>
<div id="padding"><div id="recentmoviesaward"><img src="images/additionalbanner/winner.jpg" width="50px" /></div></div>
 <!-- END recent movies -->
  <!-- START recent movies -->
<div id="recentmovies">
<div id="recentmoviesthumb">
<img src="images/thumbs/push_on.jpg" alt="alt text" />
</div>
<div id="recentmoviesright">
<div id="recentmoviestitle">
Will you.
</div>
<div id="recentmoviestype">
Music video
</div>
<br />
<div id="recentmoviesdescription">
A music video about lovers.  And all the things they do to each other.
</div>
<div id="recentmoviesfooter">
<img src="images/site_images/more.gif" width="50" /></div>
</div>
</div>
<div id="padding"><div id="recentmoviesaward"><img src="images/additionalbanner/winner.jpg" width="50px" /></div></div>
 <!-- END recent movies -->
  <!-- START recent movies -->
<div id="recentmovies">
<div id="recentmoviesthumb">
<img src="images/thumbs/push_on.jpg" alt="alt text" />
</div>
<div id="recentmoviesright">
<div id="recentmoviestitle">
Will you.
</div>
<div id="recentmoviestype">
Music video
</div>
<br />
<div id="recentmoviesdescription">
A music video about lovers.  And all the things they do to each other.
</div>
<div id="recentmoviesfooter">
<img src="images/site_images/more.gif" width="50" /></div>
</div>
</div>
<div id="padding"><div id="recentmoviesaward"><img src="images/additionalbanner/winner.jpg" width="50px" /></div></div>
 <!-- END recent movies -->
  <!-- START recent movies -->
<div id="recentmovies">
<div id="recentmoviesthumb">
<img src="images/thumbs/push_on.jpg" alt="alt text" />
</div>
<div id="recentmoviesright">
<div id="recentmoviestitle">
Will you.
</div>
<div id="recentmoviestype">
Music video
</div>
<br />
<div id="recentmoviesdescription">
A music video about lovers.  And all the things they do to each other.
</div>
<div id="recentmoviesfooter">
<img src="images/site_images/more.gif" width="50" /></div>
</div>
</div>
<div id="padding"><div id="recentmoviesaward"><img src="images/additionalbanner/winner.jpg" width="50px" /></div></div>
 <!-- END recent movies -->
  <!-- START recent movies -->
<div id="recentmovies">
<div id="recentmoviesthumb">
<img src="images/thumbs/push_on.jpg" alt="alt text" />
</div>
<div id="recentmoviesright">
<div id="recentmoviestitle">
Will you.
</div>
<div id="recentmoviestype">
Music video
</div>
<br />
<div id="recentmoviesdescription">
A music video about lovers.  And all the things they do to each other.
</div>
<div id="recentmoviesfooter">
<img src="images/site_images/more.gif" width="50" /></div>
</div>
</div>
<div id="padding"><div id="recentmoviesaward"><img src="images/additionalbanner/winner.jpg" width="50px" /></div></div>
 <!-- END recent movies -->
  <!-- START recent movies -->
<div id="recentmovies">
<div id="recentmoviesthumb">
<img src="images/thumbs/push_on.jpg" alt="alt text" />
</div>
<div id="recentmoviesright">
<div id="recentmoviestitle">
Will you.
</div>
<div id="recentmoviestype">
Music video
</div>
<br />
<div id="recentmoviesdescription">
A music video about lovers.  And all the things they do to each other.
</div>
<div id="recentmoviesfooter">
<img src="images/site_images/more.gif" width="50" /></div>
</div>
</div>
<div id="padding"><div id="recentmoviesaward"><img src="images/additionalbanner/winner.jpg" width="50px" /></div></div>
 <!-- END recent movies -->
 
 
 
  </div>
</div>
 
 

The javascript to run this is...

Code: Select all

 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
 
 
<script type="text/javascript">/*<![CDATA[*/
function makeScrollable(wrapper, scrollable){
}
$(function(){
  makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});
/*]]>*/
 
 
function makeScrollable(wrapper, scrollable){
  // Get jQuery elements
  var wrapper = $(wrapper), scrollable = $(scrollable);
 
  // Hide images until they are not loaded
  scrollable.hide();
  var loading = $('<div class="loading">Loading...</div>').appendTo(wrapper);
 
  // Set function that will check if all images are loaded
  var interval = setInterval(function(){
    var images = scrollable.find('img');
    var completed = 0;
 
    // Counts number of images that are succesfully loaded
    images.each(function(){
      if (this.complete) completed++;
    });
 
    if (completed == images.length){
      clearInterval(interval);
      // Timeout added to fix problem with Chrome
      setTimeout(function(){
 
        loading.hide();
        // Remove scrollbars
        wrapper.css({overflow: 'hidden'});                                              
 
        scrollable.slideDown('slow', function(){
          enable();
        });
      }, 1000);
    }
  }, 100);
 
  function enable(){
  }
}
 
function enable(){
  // height of area at the top at bottom, that don't respond to mousemove
  var inactiveMargin = 100;
  // Cache for performance
  var wrapperWidth = wrapper.width();
  var wrapperHeight = wrapper.height();
  // Using outer height to include padding too
  var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
  // Do not cache wrapperOffset, because it can change when user resizes window
  // We could use onresize event, but it's just not worth doing that
  // var wrapperOffset = wrapper.offset();
 
  //When user move mouse over menu
  wrapper.mousemove(function(e){
    var wrapperOffset = wrapper.offset();
    // Scroll menu
    var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight  - inactiveMargin;
 
    if (top < 0){
      top = 0;
    }
 
    wrapper.scrollTop(top);
  });
}
 
</script>
 
I've tried changing the line
images = scrollable.find('img');
to
divs = scrollable.find('id="recentmovies"');
(and swapped out 'images' for 'divs' but that didn't work.

How do I go about getting this to work or can some recommend a code that would work?

Thanks very much!
Rob