Forums

Sunrise

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

Hompimpa

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!!!! */

	});

Sunrise

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!

Hompimpa

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

Sunrise

LOL

webtinax

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

treehouse : what would you like to learn today?

Forums

[Solved] Slot Machine Tabs: scrolling effect, why?