Grow your CSS skills. Land your dream job.

Slot Machine Tabs: scrolling effect, why?

  • # March 13, 2012 at 1:56 pm

    Hello,

    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

    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
    $allTabs.removeClass("current");
    $el.addClass("current");

    // 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");
    $colOne.animate({
    "top": -$colOne.height()
    }, speedOne);

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

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

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

    // 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() {
    ifReadyThenReset();
    });

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

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

    };

    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

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

    # March 14, 2012 at 11:43 am

    LOL

    # March 11, 2013 at 2:30 pm

    very very very nice thank you
    looooooooooooooooooooooooooooooooooooooooool
    looooooooooooooooooooooooooooooooooooooooool
    thank you very mach

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

You must be logged in to reply to this topic.

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