Blumentals Software Community

Found this rather useful tabbed content script, and installed in best 'copy and paste' fashion using the guide, but for some reason it's not working on my test page. What could go wrong, as this is the second script I've used which has failed to work, 'straight out of the box'?

Scripts added to the head, css to my style sheet and html to my page.....

Put your test page online and give us a link so we can take a look

Aivars wrote:Put your test page online and give us a link so we can take a look

Hi Aivars, thanks for your offer of assistance, here is my test page: Test page,you may recognise the menu used....

Suddenly have renewed interest in making the site better, and this problem is slowing me down

Instead of

$( selector ).tabify();

//…or with a callback
$( selector ).tabify(function(){});

which is just a sample, you need

$('#menu').tabify();

That makes sense, thanks I've updated the page though and it still doesn't work correctly. It shows the content of all the tabs, and the tab menu isn't active

You need to use http://jquery.com/ for tabify to work and you probably don't need that horror that you currently have in a file called jquery.js

MaxD, maybe you can take a look here:

http://jqueryui.com/demos/tabs/
or here:
http://flowplayer.org/tools/tabs/index.html

Plain simple to do.

Aivars wrote:You need to use http://jquery.com/ for tabify to work and you probably don't need that horror that you currently have in a file called jquery.js

Unfortunately that horror is the latest version of jquery, as the demo had a previous version

MaxD wrote:

Aivars wrote:You need to use http://jquery.com/ for tabify to work and you probably don't need that horror that you currently have in a file called jquery.js

Unfortunately that horror is the latest version of jquery, as the demo had a previous version

Thanks for the links, I'll try them out too. The tedious part is that when I do, it will be the third script I've tried

MaxD wrote:Unfortunately that horror is the latest version of jquery, as the demo had a previous version

It really isn't, what you have there is something called "jQuery tabs plugin by greg.sidelnikov", even though it's called jQuery.

Aivars wrote:It really isn't, what you have there is something called "jQuery tabs plugin by greg.sidelnikov", even though it's called jQuery.

There is 3 parts to the tabify plugin, jquery, plus 2 javascripts which are his. I downloaded the latest version of jquery and replaced the one which came with his script.
The parts are:
jquery (I downloaded)
jquery.tabify (his script)
jquery,tabify.source (his script)

I've now replaced the latest version of jquery with the older version from his webpage, and the tabs now work, though it still doesn't find or replace the content. I added my own IDs just in case there was some kind of conflict. Getting closer to a result, but not quite there.

You don't need 2 .tabify() calls in script and you need to use lowercase for element IDs.

Here, this works (tested):

Code: Select all

<div id="sidebar">
   <!-- tabs -->
      <ul id="sidetabs" class="sidetabs">
         <li class="active"><a href="#about">About</a></li>
         <li class=""><a href="#info">Info</a></li>
         <li class=""><a href="#help">Help</a></li>
      </ul>
      <div id="about" class="content">
         <h4>About</h4>
         <p>
            Test content   1<br>
             Test content<br>

           Test content <br>
            Test content<br>

         </p>
      </div>
      <div style="display: none;" id="info" class="content">
         <h4>Info</h4>
         <p>

            Test content 2<br>
             Test content<br>
             Test content<br>
             Test content<br>
         </p>
      </div>

      <div style="display: none;" id="help" class="content">
         <h4>Help</h4>
         Test content 3<br>
          Test content<br>
          Test content<br>
          Test content<br>

      </div>
          <script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
     $( '#sidetabs' ).tabify();
/*]]>*/
</script>
   <!-- tabs ends -->
       </div>


I've updated the page as per your test, and downloaded the latest version of jquery via the link you supplied, and am pleased to say it's working OK now, thanks
Will update all the pages soon to make it more pleasing to the eye, before trying a php version.

I've updated the site a bit more, but updating html pages is a tiresome task, so php is the way forwards. Just to show I have been doing something, here is the latest view, which does look OK in Chrome, Firefox 4 and IE9. Not sure about others.....
panorama view