Help changing effect on Jquery bassed ui tabs

[dPoriginals]

Hey,
I would like help modding this Toturial 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]

Go to sprinkle.js and change highlighted to width:

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

That might met your desire.

[dPoriginals]

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]

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]

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]

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]

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]

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]

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.