JavaScript Tabs - Create Tabbed Web Pages Easily

Elated

Gold

Posts: 292

From: Brighton, UK

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!

shochberg

No stars yet

Posts: 4

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; }

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

shochberg

No stars yet

Posts: 4

Thanks. I'll try it. This is really a fun script to learn some of this stuff with.

S

shochberg

No stars yet

Posts: 4

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

mashdot

No stars yet

Posts: 7

From: England

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.

chrishirst

Gold

Posts: 833

From: Blackpool, Lancashire, England

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/

mashdot

No stars yet

Posts: 7

From: England

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

chrishirst

Gold

Posts: 833

From: Blackpool, Lancashire, England

"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/

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

mashdot

No stars yet

Posts: 7

From: England

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@mashdot: The code works for me. What's the URL of your tabs page?

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

mashdot

No stars yet

Posts: 7

From: England

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.

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

mashdot

No stars yet

Posts: 7

From: England

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.

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

shellebelle

No stars yet

Posts: 1

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

shochberg

No stars yet

Posts: 4

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

chrishirst

Gold

Posts: 833

From: Blackpool, Lancashire, England

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/

jdagraf

No stars yet

Posts: 5

From: Merida, Merida, Venezuela

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

jdagraf

No stars yet

Posts: 5

From: Merida, Merida, Venezuela

http://localhost/si22/?mod=product&ident=6&name=CAMARA&categoria=38&pid=13

Thank you for the help

--
Kahl Binar

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

jdagraf

No stars yet

Posts: 5

From: Merida, Merida, Venezuela

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

Hey Kahl,

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

Cheers,
Matt

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

jdagraf

No stars yet

Posts: 5

From: Merida, Merida, Venezuela

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

jdagraf

No stars yet

Posts: 5

From: Merida, Merida, Venezuela

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

Great stuff Kahl. If you need any more help, please feel free to ask.

Cheers,
Matt

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

desibird

Bronze

Posts: 26

From: aberdeen

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

desibird

Bronze

Posts: 26

From: aberdeen

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

desibird

Bronze

Posts: 26

From: aberdeen

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

desibird

Bronze

Posts: 26

From: aberdeen

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

desibird

Bronze

Posts: 26

From: aberdeen

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

desibird

Bronze

Posts: 26

From: aberdeen

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

desibird

Bronze

Posts: 26

From: aberdeen

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

desibird

Bronze

Posts: 26

From: aberdeen

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@desibird: Love that shark image on the homepage

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

Matt

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

desibird

Bronze

Posts: 26

From: aberdeen

@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

desibird

Bronze

Posts: 26

From: aberdeen

@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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

desibird

Bronze

Posts: 26

From: aberdeen

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

desibird

Bronze

Posts: 26

From: aberdeen

@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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

mashdot

No stars yet

Posts: 7

From: England

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Duncan101

No stars yet

Posts: 2

From: Edinburgh, Midlothian, Scotland

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

mashdot

No stars yet

Posts: 7

From: England

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.

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@mashdot: Glad you got it working!

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

Cheers,
Matt

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Duncan101

No stars yet

Posts: 2

From: Edinburgh, Midlothian, Scotland

Excellent, that was ideal!

Many thanks!

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@Duncan101: You're welcome.

Matt

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

horses

No stars yet

Posts: 2

From: Sundre Alberta Canada

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

horses

No stars yet

Posts: 2

From: Sundre Alberta Canada

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.

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

djake1234

No stars yet

Posts: 6

From: Hull

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

djake1234

No stars yet

Posts: 6

From: Hull

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!

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

baerej

No stars yet

Posts: 1

From: Arlington Heights, IL USA

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

Hi Elise,

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

Does that help?

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

elfpixel

No stars yet

Posts: 3

From: Austria

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]

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

elfpixel

No stars yet

Posts: 3

From: Austria

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!

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

elfpixel

No stars yet

Posts: 3

From: Austria

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.

octane

No stars yet

Posts: 2

From: UK

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.

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

octane

No stars yet

Posts: 2

From: UK

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.

djake1234

No stars yet

Posts: 6

From: Hull

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

djake1234

No stars yet

Posts: 6

From: Hull

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

djake1234

No stars yet

Posts: 6

From: Hull

@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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@djake1234: I think we'll need to see your page to help further. Can you post the URL?

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

djake1234

No stars yet

Posts: 6

From: Hull

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Carla

No stars yet

Posts: 1

From: Highlands Ranch, CO, USA

Matt,

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

--
Live your dreams!

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

bgood

No stars yet

Posts: 6

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!

bgood

No stars yet

Posts: 6

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.

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@bgood: Thanks for posting your solution - glad you got it working.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

abyteman

No stars yet

Posts: 1

From: Toms River, NJ United States

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!

sixer

No stars yet

Posts: 2

From: Pittsburgh, PA

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.

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

sixer

No stars yet

Posts: 2

From: Pittsburgh, PA

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.

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

armstra

No stars yet

Posts: 6

From: perth, wa, australia

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

armstra

No stars yet

Posts: 6

From: perth, wa, australia

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

bgood

No stars yet

Posts: 6

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]

armstra

No stars yet

Posts: 6

From: perth, wa, australia

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.

armstra

No stars yet

Posts: 6

From: perth, wa, australia

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,

armstra

No stars yet

Posts: 6

From: perth, wa, australia

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]

philcey

No stars yet

Posts: 2

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 );
      } );
    });

philcey

No stars yet

Posts: 2

please forget last, it was me missplacing the code u told me to add.

armstra

No stars yet

Posts: 6

From: perth, wa, australia

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]

harshida

No stars yet

Posts: 1

From: uk

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

fong

No stars yet

Posts: 2

From: NY, USA

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.....

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

fong

No stars yet

Posts: 2

From: NY, USA

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.

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@fong: Can you post the URL of the page with the problem, so we can take a look?

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

motoringss

No stars yet

Posts: 5

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>

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

motoringss

No stars yet

Posts: 5

Thank you so much, matt
And sorry for my careless mistake...
thanks again for you help.

motoringss

No stars yet

Posts: 5

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?

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

motoringss

No stars yet

Posts: 5

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.....

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@motoringss: Because ebay doesn't allow external JS includes in listing pages (presumably for security reasons).

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

motoringss

No stars yet

Posts: 5

Matt,
Thank you so much, you are professional!!!!

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@motoringss: Happy to help!

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

eman

Bronze

Posts: 39

From: Durham, NC, USA

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]

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

eman

Bronze

Posts: 39

From: Durham, NC, USA

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

eman

Bronze

Posts: 39

From: Durham, NC, USA

Thanks Matt.

picknikker

No stars yet

Posts: 4

From: Germany

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.

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@picknikker: Just put this at the end of the page, before the </body> tag:


<script>init();</script>

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

picknikker

No stars yet

Posts: 4

From: Germany

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.

picknikker

No stars yet

Posts: 4

From: Germany

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

picknikker

No stars yet

Posts: 4

From: Germany

Hi Matt and thanks again. How could I not see this? Now it's working pretty well. Greetings to Australia from Cologne!

dave_gordon

No stars yet

Posts: 8

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

dave_gordon

No stars yet

Posts: 8

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

dave_gordon

No stars yet

Posts: 8

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

dave_gordon

No stars yet

Posts: 8

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

dave_gordon

No stars yet

Posts: 8

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@dave_gordon: What do you mean by "load"?

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

leo_gatmaytan

No stars yet

Posts: 8

From: philippines

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?

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

dave_gordon

No stars yet

Posts: 8

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

dave_gordon

No stars yet

Posts: 8

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

dave_gordon

No stars yet

Posts: 8

Thanks Matt and thank you vary very very much for all you help and assitance.
Kind regards
Dave

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

No problem Dave - hope it helped

Matt

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

CCJared

No stars yet

Posts: 3

From: Basingstoke

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/

devonei

No stars yet

Posts: 1

Funny CCJared i was just on here searching for the exact same thing! I hope Matt responds soon!

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@CCJared and @devonei: See:

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

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

CCJared

No stars yet

Posts: 3

From: Basingstoke

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?

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

stsnider

No stars yet

Posts: 2

From: Carson City, NV, USA

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

stsnider

No stars yet

Posts: 2

From: Carson City, NV, USA

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

anupam27oct

No stars yet

Posts: 1

From: Jagdispur, Bihar, India

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.

masaniparesh

No stars yet

Posts: 1

From: UK

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.

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

bgood

No stars yet

Posts: 6

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

bgood

No stars yet

Posts: 6

Matt - That works! Thanks.

bgood

bgood

No stars yet

Posts: 6

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]

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Sprab

No stars yet

Posts: 3

From: Thailand

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Sprab

No stars yet

Posts: 3

From: Thailand

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

cfsamet

No stars yet

Posts: 2

From: Wyandotte, MI

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?

cfsamet

No stars yet

Posts: 2

From: Wyandotte, MI

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

Sprab

No stars yet

Posts: 3

From: Thailand

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!

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@cfsamet & @Sprab: No problem - I'm glad you both got your tabs working

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Stanley

No stars yet

Posts: 22

From: Tbilisi, Georgia

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?

sahran

No stars yet

Posts: 10

From: overland park, ks usa

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

trucjensen

No stars yet

Posts: 2

From: Broby, Denmark

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)

trucjensen

No stars yet

Posts: 2

From: Broby, Denmark

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@trucjensen: No problem - glad you got it working

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

pswa61

No stars yet

Posts: 2

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.

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Stanley

No stars yet

Posts: 22

From: Tbilisi, Georgia

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]

pswa61

No stars yet

Posts: 2

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.

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

midtoad

No stars yet

Posts: 5

From: Calgary, Alberta, Canada

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

Stanley

No stars yet

Posts: 22

From: Tbilisi, Georgia

@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.

midtoad

No stars yet

Posts: 5

From: Calgary, Alberta, Canada

@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

midtoad

No stars yet

Posts: 5

From: Calgary, Alberta, Canada

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

Stanley

No stars yet

Posts: 22

From: Tbilisi, Georgia

Glad to help and, yes, I live in Tbilisi.

jschatesjscript

No stars yet

Posts: 9

From: Milan, IL US

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

Stanley

No stars yet

Posts: 22

From: Tbilisi, Georgia

@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/

jschatesjscript

No stars yet

Posts: 9

From: Milan, IL US

@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

Stanley

No stars yet

Posts: 22

From: Tbilisi, Georgia

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?

Stanley

No stars yet

Posts: 22

From: Tbilisi, Georgia

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)?

jschatesjscript

No stars yet

Posts: 9

From: Milan, IL US

Yes.

And what script did you modify?

--
Confidence comes from proven ability--tim jansen

midtoad

No stars yet

Posts: 5

From: Calgary, Alberta, Canada

@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

Stanley

No stars yet

Posts: 22

From: Tbilisi, Georgia

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.

jschatesjscript

No stars yet

Posts: 9

From: Milan, IL US

@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

jschatesjscript

No stars yet

Posts: 9

From: Milan, IL US

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

Stanley

No stars yet

Posts: 22

From: Tbilisi, Georgia

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.

jschatesjscript

No stars yet

Posts: 9

From: Milan, IL US

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

Stanley

No stars yet

Posts: 22

From: Tbilisi, Georgia

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]

jschatesjscript

No stars yet

Posts: 9

From: Milan, IL US

@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

Stanley

No stars yet

Posts: 22

From: Tbilisi, Georgia

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

jschatesjscript

No stars yet

Posts: 9

From: Milan, IL US

Yeah.. that didnt do anything at all. I give up.

--
Confidence comes from proven ability--tim jansen

panos_pap

No stars yet

Posts: 2

From: greece

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..

panos_pap

No stars yet

Posts: 2

From: greece

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.

jschatesjscript

No stars yet

Posts: 9

From: Milan, IL US

@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

midtoad

No stars yet

Posts: 5

From: Calgary, Alberta, Canada

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.

SBrentnall

No stars yet

Posts: 2

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!

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

SBrentnall

No stars yet

Posts: 2

Got it--thanks so much, Matt.

Jason92s

No stars yet

Posts: 3

From: Sacramento, CA

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.

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@Jason92s: Yes - see here:

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

Cheers!
Matt

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

ortizdupri

No stars yet

Posts: 2

From: Washington, DC

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.

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

ortizdupri

No stars yet

Posts: 2

From: Washington, DC

@ 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!

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@ortizdupri: Ah, I see. Glad it all works OK now

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Jason92s

No stars yet

Posts: 3

From: Sacramento, CA

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.

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Jason92s

No stars yet

Posts: 3

From: Sacramento, CA

Thank you Matt, works great! Really like this script!

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@Jason92s: Great stuff - glad you got it working

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

RoryTheRoman

No stars yet

Posts: 2

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

RoryTheRoman

No stars yet

Posts: 2

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@RoryTheRoman: Sounds like a good plan! Glad you got it working.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Ian

No stars yet

Posts: 3

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.

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Ian

No stars yet

Posts: 3

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

PEJK1953

No stars yet

Posts: 1

From: UK

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Ian

No stars yet

Posts: 3

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') );

Stanley

No stars yet

Posts: 22

From: Tbilisi, Georgia

@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>

mrsa

No stars yet

Posts: 1

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

Asa

No stars yet

Posts: 3

From: Adachi, Tokyo, Japan

It is cool!

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

dsol828

No stars yet

Posts: 2

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!

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

dsol828

No stars yet

Posts: 2

@matt

That did the trick! Thanks for the help!

kcran

No stars yet

Posts: 2

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/

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

kcran

No stars yet

Posts: 2

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>

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

mfouwaaz

No stars yet

Posts: 1

From: Surrey, BC, Canada

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.

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@mfouwaaz: What URL? The URLs inside the links to the tabs? Why would you want to remove the hashes?

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

MediumAdPro

No stars yet

Posts: 2

From: Traverse City, MI, USA

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.

MediumAdPro

No stars yet

Posts: 2

From: Traverse City, MI, USA

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!

Alexio

No stars yet

Posts: 5

From: Madison Wi, USA

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.

Stanley

No stars yet

Posts: 22

From: Tbilisi, Georgia

@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.

Alexio

No stars yet

Posts: 5

From: Madison Wi, USA

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.

Stanley

No stars yet

Posts: 22

From: Tbilisi, Georgia

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%;}

Alexio

No stars yet

Posts: 5

From: Madison Wi, USA

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.

Stanley

No stars yet

Posts: 22

From: Tbilisi, Georgia

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;}

Alexio

No stars yet

Posts: 5

From: Madison Wi, USA

Worked like a charm.
Thanks alot!

Stanley

No stars yet

Posts: 22

From: Tbilisi, Georgia

You're welcome

Stanley

No stars yet

Posts: 22

From: Tbilisi, Georgia

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.

TimothyV

No stars yet

Posts: 1

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.

chrishirst

Gold

Posts: 833

From: Blackpool, Lancashire, England

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/

Stanley

No stars yet

Posts: 22

From: Tbilisi, Georgia

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]

chrishirst

Gold

Posts: 833

From: Blackpool, Lancashire, England

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/

pepper116

No stars yet

Posts: 1

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

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Elated: Helping People Make Websites Since 1997

JavaScript Tabs - Create Tabbed Web Pages Easily

Follow Elated

Current forum topics

Popular articles

Elated: Helping People Make Websites Since 1997

JavaScript Tabs - Create Tabbed Web Pages Easily

Share This Page

Link to this page

Follow Elated

Subscribe to the Elated Newsletter

Current forum topics

Popular articles