How to move a page horizontally when scrolling the mouse?

Question

Hello guys can you help me with my problem? I have a list of maps in my page. In every page there is 40 different maps. So in order to view the last map I need to hold down the mouse and scroll horizontally to the right to view this. But how can I do this using scrolling down/up of the mouse?

I am a beginner in jquery/javascript that's why I don't have an idea how to do this.

Here's my sample html code.

<div id="horizontal">
<table border="1">
    <tr>
        <td>
            <img src="http://localhost/img1.jpg" height="300" widt="300" />
        </td>
        <td>
            <img src="http://localhost/img1.jpg" height="300" widt="300" />
        </td>
        <td>
            <img src="http://localhost/img1.jpg" height="300" widt="300" />
        </td>
        <td>
            <img src="http://localhost/img1.jpg" height="300" widt="300" />
        </td>
        <td>
            <img src="http://localhost/img1.jpg" height="300" widt="300" />
        </td>
        <td>
            <img src="http://localhost/img1.jpg" height="300" widt="300" />
        </td>
        <td>
            <img src="http://localhost/img1.jpg" height="300" widt="300" />
        </td>
        <td>
            <img src="http://localhost/img1.jpg" height="300" widt="300" />
        </td>
        <td>
            <img src="http://localhost/img1.jpg" height="300" widt="300" />
        </td>
        <td>
            <img src="http://localhost/img1.jpg" height="300" widt="300" />
        </td>
    </tr>
</table>
</div>
...
var $horizontal = $('#horizontal');

$(window).scroll(function () {
     //how to detect the scrolling of the mouse?
});

Ont more question. Where should I place the div tag horizontal? Is it in the tag? or tag? Ok that's all. Here's my sample fiddle. http://jsfiddle.net/rochellecanale/A3UHf/

I saw that, but the link for javascript file is no longer available. — Jerielle, Nov 22 '13 at 00:12

score 4 · Accepted Answer · answered Nov 22 '13 at 01:00

4

You need Brandon Aaron's jquery plugin to trigger horizontal scrolling with mousewheel

http://jsfiddle.net/A3UHf/5/

$("body").mousewheel(function(event, delta) {
    this.scrollLeft -= (delta * 30);
    event.preventDefault();
});

answered Nov 22 '13 at 01:00

thenewseattle

1,451
1
13
17

score 3 · Answer 2 · answered Nov 22 '13 at 00:15

3

You could use the mousewheel plugin. scrolling horizontally with the mousewheel should then work with this code:

$("body").mousewheel(function(event, delta) {

    this.scrollLeft -= (delta * 30);

    event.preventDefault();

});

answered Nov 22 '13 at 00:15

kave

461
1
6
17

1

if this was posted an hour ago and the other answer was posted 15 min ago, and they're the same answer.... why was the other one accepted?? – gloomy.penguin Nov 22 '13 at 01:15
yes, I am aksing myself the same thing. Mine being accepted would mean I would get the right to comment on other questions finally – kave Nov 22 '13 at 01:18
I helped you out a little... – gloomy.penguin Nov 22 '13 at 01:50

How to move a page horizontally when scrolling the mouse?

2 Answers2