Need code for rollover/hover scrolling
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Recently completed our design startup website and need a bit of flair adding. We were hoping that the user could navigate horizontally by rolling over the arrows on the site (beneath the images) rather than using the bar at the bottom of the browser. We were also hoping that depending on were the cursor hovered, the speed of the scroll and the arrows either side would point in different directions.

The site is:
http://installarchive.com/

I can email the index page as a sample on request.

i guess its a Javascript thing but our knowledge doesn't go much further than basic Dreamweaver so we'd be really grateful for any help. We may also need instructions on how to implement the code.

Many thanks,
Lee

awarded to Wikimedia

Crowdsource coding tasks.

4 Solutions


I just saw your bounty come in but I have to run.. this link should help you out without changing too much of your HTML. Create anchors (<a id="#anchor1">) inside the horizontal view and then make the arrows buttons as seen at http://stackoverflow.com/questions/580605/horizontal-scrolling-javascript

Will try to come back and modify the HTML for you or someone else might be able to take it to the next step (implementation) for ya.

Mark

Hi Mark, That'd be great if you could get back when you have more time. I can email the index.htm if you'd like. Many thanks, Lee
Lee Regan over 6 years ago

If I were you, I would use a jQuery Slider Plugin,

for example -> Tiny Carousel

Here is a Demo for your page


Demo for your page

This is raw jquery without any plugin so it is easy to integrate to your current website.

I can change the animation and the arrow as you wish.

HTML snippet

<div id="gallery">
    <span id="left-arrow">Go left</span>
    <img src="images/1.gif" width="643" height="500" alt="" />
    <img src="images/2.gif" width="375" height="500" alt="" />
    <img src="images/3.gif" width="643" height="500" alt="" />
    <img src="images/4.gif" width="666" height="500" alt="" />
    <span id="right-arrow">Go right</span>
</div>

I suppose this isn't really a solution, but it's longer than a comment and seems worth pointing out... Before you add this method of navigation to your site, you should consider these aspects of it's design:

  • Is this what a user expects?

If the user can't recognize (instinctively) that the arrows at the bottom of the page is a way to navigate, and not just a fancy border, they will not use it and any time you spent developing it will be a waste. I mention this because hovering over arrows is not a very common way to navigate, and doesn't seem very intuitive.

You would probably be better off with a vertical column of images, which users know exactly how to navigate by scrolling. Or you could even look into a slider which most users will recognize immediately.

  • Is this going to work on all devices?

Touch based devices usually do not have any support for actions activated on hover. So this navigation would become useless for mobile users. Also, for users that prefer keyboard navigation, this would be useless.

  • Does it add value?

Unless this is significantly better than a horizontal scroll-bar, it is probably a waste of time to build and maintain.

View Timeline