CODEWITHSUNDEEP
jqueryhtml
kamil1995b
kamil1995b

Reputation: 151

idTabs doesn't work

I do have a problem with starting idTabs by Sean Catchpole, Chrome loads the modules correctly, and there's no errors on the console, but the jQuery doesn't work, the link just takes me to the text that isn't hid by idTabs - so I assume the javascript or jQuery doesn't work, but where's the problem? Here's the code I have

Head section:

<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" />

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
    <script type="text/javascript" src="scripts/jquery.idTabs.min.js"></script>

    <script type="text/javascript"> 
    $("#usual1 ul").idTabs(); 
    </script>

</head>

HTML:

    <div id="usual1" class="usual"> 
  <ul> 
    <li><a class="selected" href="#tab1">Tab 1</a></li> 
    <li><a href="#tab2">Tab 2</a></li> 
    <li><a href="#tab3">Tab 3</a></li> 
  </ul> 
  <div id="tab1">This is tab 1.</div> 
  <div id="tab2">More content in tab 2.</div> 
  <div id="tab3">Tab 3 is always last!</div> 
</div>

Upvotes: 1

Views: 2681

Answers (3)

user1993916
user1993916

Reputation:

idTabs does have a problem with Ajax. If you are using idTabs and Ajax code on the same page, then you could have problems with both. For example, you can't use idTabs and Sphider-Plus ajax auto complete feature, neither would work.

There is a work around, check it out here - basically it solves the compatibility issue.

If we are going to example idTabs code, it is actually written very well, and within jQuery namespace. The problem arises when the plugin tries to check dependencies and then load itself and load dependencies. Anyway, check out the fix.

Also, you could use this javascript to animate your idTabs:

        <script type="text/javascript"> 
          jQuery("#usual1 ul").idTabs(function(id){  
            jQuery(id).fadeIn(500); 
          }); 
        </script>

Upvotes: 0

Todilo
Todilo

Reputation: 1333

You can easily test and see if Jquery is working by simple making a $ and press enter in google-chrome-console (or firebug) and that part is working. I downloaded jquery-tabs from http://www.sunsean.com/idTabs/ and included it(the non-min file) in scripts/jquery.idTabs.js

and using the following code it works:¨

<!DOCTYPE html>
<body>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" />

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
    <script type="text/javascript" src="scripts/jquery.idTabs.js"></script>


</head>
<body>
 <div class="usual"> 
  <ul class="idTabs" > 
    <li><a class="selected" href="#tab1">Tab 1</a></li> 
    <li><a href="#tab2">Tab 2</a></li> 
    <li><a href="#tab3">Tab 3</a></li> 
  </ul> 
<div style="display:block;" id="tab1">This is tab 1.</div> 
<div style="display:none;" id="tab2">More content in tab 2.</div> 
<div style="display:none;" id="tab3">Tab 3 is always last!</div> 
</div> 
</body>
</html>

From what I can see you are writing : $("#usual1 ul").idTabs(); but you dont need that,w hat you need is to put id="idTabs" on the ul element you have your tabs. Then as you have, name your tabs (li elements) with #tab1 and then have ids with the same name in the text.

So 1 make sure jquery is working using $ in console(or seeing errors of failure to get). 2 remove the code inside the script tag. 3 put the class="idTabs" in the ul element. 4, have fun.

Edit: should be class="idTabs" on the ul(or the div before). Also you problably want to hid your divs by style="display:none" and they will popup on press.

Upvotes: 2

Rohit O
Rohit O

Reputation: 340

I think you have to write your jquery like this,

$(document).ready(function() {
   $("#usual1 ul").idTabs(); 

 });

There is no calling function to your code.

Upvotes: 1

Related Questions