10 Replies - 2899 Views - Last Post: 05 December 2012 - 09:45 AM

#1 apricot123  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 17-October 12

Javascript tabs question

Posted 17 October 2012 - 10:23 AM

I am trying to understand how this particular code works in terms of what is happening with the different functions, arrays, loops, statements. But haven't been able to understand it well enough with the comments. Can someone please explain it to me. If possible line by line of how this code works.


<script type="text/javascript">
    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>




Is This A Good Question/Topic? 0
  • +

Replies To: Javascript tabs question

#2 DiscimusVivere  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 36
  • Joined: 16-October 12

Re: Javascript tabs question

Posted 17 October 2012 - 10:34 PM

Hi.. apricot123

which part of code that you want to understand ?
Was This Post Helpful? 0
  • +
  • -

#3 apricot123  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 17-October 12

Re: Javascript tabs question

Posted 22 October 2012 - 04:19 PM

View PostDiscimusVivere, on 17 October 2012 - 10:34 PM, said:

Hi.. apricot123

which part of code that you want to understand ?


I am not receiving an error actually just trying to understand how the code functions. I have written below my explanation of the first part of the code. Could you tell me if I am understanding it correctly or not.


1) var tabListItems = document.getElementById('tabs').childNodes;
//The variable tabListItems is defined as the items that are held in the section of the html code with the ‘tabs’ id.


2) for ( var i = 0; i < tabListItems.length; i++ )
//This is a for loop using the variable tabListItems. Here i represents a counter which is set at 0. So for i<the number of items in the ‘tabs’ section of the html add 1 to the counter. Since there are two “Li” items in the ‘tabs’ id section this loop would run till i=2


3)if ( tabListItems[i].nodeName == "LI" )
// Now this starts an if sequence which says if tabListItems is equal to the number of “LI” or bullet points in the html section with the id ‘tabs’ execute the functions below.


4) var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
// - This part basically says execute the function getFirstChildWithTagName, which is defined below, if tabListItems == LI which would be at the value of two.


5) var id = getHash( tabLink.getAttribute('href') );
//This part executes the getHash function which is defined below as well.

6) tabLinks[id] = tabLink;
//I am not sure what this does.

7) contentDivs[id] = document.getElementById( id );
//I am not sure what this does.



Please let me know if I am understanding this section of the code correctly and then I will proceed with the other parts.
Was This Post Helpful? 0
  • +
  • -

#4 DiscimusVivere  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 36
  • Joined: 16-October 12

Re: Javascript tabs question

Posted 22 October 2012 - 07:01 PM

for number 6 : Tab has a link(tab header) for trigger to display tab content. so in tabLinks[id] = tabLink it's mean everything link in tab header will be id of this tab content (remember that array index can be string). It's look like if your link is
 <a href="#firstTab">First Tab</a> 
the tab content id is "firstTab" so tabLinks["firstTab"] = tabLink

in number 7 : it's grab a content div id like above and put into contentDivs variable.
it's look like
contentDivs["firstTab"] = document.getElementById("firstTab");

Was This Post Helpful? 0
  • +
  • -

#5 apricot123  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 17-October 12

Re: Javascript tabs question

Posted 23 October 2012 - 03:18 AM

Does my explanation for number 3 make sense? Could you explain a little further on number 3. Also is my explanation for the rest of the code correct?

This post has been edited by Dormilich: 09 December 2012 - 09:19 AM
Reason for edit:: removed unnecessary quote

Was This Post Helpful? 0
  • +
  • -

#6 DiscimusVivere  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 36
  • Joined: 16-October 12

Re: Javascript tabs question

Posted 23 October 2012 - 06:33 PM

I think all your explains are correct. The best way to understand code is to read all code. Better if you post the html too.. :)

in number 3
if ( tabListItems[i].nodeName == "LI" )
it mean if your tabListItem is LI ( <li></li> tag) and then execute the function inside an if

we get all tabListItems from this code
var tabListItems = document.getElementById('tabs').childNodes;


Was This Post Helpful? 0
  • +
  • -

#7 apricot123  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 17-October 12

Re: Javascript tabs question

Posted 30 October 2012 - 01:41 AM

Here is the complete code. My questions about the next part will follow.

<html>
    <head>
	<title></title>
    <link type="text/css" rel="stylesheet" href="apricot.css"/>
    <script type="text/javascript">
//<![CDATA[

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

    function init() {

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

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

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

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

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

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

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

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

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

    //]]>
    </script>
  </head>    

<body onload="init()">

        	<p> <img src="apricot.jpg" width="312" height="93" class="center"/> </p>
	
<ul id="tabs">
	<li><a href=#aboutus">About Us</a></li>
	<li><a href=#services">Services</a></li>
</ul>

<div class="tabContent" id="aboutus">	
	
<h1>About Us</h1>
	<div>
	<p></p>
	
	</div>
		</div>

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

<h1>Services</h1>

<div>

<p></p>

<p></p>

<p></p>

<p></p>



<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

</div>
</div>

</body>
</html>



Was This Post Helpful? 0
  • +
  • -

#8 apricot123  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 17-October 12

Re: Javascript tabs question

Posted 30 October 2012 - 03:38 AM

Hi there I am struggling to explain this bit of code.

var i = 0; //- Is this setting the counter to 0?



for ( var id in tabLinks ) {//- Why aren't there 3 parts to this loops? Why is there only one thing?
tabLinks[id].onclick = showTab; //- what is the item tablinks[id] that this onlick event is assigned for? Basically what is this line doing?
tabLinks[id].onfocus = function() { this.blur() }; // - Why is an empty function being used here and what is this.blur mean?
if ( i == 0 ) tabLinks[id].className = 'selected';//- What is this if statement asking the program to do?
i++;//- why is there i++ here?
Was This Post Helpful? 0
  • +
  • -

#9 DiscimusVivere  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 36
  • Joined: 16-October 12

Re: Javascript tabs question

Posted 30 October 2012 - 08:13 PM

var i = 0; //- Is this setting the counter to 0?

yes, you're right. The 'i' variable used to be counter started at 0.

for ( var id in tabLinks ) {//- Why aren't there 3 parts to this loops? Why is there only one thing?

it's different transform for loop in javascript, for more information please check this link

tabLinks[id].onclick = showTab; //- what is the item tablinks[id] that this onlick event is assigned for? Basically what is this line doing?

it's and event handler when you click tabLinks , it's execute showTab function. it's similiar with
<ul id="tabs">
<ul>
    <li><a href="#aboutus" onclick="showTab()">About Us</a></li>
    <li><a href="#services" onclick="showTab()">Services</a></li>
</ul>

if ( i == 0 ) tabLinks[id].className = 'selected';//- What is this if statement asking the program to do?
i++;//- why is there i++ here? 


so it read everything tabLink and then make the first tabLink (at index 0) to be selected. i++ mean to only first tabLink to be selected. so at first time i = 0 and if statement return true. and then i++ mean i = 0 + 1 and then if statement return false and at next loop not execute change className to selected.
Was This Post Helpful? 0
  • +
  • -

#10 apricot123  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 17-October 12

Re: Javascript tabs question

Posted 05 December 2012 - 09:29 AM

Could you please explain this part of the code. I have no idea where to start with this:

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

036
for ( var id in contentDivs ) {
037
if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
038
i++;
039
}
040
}
Was This Post Helpful? 0
  • +
  • -

#11 apricot123  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 17-October 12

Re: Javascript tabs question

Posted 05 December 2012 - 09:45 AM

Why are the variables not being defined before the for-in loop?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1