overflow mouseover scrolling?

[turpentyne]

I'm brand new to css and javascript. I've created a div area with the overflow set to auto. Is it possible to create a mouseover scrolling effect for the arrows? If so, how? Or is there another way to achieve the same effect?

[RussellReal]

ofcourse there is,however, it is a little tricky.. you see, mouse position is not very cross-browser (interms of the properties you're using from the MouseEvent object), therefore its probably a good idea to use a cross-browser solution (jQuery

 

however, if you do NOT want to use a cross-browser solution you will need to calculate and manipulate the data you receive from the event

 

in IE6-8 'x' and 'y' will represent the cursor position INSIDE the firing element, where as.. Chrome and Firefox will use layerX and layerY to do/represent this..

 

you will also need to know the width of the content within the overflowing div.. its usually a good idea to structure this like this:

<div id="container" style="overflow: hidden; width: 500px; height: 100px;">
  <div id="content">
    <!-- enter all your content here!  -->
  </div>
</div>

 

 

this way you can use the element #content to get the width of the entire content.. ALSO you can just slide this div left and right using css OR you can use the .scrollLeft() method of #container

 

Whichever is clever

 

last thing you'll need to do is calculate your mouse's position within an element against your content div's width..

 

for example.. you will want to use this formula..

 

(MouseX / ContainerWidth) * ContentWidth

 

and that will give you the amount to move the #content element from the right..

 

using this javascript line:

document.getElementById('#content').style.right = (MouseX / ContainerWidth) * ContentWidth;