jQuery idTabs - Auto Change and Fade With Mouseover

Question

I'm using jQuery idTabs in an upcoming redesign for my website. I've styled it to my content and it looks great, but there are a couple of functions which are missing what I require.

First, here's what I'm using right now:

<script type="text/javascript">
    $("#featured").idTabs("!mouseover"); 
</script>

Obviously, the code above means that it changes to the next tab when hovered, making clicking unnecessary.

Here's what I want to do:

1 - Have the tabs automatically changed every specified number of seconds when the user is not interacting with them.

2 - When they change, have them fade. There is actually already a function for this in idTabs:

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

The only problem is that it doesn't work well with the mouseover event. Rather than fading-in on each mouseover, it simply changes automatically.

Can anyone help me out with this?

It'd be greatly appreciated! Thanks!

gaurang171 · Accepted Answer · 2012-09-04T20:03:46.207

Here i have done complete bins for changing tab automatically on some time interval without mouse over or click. please check demo link once.

Demo: http://codebins.com/bin/4ldqp7r/2 HTML

<div>
  <div id="adv2">
    <ul>
      <li>
        <a class="selected" href="#ani1">
          1
        </a>
      </li>
      <li>
        <a href="#ani2">
          2
        </a>
      </li>
      <li class="split">
      </li>
      <li>
        <a href="#ani3">
          3
        </a>
      </li>
      <li>
        <a href="#ani4">
          4
        </a>
      </li>
    </ul>
    <span>
      <p id="ani1">
        Click on the tabs to see a nice fade.
      </p>
      <p id="ani2">
        You're not impressed?
      </p>
      <p id="ani3">
        But it's so cool... in a nerdy way.
      </p>
      <p id="ani4">
        Download idTabs and have your cake. You can eat it too.
      </p>
    </span>
  </div>
</div>

jQuery

$(function() {

var tabList, interval = 1800;
var tabDiv = $("#adv2").get(0);
var rotate = function() {
        var current = $("#adv2 ul a.selected").attr("href");
        var index = ($.inArray(current, tabList) + 1) % tabList.length;
        tabClick(tabList[index], tabList, tabDiv);
    }

var timer = setInterval(rotate, interval);
var tabClick = function(id, list, set, action) {
        if (!tabList) {
            tabList = list;
        }
        if (action && action.event == "click") {

            timer && clearInterval(timer);
            timer = setInterval(rotate, interval);
        }

        $("a", set).removeClass("selected").filter("[href='" + id + "']", set).addClass("selected");
        for (i in list) {
            $(list[i]).hide();
        }
        $(id).fadeIn();
        return false;
    }

$("#adv2").idTabs(tabClick);

});

** CSS:**

body{
  font: 10pt Calibri,Arial,sans-serif;
  text-align: center;
  color: #FFFFFF;
  background: none repeat scroll 0 0 #111111;
  margin: 0;
  padding: 0;
}

#adv2 {
  background: none repeat scroll 0 0 #181818;
  margin-left:5%;
  margin-top:5%;
  width: 500px;
}
#adv2 ul{
  display: block;
  float: left;
  height: 50px;
  width: 50px;
  margin:0px;
  background:#333;
}

#adv2 li {
  float: left;
}

li {
  list-style: none outside none;
}

#adv2 li a.selected {
  background: none repeat scroll 0 0 snow;
  color: #111111;
  font-weight: bold;
}

#adv2 li a {
  display: block;
  height: 25px;
  line-height: 22px;
  text-decoration: none;
  width: 25px;
}

#adv2 li a:hover {
  background:#0A0A0A;
}

#adv2 li.split {
  clear: both;
}

a{
  color: #FFFFFF;
}

a {
  outline: medium none;
}
#adv2 span {
  background: none repeat scroll 0 0 #181818;
  float: right;
  height: 50px;
  line-height: 45px;
  width: 410px;
}

Demo: http://codebins.com/bin/4ldqp7r/2

Is there a way to make the timer restart upon clicking one of the tabs? — Sal, Sep 04 '12 at 14:49
Yes you can assign timer to some variable and then use clearInterval timer = setInterval(function(){},1800); on click on some button timer && clearInterval(timer) — gaurang171, Sep 04 '12 at 16:53
I honestly have no idea how to go about that. Is that something you can add to your current code? — Sal, Sep 04 '12 at 17:29

jQuery idTabs - Auto Change and Fade With Mouseover

1 Answers1