#309002 - 10/04/2008 07:19
How to do the tabs thingy in HTML?
|
carpal tunnel
Registered: 20/12/1999
Posts: 31600
Loc: Seattle, WA
|
Some web pages have tabs at the top, where you click on the tab and a different piece of information appears within the same web page beneath the tab. It's not loading a new page, the information under the new tab appears instantly when you click on it.
I'm pretty sure it's done by having the data for all of the tabs pre-loaded into DIV sections, and then when you click on the link of the desired tab, it just unhides one DIV while hiding all the others. Or some kind of trick like that.
It's easy enough to split up a web page into named DIV sections, but what I don't know how to do is to make them appear and disappear when I click on an A HREF.
Can anyone give me a simple example of how to do that?
Every time I google search for how to do tabs, what I get is a thousand web pages with CSS examples of the graphic and mouseover tricks to make the tabs *look* cool. That's great and all, and I used one of those examples to do tabs with the fancy mouseovers, but the tutorial only showed how to make the tabs look pretty rather than how to make them actually *DO* anything when you clicked on them.
|
Top
|
|
|
|
#309003 - 10/04/2008 08:24
Re: How to do the tabs thingy in HTML?
[Re: tfabris]
|
carpal tunnel
Registered: 18/01/2000
Posts: 5683
Loc: London, UK
|
It's easy enough to split up a web page into named DIV sections, but what I don't know how to do is to make them appear and disappear when I click on an A HREF. <A HREF="#" onclick="switchTab('tab_name_goes_here')">Click me</a> Then write some JavaScript that hides all of the divs except for the one named.
_________________________
-- roger
|
Top
|
|
|
|
#309004 - 10/04/2008 08:38
Re: How to do the tabs thingy in HTML?
[Re: Roger]
|
carpal tunnel
Registered: 13/07/2000
Posts: 4180
Loc: Cambridge, England
|
Alternatively, you could try not designing your site like that in the first place, whereupon your users' back buttons and browsing history would still work, and each page of information would have its own URL that you could give to people.
Peter
|
Top
|
|
|
|
#309005 - 10/04/2008 10:24
Re: How to do the tabs thingy in HTML?
[Re: peter]
|
old hand
Registered: 07/01/2005
Posts: 893
Loc: Sector ZZ9pZa
|
I am with Peter on this one. You'd break back buttons, search engines and make the page load slower with the div trick.
Tabs are nice though, I'd just make them simple links to separate pages for better functionality.
|
Top
|
|
|
|
#309009 - 10/04/2008 12:22
Re: How to do the tabs thingy in HTML?
[Re: sein]
|
carpal tunnel
Registered: 18/01/2000
Posts: 5683
Loc: London, UK
|
I am with Peter on this one. Actually, I agree with Peter as well. Each tab should link to a different page, and you can use the same template or "master page" (to use ASP.NET parlance) for them. However, for small regions of text, where you wouldn't want to provide a URL to that "page", then they're fine.
_________________________
-- roger
|
Top
|
|
|
|
#309019 - 10/04/2008 13:58
Re: How to do the tabs thingy in HTML?
[Re: Roger]
|
carpal tunnel
Registered: 20/12/1999
Posts: 31600
Loc: Seattle, WA
|
Each tab should link to a different page, and you can use the same template or "master page" (to use ASP.NET parlance) for them. Yeah, but I *know* how to do that. Where's the educational part if I do that? :-) On the other hand, you guys make some pretty good arguments for reasons to do them as separate pages. I hadn't thought about the backbutton incompatibility until you brought it up. I might rethink everything now. I still wanna know how to do it...
|
Top
|
|
|
|
#309020 - 10/04/2008 13:59
Re: How to do the tabs thingy in HTML?
[Re: Roger]
|
carpal tunnel
Registered: 20/12/1999
Posts: 31600
Loc: Seattle, WA
|
Then write some JavaScript that hides all of the divs except for the one named. Ah, the devil's own language. What would said Javascript code look like?
|
Top
|
|
|
|
#309026 - 10/04/2008 14:46
Re: How to do the tabs thingy in HTML?
[Re: tfabris]
|
carpal tunnel
Registered: 13/02/2002
Posts: 3212
Loc: Portland, OR
|
Then write some JavaScript that hides all of the divs except for the one named. Ah, the devil's own language. What would said Javascript code look like? Google for "DOM toggle". The third link ( http://www.tjkdesign.com/articles/toggle_elements.asp) has an example to show/hide elements. It's not tabs, but it should get you started.
|
Top
|
|
|
|
#309027 - 10/04/2008 14:50
Re: How to do the tabs thingy in HTML?
[Re: tfabris]
|
carpal tunnel
Registered: 13/07/2000
Posts: 4180
Loc: Cambridge, England
|
Ah, the devil's own language. What would said Javascript code look like? Are you sure you got those sentences in the right order? Peter
|
Top
|
|
|
|
#309030 - 10/04/2008 16:06
Re: How to do the tabs thingy in HTML?
[Re: canuckInOR]
|
carpal tunnel
Registered: 20/12/1999
Posts: 31600
Loc: Seattle, WA
|
That one stopped me as soon as I noticed that it needed a 3KB script to be downloaded and unzipped before it would work. Yikes. I'll google for DOM Toggle and try to find something lighter weight. Surely this is only a few lines of javascript?
|
Top
|
|
|
|
#309031 - 10/04/2008 16:11
Re: How to do the tabs thingy in HTML?
[Re: tfabris]
|
carpal tunnel
Registered: 25/12/2000
Posts: 16706
Loc: Raleigh, NC US
|
IANAWD, but couldn't you have several opaque layers and modify their z-indices?
_________________________
Bitt Faulk
|
Top
|
|
|
|
#309032 - 10/04/2008 16:22
Re: How to do the tabs thingy in HTML?
[Re: wfaulk]
|
carpal tunnel
Registered: 20/12/1999
Posts: 31600
Loc: Seattle, WA
|
IANAWD, but couldn't you have several opaque layers and modify their z-indices? I actually did some messing with the z-index property a bunch yesterday, for a completely different reason, and it was a big pain in the ass. The objects in question, for my particular layout design, got rather messed up and didn't play and wrap right when I started using the z-index property. I agree that the approach would work, but what I'm saying is that in my particular case, this probably isn't a workable solution.
|
Top
|
|
|
|
#309033 - 10/04/2008 16:25
Re: How to do the tabs thingy in HTML?
[Re: tfabris]
|
carpal tunnel
Registered: 10/06/1999
Posts: 5916
Loc: Wivenhoe, Essex, UK
|
To hide one div and show another do:
document.getElementById("idOfDivToHide").style.display = "none"; document.getElementById("idOfDivToShow").style.display = "inline";
_________________________
Remind me to change my signature to something more interesting someday
|
Top
|
|
|
|
#309034 - 10/04/2008 16:53
Re: How to do the tabs thingy in HTML?
[Re: andy]
|
carpal tunnel
Registered: 20/12/1999
Posts: 31600
Loc: Seattle, WA
|
|
Top
|
|
|
|
#309036 - 10/04/2008 18:19
Re: How to do the tabs thingy in HTML?
[Re: sein]
|
addict
Registered: 02/04/2002
Posts: 691
|
a neat trick I learned while doing some ajax stuff. set the location.hash property when you want to restore the back buttons. On my page, before the user leaves the search results to view a detailed page, I set the location.hash to p=## (##= the page number from the search results). Then when the user clicks the back button, the page they goto is searchresults?id=something#p=9 then on page load in javascript, look for the bookmark, parse it for the p= value, and load up that page of data into the search results. it's kind of a ugly hack, but it works.
_________________________
Oliver
mk1 30gb: 129 | mk2a 30gb: 040104126
|
Top
|
|
|
|
#309041 - 10/04/2008 20:10
Re: How to do the tabs thingy in HTML?
[Re: oliver]
|
carpal tunnel
Registered: 19/01/2002
Posts: 3584
Loc: Columbus, OH
|
Check out the Ext javascript library. Tab demo is here. It can take your existing divs and render them into a tab panel with just a few linkes of javascript. Example:
var tabs = new Ext.TabPanel({
applyTo: 'my-tabs',
activeTab: 0,
deferredRender: false,
autoTabs: true
});
// This markup will be converted to a TabPanel from the code above
<div id="my-tabs">
<div class="x-tab" title="Tab 1">A simple tab</div>
<div class="x-tab" title="Tab 2">Another one</div>
</div>
_________________________
~ John
|
Top
|
|
|
|
#310231 - 16/05/2008 15:22
Re: How to do the tabs thingy in HTML?
[Re: Roger]
|
carpal tunnel
Registered: 20/12/1999
Posts: 31600
Loc: Seattle, WA
|
<A HREF="#" onclick="switchTab('tab_name_goes_here')">Click me</a>
Then write some JavaScript that hides all of the divs except for the one named.
Roger, I've done this, and it works. Thanks for this tip. I like the implementation, and I think it does the right thing for the pages I'm using it for. Yes, as was discussed elsewhere in the thread it breaks the "Back" button functionality, but for the places I'm using it, that's fine. It has one drawback I'd like to work around, though, and I'm wondering if anyone here knows how to work around it. The A HREF points to "#" meaning "an anchor with no label" which essentially defaults to the top of the page. Meaning that, in this case, each time someone clicks on a tab, they get scrolled back up to the top of the page at the moment they click. Some browsers don't do the scroll, which is nice, but I'd really like it to not do the scrolling on *every* browser. My tabs are always near the top of the page, but not exactly at the top of the page, so sometimes you've scrolled down the page slightly when you hit the tab. So scrolling back up to the top of the page doesn't feel right. I seem to recall I tried doing A HREF="", and that works on some browsers and not on others. What I really need is a way for them to click on the tab and have it result in the ONCLICK event, but not have it behave in the way HREFs do. I think I can do an ONCLICK for an IMG, but I don't want to have to make GIF files for every tab name, I want them to be text. Anyone know of a solution in this case?
|
Top
|
|
|
|
#310232 - 16/05/2008 15:27
Re: How to do the tabs thingy in HTML?
[Re: tfabris]
|
carpal tunnel
Registered: 10/06/1999
Posts: 5916
Loc: Wivenhoe, Essex, UK
|
You can use a span or a div (and use their onclick events) in the tab and use css to make it behave like an anchor. In fact many other dhtml elements could be used the same way (lots of them have onclick events).I've just remembered the other way Stick with your anchors, but at the end of the onclick do a "return false;". I don't know whether that works in all browsers though. So: <a href="#" onclick="doBlah(); return false;">click</a>
Edited by andy (16/05/2008 15:35)
_________________________
Remind me to change my signature to something more interesting someday
|
Top
|
|
|
|
#310233 - 16/05/2008 15:34
Re: How to do the tabs thingy in HTML?
[Re: tfabris]
|
carpal tunnel
Registered: 25/12/2000
Posts: 16706
Loc: Raleigh, NC US
|
How about:
<a href="javascript:void(0)" ...>
?
_________________________
Bitt Faulk
|
Top
|
|
|
|
#310234 - 16/05/2008 15:37
Re: How to do the tabs thingy in HTML?
[Re: tfabris]
|
carpal tunnel
Registered: 18/01/2000
Posts: 5683
Loc: London, UK
|
Anyone know of a solution in this case? Yeah, you can attach onclick to a <span>. See the attached.
Attachments
foo.htm (317 downloads)
_________________________
-- roger
|
Top
|
|
|
|
#310235 - 16/05/2008 15:46
Re: How to do the tabs thingy in HTML?
[Re: wfaulk]
|
carpal tunnel
Registered: 10/06/1999
Posts: 5916
Loc: Wivenhoe, Essex, UK
|
While void(0) is almost certainly the "proper" answer, I'm afraid that IE has had some issues with void(0) in some situations in the past
_________________________
Remind me to change my signature to something more interesting someday
|
Top
|
|
|
|
#310237 - 16/05/2008 16:13
Re: How to do the tabs thingy in HTML?
[Re: andy]
|
carpal tunnel
Registered: 13/07/2000
Posts: 4180
Loc: Cambridge, England
|
Stick with your anchors, but at the end of the onclick do a "return false;". I don't know whether that works in all browsers though.
So:
<a href="#" onclick="doBlah(); return false;">click</a> The other nice thing about that, is that if you use "myothertab.html" instead of "#", the whole thing works for people who have Javascript switched off (while still getting the slicker, no-reload behaviour if JS is switched on). Peter
|
Top
|
|
|
|
#310240 - 16/05/2008 18:25
Re: How to do the tabs thingy in HTML?
[Re: andy]
|
carpal tunnel
Registered: 20/12/1999
Posts: 31600
Loc: Seattle, WA
|
<a href="#" onclick="doBlah(); return false;">click</a> Works perfectly on most of the browsers I care about, testing the other browsers now. Thank you! The other suggestions in this thread were all fantastic, and I'm sure they all would have worked, too. I chose that one for a few reasons not worth detailing here. Thanks everyone!
|
Top
|
|
|
|
#310247 - 17/05/2008 03:49
Re: How to do the tabs thingy in HTML?
[Re: tfabris]
|
carpal tunnel
Registered: 19/01/2002
Posts: 3584
Loc: Columbus, OH
|
I'm a little late to the game, but yes, return false(); is the proper way to do this as far as I know.
What you're telling it to do is run the code you've given it and then cancel the event. Returning true runs the code and then allows the event to proceed as normal.
_________________________
~ John
|
Top
|
|
|
|
#310286 - 18/05/2008 18:18
Re: How to do the tabs thingy in HTML?
[Re: JBjorgen]
|
carpal tunnel
Registered: 20/12/1999
Posts: 31600
Loc: Seattle, WA
|
Yep, I completely understand why it works, now that I see it in action. I just didn't know I could do that, let alone do it right there within the onclick statement in the HTML like that.
Maybe Javascript isn't so bad after all. :-)
|
Top
|
|
|
|
|
|