Cutter's Crossing

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)

• #1 by wheezer on 6/18/07 - 9:49 PM

  

  Fantastic! Great work
  
  I haven't fully tested, but the nesting looks perfect, assuming this isn't a single instance of nest that is too ID dependent. Will I be able to create a 2nd nest on the same page?
  
  Konqueror/Ubuntu fails completely. For a browser that is supposed to be so standards compliant, it only fails 90% of the time. Still, the problem is probably not great. The failure seems total, so it's probably just some detect issue?

• #2 by Cutter on 6/18/07 - 11:35 PM

  

  @wheezer, been a real long time since I was on a *nix box, so I couldn't tell you about the Konqueror issues. This example uses an ID selector, but it may be feasible to use a class selector. I've never tried it that way so I really can't say, but the tabs() method appears to work off the object returned by JQuery $('[myselector]'), then the method parses the list elements (which do appear to require IDs). Try it out, let me know what happens.
  
  BTW, Klaus is a great help, and is quick to answer questions regarding the plugin.

• #3 by Cutter on 6/18/07 - 11:54 PM

  

  @Wheezer - I just did a real quick, down-and-dirty test by applying a classname of 'tabset' to both of my tab container objects (the div#container and the form#section-1) and adjusting to call to the tabs() method to $('.tabset').tabs(), and it worked flawlessly. Then I removed the ID attribute from both containers and it still worked. Pretty cool stuff.

• #4 by ctraos on 12/5/07 - 9:03 AM

  

  exelente, gran trabajo gracias !! por el plug

• #5 by paul Prusha on 1/12/08 - 7:21 PM

  

  Is it possible to have the top row of tabs function on-click, but the second set of tabs function on-mouseover?

• #6 by Gene on 1/30/08 - 4:54 PM

  

  see http://www.smartmenus.org/forum/viewtopic.php?id=1...
  
  Tabs Plugin conflicts with IE and smartmenus, but not FF. sure would be nice to have a workarund.
  
  BTW, i visit nashville to visit family from time to time.
  
  .

• #7 by Steve 'Cutter' Blades on 2/4/08 - 9:42 PM

  

  @Gene - Honestly, I haven't looked at this Tabs implementation in quite a while. I'm pretty sure that Klaus now has it integrated into the Jquery UI library, which I am almost positive is cross browser.
  
  We had very similar issues with using swfobject and JQuery. Basically, swfobject would programatically break IEs DOM when it rendered a Flash movie. This took quite a bit to discover, and even more to replace swfobject within our code. Chance are that you are running into a very similar issue.

• #8 by Steve 'Cutter' Blades on 2/4/08 - 9:44 PM

  

  @Paul - I'm not certain if you are able to define which event handles tab activation. Fairly sure that it's strictly the 'click' event, but your best bet is to review the JQuery UI documentation on their site.

• #9 by sumit on 4/10/08 - 1:05 PM

  

  thumbs up
  thanks

• #10 by okoy on 6/27/08 - 11:46 AM

  

  thumbs up

• #11 by Helena on 6/29/08 - 5:08 AM

  

  Pretty cool stuff.

• #12 by x on 7/10/08 - 10:22 PM

  

  hi,
  thank u for gr8 post, but do there any way to mix or duplicate form1 again ? for ex. to be form1 & form2 & one and two tabs ? i try but i failed :(

• #13 by brenda on 7/25/08 - 7:37 PM

  

  Great tabs; I've use these a couple different times! Do you think you can give me a hint as to how to nest tabs in more than just the first tab? I think this is the same request as x's above..

• #14 by M@rtijn on 7/26/08 - 5:20 AM

  

  Thank you!

• #15 by Kay on 8/25/08 - 4:11 AM

  

  A++

• #16 by Boobe on 9/4/08 - 9:47 AM

  

  First I have created in my code or not ?

• #17 by Edder on 9/17/08 - 12:50 AM

  

  exellent work, thank's for you contribution.

• #18 by Emma on 9/18/08 - 11:31 AM

  

  Really nice to be here. thanks for such a nice work. keep it up.

• #19 by Jason on 9/29/08 - 3:17 PM

  

  Works good, but when you try to move the <form> tag to encompass more tabs, this fails. Something happens, CSS fails somehow and you cannot see the second nest of tabs.
  
  How can one move the <form> tag?
  
  Also, the <ul> must be inside a <form> tag of they dont render right either.
  
  -Jason

• #20 by Steve 'Cutter' Blades on 9/29/08 - 7:47 PM

  

  @Jason -
  
  Yeah, I put this tutorial out back in June of last year, and JQuery has already changed significantly, so this example may no longer apply. While I love JQuery for basic DOM manipulation, I've found ExtJS's component library to be much more comprehensive and consistent, so I haven't modified these older tutorials to use the latest versions of the JQuery library.

• #21 by Martin on 10/4/08 - 7:43 AM

  

  I havent been able to display it properly eve though Im using a php host :S

• #22 by Steve 'Cutter' Blades on 10/4/08 - 8:49 AM

  

  @Martin -
  
  Well, that may be because you're using PHP;) If you want to post your (JQuery) code I can try to help you figure it out. Also, the JQuery group on Google Groups is an extremely active list.

• #23 by George on 11/18/08 - 4:24 PM

  

  Steve,
  
  I am not sure if you are aware. The tutorial on JQuery Nested Tab Set
  with Demo is quite educative. I am in the process of downloading the
  demo so to view but some of the folders are blank. I wondering if there is anyway you could provide the complete download in those
  folders.
  Thanks you.
  George

• #24 by Navaneeth Kumar on 12/1/08 - 4:45 AM

  

  thanks

• #25 by Korsakov on 12/12/08 - 12:23 PM

  

  Does anybody know of a more lightweight jquery tabs plug-in that can be nested? I am not interested in jQuery UI.

• #26 by Miguel on 12/17/08 - 1:19 PM

  

  hi, can i have a form in each tab?? i have problems trying that.

• #27 by mcb on 2/1/09 - 8:55 AM

  

  doesnt work :(

• #28 by Steve 'Cutter' Blades on 2/2/09 - 9:53 AM

  

  @mcb - The above example isn't working for you? What browser are you using? Or are you saying your implementation of this example isn't working?
  
  The above is working fine for me. You can click on the tabs, etc. This example was also written a year and a half ago, and JQuery (and different plugins) has changed quite a bit, so I have no idea if this would work with 1.3.

• #29 by johan on 2/8/09 - 9:56 PM

  

  there's an nested example for jquery ui tabs here:
  
  http://www.stilbuero.de/jquery/tabs_3/nested.html

• #30 by anand on 3/19/09 - 11:04 AM

  

  nested example in previous post saved my day.
  
  Till now i was trying to iniitialise the two tabs individually and the nested div was not at all correctly shown inside its container.
  
  I had used $("#container").tabs() previously but in vain for nested divs. Changing that to $("#containder ul").tabs() solved the issue

• #31 by lhao on 4/24/09 - 5:50 AM

  

  very goog ,l like

• #32 by jon on 5/1/09 - 1:29 PM

  

  how do i select the nested tabs, lets say "step 2" dynamically? any ideas?

• #33 by TuVinhSoft on 7/23/09 - 4:29 PM

  

  This is truly a great jQuery plugin. Thanks for sharing.

• #34 by Lennart on 7/31/09 - 9:49 AM

  

  Very impressive, respect!
  Thank you, I might use this one for my further projects...

• #35 by yurukai on 8/22/09 - 9:06 AM

  

  Very Good !!...
  I am studying JQuery ..o(?_?)o... Thanks !

• #36 by Joe on 9/29/09 - 9:38 PM

  

  Thanks very much for the post.

• #37 by Sue on 10/14/09 - 4:44 PM

  

  JQuery has already changed significantly, so this example may no longer apply. While I love JQuery for basic DOM manipulation, I've found ExtJS's component library to be much more comprehensive and consistent,

• #38 by Steve 'Cutter' Blades on 10/14/09 - 4:50 PM

  

  @Sue,
  
  You are absolutely right, JQuery has changed a great deal since I wrote this. I'll also agree with you about ExtJs. There's a nested tab demo for Ext on this site too (also out of date).

• #39 by petkim on 10/31/09 - 8:05 AM

  

  Thank you very much for this information. Good post thanks for sharing.

• #40 by Araba Oyunlar? on 11/1/09 - 6:17 PM

  

  Thumbs the thank you

• #41 by Hosting on 11/30/09 - 1:35 PM

  

  very goog ,l like

• #42 by mario on 1/6/10 - 8:53 PM

  

  exelente, gran trabajo gracias !! por el plug...

• #43 by awtor on 3/6/10 - 4:30 PM

  

  Thank you, I might use this one for my further projects...

• #44 by salma on 3/14/10 - 5:48 AM

  

  your included js file ,i need

• #45 by Medyumlar on 5/10/10 - 4:17 AM

  

  Thank you, I might use this one for my further projects...

• #46 by Bedava on 7/31/10 - 7:04 AM

  

  En güzel bedava oyunlar sadece bedava-ya da

• #47 by medyum hoca cenap on 10/19/10 - 3:08 PM

  

  Hi,I am Medyum.Very nice sharing. Thank you… Good information and good way your blog post. Good luck.

• #48 by donhasatrone on 11/28/10 - 5:05 PM

  

  amazing content tab, wonder if it will work in some particular CMS like Quick CMS or LightCMS

• #49 by Pandiyan on 12/24/10 - 2:10 AM

  

  I need Jquery and Javascript ,CSS files to use this articles

• #50 by Steve 'Cutter' Blades on 12/24/10 - 9:58 AM

  

  All demo files are available through the download link directly below the post.

• #51 by araba yar??? on 1/2/11 - 12:12 PM

  

  thank you very much teperim

• #52 by çiftlik oyunlari on 2/11/11 - 7:58 AM

  

  Thanks admin, very good work.

• #53 by Ken R. on 3/10/11 - 2:44 PM

  

  We are having problem with the other jquery components. It's like if we take something out or add something the tabs brake. I was wondering if you knew of any updated Jquery I can use to help me with this problem.

• #54 by Duck games on 4/5/11 - 8:44 AM

  

  Good informations. Thank you guys

• #55 by clamou on 4/29/11 - 1:51 AM

  

  hello admin;
  if i have in same page other link, and when i click in one of them it open a new tab with its name.
  how u do this

• #56 by Steve 'Cutter' Blades on 4/29/11 - 6:26 AM

  

  I'm having some difficulty understanding your question, but if you are asking how to you dynamically add tabs to the tab panel (like by clicking a link), you would do this by calling the tab panel's add() method. For more information, see the JQueryUI documentation:
  
  http://jqueryui.com/demos/tabs/#method-add
  
  There is, on that page, a simple example, with source code, as well:
  
  http://jqueryui.com/demos/tabs/#manipulation

• #57 by Eloktavian on 5/6/11 - 2:39 AM

  

  Hi,, Thx 4 share...
  Very, Very Thx... It's Work on my website..
  I Love u so much :D

• #58 by Eloktavian on 5/18/11 - 10:23 PM

  

  Hei Admin i come back again...
  Can you help me to using this code to my blog http://jd-software.blogspot.com ? Very confused to my blog.
  Can someone help me plix.....
  
  Thanks b4.

• #59 by the_tree on 6/15/11 - 3:29 PM

  

  When I run it locally , the tabbing functionality works, but the tabs themselves just show up as text. Any thoughts? I searched for image references and did not find any.

• #60 by Steve 'Cutter' Blades on 6/16/11 - 7:28 AM

  

  This post is from 2007, and JQuery and JQueryUI have changed drastically since then. Best to look at examples on the JQueryUI site now.

• #61 by Araba Yarisi Oyunlari on 6/22/11 - 9:40 AM

  

  Thank you. Thanks for sharing. nice web site

• #62 by Ricardo Rowe-Parker on 7/12/11 - 5:00 PM

  

  Hi there,
  
  Thank you for sharing this.
  Why did you not include the tab files (which are critical) in the download file? That link is now dead, which makes this page is useless. If you could help me locate those files, then I can give this a shot and will be happy to give you credit for it and/or make a financial contribution.
  
  Thank you,
  
  Ricardo

• #63 by Steve 'Cutter' Blades on 7/13/11 - 5:16 AM

  

  @Ricardo,
  
  This post is very old, and things have changed. Go pull JQueryUI for the tabs code, it'll get you where you want to go.

• #64 by abi on 8/18/11 - 10:53 PM

  

  Hi,
  
  Form 1 have sub tabs. In sub tabs "Step 3" i click the post form button, after post the form its come back to same tab (Step 3). How?

• #65 by Steve 'Cutter' Blades on 8/19/11 - 6:32 AM

  

  @abi,
  
  ??? I'm not seeing it post and come back to tab 3. When I post the blog homepage loads. Then I have to come back to the post.
  
  What is it that you are asking though? Do you want to know how to maintain state?

• #66 by Ben Perin on 8/30/11 - 2:03 AM

  

  Hi there,
  
  This example seems to be working quite well for me. I'm sure it could even be customised to be more powerful but this tutorial has really helped me get 95% of the way to my goal. The only problem I have is when trying to link to a nested tab. I am developing a site for my company http://kaltechgroup.com/testing which has links to the appropriate tabs (the links are down the bottom). However when I link to the id on the appropriate page the links don't work properly. Eg If I try to link to the page http://kaltechgroup.com/services.php#data (which is linking to the 3rd option on the first nested tab it will load all the divs on the first tab. Wierd.
  
  Then if I try to link to any of the ids on the second nested tab from another page it will open the first item on the first nested tab instead. If I then manually click on the second nested tab the id I originally selected will be highlighted. Is there a way to get around this. I am not sure what I would have to do to get this working.
  
  Cheers,
  Ben

• #67 by Steve 'Cutter' Blades on 9/1/11 - 5:46 AM

  

  @Ben,
  
  The basics of what was layed out in this post haven't changed much, but this post is four years old, and things have changed quite a bit since then. It's best to review the documentation to see the best way to handle your situation. A quick review of the JQUI Tabs docs shows a 'select' method that might handle your purposes:
  
  http://jqueryui.com/demos/tabs/#method-select
  
  Though, if going into a nested tabset, remember to select the outer tabset first. Hope this helps.