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!

Answer 1

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