Vertical scrolling div problems
Posted: Mon Aug 10, 2009 2:38 pm
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)
The javascript to run this is...
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
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>
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