jQuery Tabs Content Slider

jQuery Tabs Content Slider

I was amazed at how other websites display their featured post to their site. The demo in this article was not a hard-core jQuery as in you see in NowPublic.com’s front page but this post will surely get me in developing one. –I hope.

You can get away just anything with jQuery nowadays. Today’s post is my mimic attempt. And almost every website has a featured content slider or tabbed section of some sort, surely this post will surely be one of my basic assets in my web arsenal. Although, this would not let me to redesign the tabbed links with extra divs using a standard jQuery Tab, I hope someone would give-in for a modified code of UI Tab.

Demo

I’ve downloaded a couple of important files:

jQuery

jQuery UI (the core and tabs)

I called all the core jQuery javascripts:






And now my jQuery UI Tab call: I need it to rotate every 5 seconds, even after a tab click.

                $('.ts-display').tabs({
                    fx: { opacity: 'toggle'}
                }).tabs('rotate', 5000, true);

And this would not work if I don’t have the UI Tab CSS class –very important!!!

.ui-tabs {
    padding: 0em;
	z-index: 100;
}

.ui-tabs .ui-tabs-nav {
    list-style: none;
    position: relative;
    padding: 0em 0em 0;
}

.ui-tabs .ui-tabs-nav li {
    position: relative;
    float: left;
    border-bottom-width: 0 !important;
    margin-top:5px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:0px;
    padding: 0;
}

.ui-tabs .ui-tabs-nav li a div{
	width:131px;
	margin:0 5px;
}

.ui-tabs .ui-tabs-nav li a {
    float: left;
	text-align: left;
    text-decoration: none;
    padding-top:15px;
	color: #555;
	height:75px;
	font-size: 0.9em;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
    padding-bottom: 0px;
    border-bottom-width: 0;
}

.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
    cursor: pointer;
}

.ui-tabs .ui-tabs-panel {
    padding: 0em 0em;
    display: block;
    border-width: 0;
    background: none;
}

.ui-tabs .ui-tabs-hide {
    display: none !important;
}

And that’s it for now. Simple as it may seem, but it knocks to my basic needs and purpose for my past and future projects.

Thanks for reading.


Tagged as , , , + Categorized as jQuery

Enjoyed this post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

  • 0

Facebook comments:

6 Comments

  1. I’ve been looking for a Tab content like this before although I have some previous experience with Jquery I think I need some help with that. I have my files an my CSs but What about the unordered list? In where I need to put the elements in my hml in order to get similar results?
    I thnk something is missing here

  2. Thank you for your interest.

    It takes a lot of practice out a demo from any jquery examples out there. Just start from the basic example and work your way to what ever your purpose. Btw, my demo is in unordered list. I can’t really picture what you mean. PM me a zip file of you project.

  3. Thank you for the script…..
    is there anyway to make the content slide instead of fading in?

    thanks

  4. Thank you for your interest.

    Personally, I don’t like the content to slide out. It makes the reader dizzy especially on a white wide background with black text on it. A fading effect is just fine for me and as well for an average reader. I’m afraid I cannot dug deeper at which makes no sense for me putting on a website. But you could do some event triggers (http://jqueryui.com/demos/tabs/#event-show) and re-position the active tab content either from left to right or vice versa when the tab is shown/clicked

  5. Thank you for your response….and is it possible to turn off the automated fading..so it changes only when you click on the tab?

    thanks

  6. Yes Mike, you can remove it to disable fading effect:
    fx: { opacity: ‘toggle’ }

    or you can do below to make it simple without automation or effects:
    $(‘#id’).tabs();

    For a deep understanding about the jQuery Tabs see more options at:
    http://jqueryui.com/demos/tabs/

    Thanks,

Leave a Comment