Help - Search - Members - Calendar
Full Version: TAB with CSS ?
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
asmith
Hey guys

Yahoo has a box with tabs "feature" "sports" "entertainment " ...

I was wondering can i achieve such thing with only CSS and no JS?

I want to make a tab like yahoo which by clicking on the tab , only the new tab contents load, but the whole page stay still.
Seaching for CSS TAB doesn't show something special, any idea ?

Thanks a lot

P.S : If it's not possible only with CSS, any good tutorial for making with JS ?
Darin McGrew
Clicking to change tabs is what makes it impossible to do with CSS. CSS can change things when the pointer hovers over something, but it can't handle mouse clicks.

For a nice JavaScript example, see ALA's Let Them Eat Cake. Note how all the content remains accessible when JavaScript is disabled/unavailable, but CSS is enabled.
Frederiek
Besides the "Let them eat cake" link, I also would like to add Stu Nicholl's Tabbed pages.
Darin McGrew
Note that Stu Nicholl's Tabbed pages example blocks access to much of the content when CSS is supported, but JavaScript is disabled/unavailable.
asmith
one thing, the Stu Nicholl's tab pages are inside the html file. they are all in one file , and their css display is none. then java turn them on.

does this thing do anything with google search results ?

i mean if i put a lot of information (that effects google search) in these tabs (inside the file, just like Stu Nicholl with display none) , does google still look at them ?
pandy
Google doesn't notice the tabs. Iyt doesn't do CSS and JS. As you said yourself, it's all in the same document. Google will read it.
asmith
Thanks a lot. Got what i wanted smile.gif
asmith
I've made 2 individual tabs on my page.
i duplicated all the stuff in css and in js file with different names.

the first one is working, but the second is not. i guss it is because onload in th js file. but don't know how can i correct it. ii upload them here :

http://www.7gardoon.com/2/tabbed_pages.html

(FF wants to save the file, dunno , but IE 6 open up the page)

How can i fix it?

Thanks a lot
Darin McGrew
Your server is responding with
CODE
HTTP/1.1 406 Not Acceptable
asmith
changed it :

http://www.dpxclan.com/2/tabbed_pages.html
Darin McGrew
There doesn't appear to be any way to access anything but the John Constable tab when CSS is enabled but JavaScript is disabled/unavailable.
asmith
in the tab js file, it is written :

onload = function() { ...

what has made me confused is, how can i tell the second tab to run its own function indiviually.

i tried something like :

onload = function2 () { ...

But still no success.
(sorry it is lack of js syntax knowledge)
Frederiek
The script calls onload, which implicitely means window.onload. You can't have this twice in this way. Hence the javascript error you get upon loading of the page, on line 35: can't find variable function2, and the second tabs not working.

You'll need to have a enough knowledge of javascript to make this work. I tried a little bit yesterday, but didn't find anything to make this work either; though surely there is a way, probably through another approach.

Why would you want to use the tabbed pages twice on a page in the first place?


asmith
They are 2 different tabs, i just copies the same one to show you in forum.

But the page will have 2 individual tabs. they must work separately.

still no success.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.