horizontal web page

[mdrd88]

Hello Everyone!
I am attempting to make a webpage that scrolls horizontally. I.E. mouse wheel up, page goes left; mouse wheel down, page goes right. Kind of like the windows 8 metro interface.

I was wondering if there would be something like
$(“div”).scroll(function(){
slideLeft

Or something like that. Any thoughts?

[Philben]

Check out this [plugin](http://brandonaaron.net/code/mousewheel/demos “mouse wheel”) if it helps.

[mdrd88]

Okay let me get this straight

jQuery(function($) {
$(‘div.mousewheel_example’)
.bind(‘mousewheel’, function(event, delta) {
var dir = delta > 0 ? ‘Up’ : ‘Down’,
vel = Math.abs(delta);
$(this).text(dir + ‘ at a velocity of ‘ + vel);
return false;
});
});

Where it says “$(this)” would I write something like “animate left”?

[Philben]

I’ve not implemented it in a project before, but I thought it could get you started. You may need to read his [documentation](http://brandonaaron.net/code/mousewheel/docs “documentation”) if you find it helpful to your needs.

[mdrd88]

Okay, I found something that works! However, I when I tried to implement it locally it didn’t work. Can anyone help me? :(

http://jsfiddle.net/694TK/6/

[JohnMotylJr]

@mdrd88, it’s ok! we all make these mistakes from time to time..

http://codepen.io/johnmotyljr/pen/dnwko

I would also see about finding the source because dropbox is not a reliable cdn for hosting code.

EDIT: You can download it from the source.

[mdrd88]

YES!!! It took me a while to find the export.zip button. That’s awesome thank you so much!

I really need to get more comfortable with javascript, I’m not to shabby at css but javascript… well, that’s a different story.

[Author]

Posts