digg

Facebook Connect Join Digg About

Dynamic Ajax Tabs

havocstudios.com — This article demonstrates how to create dynamic css based tabs using ajax. New tabs can be opened and closed on the fly without refreshing the page.

Who dugg this? Made popular Feb 22, 2006

Digg DudeWhat is Digg?

Digg is a place for people to discover and share content from anywhere on the web. Digg surfaces the best stuff as submitted and voted on by the community. Take the Tour to learn more.

40 Comments

show profanity settings
expand all
  • matthom, on 10/12/2007, -1/+12nipplenutz, although your example shows how Ajax WORKS, it's not very practical. You have every link, including navigation, being processed with Ajax. This means the URL never changes, and there's never a permalink, except for the main page! This is not good usability practice.

    Although Ajax presents developers with some powerful new tools, it should NOT be used in every situation possible. In fact, it's easy to make your site LESS usable WITH Ajax, than leaving it out altogether. Ajax must be used with caution, as many people are used to the request/response approach, in which the page reloads for every change. If there's no indication that the page changed, the user will simply think they never clicked on the link, or that it didn't load.

    On the other hand, the Dynamic Ajax Tabs seems VERY usable. And the included CSS makes the tabs look great, too. Dugg.
  • inactive, on 10/12/2007, -2/+5@ TitoJackson - Hey dumbass... DIGG RUNS ON PHP + MYSQL.

    You may remove your foot from your mouth now.
  • abece, on 10/12/2007, -0/+2Tab is the easiest thing to implement! document.getElementById().style.display="none"|"block"
  • malhtiek, on 10/12/2007, -0/+1Ew, you have javascript calls embedded in onclick events in your markup?! Learn MVC and separate your model from your view and control
  • mrfish, on 10/12/2007, -0/+1http://www.duggmirror.com
  • jeffness, on 10/12/2007, -0/+1I will destroy web 2.0, oh yes..
  • musicalfam, on 10/12/2007, -0/+0We use "Ajax" to create playlists on our site http://www.musicalfamilytree.com
    The ability to add a song to your playlist without having the page refreshed is really nice.
  • pstreck, on 10/12/2007, -0/+0oh nipplenutz, myuberhome just got digged... hope you have a good bandwidth plan.
  • NippleNutz, on 10/12/2007, -1/+1Really not hard at all. I've only been web programming for 2 months and I did it on my page http://myuberhome.com If you get Ajax working tabbed Ajax is easy.
  • soe219, on 10/12/2007, -0/+0pretty cool tutorial, now just need code to be able to drag and reorder the windows
  • inactive, on 10/12/2007, -0/+0Liked this tutorial + Digg
  • ehudokai, on 10/12/2007, -0/+0tvtorrent.info does this...
  • inactive, on 10/12/2007, -0/+0WoW! my bad, its acutally using ajax, sorry I jumped the gun on ya'll, I've just heard so much ajax BS I was getting trigger happy.

    I'll digg now and go hide in a corner with my little dhtml book
  • inactive, on 10/12/2007, -0/+0Cool, great Ajax tabs tutorial, I was just wondering if someone could post some ajax sql tutorials...or an ajax applet tutorial or maybe ajax flash movie?

    or maybe, an actual ajax tutorial? nice dhtml though.
  • cakefart, on 10/12/2007, -0/+0Ugh!

    This example is a maintenance and search engine nightmare- and it decomposes *very* badly. Any good solution would still provide the same content, albeit not as flamboyantly.

    P.S. has anyone ever maliciously posted a "fake" url here in hopes of getting someone's $8.99/month DSL./Hosted whatever DDOS'd? Seems to me like that's another problem with the digg (we don need no steekin') moderation scheme.
  • NippleNutz, on 10/12/2007, -0/+0And the site outage from before was me rebooting the server... was playing CS wondering what happened to my connection.
  • NippleNutz, on 10/12/2007, -0/+0Yes I meant to add permalinks and will in the future. I understand how AJAX breaks the back button and the ability to link and will fix it. Note this is my first site i have ever done so I'm learning as i go along. Oh and my site is getting hammered... Its still up. Check out these stats for my sever LOL
    AMD K7 600mhz
    256Megs of ram
    Windows 2003 Server
    SQL server 2005
    Comcast consumer internet upload
  • senfo, on 10/12/2007, -0/+0Great tutorial. I digg.
  • apollo13, on 10/12/2007, -0/+0well, i dont see anything diggable here :S....this is a very common practice and its been there since IE 5 days
  • digdugdig, on 10/12/2007, -0/+0This would be cool if it worked in anything but Firefox... :)
  • weiran, on 10/12/2007, -0/+0Windows 2003 and SQL Server 2005 on 256 MB of RAM :|.
  • smpdawg, on 10/12/2007, -0/+0The link works again. I was moving from WordPress to my own blog so it was down for a few days.
  • inactive, on 10/12/2007, -0/+0Jeez the article is about Ajax and already the anti-PHP/MySQL fanboys are coming out of the woodwork. Give it a rest. Digg runs on it, AFAIK Google AdWords still runs on MySQL. Both of these tools are very powerful and scalable in the right hands. Their popularity has simply exposed how many wrong hands are out there.
  • elroy, on 10/12/2007, -0/+0setting .innerHTML = xmlhttp.responseText is not ajax. it's cool, and it works great, but its not "ajax" per se. it's just dynamic html.
  • flamingmonkey, on 10/12/2007, -0/+0"no digg because ajax is ***** retarded"

    wow, nice intelligent comment there tekknofieber

    I've been looking out for an AJAX tabs tutorial for a while, this is a good basis to build on.
  • Supafly, on 10/12/2007, -0/+0Where's the "X" requirement? This is just Dynamic HTML. No AJAX No Digg for misleading title...
  • racey, on 10/12/2007, -0/+0Just to help others looking for this page who are finding the site no longer in existence. Smpdawg above has recreated the original article and files on the fueledsoftware site. The link above is no longer working, but just go to the home page and click on the AJAX section to find the article.

    And thanks smpdawg for your efforts.
  • anushshetty, on 07/23/2008, -0/+0There seems to be a bug in focusing the tab back to the lastTabId.
  • smpdawg, on 10/12/2007, -0/+0I don't have the original files but I have recreated this tab system with a ZIP. http://blog.fueledsoftware.com/2006/06/02/ajax-tabs-reloaded-based-on-the-havoc-studios-article/
  • mskimi, on 10/12/2007, -0/+0havocstudios doesn’t seem to be online anymore. Does anyone have the download ZIP archive?
  • matthom, on 10/12/2007, -0/+0anarckie, there is live demo there, it's just kinda hidden in all the "verbage." It's just a "click here" text link.
  • v3xt0r, on 10/12/2007, -0/+0"Really not hard at all. I've only been web programming for 2 months and I did it on my page..."

    I suspect there are 100,000 more people like you, who are the ones saying things like DIV is better than TABLE, and 'do it all in AJAX' etc.

    Makes sense.
  • anarckie, on 10/12/2007, -1/+0No live demo + no digg = lame
  • aparsons, on 10/12/2007, -1/+0Can't really see a use for this, though...
  • cbmeeks, on 10/12/2007, -1/+0I thought it was a great tute....very worthy of a digg.

    Programming, Ajax, Macintosh and more!
    http://cbmeeks.blogspot.com

  • id34, on 10/12/2007, -1/+0I think the structure of this is too complicated, just my opinion.

    ---------------------------
    http://www.id34.com
  • v3xt0r, on 10/12/2007, -1/+0n00bz =p
  • TitoJackson, on 10/12/2007, -2/+0PHP + MySQL gets some traffic and goes belly up, there's a surprise.
  • inactive, on 10/12/2007, -2/+0So does this one ---> http://www.onlyriddles.com

    And it uses AJAX and get over 10k uniques per day.
  • tekknofieber, on 10/12/2007, -4/+0no digg because ajax is ***** retarded

  • Add a Comment

    Login or register to comment!
    Or, sign-in super fast with your Facebook account ...


© Digg Inc. 2009 — Content created and posted by Digg users is dedicated to the public domain | Terms of Use Updated | Privacy Policy
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.