Kent Heberling leading from the front (end)

Looks really nice. How flexible is the UI of the tabs themselves?

Beautiful AND simple to implement! Hooray!

I was wondering if there was any option to change the transition effect… maybe from Fade to a Slide or one of the other jQuery transition effects?

For some reason, when I have the pause over hover parameter set, the slideshow permanently pauses instead of temporarily. Whether or not it’s normal, is there a way to just get it to pause while the mouse is over the tabs/content, without pausing fully?

How would I trigger an event when a specific tab loads? For example, I want an ajax event to fire when I click on tab #3. Is there anything that can give me the ability to fire such an event when entering a specific tab?

Great work!
Works great on asp .net. I want to keep a track of the “activeIndex” when page refresh and panel updates, how can I do this? Any Idea?

Is it possible to get the slideshow starting again on mouseout?

Thanks Kent,

This vertical tabs script is great and I have been very pleased with the functionality and simplicity of the code. I am however running into one issue. I have positioned the .arrow class directly on top of the tabs. I have altered the z-index and position attributres, but for some reason I cannot get the arrow to appear on top of the tabs in firefox or IE. Everything is working perfectly in Safari and Chrome, but for some reason I cannot specify a background image that displays on top in FF. I have treid to work around this by setting a background image on “.verticalslider_tabs .activeTab a:active” However, I haven’t been able to get this solution working either. Do you know of any limitations with stacked CSS class selectors and background images? Or can you think of an alternative solution?

Thanks again,
Andrew

Hi,
This is a cool plugin. In order to format my lists, I had to insert them in separate divs. But now the script doesn’t work. Html code looks like:

Tab 1
Tab 2

Content 1
Content 2

This is a cool plugin. In order to format my lists, I had to insert them in separate divs. But now the script doesn’t work. Html code looks like: Can you please show me how to modify js files to make it work?
Thanks

How to disable few tabs on load ? So few tabs will look like transparent tabs.

Hey great plugin! Quick question: Is there a way to pass which tab displays through a URL?

For instance, if I were using this to display a list of sub pages. I could have everything display in the parent page, and then say something like mywebsite.com/parent-page/#tab2.

HEre is a binder for the tabs that allows a link to be placed over the tab.
if the link was not ‘#’ then it will jump to a URL. Hope that makes sense….

// Event Bindings
$(“.verticalslider_tabs a”, verticaltabs).click(function (foo){
if (!$(this).parent().hasClass(“activeTab”)){ // do nothing if the clicked tab is already the active tab
if (foo.currentTarget.href.charAt(foo.currentTarget.href.length-1)==’#’) {
activeIndex = $(this).parent().prevAll().length; // a clicked -> li -> previous siblings
switchContents();
if (slideShow){
clearTimeout(timeout);
slideShow = false;
$(“.pause a”, verticaltabs).css(“display”,”none”); // pause slideshow if currently in slideshow mode
$(“.play a”, verticaltabs).css(“display”,”block”); // pause slideshow if currently in slideshow mode
}
} else {
return true;
}
}
return false;
});

If I use any named anchors in the content itself, it breaks the whole plugin. Is there a workaround to being able to use named anchors in the content?

Hi Kent, first of all thanks for your awesome piece of code. I like it very much. Currently I’m experiencing a little trouble with verticalTabs that I try to explain (sorry for my poor english).

I’ve set the slideShow parameter as true and now works perfectly until the webpage is displayed, but when i get off the focus from the browser (or browser tab) and, after a few seconds, reset the focus on the browser (or browser tab) that display the page with verticalTabs seems that the content changes very fastly, almost to gain the lost time. I’ve experienced that in the demo this problem doesn’t appear, so if you could help me it will be great.
Thanks in advance.
Davide.

Curious – is there an easy way to adjust the script so that the “contents” don’t load until that tab is active?

David,

this is my solution to it :
In switch contents do this:

$(“.activeContent”, verticaltabs).stop(true, true).fadeOut(options.speed).removeClass(“activeContent”);
$(contents[activeIndex], verticaltabs).stop(true, true).fadeIn(options.speed).addClass(“activeContent”); // Update content

The queuing is still there, but when you switch back to the tab it will run them extremely fast. When I find a better solution, I will post…

This is an excellent example for creating simple vertical menu using Jquery. but i have one problem when i tried to use the code above. it messes up the menu in my page if i dont use element and if i use then it is messing up my existing contents of the page. does anyone has an answer?

Wonderful and elegant code!! Great job. I do have one question. Per your Feb. remark, you mentioned a container auto-size might be added at a later point. Do you still have plans to do that?

Thanks!

hi there, this is a great plugin. Thank you! 😀

i would like to ask one question though, how can i get this to work inside a jquery UI tab ‘content via ajax’ ?? thanks

When I open up the CSS for right float I lose the arrows. Any hint?

Thank you buddy !!!

Very simple to implement, thank you.

I was just wondering, is there a way to access a tab directly via a URL? (not land on the default active tab)

hi ..
my content are text contents are like 3-4 paragraphs .. it doesn’ fit in above demo .. I couldn’t able to scroll as well.
Is there anyway we can increase the height of the right text container.
I mean the auto height depending on the contents each tab container holds.

Hi this is a great little plugin and it works well.
However, I noticed that no matter what I do in the CSS it is not allowing for an activeContent tab larger than 255px.

Looking at the DOM Tree I noticed that the plug in is using inline CSS to all of the

Seeing that inline CSS will overrule anything in the stylesheets, there anyway to remove the stlye=”height:255px” call to all the li?
I can find no reference to this any any of the code and it seems to be coming from thin air

Thank you so much for offering this. I’ve been scouring the web for something similar and you’re the first that’s given something easy to understand. I am, however, a total newbie, and I’m working in wordpress. I get that I put that html directly within the page that I want the slider to appear and I know how to add the CSS. Can you clarify though where the two script files should go? And also where do I put that small piece of code to “initialize” the plugin?
Thanks!

Hello,

Thanks for this slider, its what I’ve been looking for.

One question however, why does the slider “flash” (or go white) before showing the next slider the first time it transitions, all subsequent transitions fade in/fade out nicely, but the first change is never smooth.

Ideas ?

Great script, but i was wondering how i could attach an hyperlink to the list-items in the verticalslider_tabs image UL.

these options are not working:

title
title

Is there a solution for this?

Great plugin! Is there a way to fit more than 4 tabs within the same height, and add a scroll down function within the tabs?