Grow your CSS skills. Land your dream job.

horizontal web page

  • # March 24, 2013 at 8:41 pm

    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?

    # March 24, 2013 at 8:55 pm

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

    # March 24, 2013 at 9:00 pm

    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”?

    # March 24, 2013 at 9:07 pm

    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.

    # March 25, 2013 at 7:42 pm

    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/

    # March 25, 2013 at 7:51 pm

    @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.

    # March 26, 2013 at 11:26 am

    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.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".