...

View Full Version : Help changing effect on Jquery bassed ui tabs



dPoriginals
12-19-2008, 01:07 AM
Hey,
I would like help modding this Toturial (http://nettuts.com/tutorials/javascript-ajax/create-a-tabbed-interface-using-jquery/) so that the animated div slides horizontally and not vertically. i would ask the original author of that tutorial but he hasn't replied to any of the comments in his post to date.

The scripts is based on Jquery and i have no problems implementing it, the only thing i need is to make it horizontally cuz my design would benefit greatly from this.

Thanks,
dP

rangana
12-19-2008, 03:20 AM
Go to sprinkle.js and change highlighted to width:


$('#tabvanilla > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });


That might met your desire.

dPoriginals
12-19-2008, 07:47 AM
Thanks man that worked. didnt think it would be so easy.

do you know how i could add the same effect to this code.

it currently doesnt hav any slide effect so im not sure how i modify it.

the fadeIn effect can be removed if necessary.



<script type="text/javascript">
$("#adv2").idTabs(function(id,list,set){
$("a",set).removeClass("selected")
.filter("[@href='"+id+"']",set).addClass("selected");
for(i in list)
$(list[i]).hide();
$(id).fadeIn();
return false;
});
</script>


Thanks,
dP

rangana
12-19-2008, 08:06 AM
The fadeIn() method fades the background.

You might need to change the hide() method to fadeOut('slow').

I hope you're aware about the possible parameter: normal, fast, and a custom number to denote a timeout.

Hope that helps.

dPoriginals
12-19-2008, 08:58 AM
hmm i did change the hide() to fadeout, but the efffect i require is slide and not fade.

i know the that normal fast ect.. are speed controls but im not sure how i change it to show a slide instead of fade.

rangana
12-19-2008, 09:00 AM
Try to replace this:


$(list[i]).hide();


...with:


$(list[i]).animate({width:'0px'});


- This will slide horizontally, if you want it to slide vertically, change width to height

dPoriginals
12-19-2008, 09:04 AM
no the whole script doesnt work once i do that.

this is wht i get after replacing:

<script type="text/javascript">
$("#adv2").idTabs(function(id,list,set){
$("a",set).removeClass("selected")
.filter("[@href='"+id+"']",set).addClass("selected");
for(i in list)
$(list[i]).animate({width:'0px'});
$(id).fadeIn();
return false;
});
</script>

rangana
12-19-2008, 09:07 AM
How about:


$(list[i]).slideDown('slow');


If you're wanting for some basis on the effects, you might find this link useful:
http://docs.jquery.com/Effects

dPoriginals
12-19-2008, 09:10 AM
no its still the same.

Its allrite i mailed the author of the script so i guess ill wait for his reply, and in the mean time ill go through the jquery docs and see if can come up with a solution.

Thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum