Logo


MyTabz - Prototype plugin

Posted in css, internet, Programming, Javascript by Dragan on the March 29th, 2007

Today I wrote MyTabz , a little Prototype plugin, that formats tour HTML into tabs.

Preview

You can see demo here.

Comments are welcome.


19 Responses to 'MyTabz - Prototype plugin'

Subscribe to comments with RSS or TrackBack to 'MyTabz - Prototype plugin'.

  1. Scott said,

    on March 29th, 2007 at 2:57 pm

    Nice work...

  2. neoline said,

    on April 11th, 2007 at 4:51 am

    I really like this tabs. I'll try to use it in my apps. Thank you

  3. Ondrej Medek said,

    on August 25th, 2007 at 1:58 am

    Nice, thanks for that

  4. Lightning said,

    on October 5th, 2008 at 6:42 am

    its not working.. i use the css, js and prototype required, cut and paste the html and it didn't work.

    How do i insert the javascript?

  5. Cleandro Viana said,

    on January 22nd, 2009 at 5:54 pm

    I tried to have more than one set of tabs on the same page and I can not get it to work. Do you support multiple set of tabs on the page?

  6. donkee said,

    on February 3rd, 2009 at 4:43 pm

    Thanks for the excellent work. Just one question... what code do use to make mytabz open on page load (replacing the "switch" id and the "Click Here" trigger)? Thanks again.

  7. Pekka said,

    on February 23rd, 2009 at 7:43 pm

    This is very nice and small.
    To get the titles automatically from the first element within each tab (rather than having to specify it a second time in the JS initialization, put in

    if ($$('#'+tab_id+' h5').length > 0)
    text = $$('#'+tab_id+' h5')[0].innerHTML

    right after

    addTab: function(tab_id){

    pekka@gmx.de

  8. Amor said,

    on February 25th, 2009 at 11:24 pm

    Hey,

    How can have links to next and previous tabs...

    can you provide some sample code...

    thanks

    -Amor

  9. Rade said,

    on April 8th, 2009 at 4:36 pm

    Hi,
    great example, simple and easly can go in wordpress loop.

    I have problem just with one thing, how to get vertical tabs automaticly activated. So no need to click on link to activate them.

    Thanks for answer.


  10. on May 1st, 2009 at 11:54 pm

    Hi,

    I've been using your tabz on one of my sites, but just decided to switch to mootools. I modified your script to work with Mootools 1.2 instead of Prototype, and can send it to you if you'd like (just fire me an email).

    Cheers,
    Nathan

  11. AK said,

    on September 17th, 2009 at 1:46 am

    I was also wondering how I can get html to show up as tabs and not have to use the onclick link to activate the tabs... Thanks!

  12. Eddie123 said,

    on December 22nd, 2009 at 12:57 pm

    Hello, I also have the same question: Is there code to automatically turn on the tabs so you dont have to click on "Click here to turn tabs on!" ???? Thanks!

  13. prakash said,

    on December 28th, 2009 at 1:36 pm

    its not working.. i use the css, js and prototype required, cut and paste the html and it didn't work.

    How do i insert the javascript?

  14. prakash said,

    on December 28th, 2009 at 1:36 pm

    its not working.. i use the css, js and prototype required, cut and paste the html and it did not work.


  15. on February 12th, 2010 at 1:00 am

    Very nice script!
    To load the tabs automatically just use the onload event handler:

    I noticed on little bug. If you click on the active tab it gets the background color of an unactive tab. Can someone help to fix this?


  16. on February 12th, 2010 at 1:03 am

    On last comment my html code was filtered out...

    body onload="ActivateTabs('tabs');"


  17. on March 22nd, 2010 at 7:25 pm

    Thanks Sebastian.... the only thing missing was "body onload="ActivateTabs('tabs');" .... thanks once again...

  18. Alister said,

    on March 29th, 2010 at 1:17 pm

    I've got body onload="ActivateTabs('tabs');"

    however when it calls that function it then duplicates the div id tab-bar, so i sit with with a duplicated tab bar.

    Any ideas?

  19. David said,

    on April 7th, 2010 at 5:42 pm

    hi,

    Great tab implementation. I've used it and it was a doddle to use. One questions though has anyone got this to work with lightbox http://www.huddletogether.com/projects/lightbox2/ ? It just doesn't work for me and breaks up the tabs.

    If anyone has got it to work together, with lightbox or similar image display tool, can you post on here.

    Thanks
    David

Leave a Reply (English only)


All Rights Reserved, Copyright © 2007 Dragan Bajcic.
YourTree | Dragan@YourTree | Web Development and Consulting