JavaScript Tabs - Create Tabbed Web Pages Easily

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register

17-Mar-09 00:00
This is a forum topic for discussing the article "JavaScript Tabs - Create Tabbed Web Pages Easily":

http://www.elated.com/articles/javascript-tabs/

Learn how to use JavaScript to create a tabbed Web page for holding lots of content. Full code included for copying and pasting into your website!
03-Sep-09 21:48
Thanks for the terrific script. Very helpful!

For some reason, I can't make the border disappear under the active tab. Seems like the border from the content part of the tab is there no matter what I do to the tab itself. Here's my css - any obvious stupid things I'm doing (or at least obvious to someone other than me??)

body {}

ul#tabs { list-style-type: none; margin: 0 0 0 0; }

ul#tabs li { display: inline; }

ul#tabs li a {border: 1px solid #000077;border-bottom: none;text-decoration:none; font-size:13px;font-family:Verdana,Arial,MS Sans Serif,sans-serif;font-weight:bold;color:#004999;background-color:#f1f0ee;padding: 0 5 5 5}

ul#tabs li a:hover {background-color: #F6F6CE;}

ul#tabs li a.selected { border-bottom: none;background-color: #F6F6CE;padding: 0 5 5 5}

div.tabContent {font-size:10px;font-family:Verdana,Arial,MS Sans Serif,sans-serif;font-weight:bold; color:#007777; background-color: #F6F6CE; height:60; border: 1px solid #000077; margin: 0 15 0 0; padding: 2 2 2 10;}

div.tabContent a {text-decoration:none;color:#000077;}

div.tabContent a:hover {text-decoration:none;color:#007777;}

div.tabContent.hide { display: none; }
04-Sep-09 00:29
Hi shochberg, and welcome!

It's all down to using very precise padding and positioning on the tabs so that the active tab obscures the border of the content div, so it's easy to mess up the CSS. The best bet is to go back to the original CSS, then modify the colours etc as required to meet your needs.

Try this CSS - I think it'll give you the look you need:

body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
ul#tabs li { display: inline; }
ul#tabs li a { color: #004999; background-color: #f1f0ee; border: 1px solid #000077; border-bottom: none; padding: 0.3em; text-decoration: none; }
ul#tabs li a:hover { background-color: #f6f6ce; } ul#tabs li a.selected { background-color: #f6f6ce; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
div.tabContent { border: 1px solid #000077; padding: 0.5em; color: #007777; background-color: #f6f6ce; }
div.tabContent a, div.tabContent a:hover { text-decoration:none; color:#000077; }
div.tabContent.hide { display: none; }

Hope that helps!
Matt

--
Matt Doyle, Elated
04-Sep-09 02:08
Thanks. I'll try it. This is really a fun script to learn some of this stuff with.

S
04-Sep-09 02:15
BTW, I stumbled onto the hint under Slow Tab Load while looking for a way to have 2 onload commands on the same page. This hint makes a HUGE difference in the look of the page when it loads that you might consider adding it into the original article. It always really looks sloppy when a page comes up and then everything jumps around for a while, and that hint not only allowed me to keep my existing onload script in place, it makes the menu look as planned immediately.

Again, thanks.

S
04-Sep-09 03:00
Yes, I keep meaning to add that hint (http://www.elated.com/forums/topic/3316/) to the article - it's on my to-do list.

Anyway, glad you like the script. If you have any other questions on it feel free to ask.

Cheers,
Matt

--
Matt Doyle, Elated
08-Sep-09 17:35
Matt

Many thanks for the script.
I have one question though, is there a way to call the tab from a URL?

ie. domain.com/page.html#about

Would open the "about" tab?

I thought the anchor links would automatically open the tab when called but they don't.
08-Sep-09 19:37
Use

document.location.hash to get the document fragment name from the URL, then use that to open the tab.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
09-Sep-09 11:39
Sorry to ask but I am one of those people who have avoided getting stuck into JavaScript, which I need to sort out.

I see

function getHash( url ) {
var hashPos = url.lastIndexOf ( '#' );
return url.substring( hashPos + 1 );
}

would this have to be modified?

My JS knowledge is zero and it has only been recently that I have found the need for it on a particular project, mainly IE css hacks. I have stuck with only CSS till now.

If someone can help me out with this function I'll buy them a beer.

For interest sake here is a screenshot of my tabs. Can send the CSS and tab images if anyone wants them. But the site will be up soon with commented code.

http://toshine.net/tabscreenshot.png
09-Sep-09 20:32
"Sorry to ask but I am one of those people who have avoided getting stuck into JavaScript"

Then why make it difficult??

document.location.hash WILL return #about from the example URI, with no need for any "indexOf" methods, or any other string slicing/manipulation.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
10-Sep-09 02:30
Bit of a misunderstanding here. That function is in the original script, and is used to extract the hash value from a link that has been clicked in the page (document.location.hash can't be used in that context, since it only extracts the hash from the main document URL).

@mashdot - try adding this at the end of init():


// If a hash was supplied in the page URL,
// display the corresponding tab (if found)
if ( document.location.hash ) showTab( document.location.hash.substring(1) );


Then modify the first 2 lines of showTab() as follows:


function showTab( selectedId ) {
if ( typeof selectedId != 'string' ) var selectedId = getHash( this.getAttribute('href') );


That should work I think...

[Edited by matt on 16-Sep-09 10:40]

--
Matt Doyle, Elated
10-Sep-09 15:13
Matt, thanks for your time.

Unfortunately it does not appear to have worked, unless I have made the amendments to script incorrectly.

http://toshine.net/tabscode.html
11-Sep-09 00:56
@mashdot: The code works for me. What's the URL of your tabs page?

--
Matt Doyle, Elated
14-Sep-09 11:42
Matt,

http://toshine.net/tabs/index.html

Using original CSS and new amended script. Not quite sure where I have gone wrong with the amendments?

e.g. http://toshine.net/tabs/#dolor does not work.
14-Sep-09 12:26
http://toshine.net/tabs/#dolor works on my browser (Firefox 3.5.3 Mac).

Works on Safari too.

Note that you have to visit the URL via a link, or copy/paste the URL into a new tab. If you just add the #dolor onto the existing page URL and press Return then the browser doesn't bother to reload the page. (If you then manually reload the page then it should work too.) You need to do the page (re)load in order to trigger the JS.

--
Matt Doyle, Elated
14-Sep-09 12:33
Yup, you are right. Sorry I should have checked that.

Also works in Conkeror (http://www.conkeror.org) which many JavaScript affectionados may be interested in. I am an Emacs fan and use it for the keybindings.

Many thanks for your help with this, I will be adding Elated.com to my "kudos" links.
15-Sep-09 09:04
Happy to help - and thanks for the offer of a link.

Conkeror looks interesting, I'm checking it out now!

Cheers,
Matt

--
Matt Doyle, Elated
12-Oct-09 21:30
This is a great tab solution!

However, I'm working on a web page that requires multiple sets of tabbed navigation on it and am having some difficulty. Essentially, I have a product page and I'd like to organize each product's About, Data, and More Info into tabs. Only the first product's tabs are working, all the others degrade.

I suspect that changing the CSS IDs to classes is part of the solution, but I'm woefully helpless at knowing where I would need to modify the JS to call on classes. Can someone point me at what to look for in the code?

Thanks
12-Oct-09 21:53
Take a look at my site at savepostage.com and see if that looks like what you are trying to accomplish. Maybe my code will help, which I'd be glad to send you. But what specific problems are you having?

S
13-Oct-09 18:26
And take a look at my code on http://www.modtalk.co.uk/article/c-and-s-design/dhtml-tabs/

(To copy the code use the "Click to switch code view" link)

demo is at -> http://www.modtalk.co.uk/_site/code/javascript/show-hide/

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
20-Oct-09 23:43
Hi.

I used the script and works perfectly on firefox but when I open the page on IE 7 it doesn't show the content of any tab unless I click on the tab menu. How can I fix it???

--
Kahl Binar
21-Oct-09 00:46
Hi Kahl,

Welcome to Elated!

Hmm, that's strange. The example at http://www.elated.com/res/File/articles/development/javascript/document-object-model/javascript-tabs/javascript-tabs.html works OK for me in IE7.

Can you please post the URL of your tabs page, and I'll take a look?

Cheers,
Matt

--
Matt Doyle, Elated
21-Oct-09 01:28
http://localhost/si22/?mod=product&ident=6&name=CAMARA&categoria=38&pid=13

Thank you for the help

--
Kahl Binar
21-Oct-09 02:48
Hi Kahl,

That address is on your PC (which of course I can't view!). You'll need to upload the page to the web somewhere so I can see it.

Or, you can "view source" in your browser, then copy & paste the code into your reply to this topic.

Cheers,
Matt

--
Matt Doyle, Elated
21-Oct-09 05:26
Ups I had both open and copy-pasted the wrong one

http://www.si22.com.ve/web/?mod=product&ident=6&name=CAMARA&categoria=38&pid=13

That's the one

--
Kahl Binar
22-Oct-09 22:33
Hey Kahl,

I can't see any tabs on that page. Did you mean to post a different page?

Cheers,
Matt

--
Matt Doyle, Elated
22-Oct-09 22:39
No, that's the address.

http://www.si22.com.ve/web/?mod=product&ident=6&name=CAMARA&categoria=38&pid=13

There goes again.

--
Kahl Binar
22-Oct-09 23:59
Hey Kahl,

Ah, I couldn't see the correct page because the forum sofware was inserting that ';' after the '&' in your URL. (I keep meaning to fix that bug!)

Anyway, the reason your first tab isn't displaying in your page is complex, and is to do with you using mootools. Basically mootools seems to be inserting various methods into the tab content div objects. All other browsers insert these at the end of the array, but IE7 for some reason inserts these at the beginning. This means that your "caracteristicas" div is no longer the first div in the list, which breaks the init() function.

The workaround is to explicitly test for your "caracteristicas" div, rather than relying on it being the first array element. Change:


// Assign onclick events to the tab links, and
// highlight the first tab
var i = 0;

for ( var id in tabLinks ) {
tabLinks[id].onclick = showTab;
tabLinks[id].onfocus = function() { this.blur() };
if ( i == 0 ) tabLinks[id].className = 'selected';
i++;
}

// Hide all content divs except the first
var i = 0;

for ( var id in contentDivs ) {
if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
i++;
}


to:


// Assign onclick events to the tab links, and
// highlight the first tab
var i = 0;

for ( var id in tabLinks ) {
tabLinks[id].onclick = showTab;
tabLinks[id].onfocus = function() { this.blur() };
if ( id == "caracteristicas" ) tabLinks[id].className = 'selected';
i++;
}

// Hide all content divs except the first
var i = 0;

for ( var id in contentDivs ) {
if ( id != "caracteristicas" ) contentDivs[id].className = 'tabContent hide';
i++;
}


BTW I recommend resaving your 'equipos.png' image as a jpeg. Currently it's 352KB. If you use jpeg you should be able to get it down to around 50KB.

Cheers,
Matt

--
Matt Doyle, Elated
23-Oct-09 04:17
Done.

Now works perfectly.

Your right about the image, I used it as the designer gave it to me without checking that.

Thanks a lot for the script, your help and pointers.

--
Kahl Binar
25-Oct-09 22:37
Great stuff Kahl. If you need any more help, please feel free to ask.

Cheers,
Matt

--
Matt Doyle, Elated
24-Nov-09 05:56
It took me 5 days to figure out the best/light/simple/perfect tabbed version.. and there you go!! I landed at the best place.

Firstly, thanks alot ELATED, for your help in tabbed JS menu system.

I was looking at the code and revolving in circles... on how to not ( have the default tab / content ) display until unless clicked on the tab.
+
Can it be possible to add (scrollTo() method) to the tabs simultaneously?? as, they have "#" anchor, it'd be a great help!!

cheers
venkat

--
knowledge is to share.. not to compare!!
www.c4di.org.uk
www.elated.com
24-Nov-09 11:11
I've managed to hide the default content now..!! the code to be tweaked in is:

// Assign onclick events to the tab links, and
// highlight the first tab
var i = 0;

for ( var id in tabLinks ) {
tabLinks[id].onclick = showTab;
tabLinks[id].onfocus = function() { this.blur() };
[b]if ( i == 0 ) tabLinks[id].className = '';
contentDivs[id].className = 'tabContent hide';
i++;[/b]
}
bolded part is been tweaked..!!

Now, only task left is, when clicked on tabs, a simultaneous scroll to the tabContent part!! Cuz, my links are exactly at the middle of the page!! (big header... I know!!!)

wish me luck and lend me a snippet of code if someone can!!

Cheers...
Venkat

--
knowledge is to share.. not to compare!!
www.c4di.org.uk
www.elated.com
24-Nov-09 19:38
Hi Venkat, and welcome!

With the scrollTo() thing, it's a bit hard to see what you mean without actually seeing your page. Surely your tab content should be directly below the tabs? Can you upload your page and post the URL?

Anyway, you can use window.scrollTo() to scroll the browser window to a specific (x,y) point in the page:

https://developer.mozilla.org/En/DOM/Window.scrollTo

You can use code like this to get the top-left position of a particular element object:


function getCoord(obj, offsetLeft, offsetTop){
var orig = obj;
var left = 0;
var top = 0;
if(offsetLeft) left = offsetLeft;
if(offsetTop) top = offsetTop;
if(obj.offsetParent){
left += obj.offsetLeft;
top += obj.offsetTop;
while (obj = obj.offsetParent) {
left += (obj.offsetLeft-obj.scrollLeft+obj.clientLeft);
top += (obj.offsetTop-obj.scrollTop+obj.clientTop);
}
}
return {left:left, top:top, width: orig.offsetWidth, height: orig.offsetHeight};
}


(See http://www.elated.com/forums/topic/4748/ for usage)

Failing that, you could use the jQuery ScrollTo plugin to scroll to a specific element: http://flesler.blogspot.com/2007/10/jqueryscrollto.html

Hope that helps! Let us know if you need any more info.

Cheers,
Matt

--
Matt Doyle, Elated
25-Nov-09 05:48
Heyy Matt, thanks for getting back! Am sorry for a vague doubt without an interpretation/example!
Links below!!

http://www.ead09.org.uk/tabs.htm

In this above url/link, i've created a header and tabs... am looking forward to add scrollTo effect to those tabs.

when clicked on the tabs, am even trying to achieve a scroll down effect... revealing the tabContent divs + mentioning the viewers that content is in the bottom!!

a good live example: www.madebysofa.com

Thats what am trying to achieve... i mean, the scrolldown effect (succeeded in hiding the content though)!!

cheers
Venkat

--
knowledge is to share.. not to compare!!
www.c4di.org.uk
www.elated.com
25-Nov-09 17:15
Hi Venkat,

I understand what you want to do now!

Here's a complete example based on your original page:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><!-- Source is http://www.ead09.org.uk/tabs.htm -->
<head>
<!-- This page is copyright Elated Communications Ltd. (www.elated.com) -->

<title>JavaScript tabs example</title>

<style type="text/css">
body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
div#wrapper { margin:0 auto; width:960px;}
div#header { }
ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
ul#tabs li { display: inline; }
ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; font-size: 32px; border-bottom: none; padding: 0.3em; text-decoration: none; }
ul#tabs li a:hover { background-color: #f1f0ee; }
ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; }
div.tabContent.hide { display: none; }
</style>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.scrollTo-1.4.2-min.js'></script>

<script type="text/javascript">
//<![CDATA[

var tabLinks = new Array();
var contentDivs = new Array();

function init() {

// Grab the tab links and content divs from the page
var tabListItems = document.getElementById('tabs').childNodes;
for ( var i = 0; i < tabListItems.length; i++ ) {
if ( tabListItems[i].nodeName == "LI" ) {
var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
var id = getHash( tabLink.getAttribute('href') );
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById( id );
}
}

// Assign onclick events to the tab links, and
// highlight the first tab
var i = 0;

for ( var id in tabLinks ) {
tabLinks[id].onclick = showTab;
tabLinks[id].onfocus = function() { this.blur() };
if ( i == 0 ) tabLinks[id].className = ' ';contentDivs[id].className = 'tabContent hide';
i++;
}

// Hide all content divs except the first
var i = 0;

for ( var id in contentDivs ) {
if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
i++;
}
}

function showTab() {
var selectedId = getHash( this.getAttribute('href') );

// Highlight the selected tab, and dim all others.
// Also show the selected content div, and hide all others.
for ( var id in contentDivs ) {
if ( id == selectedId ) {
tabLinks[id].className = 'selected';
contentDivs[id].className = 'tabContent';
} else {
tabLinks[id].className = '';
contentDivs[id].className = 'tabContent hide';
}
}

// Stop the browser following the link
return false;
}

function getFirstChildWithTagName( element, tagName ) {
for ( var i = 0; i < element.childNodes.length; i++ ) {
if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
}
}

function getHash( url ) {
var hashPos = url.lastIndexOf ( '#' );
return url.substring( hashPos + 1 );
}

jQuery(function( $ ){

$('ul#tabs').click( function() {
$.scrollTo( 'div#tabContentContainer', 600 );
} );
});


//]]>
</script>



</head>
<body onload="init()">
<div id="wrapper">
<div id="header">
<a href="tabs.htm"><img src="head.jpg" border="none" width="960px" height="479px" alt="HEADER"/></a>
</div>

<h1>JavaScript tabs example</h1>

<ul id="tabs">
<li><a href="#about">About JavaScript tabs</a></li>
<li><a href="#advantages">Advantages of tabs</a></li>
<li><a href="#usage">Using tabs</a></li>
</ul>

<div id="tabContentContainer">

<div class="tabContent" id="about">
<h2>About JavaScript tabs</h2>
<div>
<p>JavaScript tabs partition your Web page content into tabbed sections. Only one section at a time is visible.</p>
<p>The code is written in such a way that the page degrades gracefully in browsers that don't support JavaScript or CSS.</p>
</div>

</div>

<div class="tabContent" id="advantages">
<h2>Advantages of tabs</h2>
<div>
<p>JavaScript tabs are great if your Web page contains a large amount of content.</p>
<p>They're also good for things like multi-step Web forms.</p>
</div>

</div>

<div class="tabContent" id="usage">
<h2>Using tabs</h2>
<div>
<p>Click a tab to view the tab's content. Using tabs couldn't be easier!</p>
</div>
</div>

</div>

</div>


</body>
</html>


It uses jQuery and the ScrollTo plugin to scroll to the tab content container whenever a tab is clicked on.

You can download jquery.scrollTo-1.4.2-min.js from:

http://code.google.com/p/flesler-plugins/downloads/list

As you can see, it's only a few extra lines of JS and a small change to the markup.

Does that help?

Cheers,
Matt

--
Matt Doyle, Elated
26-Nov-09 05:43
Matt...!! Thanks alot!! that worked like a charm!

your help made me stuck up with elated.com!!!

keep watching for back-links from sites designed by me.. + will contribute my knowledge to people in this forums!!

Am good at web hosting, networking, web development (php, cms's- joomla, wordpress) and alot of css!!

Thanks for your help again and lets keep in touch!!



Venkat

--
knowledge is to share.. not to compare!!
www.c4di.org.uk
www.elated.com
26-Nov-09 18:33
Hi Venkat,

Great stuff - I'm glad it solved your problem. jQuery makes things like that really easy to do.

We'd really appreciate back-links, as well as help on the forums - thanks! I know next to nothing about CMSs like Joomla. Your contributions would be really useful.

Cheers!
Matt

--
Matt Doyle, Elated
30-Nov-09 08:01
matt.. I'd be very happy to grab the chance in solving some doubts to the extent of my knowledge.. Will start contributions within forms too!!

Nice time..

venkat

--
knowledge is to share.. not to compare!!
www.c4di.org.uk
www.elated.com
09-Dec-09 11:12
hi matt, hope things are well. is it possible to add ajax function to one of the tabs?? I mean, for "usage" tab, i'd like to give some ajax property, so that i can pull blog contents into this div!! my blog at the moment is residing in the subfolder (blog/)..

If its possible.. please help!

Cheers

PS:, the code for my index.html file can be found in the above(latest) comment by matt..

[Edited by desibird on 09-Dec-09 11:32]

--
knowledge is to share.. not to compare!!
www.c4di.org.uk
www.elated.com
09-Dec-09 20:09
Hi desibird,

It sounds like an iframe might do the trick:


<div class="tabContent" id="blog">
<iframe src="blog/"> </iframe>
</div>


Does that work?

Matt

--
Matt Doyle, Elated
10-Dec-09 03:56
<iframe> tags are not a good help matt!!
i've also posted a new topic: http://www.elated.com/forums/topic/4832/ which pulls newest wordpress post and places in the necessary div!!

but am looking to drag whole blog into two divs..

where, content div with the content and the side-bar div with paginated archives!!

managed to pull them onto the div's too. but, when clicked, they jump into wordpress site rather staying in the same page!!

--
knowledge is to share.. not to compare!!
www.c4di.org.uk
www.elated.com
10-Dec-09 20:49
@desibird: iframes are an easy way to display another page within a page. However I didn't know you were using WordPress and ran your site using PHP! It's certainly more elegant to include the content server-side, as you have done.

Sounds like you may need to use str_replace() or preg_replace() on your link URLs to repoint them to the correct URLs.

Cheers,
Matt

--
Matt Doyle, Elated
15-Dec-09 06:19
matt,
I managed to pull the stuff from wordpress and place it in an external html file + the possibility of reading posts in the same page has also been done.

I'll create a new post within the elated forums and write a neat description centered post.

I'll leave all the files related to achieve this website: www.c4di.org.uk.

Its an single page website (with two websites embedded in a single page).

All i've achieved is through this topic: javascript tabs.

Coming to wordpress: i've managed to change the permalinks(urls) to the present site.

Problem: when clicked on any of the archive posts topics, the site is hiding all divs again and to view the related post content, we need to click again on tubelog. is there a way to stop this behaviour??

Test link is follows: www.c4di.org.uk/test.php

--
knowledge is to share.. not to compare!!
www.c4di.org.uk
www.elated.com
15-Dec-09 16:21
@desibird: Love that shark image on the homepage

www.c4di.org.uk/test.php gives a 404 error for me...

Matt

--
Matt Doyle, Elated
16-Dec-09 05:14
@matt: I think, you're still watching old website.

It might take a day or two!

--
knowledge is to share.. not to compare!!
www.c4di.org.uk
www.elated.com
16-Dec-09 10:14
@matt: Please do watch www.c4di.org.uk

and within the blog(tubelog), when clicked on archives, its going to home page. until unless we click on tube-log, the archived post is not viewed!

help appreciated.

Its just: c4di.org.uk

Cheers

--
knowledge is to share.. not to compare!!
www.c4di.org.uk
www.elated.com
17-Dec-09 19:31
@desibird: That is expected behaviour. Your're clicking a link to a new page, so that new page is opening in your browser.

If you want to keep the linked content in the same page then you'll need to use an iframe, or pull the linked content into the tab content div using Ajax.

I think you've also broken your WordPress index.php file since it seems to be loading your site homepage, rather than the blog post. I'd recommend moving your WordPress blog to a subfolder (e.g. http://www.c4di.org.uk/blog/index.php) or a subdomain (e.g. http://blog.c4di.org.uk/index.php).

Cheers,
Matt

--
Matt Doyle, Elated
18-Dec-09 04:21
Thats the main reason why, i've requested for an ajax property to one of the tabs!

I'm searching for adding ajax property to tubelog (so that, there would not be a problem to re-load the homepage!!)

iframe is not a great help in this matter!

--
knowledge is to share.. not to compare!!
www.c4di.org.uk
www.elated.com
18-Dec-09 04:27
@matt: if thats a good idea, should I be lokking at jquery tabbed version? or add an ajax property to fetch external html

--
knowledge is to share.. not to compare!!
www.c4di.org.uk
www.elated.com
18-Dec-09 22:14
@desibird: Pulling the latest blog posts into a tab on the homepage is one thing, but it sounds like you want your whole blog to be inside that tubelog tab, is that right? I wouldn't recommend doing this.

The tabs script is designed to be used within a single page to display various sections of content without having a long page. It's not designed to display whole sites or blogs that would ordinarily be on separate pages.

Apart from the effort involved in converting a whole WordPress front-end to work with Ajax, you'll come up with issues such as accessibility, problems with search engine crawlers, content that can't be bookmarked, a site that's inaccessible to non-JavaScript browsers, and breaking the browser Back button, amongst others. The same kind of issues that Flash-only sites have.

Not wishing to put you off because your site looks really nice with the tabs, but I'm just making sure you're aware of what you'd be getting into.

Cheers,
Matt

--
Matt Doyle, Elated
04-Feb-10 06:18
Morning,

I discovered yesterday that I have a problem with the inclusion of this script on pages which do not have tabs. As you can imagine it is easier to include the script in the header rather then per page, and I do not really want to change this.

The issue is caused by a 'null' value on pages which do not have the HTML element.


var tabListItems = document.getElementById('tabs').childNodes;


Is there a way to exit the script if "tabListItems" returns 'null' ?

Many thanks
07-Feb-10 16:04
Welcome back mashdot!

This might work:


function init() {

// Grab the tab links and content divs from the page
var tabListItems = document.getElementById('tabs').childNodes;
if ( !tabListItems ) return;
...


Haven't tested it though.

Cheers,
Matt

--
Matt Doyle, Elated
08-Feb-10 05:48
Great article, I'm using it now for a number of projects.

One thing was I was wondering was, can you randomise the tab that is visible?

For instance, have tab 3 visible when the user visits the page, then maybe tab 2 being visible when another user visits the page?

Many thanks
09-Feb-10 19:47
@Duncan101: Welcome to Elated.

This modification to the init() function will display a random tab each time the page loads (change the "3" to your actual number of tabs):


function init() {

// Grab the tab links and content divs from the page
var tabListItems = document.getElementById('tabs').childNodes;
for ( var i = 0; i < tabListItems.length; i++ ) {
if ( tabListItems[i].nodeName == "LI" ) {
var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
var id = getHash( tabLink.getAttribute('href') );
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById( id );
}
}

var randomTab = Math.floor( Math.random() * 3 );

// Assign onclick events to the tab links, and
// highlight the random tab
var i = 0;

for ( var id in tabLinks ) {
tabLinks[id].onclick = showTab;
tabLinks[id].onfocus = function() { this.blur() };
if ( i == randomTab ) tabLinks[id].className = 'selected';
i++;
}

// Hide all content divs except the random div
var i = 0;

for ( var id in contentDivs ) {
if ( i != randomTab ) contentDivs[id].className = 'tabContent hide';
i++;
}
}


Hope that helps!
Matt

--
Matt Doyle, Elated
10-Feb-10 08:25
Matt,

Yours didn't work out, but after playing around...


// Grab the tab links and content divs from the page
if(!document.getElementById('tabs')) return;
var tabListItems = document.getElementById('tabs').childNodes;
...


This now works, which allows me to include the script on pages which may not have the element, and does not through any errors.

Also this was brilliant help!... "Console2" https://addons.mozilla.org/en-US/firefox/addon/1815

Thanks again.
13-Feb-10 02:34
@mashdot: Glad you got it working!

Yeah, Console2 is nice for JS debugging, as is Firebug: http://getfirebug.com/

Cheers,
Matt

--
Matt Doyle, Elated
25-Feb-10 07:19
Excellent, that was ideal!

Many thanks!
28-Feb-10 19:29
@Duncan101: You're welcome.

Matt

--
Matt Doyle, Elated
09-Mar-10 11:53
using your instructions for tabbed web pages - my skills are pretty limited to copy & pasting code into the appropriate places and adding content...have done all I know how to get this working...all
that seems to be left is that the content is not staying "hidden" with the underlying tabs. Any help you can give me GREATLY appreciated.
www.invasiveplants.ab.ca/AIPISurveyResults.htm
10-Mar-10 02:26
Hi horses, welcome to Elated.

A large part of the problem is your invalid markup. JavaScript works much better with correct markup:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.invasiveplants.ab.ca%2FAIPISurveyResults.htm&charset=%28detect+automatically%29&doctype=Inline&group=0

Specifically, this stray, unclosed font tag inside your "tabs" ul is probably causing problems:


<font color="#42454A">


I would also remove the spans around your tab links, as I suspect this is confusing the JavaScript (which expects to see a link as the first thing inside the li tag).

Hope that helps! Let us know if that fixes the problem for you.

Cheers,
Matt

--
Matt Doyle, Elated
18-Mar-10 21:43
thanks for your help - didn't think of the validator - but it's still not hiding unselected tab content. I tried removing the spans (assuming I removed them from the location you meant) but nothing worked then.
19-Mar-10 02:01
Hi again horses!

As I say, there are lots of errors in your markup, any one of which could be preventing the JavaScript from working. I'm guessing that you've edited the page using some sort of Microsoft editor (Word? FrontPage?), which has introduced a large number of errors and unnecessary markup (such as the deprecated 'font' tags) in the page.

In fact the markup is so broken that I don't think the browser can even recognize the <body> element, which means it can't run the onload event. You could hack around this by adding the following line just before the closing </body> tag at the end of the page:


<script>init();</script>


Additionally you should tidy up your 'tabs' list, which contains extraneous elements and invalid markup:


<ul id="tabs" style="list-style-type: none; margin-left: 0; margin-right: 0; margin-top: 30px; margin-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0.3em">
<li style="display: inline">
<b>
<a href="#Academic" style="text-decoration: none">
<style="color: #42454A; background-color: #DEDBDE">Academic and Research</a></li>
<li style="display: inline">
<a href="#Government" style="text-decoration: none">
<style="color: #42454A; background-color: #DEDBDE; font-weight:700">Government</a></li>
<li style="display: inline">
<a href="#Individual" style="text-decoration: none">
<style="color: #42454A; background-color: #DEDBDE; font-weight:700">Individual</a></li>
<li style="display: inline">
<a href="#Other" style="text-decoration: none">
<style="color: #42454A; background-color: #DEDBDE; font-weight:700">Other</a></li>

</ul>


For example:


<ul id="tabs">
<li><a href="#Academic">Academic and Research</a></li>
<li><a href="#Government">Government</a></li>
<li><a href="#Individual">Individual</a></li>
<li><a href="#Other">Other</a></li>
</ul>


If you do these things then there's a reasonable chance that the JavaScript will run and pick up the tab links. However you'll really need to go through the page and fix all those errors in the markup, otherwise you're likely to encounter more problems further down the line.

[Edited by matt on 19-Mar-10 02:02]

--
Matt Doyle, Elated
22-Mar-10 10:17
Hi

Firstly...loving the script, so easy so lightweight! Thanks.

Could I request for some help though....

1)How could I link to a tab from within another 'tabContent', just within a parargraph link.

2)Is it possible to style the first tab differently to the others...i.e. every other tab to be 'selected' is fine but could the first tab when ever highlighted have a class of '1st-selected' so i can apply a different background....tried to do it myself, when page loaded it was fine, when click to another tab and back to the 1st just gave class of 'selected'

Thanks muchly

djake1234
23-Mar-10 17:49
Hi djake1234,

Thanks for the compliment.

1) You'll need to modify the showTab() function to accept an optional link object, as follows:


function showTab(obj) {
var selectedId = (obj && typeof obj.href != "undefined") ? getHash(obj.href) : getHash( this.getAttribute('href') );

// Highlight the selected tab, and dim all others.
// Also show the selected content div, and hide all others.
for ( var id in contentDivs ) {
if ( id == selectedId ) {
tabLinks[id].className = 'selected';
contentDivs[id].className = 'tabContent';
} else {
tabLinks[id].className = '';
contentDivs[id].className = 'tabContent hide';
}
}

// Stop the browser following the link
return false;
}


Then you can create a link to a tab within regular content like this:


<a href="#advantages" onclick="return showTab(this)">link text</a>


2) Use the CSS :first-child pseudo-class to select the first element in a row of elements:

http://www.w3schools.com/css/pr_pseudo_first-child.asp

Hope that helps!
Matt

--
Matt Doyle, Elated
29-Mar-10 10:13
Hello again.....

Thanks for the help.....much appreciated.

is it possible to have a choosen tab open on page load.....I can't use querystring (CMS), so I suppose it have to be e.g. "#1"

Also, how about fading tab transition? :- )

thanks again, this really is the best script out there!
30-Mar-10 03:59
Hi djake1234,

Thanks for the compliment.

I covered opening a particular tab on page load earlier in the topic:

http://www.elated.com/forums/topic/4717/#post18005

Transitions are best done using a library such as jQuery - see http://api.jquery.com/category/effects/

Cheers,
Matt

--
Matt Doyle, Elated
14-Apr-10 10:52
Hi. I am having some difficulty when my page loads. I have the javascript and style sheets in a linked file, but maybe you can tell what's going on by seeing the page in action. For some reason when the page loads, all of the div content panels show up and then hide. How do I make this stop?

Thanks,
Elise
http://164.109.50.192/index_tabstest.html
20-Apr-10 06:17
Hi Elise,

Try this solution here: http://www.elated.com/forums/topic/3316/

Does that help?

--
Matt Doyle, Elated
21-Apr-10 14:33
Hello!

I just managed to modify your great tab script to fit my project. This really is a wonderfully easy to understand tutorial. You saved me a lot of time and I still learned so much.

Well, I still got some difficulty with implementing some important features.
my example: http://lukas_eibensteiner.public1.linz.at/tabs_example.html

1. I want to create the basic template for a user interface panel on my website using tabs. As I will be putting more than one set of tabs on each page there will be errors because of the variables. Is there any workaround for this problem?

2. Maybe it would be possible to mark some tabs as "disabled" (like tab 4 in my example) until a button is clicked or something like this.

Thanks again for this awesome tutorial!
elfpixel

[Edited by elfpixel on 21-Apr-10 14:49]
24-Apr-10 23:05
Hey elfpixel:

1. Looks like you've already solved this by passing a div ID to the init() function, yes?

2. Maybe use something like:


onclick="document.getElementById('tabId').className = '';"


?

Nice looking tabs btw

--
Matt Doyle, Elated
30-Apr-10 17:20
Hi matt!
Thanks for your help, but I'm afraid that's still not all.

1. If I put 2 sets of my modified tabs onto one page none of them is working correctly. Maybe it's because of the arrays. I tried to solve it but I'm probably not yet skilled enough.

2. Of course this will change the appearence of the tab link, but it would still be clickable. So unless there is a CSS rule for disableing links, it won't work that way.


Thanks for the compliment!
01-May-10 18:53
@elfpixel:

1. It's quite a big job - you need to rewrite most of the JavaScript to store multiple sets of tabs in multiple arrays. Doable, but fiddly. Here's a working example based on my original script:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- This page is copyright Elated Communications Ltd. (www.elated.com) -->

<title>JavaScript tabs example</title>

<style type="text/css">
body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
ul.tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
ul.tabs li { display: inline; }
ul.tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
ul.tabs li a:hover { background-color: #f1f0ee; }
ul.tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; }
div.tabContent.hide { display: none; }
</style>

<script type="text/javascript">
//<![CDATA[

var tabLinks = new Array();
var contentDivs = new Array();

function init(tabsID) {
tabLinks[tabsID] = new Array();
contentDivs[tabsID] = new Array();

// Grab the tab links and content divs from the page
var tabListItems = document.getElementById(tabsID).childNodes;
for ( var i = 0; i < tabListItems.length; i++ ) {
if ( tabListItems[i].nodeName == "LI" ) {
var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
var id = getHash( tabLink.getAttribute('href') );
tabLinks[tabsID][id] = tabLink;
contentDivs[tabsID][id] = document.getElementById( id );
}
}

// Assign onclick events to the tab links, and
// highlight the first tab
var i = 0;

for ( var id in tabLinks[tabsID] ) {
tabLinks[tabsID][id].onclick = showTab;
tabLinks[tabsID][id].onfocus = function() { this.blur() };
if ( i == 0 ) tabLinks[tabsID][id].className = 'selected';
i++;
}

// Hide all content divs except the first
var i = 0;

for ( var id in contentDivs[tabsID] ) {
if ( i != 0 ) contentDivs[tabsID][id].className = 'tabContent hide';
i++;
}
}

function showTab(obj) {
var selectedId = (obj && typeof obj.href != "undefined") ? getHash(obj.href) : getHash( this.getAttribute('href') );
var selectedId = getHash( this.getAttribute('href') );

// Find the set of tabs that this tab is in
outer:
for ( var tabsID in tabLinks ) {
for ( var id in tabLinks[tabsID] ) {
if ( id == selectedId ) break outer;
}
}

// Highlight the selected tab, and dim all others.
// Also show the selected content div, and hide all others.
for ( var id in contentDivs[tabsID] ) {
if ( id == selectedId ) {
tabLinks[tabsID][id].className = 'selected';
contentDivs[tabsID][id].className = 'tabContent';
} else {
if ( typeof tabLinks[tabsID][id] != "undefined" ) {
tabLinks[tabsID][id].className = '';
contentDivs[tabsID][id].className = 'tabContent hide';
}
}
}

// Stop the browser following the link
return false;
}

function getFirstChildWithTagName( element, tagName ) {
for ( var i = 0; i < element.childNodes.length; i++ ) {
if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
}
}

function getHash( url ) {
var hashPos = url.lastIndexOf ( '#' );
return url.substring( hashPos + 1 );
}

//]]>
</script>
</head>
<body>
<h1>JavaScript tabs example</h1>

<ul class="tabs" id="tabs1">
<li><a href="#about1">About JavaScript tabs</a></li>
<li><a href="#advantages1">Advantages of tabs</a></li>
<li><a href="#usage1">Using tabs</a></li>
</ul>

<div class="tabContent" id="about1">
<h2>About JavaScript tabs</h2>
<div>
<p>JavaScript tabs partition your Web page content into tabbed sections. Only one section at a time is visible.</p>
<p>The code is written in such a way that the page degrades gracefully in browsers that don't support JavaScript or CSS.</p>
</div>
</div>

<div class="tabContent" id="advantages1">
<h2>Advantages of tabs</h2>
<div>
<p>JavaScript tabs are great if your Web page contains a large amount of content.</p>
<p>They're also good for things like multi-step Web forms.</p>
</div>
</div>

<div class="tabContent" id="usage1">
<h2>Using tabs</h2>
<div>
<p>Click a tab to view the tab's content. Using tabs couldn't be easier!</p>
</div>
</div>


<ul class="tabs" id="tabs2">
<li><a href="#about2">About JavaScript tabs</a></li>
<li><a href="#advantages2">Advantages of tabs</a></li>
<li><a href="#usage2">Using tabs</a></li>
</ul>

<div class="tabContent" id="about2">
<h2>About JavaScript tabs</h2>
<div>
<p>JavaScript tabs partition your Web page content into tabbed sections. Only one section at a time is visible.</p>
<p>The code is written in such a way that the page degrades gracefully in browsers that don't support JavaScript or CSS.</p>
</div>
</div>

<div class="tabContent" id="advantages2">
<h2>Advantages of tabs</h2>
<div>
<p>JavaScript tabs are great if your Web page contains a large amount of content.</p>
<p>They're also good for things like multi-step Web forms.</p>
</div>
</div>

<div class="tabContent" id="usage2">
<h2>Using tabs</h2>
<div>
<p>Click a tab to view the tab's content. Using tabs couldn't be easier!</p>
</div>
</div>


<script type="text/javascript">
init('tabs1');
init('tabs2');
</script>


</body>
</html>


2. You could use the JavaScript DOM functions to remove the 'a' element from around the text when it's disabled (and add the link back in afterwards): http://www.elated.com/articles/changing-page-elements-with-the-dom/

Hope that helps!

--
Matt Doyle, Elated
02-May-10 04:55
Wow, thank you so much for the great support, your patience and all the time and effort you put into this!

1. It's working perfectly! In my opinion this is even more useful than the original code. You should definitley consider adding this to the tutorial's page.

There's just one more problem. Linking to a tab within another tab's content does not seem to work anymore.

<a href="#content3" onclick="return showTab(this)">link to tab 3</a>

It must have got to do with the new showTab() function. I tried fixing it myself but failed again.

2. Thanks for the link, writing the script myself won't be too hard for me now.
05-May-10 06:54
This is a great script Matt, it's really light and works great, by far the best I've come across. I like the modification to make the first tab random too.

I have run into a problem though when using it in IE6 & IE7 in conjunction with my lightbox javascript. It just prevents the automatic loading of the first tab and it hides them all.

You can see this at http://2010s.pipeten.co.uk/temp.html

It works perfectly in all browsers apart from IE6 & IE7 however If I take out the link to my /prototype.js file it works in IE6 & IE7 perfectly.

I have tried some of your different workarounds above but none seemed to fix this issue. Do you have any idea what might be causing the conflict between the two .js files? I'd really appreciate it if you could take a quick look for me.
07-May-10 01:58
@elfpixel: There's an error in that code I posted. Remove this line and it should work:


var selectedId = getHash( this.getAttribute('href') );


--
Matt Doyle, Elated
07-May-10 02:46
@octane: Absolutely no idea I'm afraid. I don't know Prototype that well. IE6 isn't throwing errors so I'm guessing that somehow the tabs JS is failing to show the relevant tab. (It's obviously successfully hiding the other one.)

Things to perhaps try:

1) Change the order of your JS includes? This might stop Prototype breaking the tabs JS:


<script type="text/javascript" src="/prototype.js"></script>
<script type="text/javascript" src="/lightbox.js"></script>
<script type="text/javascript" src="/tabs.js"></script>


2) Rather than calling init() in the body onload, try placing this just before the closing </body> tag instead:


<script type="text/javascript">init();</script>


Does that help?

--
Matt Doyle, Elated
07-May-10 09:54
Thanks for the reply Matt, I've tried both of those and it didn't help unfortunately. Thanks for taking a look though, it is appreciated.
09-May-10 18:58
Hi again

I am struggling a little to get this working the way I would like it to. Please help...I know you already have, I really appreciate it!

I would like to get this script working with the functionality to load a tab from a link within another tab and to be able to load a specific tab on page load (#tab3). I have scoured the list of questions and made all the changes, but can't get tab onload to work with link from other tab, one breaks the other.

Also, is there any reason why this would break the script another javascript function I want to use (http://css-tricks.com/moving-boxes/). Makes the boxes stack, not float left and appear inline.

Thanks again
10-May-10 21:34
Oh, and just to add to the previous post....I am using a CMS, so i can't use the querystring (i.e. /?tab=tab1) but I can use #tab1 in the URL

thanks
18-May-10 04:32
@djake1234:
"I would like to get this script working with the functionality to load a tab from a link within another tab and to be able to load a specific tab on page load (#tab3)."

The code I gave you earlier should do this:

http://www.elated.com/forums/topic/4717/#post18939
http://www.elated.com/forums/topic/4717/#post18005

--
Matt Doyle, Elated
22-May-10 21:24
@Matt

Sorry to keep going on about this...

I can't seem to get it working. I can get the 'open a tab from a same page' function working, but not load a dprcific tab on page load working. When I try to implement your reccomended code, both don't work......and I really need them both together if possible.

Could you combine the javascript just so I know its being done right.

Just to re-iterate, could they both to work together?

Again I'm sorry to rabbiting on about it, just getting desperate, launch is next week.

Thanks
24-May-10 02:49
@djake1234: I think we'll need to see your page to help further. Can you post the URL?

--
Matt Doyle, Elated
24-May-10 03:04
Thanks again for getting back to me.

I'm afraid i can't show you. Its in development and therefore currently has no url.

As well as that, the new brand launch is hush hush, I couldn't show you if I wanted...not that you would do anything

Sorry
31-May-10 05:08
By the way, browsers are starting to get to the point where you can now do tabs with just CSS - no JavaScript required. Yay!

Here's a good tut on this:

http://htmlrockstars.com/blog/using-css-to-create-a-tabbed-content-area-no-js-required/

--
Matt Doyle, Elated
31-May-10 17:47
Matt,

Would you happen to have input on creating "Rounded Tabs" using your amazing example?

--
Live your dreams!
03-Jun-10 04:21
Hi Carla,

The easiest way to create tabs with rounded corners is to use the CSS3 border-radius property. I covered this in our newsletter ( http://www.elated.com/newsletter/ ) a while back - here's what I wrote:

-----

1. Creating rounded corners with border-radius

Rounded borders around page elements have long been popular amongst web designers, but traditionally they're a pain to create. First you have to create the effect in Photoshop, then you have to slice up multiple background images for each element.

CSS3 promises to end all this hassle with the lovely border-radius property. This lets you create a border with rounded corners, and specify the radius of the corner curves. For example:


.mybox { border: 5px solid red; border-radius: 10px; }



At the time of writing, only Opera 10.5 supports border-radius as-is. Mozilla and WebKit browsers have their own versions (-moz-border-radius and -webkit-border-radius). So to get it to work in Opera, Firefox, Safari and Chrome you need to write:


.mybox { border: 5px solid red; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }


Incidentally, you can also specify a radius for each corner individually, although sadly the syntax is completely different for each browser engine. (Can't these people agree on anything!) Here's how to set a rounded border just for the top right corner of an element:


.mybox { border: 5px solid red; border-top-right-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; }


...

4. Getting it all working in IE

So now we come to the elephant in the room: Internet Explorer! How can we use these lovely CSS3 effects in this dear old browser? First of all, the good news is that IE9 will _probably_ support all these properties natively. For older versions, though, we'll need to resort to a bit of JavaScript cunning. Fortunately there's a great script out there that does all the hard work for us:

http://fetchak.com/ie-css3/

To use it, download the script and save it in the same folder as your Web page, then add the following property to the same selector(s) that use the CSS3 properties:


behavior: url(ie-css3.htc);


For example, here's how to create fully cross-browser rounded corners that work in Firefox, Safari, Chrome, Opera, and IE 6, 7 and 8:


.mybox { background: #fff; border: 5px solid red; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; behavior: url(ie-css3.htc); }


Have fun!

--
Matt Doyle, Elated
15-Jun-10 10:25
I have this working with one slight qwirk.

I can set a link within another page to go to a page that has tabs and have a specified tab open when the user arrives. That's cool! If I link to the tabbed page without a specific tab in the href code the page loads perefectly and I see the top of my page.

However when I specify a tab within the link (example: /folder/tabbed_page_name.aspx#tabID ) the page loads but is positioned down the page depending on which tab I specify - so the user does not see the top of the page. They are already scrolled down a bit. Is there a simple way to address this so that the page loads properly (not scolled down) but with the specified tab open?

Thanks!
17-Jun-10 07:20
OK - In case anyone else has been haveing the same issues as me - I found a workable solution.

My pages are built using aspx masters. I placed a topofpage anchor tag at the top inside the master like this:


<a name="topofpage"></a>


I have the init placed after my last div:


<script type="text/javascript">
init();
</script>


I simply modified this last piece of code to include window.location.hash = "topofpage" like this:


<script type="text/javascript">
init();
window.location.hash = "topofpage"
</script>


Now when the user clicks on a link that specifies a tab on the page, they arrive at the page with the proper tab opened and they are positioned at the top of the page.
20-Jun-10 21:19
@bgood: Thanks for posting your solution - glad you got it working.

--
Matt Doyle, Elated
21-Jun-10 08:30
Thanks for a great tutorial. My problem is with internet explorer. When I run the script in ie, I have to click the information bar for it to run. Firefox works fine. Any help would be appreciated!
23-Jun-10 08:02
First, great tutorial. It really helped a lot and it was just what I was looking for. My problem though is that this seems to be for a whole web page and I want to insert tabbed content on to an existing web page and the Javascript won't work that way. Any suggestions on how to modify the javascript to allow this to work with only the content of the page and not the whole page itself? Any help or additional tutorials you could suggest would be greatly appreciated.
25-Jun-10 04:07
@abyteman: Can you be more specific (including any IE error messages)?

@sixer: You can use the code fine within an existing page. What problem are you having exactly?

--
Matt Doyle, Elated
29-Jun-10 14:15
Here is what I did. I created a page in Notepad – using the example as a guide. When I save the page as an HTML file so I can see how it is working, normally it looks ok. I sometimes get an Active X error but I think that is due to my security. Anyhow, I am trying to implement this into an existing html page (Wordpress template) and it will display all the information vertically and not in a horizontal tabbed format. I was told that the JavaScript was pertaining to an entire web page and that I needed to focus on just the content. I could send you my code but honestly it is no different than the example – besides the content within the tabs.
29-Jun-10 19:20
@sixer: "it will display all the information vertically and not in a horizontal tabbed format." - Sounds like a problem with the CSS, not the JavaScript.

--
Matt Doyle, Elated
16-Jul-10 07:10
Hi Matt,

I have zero knowledge of js so I was hoping you might provide me the exact js code required to open a tab from an external link.

I have an email newsletter and when a particular story is selected I want the user to be taken to the browser where the tab with that story is opened and ready to read.

I require the code to use for teh link in the newsletter and any code changes required for the tabbed page itself.

Hope this makes sense.

Cheers, love your work.
Alan
16-Jul-10 07:14
Sorry Matt,

I'm aware that you have answered this question in a previous post but to be honest I didn't understand the answer. I really do require something I can copy and paste and need to be told exactly where to place the code on the pages.

Thanks again,
Alan
16-Jul-10 14:57
armstra - take a look at my 2 posts above from June 15 and June 17. I think they will answer your question on how to specify a tab within a link.

[Edited by bgood on 16-Jul-10 14:58]
16-Jul-10 19:36
Thanks bgood.

I had read your post but like I said above, I have no working knowledge of javascript and so it doesn't make a lot of sense when I read it.

Would it be possible to send me a stripped down working example (one html page with a link opening a specified tab on a different html page) so I can simply duplicate the parts that I require.

Cheers.
18-Jul-10 04:10
Hi,

Is there anyone who can help me with a working example of using an external link to open a specific tab.

I need to link from a newsletter in Outlook Express to the tabbed webpage showing the relevant story.

I'm a graphic designer not a programmer so would really appreciate a little help getting this to work ASAP.

Thanks guys,
18-Jul-10 22:22
Hello again,

Just to add further to my posts above about seeking help with an external link.

This is an example of a tab which I would like to be opened upon arrival at the tabbed page

<li><a href="#three">Housing Direct</a></li>

This is the link I've been using to open the tab from an external link

index.htm#three

It does navigate to the correct story but then IE asks if I want to allow the content to open and when I select yes the page is refreshed and tab one is opened instead of tab three.

Can anyone help me to get this to work

Cheers

[Edited by armstra on 18-Jul-10 22:23]
19-Jul-10 14:07
Hi, I made the modifications to the javascript to allow me to be able to link to tabs with #tabname at the end of an url.

I don't know what I did wrong but when i go to the #tab url it selects the tab defined but doesn't display tab content or unhighlight the default first tab.


<script type="text/javascript">
//<![CDATA[

var tabLinks = new Array();
var contentDivs = new Array();

function init() {

// Grab the tab links and content divs from the page
var tabListItems = document.getElementById('tabs').childNodes;
for ( var i = 0; i < tabListItems.length; i++ ) {
if ( tabListItems[i].nodeName == "LI" ) {
var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
var id = getHash( tabLink.getAttribute('href') );
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById( id );
}
}

// Assign onclick events to the tab links, and
// highlight the first tab
var i = 0;

for ( var id in tabLinks ) {
tabLinks[id].onclick = showTab;
tabLinks[id].onfocus = function() { this.blur() };
if ( i == 0 ) tabLinks[id].className = ' ';contentDivs[id].className = 'tabContent hide';
i++;
}

// Hide all content divs except the first
var i = 0;

for ( var id in contentDivs ) {
if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
i++;
}
}

function showTab() {
var selectedId = getHash( this.getAttribute('href') );

// Highlight the selected tab, and dim all others.
// Also show the selected content div, and hide all others.
for ( var id in contentDivs ) {
if ( id == selectedId ) {
tabLinks[id].className = 'selected';
contentDivs[id].className = 'tabContent';
} else {
tabLinks[id].className = '';
contentDivs[id].className = 'tabContent hide';
}
}

// Stop the browser following the link
return false;
}

function getFirstChildWithTagName( element, tagName ) {
for ( var i = 0; i < element.childNodes.length; i++ ) {
if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
}
}

function getHash( url ) {
var hashPos = url.lastIndexOf ( '#' );
return url.substring( hashPos + 1 );
}

jQuery(function( $ ){

$('ul#tabs').click( function() {
$.scrollTo( 'div#tabContentContainer', 600 );
} );
});


19-Jul-10 16:12
please forget last, it was me missplacing the code u told me to add.
21-Jul-10 07:52
Giving that no one has assisted me with my question about external links opening a tab I have quit using this approach and instead joined a forum where the moderators care enough to actually respond.

Great tabs, pity about the lack of feedback.

[Edited by armstra on 21-Jul-10 07:53]
25-Jul-10 14:43
Hi all,
I am new on this website as well new in web development. I learn css and html and quite fluent both of them but also learning java script and jquery . But I am not good in programming pls suggest me nice JavaScript book where I can find real programming I am so confuse and frustrate at the moment. I can do lower level programming but don’t have Idea about real programming pls suggest me some books or site name where I can learn deep knowledge of both of them.
Thanks
harshida
27-Jul-10 04:44
@harshida: Welcome to Elated!

A good solid JavaScript book that I highly recommend is "JavaScript: The Definitive Guide":

http://www.amazon.co.uk/JavaScript-Definitive-Guide-David-Flanagan/dp/0596101996/

Some good tutorial sites:

http://www.elated.com/articles/cat/javascript/ (our own tutorials)
http://www.w3schools.com/js/default.asp
http://articles.sitepoint.com/category/javascript

Hope that helps. If you have specific questions please feel free to post them here:

http://www.elated.com/forums/authoring-and-programming/

--
Matt Doyle, Elated
02-Aug-10 20:56
I tried the same code displayed in IE source page. the tabs will show up, but all the tabs contents are shown at the same time, even for those tabs are NOT selected.

problem with the CSS? I am running that in Ruby on Rails.

strange, ummm.....
02-Aug-10 21:23
@fong: What do you mean by "IE source page"?

If you're having trouble getting it to work in Internet Explorer then turn on script debugging and see what JavaScript errors you're getting.

--
Matt Doyle, Elated
03-Aug-10 06:54
matt, thanks for the quick reply. I opened the demo link in IE, and then clicked on the "view source" to copy the code to my RoR framework to try it out.

most of the code is in the same file, except I put the css code in stylesheet directory, then include in the page.

any help is appreciated.
04-Aug-10 04:09
@fong: Can you post the URL of the page with the problem, so we can take a look?

--
Matt Doyle, Elated
07-Aug-10 23:15
Hi, matt
I really like your code but I got a problem right now.
I separate your code to 3 files. (.css .js .htm)
And I added another 3 tabs and 3 tab contents.
I use firebug to find out the problem and I found out the last two tabs "return" & " support" is not hiding automatically.

Please help me to take a look.
Please see the code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href="http://www.motoringss.com/elated/tabs.css" rel="stylesheet" type="text/css" />
</head>
<body>

<script src="http://www.motoringss.com/elated/activetabs.js" type="text/javascript"></script>

<ul id="tabs">
<li><a href="#contact">Contact Us</a></li>
<li><a href="#shipping">Shipping &#38; Handling</a></li>
<li><a href="#payment">Payment</a></li>
<li><a href="#terms">Terms</a></li>
<li><a href="#returns">Returns</a></li>
<li><a href="#support">Support</a></li>
</ul>

<div class="tabContent" id="contact">
<h2>contact</h2>
<div></div>

</div>

<div class="tabContent" id="shipping">
<h2>Shipping</h2>
<div></div>
</div>

<div class="tabContent" id="payment">
<h2>Payment</h2>
<div></div>
</div>

<div class="tabContent" id="terms">
<h2>Terms</h2>
<div></div>
</div>

<div class="tabContent" id="return">
<h2>Returns</h2>
<div></div>
</div>

<div class="tabContent" id="support">
<h2>Support</h2>
<div></div>
</div>


<script type="text/javascript">
init();
</script>

</body>
</html>

09-Aug-10 05:09
@motoringss: The problem is that your "Returns" link references an ID of 'returns':


<li><a href="#returns">Returns</a></li>


...but your corresponding tabContent div has an ID of 'return', not 'returns':


<div class="tabContent" id="return">


--
Matt Doyle, Elated
09-Aug-10 09:24
Thank you so much, matt
And sorry for my careless mistake...
thanks again for you help.
09-Aug-10 09:33
Hi Matt, I tried to use the code for ebay auction. And ebay gave me a message below:

Your listing cannot contain javascript (".cookie", "cookie(", "replace(", IFRAME, META, or includes), cookies or base href.

Do you have any idea I can still use the code?
10-Aug-10 04:26
@motoringss: It's probably because you're trying to include an external .js file:


<script src="http://www.motoringss.com/elated/activetabs.js" type="text/javascript"></script>


I don't think ebay allows that.

Instead, paste the contents of activetabs.js into your listing page (inside <script> ... </script> tags of course).

--
Matt Doyle, Elated
10-Aug-10 04:52
Thank you so much.
I tried to paste the JS contents inside the main page and it works.
But I just want to know why the external .js file wont work?
Just curious.....
10-Aug-10 05:19
@motoringss: Because ebay doesn't allow external JS includes in listing pages (presumably for security reasons).

--
Matt Doyle, Elated
10-Aug-10 23:42
Matt,
Thank you so much, you are professional!!!!
12-Aug-10 01:29
@motoringss: Happy to help!

--
Matt Doyle, Elated
17-Aug-10 13:06
Hello Matt,

I am trying to use the javascript tab in my website I am working on. I setup four tabs and it shows fine in Safari but in IE8 all of the tabs text is displayed and will not be centered like Safari. In IE7 I am having the same problem and it shifts too much to the right. When I first created the tabs not within my website everything looked fine, but when I inserted the code into my website these problems in IE8 and IE7 occurred. Maybe it has be arranged differently for IE but I'm not sure.

Please let me know what I can do to resolve this as I don't know what else to do. Here is the code.

Thanks for your help.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JCD</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
<!--
body {
background-repeat: repeat-x;
background-color: #FFFFFF;
background-image: url(images/img01a.jpg);
}
.style1 {color: #FFFFFF}
.style2 {color: #000000}
.style3 {
font-family: "Arial Black";
font-size: 17px;
color: #000000;
}
.style4 {color: #333333}

body2 { width: 834px; margin:0 auto; font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
ul#tabs {list-style-type: none; margin: 5px 0 0 0; padding: 5px 0 0.3em 0; }
ul#tabs li { display: inline; }
ul#tabs li a { color: #ffffff; background-color: #3366cd; border: 1px solid #000000; border-bottom: none; padding: 0.3em; text-decoration: none;}
ul#tabs li a:hover { background-color: #000000; }
ul#tabs li a.selected { color: #000; background-color: #f1f1f1; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
div.tabContent {border: 1px solid #000000; padding: -0.5em; background-color: #f1f1f1;}
div.tabContent.hide {display: none;}
.style11 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; }
.style15 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; }
.style18 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; }
.style7 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
.style8 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style9 {font-size: 12px}
.style20 {color: #FFFFFF}
.style21 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #FFFFFF; }

</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->

var tabLinks = new Array();
var contentDivs = new Array();

function init() {

// Grab the tab links and content divs from the page
var tabListItems = document.getElementById('tabs').childNodes;
for ( var i = 0; i < tabListItems.length; i++ ) {
if ( tabListItems[i].nodeName == "LI" ) {
var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
var id = getHash( tabLink.getAttribute('href') );
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById( id );
}
}

// Assign onclick events to the tab links, and
// highlight the first tab
var i = 0;

for ( var id in tabLinks ) {
tabLinks[id].onclick = showTab;
tabLinks[id].onfocus = function() { this.blur() };
if ( i == 0 ) tabLinks[id].className = 'selected';
i++;
}

// Hide all content divs except the first
var i = 0;

for ( var id in contentDivs ) {
if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
i++;
}
}

function showTab() {
var selectedId = getHash( this.getAttribute('href') );

// Highlight the selected tab, and dim all others.
// Also show the selected content div, and hide all others.
for ( var id in contentDivs ) {
if ( id == selectedId ) {
tabLinks[id].className = 'selected';
contentDivs[id].className = 'tabContent';
} else {
tabLinks[id].className = '';
contentDivs[id].className = 'tabContent hide';
}
}

// Stop the browser following the link
return false;
}

function getFirstChildWithTagName( element, tagName ) {
for ( var i = 0; i < element.childNodes.length; i++ ) {
if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
}
}

function getHash( url ) {
var hashPos = url.lastIndexOf ( '#' );
return url.substring( hashPos + 1 );
}

</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body class="body" onload="MM_preloadImages('images/proposalpicb.jpg','images/signuppic2b.jpg','images/testimonialspicb.jpg')">
<!-- start header -->
<div id="wrapper">
<div id="header">
<div id="logo">
<h1><img src="images/Header-text4.png" alt="" width="428" height="43" vspace="9" /></h1>

<div></div>
</div>
<div class="newsletter" id="rss">
<div align="center"><a href="#"> Sign Up for Newletter </a><br />
<img src="images/newsletter.jpg" alt="" width="50" height="51" /><br />
</div>
</div>
</div>
<!-- end header -->
<!-- star menu -->
<div id="menu">
<ul>
<li class="current_page_item"><a href="#">About Us</a></li>
<li class="current_page_item"><a href="#">Graphic Design</a></li>
<li class="current_page_item"><a href="#">Web Design</a></li>
<li class="current_page_item"><a href="#">Marketing Services</a></li>
<li class="current_page_item"><a href="#">Portfolio</a></li>

</ul>
</div>
<!-- end menu -->
<!-- start page -->


<!-- start ads -->
<!-- end ads -->
<!-- start content -->
<!-- end content -->
<!-- start sidebar -->
<!-- end sidebar -->
<div id="pagepricing">
<body onload="init()">

<ul id="tabs">
<li><a href="#BP">Business Products</a></li>
<li><a href="#WP">Wedding Products</a></li>
<li><a href="#website">Website and Hosting Fees</a></li>
<li><a href="#Payment">Payment Policy</a></li>
</ul>
<div class="tabContent" id="BP">
<h2><img src="images/img08.gif" alt="" width="16" height="15" />About JavaScript</h2>
<div>
<table width="700" border="1">
<tr>
<th bgcolor="#000000" class="style7" scope="col"><span class="style11 style20">Quantities</span></th>
<th bgcolor="#000000" scope="col"><span class="style21">100</span></th>
<th bgcolor="#000000" scope="col"><span class="style21">250</span></th>
</tr>

</table>
<br />
</div>
</div>
<div class="tabContent" id="WP">
<h2>Advantages of tabs</h2>
<div>
<p>JavaScript tabs are great.</p>
</div>
</div>
<div class="tabContent" id="website">
<h2>Using tabs</h2>
<div>
<p>Click a tab to view the tab's content.</p>
</div>
</div>
<div class="tabContent" id="Payment">
<h2>Using tabs</h2>
<div>
<p>PaymentClick a tab to view the tab's content. <a href="/articles/javascript-tabs/">R</a></p>
</div>
</div>
<div id="bodytextpricing"><span class="style3"><br />
Your Satisfaction Is Our Committment! </span><br />
<br />
<span class="style4">Contact us today.</span></div>
<p><a href="/articles/javascript-tabs/">return</a>
</p>
<p align="center" class="style2"><img src="images/proposalpic.jpg" alt="" width="172" height="88" id="Image2" onmouseover="MM_swapImage('Image2','','images/proposalpicb.jpg',1)" onmouseout="MM_swapImgRestore()" /><img src="images/signuppic2.jpg" alt="" width="172" height="88" id="Image1" onmouseover="MM_swapImage('Image1','','images/signuppic2b.jpg',1)" onmouseout="MM_swapImgRestore()" /><img src="images/testimonialspic.jpg" alt="" width="172" height="88" id="Image3" onmouseover="MM_swapImage('Image3','','images/testimonialspicb.jpg',1)" onmouseout="MM_swapImgRestore()" /><br />
</p>
</div>
<p>
<!-- end page -->
<!-- start footer --></p>
<div id="footer">
<p class="legal style1">
&copy;2008 - 2010 Jenkins Creative Designs. All Rights Reserved. </p>
<p class="bottomlinks"><a href="index.html">Online Payments</a>&nbsp;&nbsp;&bull;&nbsp;&nbsp;<a href="index.html">Site Map</a> &nbsp;&nbsp;&bull;&nbsp;&nbsp;<a href="index.html">Contact Us</a></p>
</div>

</body>
</html>
<body>
</body>


[Edited by matt on 18-Aug-10 04:11]
18-Aug-10 04:10
@eman: For one thing you have 2 body elements in the page which will cause all sorts of problems. I can't even get the tabs working in Firefox.

Best bet: If you can upload the page and post the URL then it will be easier for us to see the problem, and debug it.

Cheers,
Matt

--
Matt Doyle, Elated
18-Aug-10 12:18
Hello Matt,

The URLs are below. Just to reiterate the javascript tabs content displays ok only showing one at a time in Safari 4 but in IE8 you can see all of the tab content. Also in IE7 the complete tab frame shifts to the right. It also displays all of the content like IE8. Another thing I noticed about Safari and perhaps the other ones to is that when I click on a tab the footer shifts up. Is there a way I can get the footer to stay at the bottom?

Also how can I remove the horizontal scroll at the bottom which can be annoying to vistors?

I included the css code for reference.

If you can correct the code and resend that would great. I truly thank you for your help with this matter and have a great day.

http://www.jenkinscreativedesigns.com/pricingnw.html

http://www.jenkinscreativedesigns.com/csscode.html
19-Aug-10 05:11
Hi eman,

Thanks for posting the page. It's amazing it works in Safari at all (which you're right, it does) since you have 2 body elements in there (you're only allowed 1 in an HTML page), which will confuse any but the most robust browser!

It doesn't work in Firefox or Opera (and presumably not IE).

I'm guessing that it's not even getting to fire the init() function since you've included that in the second <body> tag. So your JavaScript won't work at all.

Here's a full list of the things that need cleaning up:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.jenkinscreativedesigns.com%2Fpricingnw.html&charset=%28detect+automatically%29&doctype=Inline&group=0

I would start, though, by removing that duplicate body element. Then at least all browsers will be able to parse the page without choking, and hopefully start running the JavaScript.

Cheers,
Matt

--
Matt Doyle, Elated
19-Aug-10 08:50
Thanks Matt.
27-Aug-10 09:19
Hi and many thanks for this.

Is there a chance of making this work without having Access to the <body>-tag. I'm working on a new look for my online-shop. Unfortunatelly I can't edit the body-tag because its an e-pages product. http://www.best-weekend.de/epages/62371225.preview/de_DE/?ObjectPath=/Shops/62371225/Products/2001

As you can see, its not working very well.
29-Aug-10 18:15
@picknikker: Just put this at the end of the page, before the </body> tag:


<script>init();</script>


--
Matt Doyle, Elated
30-Aug-10 05:53
Thanks Matt, unfortanutally it's still not working properly. Do I have to put the code right before the </body>-tag? Because I cant't do this either. Do You have another Idea? Thanks a lot.
30-Aug-10 07:15
Me again. I just don't get it. Now I've made an extra site outside of the preset shop-design. http://www.team-rpx.de/tabs.html ...
Although I just copied the <head>-part from your sample-page (which is working great in my FF3.6, by the way) it doesnt work. Please help. Thank You
31-Aug-10 18:08
@picknikker: It doesn't work because your first tab link does not match the ID of the first tabContent div:


<li><a href="#kurzpotrait">Kurzporträt</a></li>

...

<div class="tabContent" id="kurzportrait">


kurzpotrait != kurzportrait

--
Matt Doyle, Elated
01-Sep-10 02:44
Hi Matt and thanks again. How could I not see this? Now it's working pretty well. Greetings to Australia from Cologne!
01-Sep-10 15:27
Hi Matt,
I would be gratful if you could take a look at http://www.ffynnongron.com/leisure.php

I am trying to load a gpsvisualer (or rather google map) as this cannot be done using IFRAME.

The problem is it first loads the first tab (Area) text and map but for some reason a few seconds later the second tab map (Environment) is then overwritten.

Any ideas would be much apprechiated.

Regards
Dave
02-Sep-10 02:18
@picknikker: You're welcome.

@dave_gordon: Hmm, I can see how that would cause all sorts of problems with the tabs code, since is uses things like document.writeln() to inject more markup into the page. Do the tabs work OK if you strip that JavaScript out?

Looking at it more closely, the Area and Environment tabs basically seem to work, although the content is a bit messed up. The other tabs seem to have no content in - is that because you haven't added any yet?

(This is on Firefox 4.0 Mac.)

Matt

--
Matt Doyle, Elated
02-Sep-10 07:17
Hi Matt, and many thanks for your prompt reply.

Yes the tabs themselves seem to work okay, but I think for the environment one I'm missing a DIV somewhere.

I'm trying to find a tool that will assist with the above in indenting the tags but HTMLTidy seems to want to go too far and coment out what it thinks is the addituional tags.

I initially thought this could be the problem with the loading the second map in the first tag, but then ignored due to the fact the first tabs text was still displayed.

In terms of the other pages, I did not want to insert more code until I fixed the problem with the first two tags.

Regards
Dave
02-Sep-10 15:19
Hi Matt,
I've now manually checked the DIV tags and everything is okay.

The previous problem of loading the second tab map into the first tab display is only occuring in FF 3.5.11, and in IE7 the map does not show in the tab.

Is this down to what you suggested previously about document.writeln() within document.writeln()'s, and if so do you know of anyway around this?

Regards
Dave
03-Sep-10 14:33
Sorry me again. If I understand the processing correctly I think it may work if you only load the the first tab onload, and after each tab is selected run my onunload="GUnload(); and then load the individual tab once again.

The only problem is I don;t know how to code this.

Many thanks
Dave
05-Sep-10 21:23
@dave_gordon: Just call GUnload() within the JavaScript tabs code as required, eg:


function showTab() {
GUnload();
var selectedId = getHash( this.getAttribute('href') );
...



(or whatever it is you need to do)

--
Matt Doyle, Elated
06-Sep-10 06:33
Many thanks Matt, but unfortunately this does not seem to make any difference.

Assuming the script loads everything first, is there anyway to only load the first tab, any then only load the others individually after the tab is selected?

Many thanks
Regards
Dave
06-Sep-10 18:19
@dave_gordon: What do you mean by "load"?

--
Matt Doyle, Elated
07-Sep-10 00:48
Hi,

I have 2 pages and I inserted the code of each page in the <div></div>

it works. the problem is both pages(now in tabs) have dynamic dropdowns. Now that I inserted both pages in tabs, the dynamic dropdowns doesn't work on IE but if I use FF it works fine.

Any help on how to make it run on both browsers?
07-Sep-10 01:03
@leo_gatmaytan: Please post your question in a new topic, and include a link to the page with the problem.

http://www.elated.com/forums/authoring-and-programming/topic/new/

--
Matt Doyle, Elated
07-Sep-10 01:17
Hi Matts, and sorry for not making myself clear.

I thought the utility builds ALL the tabs (identified by DIV names) and simply controls what is actually displayed by using the 'div.tabContent.hide { display: none; }'

Becuase of the way GPSvisualser loads this causes problems, so, if I have understood correctly, rather than build all the tabs, which i presume happens in the function init(), can I only build the first tab, and only upon selecting another run my GUnload(); and then build the tab selected.

Does this make any sense?
Many thanks
Dave
07-Sep-10 18:37
@dave_gordon: Well it's not really "building" anything. The tabs are already created in the markup. All the JavaScript does is assign different classes to the tabContent divs to show and hide the tabs. That's it.

Since I don't know anything about GPSvisualser I can't explain why it isn't working. Those writeln()'s sound nasty though. At a guess, GPSvisualser might be overwriting the tabContent divs when it runs. If you bring up the Error Console in Firefox you can see the following errors:


Error: contentDivs[id] is null


Another thing I've noticed is that you've created 7 tabs, but only 2 corresponding tabContent divs. You need to create a tabContent div for every single tab, otherwise the init() function will break.

--
Matt Doyle, Elated
11-Sep-10 09:40
Hi Matt,
Just to let you know everything within the maps is now working. I ended up just using IFAME within the DIV and everything worked.

The previous tab utility I used must have done something peculiar when building the IFRAME string because when I tried to reference objects within the frame did not work. Anyway the maps seem to be working perfectly now (see http://www.ffynnongron.com/leisure.php)

One other small thing. I'm using my own style (.menu2) and for some reason the tabs are not highlighting when selected. Initially i thought it was becuase I used 'active' instead of 'selected' but even when changed and then even used your names (ul#tabs) in my external .css it does not work.

Could you give me a pointed as to what is wrong?

Many thanks for all you help and do you have a paypal account that I can donate something?

Kind regards
Dave
13-Sep-10 03:11
@dave_gordon: Your selected tab's 'a' element has an 'active' class, but you haven't styled that anywhere.

You need to select and style the 'a' elements, eg:


.menu2 li a.active {...


--
Matt Doyle, Elated
13-Sep-10 06:50
Thanks Matt and thank you vary very very much for all you help and assitance.
Kind regards
Dave
14-Sep-10 21:48
No problem Dave - hope it helped
Matt

--
Matt Doyle, Elated
18-Sep-10 06:49
Hi Matt,

I'm having a problem with this. I've got one set of the tabs set up on the link below, but the second set doesn't work. How can I get two or more sets of tabs working on a page?

http://www.beta.theridefactor.com/guides/tripsdrill/
18-Sep-10 23:57
Funny CCJared i was just on here searching for the exact same thing! I hope Matt responds soon!
20-Sep-10 05:56
@CCJared and @devonei: See:

http://www.elated.com/forums/topic/4717/#post19137

--
Matt Doyle, Elated
20-Sep-10 09:33
Hi Matt, thanks for your help. That worked great, but now I've got another issue. The 4th tab on the second set isn't working.

http://www.beta.theridefactor.com/guides/tripsdrill/

Any ideas?
21-Sep-10 05:40
@CCJared: You haven't closed your previous tabContent div:


<div class="tabContent" id="wr">
<div><a href="mammut/"><img class="vlightbox" src="thumbs/jungbrunnen.jpg" align="right" /></a><a href="mammut/"><strong>Jungbrunnen</strong></a><br /><br />Mammut is the parks 100% German Wooden Roller Coaster, this ride is features a very twisted layout with some nice moments of floater airtime! It's an extremely smooth ride that doesn't let up until it hits the brakes, so be sure to keep your hands up and enjoy!<br /><br /></div>
<div><a href="mammut/"><img class="vlightbox" src="thumbs/mulhbach-fahrt.jpg" align="right" /></a><a href="mammut/"><strong>Mulhbach Fahrt</strong></a><br /><br />Mammut is the parks 100% German Wooden Roller Coaster, this ride is features a very twisted layout with some nice moments of floater airtime! It's an extremely smooth ride that doesn't let up until it hits the brakes, so be sure to keep your hands up and enjoy!<br /><br /></div>
<div><a href="mammut/"><img class="vlightbox" src="thumbs/waschzuber-rafting.jpg" align="right" /></a><a href="mammut/"><strong>Waschzuber Rafting</strong></a><br /><br />Mammut is the parks 100% German Wooden Roller Coaster, this ride is features a very twisted layout with some nice moments of floater airtime! It's an extremely smooth ride that doesn't let up until it hits the brakes, so be sure to keep your hands up and enjoy!</div>


--
Matt Doyle, Elated
28-Sep-10 18:15
My tabs do not work. The tabs look ok, so I feel the CSS code is fine. But when I click on any tab but the first one, nothing happens. The error in IE says:

Message: 'contentDivs[...]' is null or not an object
Line: 51
Char: 11
Code: 0
URI: file:///M:/HTM/NDEP/ADMIN/GIS/Scripts/js_functions.js

Line 51 in file js_functions.js is:
contentDivs[id].className = 'tabContent hide';

Thanks for any help!

--
Stephanie
29-Sep-10 18:00
@stsnider: IE is a horrible browser for debugging JavaScript! Try Firefox and use Tools > Error Console.

If you can upload your page and post the URL then we can take a look at the problem. Chances are you've mistyped or misspelled one of your content div names.

--
Matt Doyle, Elated
30-Sep-10 11:07
I tried Firefox error console. It says "contentDivs[id] is null". I cannot upload these files to the division's website until they are functioning, so I copied the files to my google docs. The file structure should be:

index.html
Scripts/js_functions.js
Templates/gis_resources.css

Thanks for your help.

javascript
https://docs.google.com/leaf?id=0BwRWFnLD3lXrMzRkZDc0NjUtMzdkNi00NzVkLTlhODQtOTdlZjJiNmY1ZDMz&hl=en

CSS
https://docs.google.com/leaf?id=0BwRWFnLD3lXrYjBlM2I2MGUtMTY5NS00ZDE2LTlmYTktZGMzNTJmNzQ0OTc2&hl=en

HTML
https://docs.google.com/leaf?id=0BwRWFnLD3lXrZTNhYmExNjUtNjcyYS00Y2ZjLTg5NTgtMjFlNDNhYTVkZmI2&hl=en

--
Stephanie
03-Oct-10 16:33
@stsnider: Those links don't work for me.

I can't do much unless I can see the actual page with the problem. Why not just upload it to a hidden folder on your site?

Might be best to start a new thread too:

http://www.elated.com/forums/authoring-and-programming/topic/new/

--
Matt Doyle, Elated
23-Oct-10 05:10
Hey Matt,

In my webpage I have multiple tabbed contents but the problem is that only one of it works while the other doesn't. I changed the id of the 2nd tab content and named it tabs2 and in the javascript page I added the following under Grab the tab links and content divs from the page


var tabListItems = document.getElementById('tabs2').childNodes;
for ( var i = 0; i < tabListItems.length; i++ ) {
if ( tabListItems[i].nodeName == "LI" ) {
var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
var id = getHash( tabLink.getAttribute('href') );
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById( id );
}
}




I didn't deleted any thing. It worked and both the tab content were working but the problem was that one could view the text of only one tab content at one time and the other meanwhile, disappeared. When clicked on link of another tab content, the content of the first one disappeared. Do you have any solution for webpages having two or more tab contents. My knowledge of Javascript is zero.

Please help its really important. I know you want to close this forum but if you please help me I will be thankful to you. Plz. Plz.
26-Oct-10 15:21
Hi Matt,

I much appreciate your help throughout here to various users.

My scenario is somewhat different. I have sever html pages in particular folder. I want to write a JAVA Script or whatever that can give me a output as tabbed web page. Each tab is corresponds to my html file. so basically JAVA script should iterate through the folders for html files and generate tab for each html files dynamically.

I have not done much JAVA script so some help on this would be much appreciated.

Thanks.
28-Oct-10 00:01
@anupam27oct: I already covered multiple tab sets here:

http://www.elated.com/forums/topic/4717/#post19137

@masaniparesh: Please start a new topic:

http://www.elated.com/forums/authoring-and-programming/topic/new/

--
Matt Doyle, Elated
01-Nov-10 18:13
Matt - I've been using these tabs for a while now and I have to tell you - the code is great!

Here's what I'm tring to do: NESTED TABS

For example:

Say I have a page that has 3 tabs (1, 2,and3).
Tabs 1 and 3 have simple content.
However, for Tab 2, I want to display the content in 3 Tabs within it (nested). Let's say they would be 2A, 2B, and 2C.

I can write the tabs (2A, 2B, and 2C) within the content for Tab 2 and they show up when I am on the page and have selected Tab 2. However, the tab'd content itself is just listed in order down the page - not inside the clickable tabs.

Is there a simple way to accomplish this?

Thanks!

bgood
02-Nov-10 04:30
@bgood: Hmm, that's an interesting one! I suspect if you took the multiple tab sets code at http://www.elated.com/forums/topic/4717/#post19137 and simply put the 'tabs2' ul inside your "Tab 2" then it might "just work". In theory...

--
Matt Doyle, Elated
02-Nov-10 13:57
Matt - That works! Thanks.

bgood
03-Nov-10 13:30
Matt -

OK I used your suggestion (new .css and .js files) and I can now nest tabs within other tabs.

However, I no longer can send a user to the page and include a refference to the tab ID in the link so that the appropriate tab is open when the user arrives.

EXAMPLE:

My page with the tab'd content has the following at the bottom:

<script type="text/javascript">
init('tabs1');
window.location.hash = "topofpage"
</script>

This page has only one set of tabs (tabs1).

All tabs (single set or nested) have unique IDs.

If the page had nested tabs it would have the following at the bottom:

<script type="text/javascript">
init('tabs1');
init('tabs2');
window.location.hash = "topofpage"
</script>


The "topofpage" used to work to bring the browser window back to the top with the proper tab opened.

If I want the 2nd tab out of 3 to be open I write the link as follows:

<a href="path/to/webpage/webpage_name.aspx#2">Link Text</a>

My tabs are declared as:

<ul class="tabs" id="tabs1">
<li><a href="#1">One</a></li>
<li><a href="#2">Two</a></li>
<li><a href="#3">Three</a></li>
</ul>

And the tab'd content is declared as:

<div class="tabContent" id="2">
<h2>Two</h2>
<div>
SOME CONTENT
</div>
</div>

So - when I was using the original code, that didn't allow nested tabs, my links with specified tab ID's worked. Now they don't.

Any advice will be greatrly appreciated.

Thanks!

bgood

[Edited by bgood on 03-Nov-10 13:33]
03-Nov-10 18:20
@bgood: This is getting a bit offtopic. If you can post a new topic about this, and include the URL of your tabs page, then I can take a look:

http://www.elated.com/forums/authoring-and-programming/topic/new/

Cheers,
Matt

--
Matt Doyle, Elated
18-Nov-10 21:52
Hello Matt

I have been using your fantastic script on my site for nearly a year and it's been working perfectly... until today. I have not made ANY changes to my site, nor are there any error messages, but the script has suddenly stopped functioning (tabs not being hidden) in all browsers.

There are several external javascripts on the page (from Google) and I have tried disabling these (in case of a conflict) but this doesn't have any effect. I am completely at a loss as I know very little about javascript. If you have any time, could you take a look and see if you spot anything?
http://www.yourkrabi.com/amorn-mansion/

Thank you so much, I know you must be very busy.... but any advice would be great!

Seema
18-Nov-10 22:22
Hi Seema

I think there's some problem with the body load event not firing (not sure why). Try removing the onload from the <body> tag, so it's just:


<body id="b-hotels">


Then just call init() manually after your tabs in the HTML:


<!-- E N D O F T A B S -->

<script>init();</script>


--
Matt Doyle, Elated
19-Nov-10 00:14
Hi Matt

Thanks so much, that worked perfectly for your script - now just have to figure out why the change has stopped another function on the page (calcHeight) from working... ah, the trials and tribulations of cut and paste website building I need to learn Javascript properly one day!

Thanks again for the support.

S
21-Nov-10 09:57
Love this script! Many thanks.

I've been working on getting this implemented this morning, and it works wonderfully in IE and Firefox, but doesn't work in Google Chrome (I get really strange behavior).

I assume I typo'd something, since your demo works just fine in Chrome.

I thought I would post here and ask if you've had any trouble with browser compatibility with this?
21-Nov-10 10:11
Disregard my last comment there...

Turns out when creating my ul list, I missed the closing anchor tags. IE and Firefox corrected this on their own, Chrome held my feet to the fire (as it should).

I've corrected it now, code works in all browsers...

AND I just wanted to say MANY THANKS for this script... it's a GREAT help!

Charlie
21-Nov-10 20:05
Just a quick FYI in case anyone finds this useful: I discovered the reason why the fab tab script suddenly stopped working was a conflict with our OpenX tags (still unexplained as no code had been changed on the page).

I disabled OpenX (and actually switched to DFP because of other issues with this ad server) and the script now works again, with the onload in the body tag as before. Hooray!
21-Nov-10 22:16
@cfsamet & @Sprab: No problem - I'm glad you both got your tabs working

--
Matt Doyle, Elated
04-Dec-10 07:33
Hmm... I posted a question here:

http://www.elated.com/forums/topic/5083/

Not sure whether I should have added it as a comment right here. Basically I want to know if it's possible to shift the focus to the first form field in whichever tabContent div is selected?
12-Dec-10 07:01
Hi
I followed this great script and adapted it for my need for a facebook page with 7 tabs, the only problem I have after spending numerous hours working on the code and content is that I cannot use the body tag in a facebook applications such as in: <body class="ul-tabs" onLoad="init()"> which I am using with this script (I am using clearfix tab) . Is there another way to use this script with changes to the above mentioned function?
I tried several changes however the content of all 7 tabs will show up on one page rather than 7 different pages.
The error I am recieving from facebook "Application Temporarily UnavailableParse errors:FBML Error (line 123): illegal tag "body" under "fb:tab-position"
here the test link i have working ok on my server, thou when I switch to facebook-app it causes the body tag error:

http://www.kansascityproperties.com/www/facebook/app.asp

Any answer/help is much appreciated, I hate to see what I worked on go to waste, thou I am far from finished with polising it up. thx

[Edited by sahran on 12-Dec-10 11:41]

--
sahran shaoul
13-Dec-10 02:40
@sahran: Since your question is related to Facebook and not specifically about the article itself, please post it in a new topic:

http://www.elated.com/forums/authoring-and-programming/topic/new/

Thanks,
Matt

--
Matt Doyle, Elated
02-Jan-11 19:29
Hi Matt.

Thanks for this tutorial. It's an excellent way to teach someone like me some javascript - and when it gives some weird behaviour, it's even better (for the learning part, that is).

My problem is that on my web-site, it's only the first tab (nyheder) that shows content in IE and Chrome. The other tab (menu) is just blank. In FF both tabs work as expected.

Do You have any suggestions?

The site is www.kratholmskolen.dk

(Funny part is that I made a test-site and here it works as intended. The testsite is www.kratholm-uv.dk)
02-Jan-11 20:10
Sorry for the inconvenience. I solved the problem. It was a question a missing ">" in a "<br />"-tag. That took me a while to find
06-Jan-11 23:02
@trucjensen: No problem - glad you got it working

--
Matt Doyle, Elated
18-Mar-11 21:01
I give this article a D+, failing grade, i.e. decent effort but you did not complete it nor did you comprehensively test it before you published it.

This does NOT work with block level elements in the div's.

Also, you obviously did not check this in multiple browsers, the tabs div does not display inline or with any formatting at all for that matter, just 2 ugly blue text links stacked in IE.

Try putting tables in the divs (a legitimate need for more intricate formatting in the div), doesn't work.

remove div's & try putting the attributes directly in the table tag, doesn't work.

I appreciate you *trying* to help, but the internet is so full of half-baked solutions it is becoming more a source of mediocrity than anything else, it seems.

Get back to the drawing board and try again, and this time Take the Time to Test *before* you post.
18-Mar-11 23:37
@pswa61: It works fine with block-level elements - the example even includes block-level elements.

Tables work fine too. Tested in IE7/8/9.

Sounds like there's some problem with your code or setup to me.

--
Matt Doyle, Elated
19-Mar-11 01:25
Hmmm... sounds like the poster two above might not have been totally human. Oh well...

Matt, as the rest of us know this is a GREAT script - and I thought you might like to see how I got JavaScript Tabs to work in conjunction with another great script I found - imageMenu, which is a mootools sliding "concertina" menu.

(note that the jstabs script applies to the row of images underneath the top navigation bar - I've used it as a kind of presentation)

You can hover over the images to expand each image or you can click on one of the images to hold it open and jump to the relevant tabContent.

You can have endless hours of fun with it here:

http://www.collents.eu/begin.php

The site's still under development really but that part of it seems to work quite nicely.

[Edited by Stanley on 19-Mar-11 01:26]
19-Mar-11 10:11
Ah, I stand humbly corrected, please excuse the after a long, frustrating day dourness.

My issue remains somewhat mysterious. Stripping everything to bare essentials in the code I got static html to work properly in a flash. The problem was dynamic output from a script I wrote that populated the primary tab. Being by nature very lazy I enclose tag attribute values in single quotes, when I changed the php to output html w/ double quotes it worked like a charm. When I changed it back to single quotes it worked like a charm, but the initial php outputting html attributes w/ single quoted values made it take a dump. I have no idea why.

So before thoroughly evaluating the issue I came here and took a dump.

Sorry, folks, it ain't pretty, but it happens.
20-Mar-11 19:40
@Stanley: Wow, that's a great use of the tabs script! Love it

@pswa61: No problem - good on you for coming back and apologizing, so many people would never bother! Hope you manage to solve the PHP problem - feel free to ask for help in our Authoring & Programming forum if you need it:

http://www.elated.com/forums/authoring-and-programming/topic/new/

Cheers,
Matt

--
Matt Doyle, Elated
26-Mar-11 23:41
Matt, I have a question about updating content in tabs when they are clicked on. An example may help:
In my first tab, I have a form that, when submitted, causes a Javascript function to be executed and results displayed in a table in that tab. So far, so good. Now, the challenge is that I want one of those calculations to be used to change a result in another tab. When I go to that other tab, the result is not updated.

Any suggestions as to how I could achieve this?

thanks
Stewart
27-Mar-11 02:28
@midtoad

Sorry for jumping in ahead of Matt here, who may have a better idea, but to try and help you along a bit what I would do is temporarily disable the jtabs script (so all the tabContent divs are shown one after the other down the page) and proceed from there.

When you can get it to work on that single static page then it should work when you re-enable the JavaScript Tabs script.
27-Mar-11 10:24
@Stanley, are you really in Tbilisi?

Your comment actually is quite helpful, as it's led me to recall that the tabs are really just divs on a single page. So there should be no magic in making content in one tab appear in another.

Before your comment arrived, I had developed a work-around. I put an Update button in each tab, and wired it to a function that pushed out new data to an <input> in that tab. But now, thanks to your comment, I realise that all I likely have to do is, in the first tab where I make the calculations happen with an Apply button, simply add lines to my javascript function to also update the input fields in all of the other tabs.

For the benefit of those looking to apply this type of concept, the details are the following:

Where I want the new data to appear, I place an <input> tag:
<p>Given your configuration, you have <input type="text" id="sp_skids" size="4" maxlength="6" value="" readonly> skid patches. </p>

Note the id, since that's the key to publishing new data into the input field.

The button that causes the tab to update is this:
<input type="button" name="submit" value="Update" onclick="getSkidPatches('sp_skids');"/>

Note that the id of the input field is passed as a parameter in the javascript function call.

And lastly, here is the function that fetches the new data and publishes it:

function getSkidPatches(spu) {
document.getElementById(spu).value = window.skidPatches;
}

Note that the parameter name in the function doesn't have to match the name in the call. Just make sure that you don't place quotes around the name (i.e. 'spu') or it won't work!

The variable skidPatches actually gets updated in my first tab thanks to an Apply button calling a function that makes a number of calculations, but that's outside the scope of this comment.

cheers
S
27-Mar-11 16:09
Following up on my earlier comment, I made the change I suggested I made in the first paragraph that I thought might be needed, and now all my tabs update their calculated data.

@Stanley, the take-away message would be: it's always worthwhile for us to comment on problems others post, because even if we are off the mark, the simple fact of having to understand and reflect on a suggestion sometimes causes us to think about our problem differently and thus find the solution ourselves.

thanks again!
S
27-Mar-11 17:53
Glad to help and, yes, I live in Tbilisi.
01-Apr-11 09:56
this is a neat looking script and im sure it will fit my needs.. however it currently does not. I am using coldfusion (the part where everyone usually runs away and doesnt want to help), but im just using simple form submission and some of the forms are just html forms. basically I need to submit the form and have it jump to another tab, not including all of the tabs, that is.. jump to a tab based on div id for a search or form submission result and not show the other tabs. I am having a lot of trouble with tab control, and not showing other ones (it shows them all). Yes I can click between them all seperately and everything works just fine, but I want to hit submit on a search form on tab one, have it submit to tab 2, and have everything else not show. I have some if statements that elimate this, but not all of it. Also, before you clear the search results, which there is a button for, I want to be able to just click between all the tabs at will, not showing the other ones, and have the result still be there. I know it is just something funky in the javascript itself preventing this and showing all the pages when i submit the form, because i accomplished this same thing on a crappy looking, buggy tab template called tabtastic before. any ideas anyone? dont be scared off by the coldfusion, most of them are just standard html forms that submit, not even coldfusion. its the javascript itself at some level preventing this.

--
Confidence comes from proven ability--tim jansen
01-Apr-11 13:38
@jschatesjscript - Does the question posted on the 8th September (scroll up) help you - and the subsequent posts?

Also my own question here might help you further develop/debug what you're doing:

http://www.elated.com/forums/topic/5083/
01-Apr-11 14:58
@Stanley. Well that stuff helped me to actually click on the tabs and have seperate content per div show, before I wasnt even that far, so we are good there, the first page also loads with just the content of the first div.

However, the form submission is still the problem. Any help would be much appreciated.

I could throw all/most of my code up here. I have if statements to help some of the form and div flow, and this worked before on a much uglier tab program, which was not this one. I know its a javascript problem of some kind, and Im not proficient enough with it to figure out where.

--
Confidence comes from proven ability--tim jansen
01-Apr-11 16:20
I'm no expert in javascript either, but I presume the action on your form points to the full page address followed by the #divname, e.g mytabbedpage.html#divtwo, so the page actually reloads and processes the search value?
01-Apr-11 16:47
I just did a very quick test to try out what I was thinking above.

I put a dummy search form on my page like so:



<form action="index.php#searchresult" method="POST" name="searchform">
Search for: <input type="text" name="keyword" Value="">
<input type="submit"></form>


At the top of the page I added my form handling script (in my case just to capture the keyword value and assign it to a variable) then within my searchresult div I echoed the variable.

When I entered a search term and clicked submit it displayed the just the searchresult tabContent div with the keyword.

Is that what you were looking to do (except with more complex form processing)?
01-Apr-11 16:55
Yes.

And what script did you modify?

--
Confidence comes from proven ability--tim jansen
02-Apr-11 09:43
@jshatesjscript:

Replying to your first post - if your tabs display properly initially, but when you click on Submit all of the tabs display as one big page, then your problem is in your javascript. I have found that any errors at all in my javascript cause the tabs to no longer display as tabs, but instead show as a single long web page.

S
02-Apr-11 12:30
It's been a long time since I put this script together and never really used it in a real situation (apart from the aforementioned test form) but see the link on this page for the javascript I used to link to individual tabs...

http://www.collents.eu/cem/tatep/index.php/jtabs/

I give no guarantee that it'll work for you, but you can try it.

Good luck.
04-Apr-11 11:00
@stanley 02-Apr-11 12:30.

It thorws me errors: 'contentDivs[...]' is null or not an object. like 5 or so of them, different lines.

Also, the item is posting to the other tab, just not jumping over there physically, like i wanted.

aka, i have a search and result tab. the search tab when posted should jump to the result tab, this does not happen. if i click on the result tab, which is the second tab and it says, you need to do a seach first, the form there, WILL work and go back to the first tab, but it need it to work the other way too where the search tab which is first, jumps to result.

--
Confidence comes from proven ability--tim jansen
04-Apr-11 11:13
I think I have to put the class name of some of these in to get it to work, but the problem i see is i put the class name of the div tags in all of them, and it wont let me click between tabs though. totally stuck here.

--
Confidence comes from proven ability--tim jansen
04-Apr-11 13:10
As I said it's a long time since I worked on that so my memory of what it does is a little rusty. As far as I can tell the page structure is the same as in a regular JavaScript tabs page: "tabContent" set as the class on each tabContent div, and an ID which is the same as is shown in your tab menu list.

I'm not quite sure what you mean by jumping over to the other tab - unless you mean simply displaying that tab's div instead of the one you were currently on, but that doesn't reload the page to process your form data - the normal operation of the JavaScript Tabs page is that it loads up once and then you click on the tabs to display/hide the relevant tab content.

What I think you want is to retain that instant action but include your search result - but how would you do that? You need to post the form to the same page and have it open up your search result tab.
04-Apr-11 13:30
I think I may abandon this script. Too much javascript to worry about, and for my liking.

Yes @stanley last comment. I do post to the same page and have it open in the result tab, but it does not show. The id thing you mentioned makes sense, I may still try that. The result WILL show if I manually click on the result tab. I had this same whole site in another tab system and it worked good except for some design flaws, one of which I actually solved today, and that is one of the reasons I might abandon this script.

The other reason is, it does not solve one of my original problems, and is therefore not worth it. The other original problem was that (and this is on the old template I used, not this one, but the problem persists on this template), I do a search, it posts to the result tab, and if there are too many results, it just drops to the content, eliminating the tabs at the top and the desired effect.--- IS there a javascript thing to eliminate THIS, and a short one if that.

--
Confidence comes from proven ability--tim jansen
04-Apr-11 16:26
Ok, well as I said at the start I'm no expert in JavaScript - I just hack things around until they work (or give up too).

All I can say is that if you're posting to the same page and your result tab is opening - but there are no results - then I'd suspect something else in your page is going wrong: it sounds like the javascript is doing its job and the problem may lie elsewhere in your form handling & results display code.

Sorry I couldn't help you resolve it.

[Edited by Stanley on 04-Apr-11 16:26]
04-Apr-11 20:36
@Stanley --No the results are showing, you didnt fully read my last one or maybe I wasnt clear. The tab isnt changing as it should to the results tab. The javascript is wrong. Nothing is wrong with the form at all. I am using my older template to try to solve this.

However, I have found on this one and the other that, the biggest problem I have is that (and even on this template), if the results tab has TOO many results the page then scrolls downward and shifts out of focus of the tabs which can then be scrolled back up to. I need it to function to jump to divs as clicked or submitted from a a form. But I need it to always start at the top tabs too, even if there are lots of search results. Any ideas on this?

--
Confidence comes from proven ability--tim jansen
05-Apr-11 01:34
With regards to your page scrolling down to the end when you display a lot of results I think we're getting a little off-topic here, but maybe this will help:

http://articles.sitepoint.com/article/preserve-page-scroll-position
05-Apr-11 10:22
Yeah.. that didnt do anything at all. I give up.

--
Confidence comes from proven ability--tim jansen
06-Apr-11 11:19
I used the code above and it was really very useful to me. But I have a question for you.
Let 's assume that I have the 3 tabs created and in the contentDiv of the second tab I want to put a link to another page.
The page that I want to jump to, should have the same interface (the three tabs) but I want from this page to focus on the second tab, not the first which is the default. Is that possible?
..sorry for my english..
06-Apr-11 11:49
When I say 'focus on the second tab' I mean that the contentDiv of this tab has to be visible and the other contentDivs have to be hidden.
06-Apr-11 12:04
@panos_pap. Are you talking to me? I need yes, a form submit that jumps to another tab, or even the ability to have hyperlinks. But when I am on another tab, it shifts focus, the others arent hidden, just showing. Anyone out there that can help would be greatly appreciated.

--
Confidence comes from proven ability--tim jansen
06-Apr-11 13:37
To learn how to jump to another tab after performing some calculation, just re-read the original article and look at the javascript that sets up the tabs in the first place. The showTab function reacts to a click on the tab's title bar, extracts the URL of that tab, strips off the # target, and jumps to the corresponding div, using CSS to hide the other divs. In reality, everything is all on one page, just not all visible at one time thanks to CSS. (If you screw up the javascript, then you see all the tabs at once, one below the other).

In the first tab ("#about"), add the following example form with two buttons. One fetches inputs and displays results (and stores the result for display on another tab), while the other button simply jumps to another tab (where the results are displayed).

Here's the form:



<p><form name="Exercise_1"><b>Exercise 1:</b><br><br>
<tt>string1:</tt> <input name="string1" value="This is">
<tt>string2:</tt> <input name="string2" value="really cool!"><p>
<tt>combined string1 + ' ' + string2:</tt> <input name="showMeArea" readonly="true"><br>
<input type="button" value="Combine Strings"
OnClick="var results=string1.value + ' ' + string2.value;showMeArea.value=results;document.getElementById('results_box').innerHTML=results;" ></p>
<p><form name="Jump"><input type="button" value="Jump"
OnClick="showTab2('#usage');" ></p>
</form></p>



The key thing is that we need a new javascript function that is similar to the showTab function, but instead of fetching and parsing the URL of the object that was clicked on, it is handed as a parameter the URL to use. Here is the new showTab2 function:



function showTab2(goto) {
var selectedId = getHash( goto );
// Highlight the selected tab, and dim all others.
// Also show the selected content div, and hide all others.
for ( var id in contentDivs ) {
if ( id == selectedId ) {
tabLinks[id].className = 'selected';
contentDivs[id].className = 'tabContent';
} else {
tabLinks[id].className = '';
contentDivs[id].className = 'tabContent hide';
}
}
// Stop the browser following the link
return false;
}



Lastly, we need some place in the other tab to put the results:



<p><h3>Results</h3><br><br>
<tt>results:</tt> <span id="results_box"> </span>.</p>



I tested this and it works for me.
21-Apr-11 21:35
Love this article--helped me solve something that's been bugging me for days.

i've run into one snag: how to I create two different sets of tabs on the same page? I'm just learning javascript so I'd appreciate being pointed in the right direction.

Thanks!
25-Apr-11 04:37
@SBrentnall: Thanks - glad you liked it! I already posted a solution for multiple sets of tabs earlier in the thread:

http://www.elated.com/forums/topic/4717/#post19137

Cheers,
Matt

--
Matt Doyle, Elated
25-Apr-11 12:37
Got it--thanks so much, Matt.
29-Apr-11 13:41
Great article! One question, and I apologize if it's already been addressed and I overlooked it, but is there a way to have a specific tab open up via a URL that exists on a different page? For example, could I type in a URL that opens the second tab in the example (The Advantage of Tabs) instead of the first tab? Probably not possible, but just curious. I tried going to: http://www.elated.com/res/File/articles/development/javascript/document-object-model/javascript-tabs/javascript-tabs.html#advantages but it just opens the first tab. Thank you.
02-May-11 01:56
@Jason92s: Yes - see here:

http://www.elated.com/forums/topic/4717/#post18005

Cheers!
Matt

--
Matt Doyle, Elated
18-May-11 13:27
So, running into two issues - first of all, here's the page I'm implementing tabs on:

http://www.kyleconrad.com/freelance/expovision/storefront/hotel-single-tab.html

Issue 1 - can't get the tabs to overlap the border on the tabcontent divs, so the border never goes away. I know it's a matter of positioning, but no matter what I do, I can't seem to make it so that the selected tab appears to have a simple white background in conjunction with the tab display as opposed to separated by a border. Here's the CSS used on the tabs (as you can see if you view source on that page as well):


ul#tabs {
list-style-type: none;
margin-top: 0px;
margin-right: 0;
margin-bottom: 0;
margin-left: 20px;
padding-top: 0;
padding-right: 0;
padding-bottom: 3px;
padding-left: 0;
}
ul#tabs li {
display: inline;
}
ul#tabs li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #666;
background-color: #FFF;
border: 1px solid #666;
border-bottom: none;
text-decoration: none;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
behavior: url(PIE.php);
}
ul#tabs li a:hover {
background-color: #ebf4ff;
color: #0071fe;
}
ul#tabs li a.selected {
color: #666;
background-color: #FFF;
}



Issue 2 - the bigger one. As you can see when you click on the tabs, it loads the content of the desired tab, but none of the actual styling within. I've been messing with this for over an hour now and cannot figure out where the error is that's causing the tab content to not load according to the CSS rules in place - upon initially loading, the first tab appears to follow all of the specifications, but then when clicking over to the next tab, it all goes to shit - specifically the border, the P tags, and the list on the second tab. For some reason, the img places in the third tag works fine according to the CSS class it is assigned, but none of the other rules in place take effect.

Issue 3 - minor, but still confusing - I can't scroll down on the smaller tabs (such as the first and third ones)? The scrollbar appears on the right, but when I go to scroll, it won't let me and makes it stay at the top.

Anyone able to help on any of these issues? Thanks in advance.
19-May-11 07:18
@ortizdupri:

Issue 1 - Your tabs look fine to me in all the browsers I've tested (FF4 Win/Mac, Safari Mac, Opera Mac, IE9 Win). What browser(s) are you testing with?

Issue 2 - I'm not sure what styling you mean, but the content looks OK to me. If I switch from tab 1 to, say, tab 2 then back to tab 1, then tab 1's content looks exactly the same as it did when the page loaded.

Issue 3 - The browser scrollbar? Works fine for me in all browsers I've tested.

--
Matt Doyle, Elated
19-May-11 08:02
@ Matt -

Thanks, yeah I actually went back through and cleaned some stuff up and kind of did workarounds for the issues.

1 - It was initially a problem in Chrome and FF4, but I just used a different method to render the line - a background border in a DIV behind the tabs, and that seemed to work.

2 - my "tabcontent" class wasn't seeming to affect the content of the tabs when they got pulled up, so I went back through and affected the individual elements - i.e. the p tag and what not - with classes. That seemed to fix my issue that I was having. Definitely not as easy and more of a workaround, but whatever works.

3 - I figured out that it was an issue with Javascript elsewhere on the page, something having to do with a DIV that's supposed to "stick" to its position. Once I took out that element, the scrolling works fine.

Took some jimmying with the coding and all that, but it seems to all be working now!
19-May-11 23:51
@ortizdupri: Ah, I see. Glad it all works OK now

--
Matt Doyle, Elated
24-May-11 11:04
Matt, I'm sorry, I must be missing something here. I made the two changes per this post:

http://www.elated.com/forums/topic/4717/#post18005

My URL to my tab page is:

http://www.csm.ca.gov/csmint/tabs/

If I click on the "test link" link under the "Claims Info" tab it should go to the Documents tab but nothing is happening. I know it's something simple I'm missing, just can't figure out what.

Thank you.
27-May-11 03:49
@Jason92s: You didn't add the 1st code snippet at the end of init(). You added it outside of init().

Also it looks like you're trying to link to one tab from within another tab. To do this, you'll need to add click event handlers to your links, as I outlined in this reply:

http://www.elated.com/forums/topic/4717/#post18939

Cheers,
Matt

--
Matt Doyle, Elated
06-Jun-11 17:44
Thank you Matt, works great! Really like this script!
07-Jun-11 06:59
@Jason92s: Great stuff - glad you got it working

--
Matt Doyle, Elated
23-Jun-11 14:10
Hi Matt,
I skimmed the above questions and didn't see this addressed, if it was, I apologize.

I'm relatively new to javascript and css, but on my site, I have a lot of tabs, so it ends up running into the next line, but starts about halfway down the first row of tabs, making them unreadable. Is there anyway I could either completely separate these rows, or create a scrolling system (something like how firefox deals with tabbed browsing when you have many tabs open)?

Thanks
23-Jun-11 22:51
@RoryTheRoman: If I understand your question, then you could wrap the whole thing in a div and set overflow: scroll on the div. The user could then scroll left and right to view all the tabs.

It might be better, though, to try to group your tabs into separate pages of tabs so it's less overwhelming for the user.

Cheers,
Matt

--
Matt Doyle, Elated
24-Jun-11 12:23
After trying out the scrolling, and reading through some of your previous responses, I decided it would look better to use nested tabs that you described above. It worked perfectly.

Thanks
27-Jun-11 22:29
@RoryTheRoman: Sounds like a good plan! Glad you got it working.

--
Matt Doyle, Elated
18-Jul-11 10:10
Thanks for the script.

However I have come across one issue. Not sure if there is a solution.

If I have a Google map in one of the tabs, then only a fraction of the tab is loaded (top left). The JS for the map is initialized in the head after the init for the tabs. If I do it the other way round it makes no difference.

If I put the google map on the first tab all is fine and the tabs are all okay. However I would rather not have it on the first tab.

Is there any solution to this, where another JS is used within the tabs.

Thanks.
18-Jul-11 23:57
Hi Ian,

Hmm, not sure. You could try putting the call to init() at the end of your markup, before the </body> tag, instead of as an onload handler in the <body> tag?


<script>init();</script>
</body>


--
Matt Doyle, Elated
19-Jul-11 01:36
Thanks. But it didn't work - can't believe I am the only person with this issue, so will hunt around the net.

Keep up the good work
21-Jul-11 09:01
I was looking for an 'easy intro' to make a set of tabs in an HTML page and this is perfect. I am not looking for rocket science, but this would have taken me days to put together. Thanks a million for a great starter pack.

--
PEJK
22-Jul-11 00:11
@Ian: It may be that the Google JavaScript is simply incompatible with the JavaScript to create the tabs. Or you may need to call a function in the Google JS to kick it off once the tab is loaded or displayed.

Also check your JavaScript console for errors.

@PEJK1953: You're welcome - thanks for your comment

--
Matt Doyle, Elated
24-Jul-11 10:46
Re jumping straight to a tab.

http://www.elated.com/forums/topic/4717/#post18005

I cannot get this to work & wanted to make sure I have the code in the correct place.

The 7 lines should look like (I assume)




// If a hash was supplied in the page URL,
// display the corresponding tab (if found)
if ( document.location.hash ) showTab( document.location.hash.substring(1) );
}

function showTab( selectedId ) {
if ( typeof selectedId != 'string' ) var selectedId = getHash( this.getAttribute('href') );
06-Aug-11 12:22
@Ian

Did you add onclick to the link you use to jump to a particular tab? I ran into that issue a few weeks ago - take a look at the following page and see the source of the link which is shown on the third tab where it says "Jump to GBP".

http://www.collents.eu/ge-economy.php

That link is like so:


<a href='#GBP' onclick='return showTab(this)'>Jump to GBP</a>
30-Oct-11 06:19
Dear Elated, I'm working on my websitemakerscript and want to sell it through the internet and would like to use this *tab*-script as mentioned above, but need to know if I may do so, i.e. what about license etc?

Hope to hear from you,

best regards,
mrsa
31-Oct-11 08:11
It is cool!
02-Nov-11 03:06
@mrsa: Fine by me! If you use the code then a credit/link to www.elated.com would be appreciated.

@Asa: Thanks

--
Matt Doyle, Elated
08-Nov-11 02:06
Great script!

Question, I have searched but had trouble finding a solution.
What is the easiest way to have the page load on the second tab.

I want to keep my tab order (1,2,3) but load with that second (middle) tab visible.

I've seen people changing the JS to allow for url's with the tab name, but that doesn't quite seem like the best solution for me.

Thanks in advance for your help!
11-Nov-11 03:28
dsol828: To display a different tab by default when the page loads, you should be able to change just these 2 lines of code:


if ( i == 0 ) tabLinks[id].className = 'selected';




if ( i != 0 ) contentDivs[id].className = 'tabContent hide';



Just change the 0 (zero) to the index of the tab you'd like to display (0=first tab, 1=second tab etc).

--
Matt Doyle, Elated
11-Nov-11 23:09
@matt

That did the trick! Thanks for the help!
17-Nov-11 15:00
I'm having problems jumping to a tab from another html page. The links at at the bottom right side of the index page. I've tried to modify the script as shown in earlier posts but it's not working for me. Please take a look and let me know how to fix. Thanks!

http://rancudo.com/testing/
18-Nov-11 00:47
@dsol828: You're welcome

@kcran: If you just make the 2 modifications shown in http://www.elated.com/forums/topic/4717/#post18005 then it should work.

--
Matt Doyle, Elated
18-Nov-11 07:16
Matt,
I had made the modification from post18005 already. The result is that it goes to the tab but does not load the related div content for that tab but just leaves an empty page.

Here's the header code from the page for you to examine...



<script type="text/javascript">
//<![CDATA[

var tabLinks = new Array();
var contentDivs = new Array();

function init() {

// Grab the tab links and content divs from the page
var tabListItems = document.getElementById('tabs').childNodes;
for ( var i = 0; i < tabListItems.length; i++ ) {
if ( tabListItems[i].nodeName == "LI" ) {
var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
var id = getHash( tabLink.getAttribute('href') );
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById( id );


// If a hash was supplied in the page URL,
// display the corresponding tab (if found)
if ( document.location.hash ) showTab( document.location.hash.substring(1) );

}
}

// Assign onclick events to the tab links, and
// highlight the first tab
var i = 0;

for ( var id in tabLinks ) {
tabLinks[id].onclick = showTab;
tabLinks[id].onfocus = function() { this.blur() };
if ( id == "caracteristicas" ) tabLinks[id].className = 'selected';
i++;
}

// Hide all content divs except the first
var i = 0;

for ( var id in contentDivs ) {
if ( id != "caracteristicas" ) contentDivs[id].className = 'tabContent hide';
i++;
}
}


// function showTab() {
// var selectedId = getHash( this.getAttribute('href') );

function showTab( selectedId ) {
if ( typeof selectedId != 'string' ) var selectedId = getHash( this.getAttribute('href') );

// Highlight the selected tab, and dim all others.
// Also show the selected content div, and hide all others.
for ( var id in contentDivs ) {
if ( id == selectedId ) {
tabLinks[id].className = 'selected';
contentDivs[id].className = 'tabContent';
} else {
tabLinks[id].className = '';
contentDivs[id].className = 'tabContent hide';
}
}

// Stop the browser following the link
return false;
}

function getFirstChildWithTagName( element, tagName ) {
for ( var i = 0; i < element.childNodes.length; i++ ) {
if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
}
}

function getHash( url ) {
var hashPos = url.lastIndexOf ( '#' );
return url.substring( hashPos + 1 );
}

//]]>
</script>
21-Nov-11 23:54
@kcran: No idea then. That mod works for me. You might have other JS in the page that is conflicting. Try running init() at the end of your page within a script tag, instead of as the body load handler. That sometimes works. You can also use console.log() to log debug messages to the browser console, so you can see which parts of the code are (or aren't) running.

--
Matt Doyle, Elated
03-Jan-12 08:33
Thank you very much Matt -- this is Just what I was looking for and it works beautifully!

Do you know of a way to remove the hash from the URL? I have to work on that part now. Just trying to tweak the js and hoping that someone else has done it already.
11-Jan-12 16:43
@mfouwaaz: What URL? The URLs inside the links to the tabs? Why would you want to remove the hashes?

--
Matt Doyle, Elated
02-May-12 21:37
Good script. Thank you for sharing it!
I believe I had it working fine at a point, but I made the page into a Microsoft Dynamic Web Template, and tested it again.

Now I'm getting a result where after choosing a tab, the page scrolls down. In Chrome and Safari it scrolls down to cover the header, on iPhone Safari and IE it scrolls down to the selected tab content...

Any ideas?

The page in question is below

http://traversecityinformation.com/xPHP/TraverseCityInformation/A%20Listing/index_copy(2).html

Thanks for your consideration.
05-May-12 13:01
NEVER MIND...
Although 5 out of 6 tabs had tab content on the page, I made the sixth a link to an outside page.

Lesson, don't take a line and link to another page.

Thanks again!
09-Aug-12 09:49
Love the code for tabs.
Have one question. How do you set the width of the tabs? I have tried to edit the tabcontent class and the only option I have is auto and inherit.
The data on the tab does not fill the whole tab and need to make the tab narrow and not fill the whole screen.
09-Aug-12 11:24
@Alexio

Just another javascript tabs fan passing through here... but I'll try and help.

You just need to edit the css, but it sounds like something's going wrong if you say your tabs are filling up the whole screen. Do your tabs look anything like the demo version here?

http://www.elated.com/res/File/articles/development/javascript/document-object-model/javascript-tabs/javascript-tabs.html

If you look at the source code for that page you'll see the 4th line in the css starting ul#tabs li a {

Just change it to read:

ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em 0.6em; text-decoration: none; }


You'll see the ul#tabs li a.selected line already has different padding set for the selected tab. You'll just need to play about with these to suit your own preference.

Just a thought but are you trying to edit the css directly in your page file, or through your web browser's element inspector?

If it's any help you can do what I do when I want to quickly experiment with changing stuff like this - if you have the Opera browser installed and then right click to view the page source you can make any changes you like in the HTML then click on the "Apply Changes" button at the top of the source viewer then go back to the tab with the page on to see what your changes did. If you refresh the page it'll just go back to whatever the original settings.

If you can't sort it out can you post a link to your page?

Hope this helps.
09-Aug-12 11:33
I think I should clarify a little better.
It is not the tab headings however it is the div.tabContent class that I want to modify. I need the tab content frame to be narrower. I have tried to adjust the right margin to make it more narrow and seems to work. However I think there should be a setting to set the width of the content page. It seem s to deafult to 100% width.
09-Aug-12 11:38
Try adding width to the tabContent class, like this (which works on Matt's demo page):

div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; width:75%;}
09-Aug-12 11:51
That seems to work however I am concerned with users having different size windows like they do in our work environment. Smaller windows will reduce the width of the frame and appear to change the layout of the content on the tab. Is there a way to hard code a set width and not a percentage of the visable window width? I am using the tabs on an electronic eform and other content of the form does not fill the width of the screen and is set at a fixed width. I need the tab content frame to match.
09-Aug-12 13:00
Yes, you can just set it to a fixed pixel size instead, e.g.

div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; width:450px;}
09-Aug-12 13:08
Worked like a charm.
Thanks alot!
09-Aug-12 13:13
You're welcome
21-Aug-12 08:56
Hey Matt, this was the gift which just keeps on giving.

Here's a shameless plug for my latest effort, javascript tabs full of multi-lingual goodness!

http://cels.collents.eu/

The link at the bottom of the page demonstrates how to open up another tab (in this case the contact tab).

In case you or anyone is interested the site uses a JSON language switcher which works pretty well - no ugly urls and the site appears by default in whichever language the visitor has set as the preferred language in their browser.

I've also got it to hide a tab for English readers and show it for everyone else, something I'll be expanding the use of with this particular site.
05-Sep-12 09:09
Great work - Thank you!

Sorry but maybe I missed it. I would like to use this for ASP.Net and am trying to figure out if I can switch to another tab from code in the code behind page?

Can anyone please help?

Thank you in advance.
05-Sep-12 15:56
You can't.

javascript is client-side and ASP.NET is server-side which runs and is completed before javascript even starts to load.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
06-Sep-12 10:59
You can't? I know next to nothing about ASP.NET but I was bit surprised at that so I went looking. It says here that you can add javascript to your ASP.NET code.

http://ondotnet.com/pub/a/dotnet/2003/09/15/aspnet.html

Is it not possible with a bit of jiggery-pokery, or am I missing something?

(edit) "which runs and is completed before javascript even starts to load" may be what I'm missing!

[Edited by Stanley on 06-Sep-12 17:03]
07-Sep-12 13:12
Yes you can deliver javascript to the browser, in exactly the same way you can deliver HTML, CSS, Flash, Images, etc. etc.

In ASP.NET the "code behind" runs on the server before the resulting HTML is sent to the user agent.

ASP.NET cannot "switch tabs" without the user agent making another request to the server for the content to be displayed.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
10-Sep-12 12:35
Hi Matt,

A big thank you for creating this script and posting so many helpful responses to questions. I've utilized the code on a website that is currently under development successfully but only noticed a small problem today when I put more content in one of the tabs.

The content (just text) runs to a goodish number of lines meaning you have to scroll down the page. I've placed a 'Go to the next tab' link at the bottom of this text as per your instructions.


<p><a onclick="return showTab(this)" href="#tab2">Go to the next tab</a>


This works just fine but unfortunately does not scroll the page up. Because there is less content on in the second tab users have to manually scroll up the page to view it. Not a massive deal i'm sure you will agree (!) but none-the-less not ideal.

I've spent a good few hours hunting around this forum and other websites experimenting but have yet to resolve it.

As this is the final tweak to what otherwise is a superb addition to my website I was hoping you would be able to suggest a solution.

Any help gratefully received!!

Thanks in advance.

Alex
11-Sep-12 07:08
@pepper116: You can use the scrollTo() method to scroll the viewport up to the top of your tabs after switching tabs:

http://www.w3schools.com/jsref/met_win_scrollto.asp

--
Matt Doyle, Elated
31-Mar-13 14:42
Hi Matt,

I tried using your JavaScript tabbed content as a crutch to provide translations for article descriptions since the webshop I decided to use does not come with multilingual support. The problem now is that as soon as when I start using the script for a second product, the script does not work anymore but only works for the first product.

To solve this problem I dug all the way through this thread and stumbled over how you explained to use the script with several different tabbed areas on one page. I tried that solution (although it is like a hamster trying to build a spaceship with me - I am not programmer) but did not get it to work. It would also be good if the solution could work as independently as possible and would not need explicit variables to be declared and the likes.

When I looked around further, I also came across using CSS to solve my problem, but that seemed to work even less. Now I am pretty lost how I can actually solve this problem so that I can just add articles and such without having to keep track of what number of variable I call or something. Is using JavaScript even still the proper solution? The only thing I know is that I am pretty lost with this

Would you have a sixth grade solution for me how I can solve this? You can find the page I am working on under http://comficare.jimdo.com/deutsch/shop/

It would be really great if you could help me sort this out.

Thank you,
JP
01-Apr-13 05:37
JP,

I'm not sure if this will help but here's a working example of a page with a 2nd set of tabs - you will see them if you click on the "Services" tab (i.e. the 2nd tab - it may display in another language when you land there, depending on your browser's language preference setting).

http://cels.collents.eu

This example includes translation as well, by the way, and might give you an idea how to structure and translate your own site a little differently.

You can grab the jstab source file by looking at the page source code.

The translation system used is pretty much as is described here:

http://www.mind-it.info/2010/02/22/a-simple-approach-to-localization-in-php/?replytocom=23

Good luck!
01-Apr-13 16:31
Hello Stanley,

Thank you very much for your quick feedback. I tried using that solution but somehow I could not get that to work either. The tabs were never styled as tabs but only as list items.

I think that is related to the page being hosted by Jimdo and them disabling a lot of script functionalities. I saw a solution by another Jimdo page that works based on jQuery. However, no matter how hard I tried, I could not get it to work.

Here is a link to the page with the working tabs hosted on Jimdo:
http://www.pictoo.be/wall-art/play/lego-vintage-1/#cc-m-product-5526255517

So if you could give me advice on how to implement that, I would be really grateful.

Thank you,
JP
25-Apr-13 07:34
This is a great post and I love this tabs example!

Is there a way to make the tabs scrollable? I have quite a few tabs and I'd like the user to be able to scroll to the right or left to get the tabe they are looking for.
29-Apr-13 23:27
@JP: Looks like that page uses jQuery UI's tabs, if that helps? http://jqueryui.com/tabs/

@chynawhyte: You could try wrapping the tabs in a parent div using overflow: scroll, or perhaps in an iframe?

--
Matt Doyle, Elated
07-Nov-13 20:06
hey mate thank for that grate help but i have an issue, for some reason, it's not switching from tab to tab. I've copy the code exactly and it's not working aim i missing some thing

here the java script


<script type="text/javascript">
//<![CDATA[
var tabLinks = new Array();
var contentDivs = new Array();
function init() {
// Grab the tab links and content divs from the page
var tabListItems = document.getElementById('tabs').childNodes;
for ( var i = 0; i < tabListItems.length; i++ ) {
if ( tabListItems[i].nodeName == "LI" ) {
var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
var id = getHash( tabLink.getAttribute('href') );
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById( id );
}
}
// Assign onclick events to the tab links, and
// highlight the first tab
var i = 0;
for ( var id in tabLinks ) {
tabLinks[id].onclick = showTab;
tabLinks[id].onfocus = function() { this.blur() };
if ( i == 0 ) tabLinks[id].className = 'selected';
i++;
}
// Hide all content divs except the first
var i = 0;
for ( var id in contentDivs ) {
if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
i++;
}
}
function showTab() {
var selectedId = getHash( this.getAttribute('href') );
// Highlight the selected tab, and dim all others.
// Also show the selected content div, and hide all others.
for ( var id in contentDivs ) {
if ( id == selectedId ) {
tabLinks[id].className = 'selected';
contentDivs[id].className = 'tabContent';
} else {
tabLinks[id].className = '';
contentDivs[id].className = 'tabContent hide';
}
}
// Stop the browser following the link
return false;
}
function getFirstChildWithTagName( element, tagName ) {
for ( var i = 0; i < element.childNodes.length; i++ ) {
if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
}
}
function getHash( url ) {
var hashPos = url.lastIndexOf ( '#' );
return url.substring( hashPos + 1 );
}
//]]>
</script>



here the html



<td >
<ul id="tabs">
<li>
<a class="selected" href="#cart">About JavaScript tabs</a>
</li>
<li>
<a href="#summary">Advantages of tabs</a>
</li>
</ul>

<div id="about" class="tabContent">
<h2>Product Info</h2>
<div>
<p>this is where we willl add to cart, price of info and how qunity amount info.</p>
</div>
</div>

<div id="advantages" class="tabContent hide">
<h2>Advantages of tabs</h2>
<div>
<p>here will be a quick summry on out product</p>
</div>
</div>



</td>


I'm kinda new to all this stuff i done a short 3 month course on everything and self thought my most of the thing I know.

so too some of you out there out of this may sound like a stupid question but please help me.
24-Nov-13 11:42
Hi,

I'm making a page with quite a few tabs and they go over the page width. How do you handle this elegantly? Here's my code--(some of the <div>s are empty cause this is a proof of concept for now but they will be filled in eventually).

Thanks a ton in advance!




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- This page is copyright Elated Communications Ltd. (www.elated.com) -->

<title>JavaScript tabs example</title>

<style type="text/css">
body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
ul#tabs li { display: inline; }
ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
ul#tabs li a:hover { background-color: #f1f0ee; }
ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; }
div.tabContent.hide { display: none; }
</style>

<script type="text/javascript">
//<![CDATA[

var tabLinks = new Array();
var contentDivs = new Array();

function init() {

// Grab the tab links and content divs from the page
var tabListItems = document.getElementById('tabs').childNodes;
for ( var i = 0; i < tabListItems.length; i++ ) {
if ( tabListItems[i].nodeName == "LI" ) {
var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
var id = getHash( tabLink.getAttribute('href') );
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById( id );
}
}

// Assign onclick events to the tab links, and
// highlight the first tab
var i = 0;

for ( var id in tabLinks ) {
tabLinks[id].onclick = showTab;
tabLinks[id].onfocus = function() { this.blur() };
if ( i == 0 ) tabLinks[id].className = 'selected';
i++;
}

// Hide all content divs except the first
var i = 0;

for ( var id in contentDivs ) {
if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
i++;
}
}

function showTab() {
var selectedId = getHash( this.getAttribute('href') );

// Highlight the selected tab, and dim all others.
// Also show the selected content div, and hide all others.
for ( var id in contentDivs ) {
if ( id == selectedId ) {
tabLinks[id].className = 'selected';
contentDivs[id].className = 'tabContent';
} else {
tabLinks[id].className = '';
contentDivs[id].className = 'tabContent hide';
}
}

// Stop the browser following the link
return false;
}

function getFirstChildWithTagName( element, tagName ) {
for ( var i = 0; i < element.childNodes.length; i++ ) {
if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
}
}

function getHash( url ) {
var hashPos = url.lastIndexOf ( '#' );
return url.substring( hashPos + 1 );
}

//]]>
</script>
</head>
<body onload="init()">
<h1>JavaScript tabs example</h1>

<ul id="tabs">
<li><a href="#about">Assgnment</a></li>
<li><a href="#english">English</a></li>
<li><a href="#german">German</a></li>
<li><a href="#danish">Danish</a></li>
<li><a href="#french">French</a></li>
<li><a href="#spanish">Spanish</a></li>
<li><a href="#dutch">Dutch</a></li>
<li><a href="#italian">Italian</a></li>
<li><a href="#japanese">Japanese</a></li>
<li><a href="#korean">Korean</a></li>
<li><a href="#chinese_simplified">Simplified Chinese</a></li>
<li><a href="#chinese_traditional">Traditional Chinese</a></li>
<li><a href="#1">Czech</a></li>
<li><a href="#2">Finnish</a></li>
<li><a href="#3">Hungarian</a></li>
<li><a href="#4">Norwegian</a></li>
<li><a href="#5">Ukrainian</a></li>
<li><a href="#6">Vietnamese</a></li>
<li><a href="#7">Thai</a></li>
<li><a href="#8">Swedish</a></li>
<li><a href="#9">Portuguese</a></li>
<li><a href="#0">Slovenian</a></li>
</ul>

<div class="tabContent" id="about">
<h2>About JavaScript tabs</h2>
<div>
<p>JavaScript tabs partition your Web page content into tabbed sections. Only one section at a time is visible.</p>
<p>The code is written in such a way that the page degrades gracefully in browsers that don't support JavaScript or CSS.</p>
</div>
</div>

<div class="tabContent" id="english">
<iframe src="https://app.io/7OkyqQ?orientation=portrait&device=iphone5" height="607px" width="291px" frameborder="0" allowtransparency="true" scrolling="no"></iframe>
</div>

<div class="tabContent" id="german">
<iframe src="https://app.io/7OkyqQ?orientation=portrait&device=iphone5" height="607px" width="291px" frameborder="0" allowtransparency="true" scrolling="no"></iframe>
</div>

<div class="tabContent" id="danish">
<iframe src="https://app.io/7OkyqQ?orientation=portrait&device=iphone5" height="607px" width="291px" frameborder="0" allowtransparency="true" scrolling="no"></iframe>
</div>

<div class="tabContent" id="french">
<iframe src="https://app.io/7OkyqQ?orientation=portrait&device=iphone5" height="607px" width="291px" frameborder="0" allowtransparency="true" scrolling="no"></iframe>
</div>

<div class="tabContent" id="spanish">
<iframe src="https://app.io/7OkyqQ?orientation=portrait&device=iphone5" height="607px" width="291px" frameborder="0" allowtransparency="true" scrolling="no"></iframe>
</div>

<div class="tabContent" id="dutch">
<iframe src="https://app.io/7OkyqQ?orientation=portrait&device=iphone5" height="607px" width="291px" frameborder="0" allowtransparency="true" scrolling="no"></iframe>
</div>

<div class="tabContent" id="italian">

</div>

<div class="tabContent" id="japanese">

</div>

<div class="tabContent" id="korean">

</div>

<div class="tabContent" id="chinese_simplified">

</div>

<div class="tabContent" id="chinese_traditional">

</div>

<div class="tabContent" id="1">

</div>

<div class="tabContent" id="2">

</div>

<div class="tabContent" id="3">

</div>

<div class="tabContent" id="4">

</div>

<div class="tabContent" id="5">

</div>

<div class="tabContent" id="6">

</div>

<div class="tabContent" id="7">

</div>

<div class="tabContent" id="8">

</div>

<div class="tabContent" id="9">

</div>

<div class="tabContent" id="0">

</div>



</body>
</html>

05-Jan-14 10:46
I dont now how to move to the next tab
coz i have too many lines i my page so I want to use link or button to go to the next page...

I tried this But It does not work...

<p><a onclick="return showTab(this)" href="#tab2">Go to the next tab</a></p>

If any one know the answer please reply

--
Salman
05-Jan-14 16:05
showTab(this) is simply going to show the same tab as you are clicking on, because the key word 'this' is a reference to itself.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
05-Jan-14 20:31
Thanks 4 your reply chrishirst.....

But I want the exact answer How to get it.....


pls someone give me the answer...

[Edited by salmanmdz on 05-Jan-14 20:32]

--
Salman
06-Jan-14 09:17
And the remuneration for this contracted work will be??

[Edited by chrishirst on 20-Mar-14 09:39]

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
19-Mar-14 12:12
Hi Matt--
thanks so much for this script—I looked into a lot of ways of adding tabs and this is was the most flexible. I was able to get them to look exactly as I wanted.

My only problem is getting the page to load with a specific tab open. I've updated the script with the mods you mentioned to @mashdot, but it still doesn't work.

If I paste http://www.ghs.com/events/eelive_2014.html#kiosk
the page still loads with the first tab (#stage)!

I saw in another post that someone else had trouble with this and you suggested other JS running on the page could be conflicting. We have analytics and tracking JS that's included in the footer--could this be the source of the problem?

--
ljs
18-Jun-14 05:09
Can we assign the keyboard shortcuts for that TAB

Need yours Help on that


-Regard
Niraj

--
Niraj
18-Jun-14 07:32
http://www.w3schools.com/tags/att_global_accesskey.asp

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
18-Jun-14 09:07
Its Highliting the TAB but it is not able to open the TAB

--
Niraj
18-Jun-14 13:19
Use the onFocus event (http://www.w3schools.com/jsref/event_onfocus.asp) to activate the tab then.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
07-Aug-14 02:23
Hi,

I managed to implement this tabs template successfully on my test website.

However, when trying to implement this on my actual site, the three tabs show at once and don't seem to hide regardless of clicking on another tab.

Please see link below to understand what I mean...

http://www.on-protein.com.au/index.php/categories/protein-powder-supplements.html#usage

What baffles me is that I've used the EXACT same coding in both websites, which are both hosted at the sample place and with the same coding even in the <head>. I'm using magento 1.7 and don't know what could be wrong.

Any help is appreciated. I'm trained in html but quite new to javascript and css.

Also, if anyone knows, why does the #usage keep appearing at the end of the URL?

--
Mitz85
08-Aug-14 04:36
In that source code I don't see anywhere that initialises the script, OTHER than a <body> tag that is in the WRONG PLACE

</div>
</div>
</div>
</div>
<body onload="init()">
<ul id="tabs">


And is going to do nothing at all.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
08-Sep-14 02:17
Hi

I have come across some code which uses this way of making tabs. I works fine, but i have been assigned to make som ajustments on it. When there is nothing to show on a tab then the tab should be non visible.
I have made the showTab() return another class if it is to be non visible. It works fine, but when the user then set something so that the tab should be shown, then it doesnt, though it gets the right css style. I have to reload the whole page to make it work. Is there anyway to make this work so that you can control whether the tab should be shown dynamically

thanks in advance
Lars
08-Sep-14 06:56
Javascript has no way of determining if a particular element has or does not have 'content'.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
08-Sep-14 08:58
Hi Lars

You do have a mechanism for the user to set something for the tab to be shown, even though the tab is invisible at that point, right?

I am thinking of AJAX and using the XMLHttpRequest object to refresh showTab() at that point. If that works then your tab should become visible. There seems to be a little bit of work to it but I think it should work.

Pardon me, I have not tested this but am just shooting my head off. I don't even have a system here. Obviously you know better on the subject but it maybe worth a try.

Good Luck!
13-Jan-15 02:51
Very helpful tutorial. I have learned many new things from here about CSS and JavaScript. Thanks author.
05-Mar-15 10:50
This is an awesome script and very helpful to me. I have a question though. How do I enable keyboard navigation to the tab ? i.e, hitting tab will move focus between tabs. I tried using accesskey attribute in href element. But it didnot show the focus on link.
Can someone help me out please?
05-Mar-15 11:01
Used this several times, Great code.
Now have new twist on this. how would I be able to make a second tab password protected? Meaning need password to be able to view content on tab.
05-Mar-15 15:02
What would be the point??

Anything 'password protected' with javascript would require the password to be in the page source code, or require a round trip to the server.

Either that or the whole set up would require recoding using AJAX.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
17-Nov-15 15:47
This code is great, the only problem I have is that when the page is displayed, it is only displaying 2 inches of the pages in the tabs with a scroll bar. I can't see anything in any of the scripting that specifies a page height.

Zeek

--
Zeek
17-Nov-15 17:47
Change the tab height value in the style sheet.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
18-Nov-15 07:50
Chris,

There was no height definition in my CSS. I saw that shochberg had height in his CSS at 60, so I added that to my CSS at 600, but it still is only a couple of inches. Here is the line I added it on.

div.tabContent { border: none; padding: 0.5em; color: #007777; background-color: #f6f6ce; height:600; }

[Edited by zeek69 on 18-Nov-15 07:50]

--
Zeek
18-Nov-15 11:12
600 what?

To be applied correctly, a height value, along with all other dimensional properties require a valid dimension identifier, (%, px, em, pt etc). A value without that means the browser has to 'guess' what you mean.
What they then usually revert to, is the 'height' that would nominally be applied to inline level elements, ie; the height of the element content box, the padding and margins are then added to giver the overall 'box height', and as you are "including" an iframe with an external page, the 'content height' is therefore only made up from the iframe top and bottom margins, padding and border values, because the external document has no width or height that the CSS rendering engine can use.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
27-Jan-16 14:20
This was very helpful, thanks! I'm sort of new to this, could somebody help me apply transitions between tabs when it shows content? Thanks.
28-Jan-16 03:40
The purpose of the tutorial is for you to learn how to modify it to suit what you want.

http://forum.jquery.com/topic/how-to-animate-content-between-tabs

Don't forget to come back and add your solution to this thread.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
04-Feb-16 23:26
I seem to be having an issue with the script. I am new to web design and I can't identify the issue. I have copied the CSS portions as provided and have expanded the HTML portions so that I have six tabs. As soon as I go past six something happens so that the content for each tab is displayed on all of the tabs. Any suggestions?
05-Feb-16 08:56
" Any suggestions?"

None whatsoever.


Before anyone can offer the remotest possibility of useful 'suggestions' we need to SEE the problem!

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
08-Feb-16 21:45
Lesson learned. I found out what was wrong with my last question. I have several more questions.

First, when I resize my browser the ul elements get out of whack and no longer line up with the tabcontent elements. As you can see I have used vw to make the text size relative to the viewport, but I am not sure how or if can use it for margins and padding.

Second, I would like to make it so my tabs line up with the edges of the tabcontent elements. Meaning, if I have six tabs, I would like the left edge of the first tab to line up with the left edge of its associated tabcontent, and for the right edge of the last tab to line up with right edge of its associated tabcontent (all while making sure the interior tabs are all equally spaced).

Thanks!


ul#tabs {
list-style-type: none;
margin: 20px 40px 0 40px;
padding: 0 0 0.3em 0;
margin: 30px 0 0 0;
}
ul#tabs li {
display: inline;
}
ul#tabs li a {
color: red;
font-family: 'top_secretbold';
font-size: 135%;
font-size: 1.35vw;
font-weight: bold;
background-color: #ffeecc;
border: 1px solid;
border-color: #696969;
padding: 1vw 1vw .2vw 1vw;
text-decoration: none;
}
ul#tabs li a:hover {
background-color: #ffe5b3;
}
ul#tabs li a.selected {
color: #red;
background-color: #ffe5b3;
border-bottom: none;
font-weight: bold;
padding: 0.7em 0.3em 0.2em 0.3em;
}
div.tabContent {
font-family: 'Courier New', Courier, monospace;
font-weight:bold;
font-size: 135%;
font-size: 1vw;
border: 1px solid #696969;
margin: 0 40px 0 40px;
padding: 0.5em;
background-color: #ffe5b3; }
div.tabContent.hide {
display: none;
}
h1 {
font-family: 'Courier New', Courier, monospace;
color:red;
text-align: center;
font-size: 700%;
font-size: 7vw;
font-weight: bold;
}
h2 {
font-family:'Courier New', Courier, monospace;
color:red;
text-align: center;
font-size: 150%;
font-size: 1.5vw;
}
a {
font-family: 'Courier New', Courier, monospace
}
hr {
border-color: #696969;
}

08-Feb-16 23:51
Give us a clue and we will try to help.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
09-Feb-16 17:02
What exactly are you looking for by way of clue?
10-Feb-16 09:49
As I said in the previous post ... ... We need to actually see the problem.

Just the CSS rules are of no use to recreate your problem.

EVERYTHING is required, the CSS, The HTML it is applied to and any images used as structural or decorative elements.

As I keep saying to many people who post THEIR problems with Elated tutorials, we need to see YOUR code preferably as a URL so we can view and test 'in situ'

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
23-Apr-16 07:23
Matt, thanks for the tabbed page tutorial.

I would like to go a little further. Suppose I have a form even on the same page, and when I submit, I would like to return to the same tab. How could that be archived?
25-Apr-16 12:55
See my reply following mashdot's question dated 08-Sep-09 17:35

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
15-Sep-16 11:05
for camdaw:

Your fixes to the font size helped me a LOT! I am not a coder, just google and play around till it works.

So I am only having one issue now that I'm hoping someone can hjelp me with, and remember, I really have no clue what I'm doing so you may need to give em more details than you think you need to.

So, my text is shrinking and expanding beautifully based on the page size. LOVE IT! BUT, I have images embedded as well that ARE NOT changing size.

How do I fix them? This is how they are currently in my code, so the top part is the label for the image it is shrinking and expanding based on page size, but the image (with link to a document) that I had centered below it using the &nbsp; is not changing:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp3rd QTR FY16 DeCA
<br />

&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp<a href="#" onClick="MyWindow=window.open('https://www.milsuite.mil/book/docs/DOC-306188'); return false;"><img src="https://www.milsuite.mil/book/resources/statics/1737745/DeCA3rdQtrFY16DashboardThumbnail.jpg?a=1472744998785"></a>


THANKS!

[Edited by tmkramer on 15-Sep-16 11:30]
15-Sep-16 18:55
first of all ... Do NOT 'centre' things using non-breaking spaces, as it is just 'guesswork' use the appropriate properties.

And for images:

http://www.w3schools.com/css/css_rwd_images.asp

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
21-Sep-16 14:53
Is there an alternative to divs in the tabbed content?

I'd like to add something like this:
<div id="follow" style="float: right; width: 48%; margin-top: 40px; padding: 0 0 4px 11px; border-left: 1px solid #ccc;">
to divide sections of the page and then float left and right.

When you add this to the content it creates a divide and moves everything below to the next tab. I'm attempting this on the last tab of my page, but it still breaks away from the content.
26-Sep-16 06:00
"it creates a divide" Yep that's why they are called 'div', shorthand for 'division' (or 'divider')

You can use whatever element you prefer or need.

But first, ... Learn the difference between block level and inline level elements, how to use the 'display' property and floating/clearing elements.

https://www.w3.org/TR/CSS2/visuren.html

Plus how to use positioning to overlay/overlap elements, in the same X-Y space.

[Edited by chrishirst on 26-Sep-16 06:01]

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
18-Oct-16 08:25
Somebody has an example of multiple section with tabs on the same page? I just cannot seem to get it!

ie:
some text
tab1 tab2 tab3
other text
tab4 tab5
yet other text
30-Apr-17 13:14
Hi

I am using the script in a website I am building and am just wondering how do I put a link to the tabbed content in my nav menu in my includes/header.php so when a user clicks on a link in the nav menu, it opens the tab content on the php page I have the tabs and it's content on, the url is https://www.broadwaymediadesigns.co.uk/sites/kmsurveys/home-condition-surveys.php

The links are in the dropdown of the main heading Surveys

Thank you in advance
30-Apr-17 14:55
" it opens the tab content on the php page I have the tabs and it's content on, the url is "

READ the whole thread ... There at least three posts explaining this.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
01-May-17 04:28
See post at http://www.elated.com/forums/topic/6299/

[Edited by chrishirst on 02-May-17 12:22]

 
New posts
Old posts

Follow Elated