Code Explanation For Commercial Horizontal Web Page Menus

Google+ Pinterest LinkedIn Tumblr +

Code Explanation for Commercial Horizontal Web Page Menus
Commercial Horizontal Web Page Menus – Part 3

Introduction
This is part 3 of my series, Commercial Horizontal Web Page Menus. In this part of the series, we look at the code for the example. The multidimensional array described in the previous part is also part of the complete code. I separated its explanation from this part, because of its unique nature.

Note: For the code samples to work, you should change the dot just before the reserved word, innerHTML, to a full-stop.

Note: If you cannot see the code or if you think anything is missing in this article (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Container for code
All the JavaScript code and the HTML Table that will produce the rows for the menus are in one HTML DIV element, the DIV element mentioned in part one of the series. Hey, there is also a style sheet. This style sheet is also in the DIV element. In the DIV element, you have the style sheet, the Table element and then the JavaScript. The single space entity we mentioned in the first part of the series is typed below the Table code in the DIV. Having everything in the DIV, you can sell the DIV element and all its content. The buyer will just have to paste the DIV element in his web page, which you do not have to know anything about. And the code will serve him; that is, he will have his menu. Just remember that the customer is the one to create the multidimensional array, which is easy to create; you will show him how. The user is a web site designer.

The HTML Table Code
This is the HTML Table code:

       

<table id=”T0″ style=”position:absolute; z-index:20″ cellspacing=”0″ cellpadding=”0″ width=”99%” title=”To remove, click on menu outside any link.” onclick=”removeRows()”>
            <tbody>
                <tr id=”TR0″ style=”background-color:Turquoise”><td id=”TD00″>
</td></tr>
            </tbody>
       
</table>

You give a very high value for the z-index (e.g. 20). The user may have high z-index values in his code. The one you choose here should be one that you think is higher than what the user might have.

There is one row with one cell above; this is for the main menu. This row and cell is always displayed. Each row added will have one cell. There will be four hyperlink tags in one cell, separated by equal number of single character spaces ( ).

The Table has an onclick event. This is used to remove the added rows for the sub menu, when the table is clicked. The value of the title tag indicates to the user that if he does not want the added rows he can click within the Table outside any hyperlink.

JavaScript Code Segments
There are six code segments in the JavaScript code. Some are long; others are short.

The first JavaScript code segment is the multidimensional array. The second code segment creates the main menu; that is it creates the hyperlinks (reading from the top-most level array) and the space characters and feeds them into the cell of the first row of the table. The DIV element having the JavaScript will always be in the HTML BODY element of the user. So, when the page is loaded, the JavaScript is executed and the second code segment is executed as a result.

The third code segment is just one line. It is the declaration and assignment of a variable that tracks the total number of rows displayed.

Each hyperlink has an onmouseover event. The fourth code segment is a function that responds to the onmouseover event of each menu hyperlink. In the example of this series, the function changes the background image of the hyperlink, and if the hyperlink has a sub menu, the function produces the sub menu (reading from the corresponding array added to the multidimensional array).

Any hyperlink has an onmouseout event. The fifth code segment is a function that responds to this event. In the example of this series, it only replaces the new background image of the link with the previous one.

The table element has an onclick event. The sixth code segment is a function that responds to this event. This function removes the any added row for the sub menus, when the user clicks in the Table having the menus. If the user only wants to remove the sub menus without opening a new page, he should click within the table and not on a hyperlink. If he clicks on a hyperlink, the sub menus will be removed and a new web page will be opened.

We shall now look at the details of the JavaScript code segments.

The First JavaScript Code Segment
This is the multidimensional array. We have seen this in the previous part of the series.

The Second JavaScript Code Segment
This is the second JavaScript code segment:

        //fill in the main menu
        for (i=0; i<4; ++i)
            {
                if (navigator.appName == “Microsoft Internet Explorer”)
                    {//Internet Explorer
                                if (lArr[i][0])
                                    {
                                        foundArr = lArr[i][0].match(/[^,]+/g);
                                    }
                                else
                                   {
                                        foundArr = lArr[i].match(/[^,]+/g);
                                   }
                    }
                else
                    {//other browsers
                                if (lArr[i][0].length > 1)
                                    {
                                        foundArr = lArr[i][0].match(/[^,]+/g);
                                    }
                                else
                                   {
                                        foundArr = lArr[i].match(/[^,]+/g);
                                   }
                    }

                document.getElementById(‘TD00’)⋅innerHTML = document.getElementById(‘TD00’)⋅innerHTML + “” + foundArr[1] + “ \; \; \; \; \; \; \; \;”;
            }

This code segment is a for-loop. There are four iterations for the four menu items (hyperlinks). The first statement is a large if-statement. The if part of the if-statement is for Internet Explorer browser; the else part is for other browsers. Each of these parts, also has an if-statement.

As the for-loop iterates 4 times, each index is for the index of the top-most level array. If a menu item has a sub menu, then the corresponding array index will have an added (sub) array. The inner if-statement first checks if the current array index has an (sub) array. If it does, it uses regular expression to obtain the href value and link content from the first element of the added (sub) array. If the current index does not have an (sub) array, then the else part of the inner if-statement obtains the href value and link content from the element of the current index. Whether it is the if-part or the else part that is executed, the regular expression function (match()) returns a one dimensional array, having two elements. For this regular expression array, the first element is the href value and the second is the link content from one string of the multidimensional array. The return array here has the name, foundArr.

The last statement of this second code segment, produce the hyperlinks and feeds them into the cell of the first row of the table. This statement uses the values of the foundArr array. It gives each link an ID. The ID of each link begins with ‘l’ followed by the index of the top-most array, in the multidimensional array.

This last statement also gives each link an onmouseover and onmouseout event. The argument of the onmouseover event is the link ID and the multidimensional array element identifier, constructed. Note the single space character entities that would separate the links.

The Third JavaScript Code Segment
The third code segment is:

        maxRowIndx = 0;

The main menu uses the first row of the table. Any added sub menu means added row. This variable holds the maximum number of rows at a particular time for the table. It indicates the total number of rows present at any particular time.

The Fourth JavaScript Code Segment
This is the first half of the fourth code segment:

        function mouseOver(ID, arr)
            {
                document.getElementById(ID).style.backgroundImage = “url(‘lImg1.jpg’)”;

                //first remove all the rows that may be below the current row
                currentIDNo = ID.slice(1);
                currentRow = currentIDNo.length;
                beginIndx = currentRow – 1; //table row number after which rows must be removed
                for (m = maxRowIndx; m >= (beginIndx+1); –m)
                    {
                         document.getElementById(‘T0’).deleteRow(m);
                    }
                maxRowIndx = beginIndx; //reset maxRowInd

                IDNo = ID.slice(1); //obtain the number part of the ID

                //develop next empty row if links are available
                if (navigator.appName == “Microsoft Internet Explorer”)
                    {//Internet Explorer
                                if (arr[0])
                                    {
                                        //create row and empty cell
                                        maxRowIndx+=1; //increment no. of rows
                                        TRID = “TR” + maxRowIndx; //create row ID
                                        document.getElementById(‘T0’).insertRow(maxRowIndx);
                                        document.getElementById(‘T0’).rows[maxRowIndx].id = TRID;
                                        document.getElementById(TRID).style.backgroundColor = “Turquoise”;
                                        spanID = “TD” + maxRowIndx + “0”; //create row ID;
                                        document.getElementById(TRID).insertCell(0);
                                        spanIDStr = “”;
                                        document.getElementById(TRID).cells[0]⋅innerHTML = spanIDStr;

                                        for (j=1; j<arr.length
                                           {
                                                //get the href and content of each link into an array
                                                if (arr[j][0])
                                                    {
                                                        seenArr = arr[j][0].match(/[^,]+/g);
                                                    }
                                                else
                                                   {
                                                        seenArr = arr[j].match(/[^,]+/g);
                                                   }

                                                //put in the cell content
                                               TDStr =  ”
                                       for(k=0; k<idno.length
                                            {
                                                TDStr = TDStr + “[” + IDNo.substr(k,1) + “]”;
                                            }
                                        TDStr = TDStr + “[” + j + “]” +”)\” onmouseout=\”mouseOut(‘l”  + IDNo + j + “‘)\”>” + seenArr[1] + ” \; \; \; \; \; \; \; \;”;
                                        document.getElementById(spanID)⋅innerHTML = document.getElementById(spanID)⋅innerHTML + TDStr;
                                           }
                                    }
                    }
                else

This code segment has an if-statement (outer) similar to that of the second code. The if part is for Internet Explorer. The else part, not shown, is for other browsers. You will have a link to download the complete code free, in the next part of the series.

This code segment is a function that responds to the onmouseover event of each menu item (hyperlink). This function receives as argument, the ID of the hyperlink and its element identifier in the multidimensional array.

The first statement in the function changes the background image of the hyperlink that triggered the event.

It is possible that a menu item of the current row had a sub menu. So all rows below the current row have to be removed, to allow space for the current menu item to create its own sub menu, if it has one. The next three statements do the removal. In order for this to be done, the current row position has to be known. The link ID begins with l followed by a number. This number consists of the indices of the item in the multidimensional array. If the indices of an item in the multidimensional array are [1][2], then the ID of the item would be l12. The first two statements of these three statements use this rule to determine the current row number, which is the number of digits in the number part of the ID. The removal of rows has to start from the next row, which is this number minus 1 since row counting begins from zero. The last of the three statements determine the zero-indexed row at which removal has to start.

The current row is the row that has the link that triggered the onmouseover event. The for-statement that follows, removes the rows below the current row. The statement after the for-statement resets the variable, maxRowIndx, because some rows might have been removed. The next statement obtains the number part of the ID of the hyperlink (this statement and the first of the three statements above are similar).

Note: if the link that triggers the onmouseover event does not have a sub menu, all the possible rows that might have been created below it are still removed; that is all right.

The statement that follows is a large if-statement. The if part is for Internet Explorer and the else part is for other browsers. For Internet Explorer, the hyperlinks are put inside one SPAN element, which goes inside the cell of a row. For other browsers, the hyperlinks are put directly into the cell without the SPAN element. The code of the if-part is similar to the code of the else part.

The code in the if or else part begins with an if-statement. This inner if-statement first checks if the multidimensional array element in question has an array for a sub menu. The aim of this inner if-statement is to produce a sub menu, if the link on which the mouse is over, has one. If the condition of the inner if-statement is true, the statements it has are executed. The statements produce a new row and feed it with links whose strings are in the array indicated by the array identifier in the inner if-condition.

The mouseOver(ID, arr) function produces sub menus. It has some similarities with the for-loop statement above, that created the hyperlinks for the main menu.

Since, the inner if-statement here, adds another row, its first statement increments the maxRowIndx variable. The maxRowIndx variable keeps track of the total number of rows present, at any time. So if a row is added, this variable is incremented; if a row is removed, it is decremented.

The next statement prepares the new row’s ID. The statement after creates a new row. The statement that follows gives the new row its ID. The next statement gives the new row a background color.

The statement that follows, prepares the SPAN ID. The statement after, inserts a cell into the new row. The next statement prepares the tag for the SPAN element. Remember, for Internet Explorer, the links are fed into an HTML SPAN element and not directly into the Table Cell. The next statement puts the SPAN tag into the table cell of the new row.

Next you have a large for-statement that extends until the end of the inner if-statement. This for-loop has a lot of similarities with the for-loop that produced the links of the main menu. However, here, there is an inner for-loop that produces the multidimensional array indices of the item that triggered the onmouseover event. It uses the ID of the item to do this.

The mouseOver(ID, arr) function is for all sub menus. The main menu is produced by the second JavaScript code segment (a for-loop).

Let us end the explanation of the JavaScript code here. In the next part of the series, you will be given a link for the complete code. Any code segment in the complete code whose details have not been explain here, should be self-explanation, when you download the complete code.

In the next part of the series we look at the commercial aspects of the project.

Chrys

To arrive at any of the parts of this series, just type the corresponding title below in the Search Box of this page and click Search (use menu if available):

A Description of Horizontal Web Page Menus for Hyperlinks
A Multidimensional Array for Horizontal Web Page Menus
Code Explanation for Commercial Horizontal Web Page Menus
Commercial Aspects for Horizontal Web Page Menus
 

Share.

About Author

Leave A Reply