By stevenpatz on

I am trying to get JQuery tabs implemented on my site. When I use the following code in a block, taken from http://drupal.org/node/89005 I see the text fade in as described.

<?php

drupal_add_js (
    '$(document).ready(function(){$("p.jtest").fadeIn(6000);}); ',
    'inline');
?>

<p class="jtest" style="background-color: palegreen; width: 30em;">

This is an example of an effect which is built into the core jQuery
library. This text should fade in after the DOM is loaded. <a
href="http://api.drupal.org/api/HEAD/function/drupal_add_js">
drupal_add_js()</a> was used to add the <a href="http://jquery.com/api/"> fadeIn</a> effect to any paragraph with the class <b>jtest</b>.

</p>

However when I try to use examples from http://www.sunsean.com/idTabs/ All I see are links to the content right below. No tabs.

What am I doing wrong?

⋅ Categories: Drupal 5.x

Comments

nevets’s picture

nevets commented

You do not show your example for the tabs but have you checked for javascript errors. Is the script being pulled in. Your examples works in part because you used drupal_add_js() to add the javascript which means drupal.js and jquery.js both get loaded, you need to check that the approriated javascript files are being pulled in.

In this case there is an alternative way to get js based tabs, The Javascript tools include
tabs which uses the jQuery tabs plugin by Klaus Hartl,

stevenpatz’s picture

stevenpatz
he/him
commented 
<?php
drupal_add_js('jquery.idTabs.pack.js');

?>
<div class="usual" id="usual1"> 
  <ul> 
    <li><a 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>

The Javascript appears to be loaded: i see this line in the HTML source:

<script type="text/javascript" src="/jquery.idTabs.pack.js"></script>
stevenpatz’s picture

stevenpatz
he/him
commented

Do I need to download anything from Klaus's site?

nevets’s picture

nevets commented

The README file for the tabs module includes an example. And no you do not need to download anything from Klaus's site, download and install jstools and enable at least the tabs module.

stevenpatz’s picture

stevenpatz
he/him
commented

The example in the README works, and is a great start. Thanks for the friendly reminder.

csc4’s picture

csc4 commented

There's a bug with the JS for Ie Tabs for IE7

-      <link rel="stylesheet" href="'. $path . '/tabs-ie.css" type="text/css" media="projection, screen" />
+      <link rel="stylesheet" href="/'. $path . '/tabs-ie.css" type="text/css" media="projection, screen" />

Could that be behind your problem?

stevenpatz’s picture

stevenpatz
he/him
commented

I don't have IE 7, and it shows just the links for Firefox and IE 6

mikejoconnor’s picture

mikejoconnor commented

I'm having trouble as well. I noticed if I use the jquery version that comes with the tabs plugin(v1.1.3.1) it works, if I use the one that comes with drupal(1.0.4) it does not, even though the tabs plugin says it will work with v1.0.3 or higher.

fullblownweb’s picture

fullblownweb commented

I've been wrestling with this example for an hour or two and discovered it was the out of the box HTML editor that was giving me hassles in D6.2. Filtered HTML was excluding my class for some reason, but as soon as I changed to full html it was OK. I better get a editor in there soon....

If at first you don't succeed fry, fry an egg