The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Slot Machine Tabs: scrolling effect, why?

  • # March 13, 2012 at 1:56 pm


    I’ve been implementing the very nice code provided here

    Everything’s working well except a curious phenomenom:

    Clicking on one of the 3 tabs makes the page scrolling (going on top of the image/text).

    URL concerned is there…

    Can’t figure out why and as I’m not an expert in CSS / Html, I may have done a wrong coding.

    Thanks for your help…

    # March 13, 2012 at 9:59 pm

    This reply has been reported for inappropriate content.

    Try to add return false at the end .delegate() function:

     $("#slot-machine-tabs").delegate(".tabs a", "click", function() {

    $el = $(this);

    if ( (!$el.hasClass("current")) && ($(":animated").length == 0 ) ) {

    // current tab correctly set

    // optional... random speeds each time.
    speedOne = Math.floor(Math.random()*1000) + 500;
    speedTwo = Math.floor(Math.random()*1000) + 500;
    speedThree = Math.floor(Math.random()*1000) + 500;

    // each column is animated upwards to hide
    // kind of annoyingly redudundant code
    $colOne = $(".box-wrapper .current .col-one");
    "top": -$colOne.height()
    }, speedOne);

    $colTwo = $(".box-wrapper .current .col-two");
    "top": -$colTwo.height()
    }, speedTwo);

    $colThree = $(".box-wrapper .current .col-three");
    "top": -$colThree.height()
    }, speedThree);

    // new content box is marked as current
    hrefSelector = $el.attr("href");

    // columns from new content area are moved up from the bottom
    // also annoying redundant and triple callback seems weird
    $(".box-wrapper .current .col-one").animate({
    "top": 0
    }, speedOne, function() {

    $(".box-wrapper .current .col-two").animate({
    "top": 0
    }, speedTwo, function() {

    $(".box-wrapper .current .col-three").animate({
    "top": 0
    }, speedThree, function() {


    return false; /* <=== Hello... Hey, I'm here. I'M HERE! I'M HERE!!!! */

    # March 14, 2012 at 8:51 am

    Hi Hompimpa,

    This is working now, thanks a lot for your help.

    In the meantime, I learned about this propagation effect but I didn’t know exactly where to include in this script the

    return false;

    And wish you a nice day!

    # March 14, 2012 at 10:39 am

    This reply has been reported for inappropriate content.

    Run very smooth! And the most important:
    I can draw this face with text: ∩_∩

    # March 14, 2012 at 11:43 am


    # March 11, 2013 at 2:30 pm

    very very very nice thank you
    thank you very mach

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed