tabbed content script

Discuss general web development questions. Help others and get help from others.

Moderator: kfury77

tabbed content script

Postby MaxD » Sat May 21, 2011 8:38 pm

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.....
Amateur web design now dabbling with php and jquery
User avatar
MaxD
 
Posts: 127
Joined: Mon Dec 18, 2006 10:05 pm
Location: UK

Re: tabbed content script

Postby Aivars » Sun May 22, 2011 7:08 pm

Put your test page online and give us a link so we can take a look :)
Blumentals Software Programmer
User avatar
Aivars
Blumentals Software Developer
 
Posts: 1981
Joined: Thu Aug 22, 2002 1:40 pm
Location: Latvia

Re: tabbed content script

Postby MaxD » Sun May 22, 2011 11:01 pm

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
Amateur web design now dabbling with php and jquery
User avatar
MaxD
 
Posts: 127
Joined: Mon Dec 18, 2006 10:05 pm
Location: UK

Re: tabbed content script

Postby Aivars » Mon May 23, 2011 6:58 am

Instead of

$( selector ).tabify();

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

which is just a sample, you need

$('#menu').tabify();
Blumentals Software Programmer
User avatar
Aivars
Blumentals Software Developer
 
Posts: 1981
Joined: Thu Aug 22, 2002 1:40 pm
Location: Latvia

Re: tabbed content script

Postby MaxD » Mon May 23, 2011 8:55 am

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 :?:
Amateur web design now dabbling with php and jquery
User avatar
MaxD
 
Posts: 127
Joined: Mon Dec 18, 2006 10:05 pm
Location: UK

Re: tabbed content script

Postby Aivars » Mon May 23, 2011 9:08 am

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
Blumentals Software Programmer
User avatar
Aivars
Blumentals Software Developer
 
Posts: 1981
Joined: Thu Aug 22, 2002 1:40 pm
Location: Latvia

Re: tabbed content script

Postby notuo » Mon May 23, 2011 4:13 pm

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.
User avatar
notuo
 
Posts: 258
Joined: Sat Jul 09, 2005 8:07 pm
Location: Tlalpan, Mexico City, Mexico

Re: tabbed content script

Postby MaxD » Mon May 23, 2011 8:36 pm

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 :)
Amateur web design now dabbling with php and jquery
User avatar
MaxD
 
Posts: 127
Joined: Mon Dec 18, 2006 10:05 pm
Location: UK

Re: tabbed content script

Postby MaxD » Mon May 23, 2011 8:38 pm

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 :roll:
Amateur web design now dabbling with php and jquery
User avatar
MaxD
 
Posts: 127
Joined: Mon Dec 18, 2006 10:05 pm
Location: UK

Re: tabbed content script

Postby Aivars » Mon May 23, 2011 8:54 pm

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.
Blumentals Software Programmer
User avatar
Aivars
Blumentals Software Developer
 
Posts: 1981
Joined: Thu Aug 22, 2002 1:40 pm
Location: Latvia

Re: tabbed content script

Postby MaxD » Mon May 23, 2011 9:14 pm

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. :|
Amateur web design now dabbling with php and jquery
User avatar
MaxD
 
Posts: 127
Joined: Mon Dec 18, 2006 10:05 pm
Location: UK

Re: tabbed content script

Postby Aivars » Mon May 23, 2011 9:35 pm

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>
Blumentals Software Programmer
User avatar
Aivars
Blumentals Software Developer
 
Posts: 1981
Joined: Thu Aug 22, 2002 1:40 pm
Location: Latvia

Re: tabbed content script

Postby MaxD » Tue May 24, 2011 12:12 am

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.
Amateur web design now dabbling with php and jquery
User avatar
MaxD
 
Posts: 127
Joined: Mon Dec 18, 2006 10:05 pm
Location: UK

Re: tabbed content script

Postby MaxD » Wed Jun 08, 2011 10:43 am

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
Amateur web design now dabbling with php and jquery
User avatar
MaxD
 
Posts: 127
Joined: Mon Dec 18, 2006 10:05 pm
Location: UK


Return to Web Developer Talk

Who is online

Users browsing this forum: No registered users and 1 guest

cron