CODEWITHSUNDEEP
javascriptmenu
program-o-steve
program-o-steve

Reputation: 2678

problems with "sliding menus" program

I was reading a program to make sliding menus. Though the program works fine,there are certain things for which i don't have a clue what do they mean and what are they doing.

HTML

<html>
<head>
<title>Shakespeare's Plays</title>
<link rel="stylesheet" href="script.css" />
<script type="text/javascript" src="script.js">
</script>
</head>
<body>
<h1>Shakespeare's Plays</h1>
<div>
    <a href="menu1.html" class="menuLink">Comedies</a>
    <ul class="menu" id="menu1">
        <li><a href="pg1.html">All's Well That Ends Well</a></li>
        <li><a href="pg2.html">As You Like It</a></li>
    </ul>
</div>
<div>
    <a href="menu2.html" class="menuLink">Tragedies</a>
    <ul class="menu" id="menu2">
        <li><a href="pg5.html">Anthony &amp; Cleopatra</a></li>
        <li><a href="pg6.html">Hamlet</a></li>
    </ul>
</div>
<div>
    <a href="menu3.html" class="menuLink">Histories</a>
    <ul class="menu" id="menu3">
        <li><a href="pg8.html">Henry IV, Part 1</a></li>
        <li><a href="pg9.html">Henry IV, Part 2</a></li>
    </ul>
</div>
 </body>
 </html>

CSS

body {
background-color: white;
color: black;
}

div {
padding-bottom: 10px;
background-color: #6FF;
width: 220px;
}

ul.menu {
display: none;
list-style-type: none;
margin-top: 5px;
}

a.menuLink {
font-size: 16px;
font-weight: bold;
}

a {
text-decoration: none;
}

Java Script

window.onload = initAll;

function initAll() {
var allLinks = document.getElementsByTagName("a");

for (var i=0; i<allLinks.length; i++) {
    if (allLinks[i].className.indexOf("menuLink") > -1) {
        allLinks[i].onclick = toggleMenu;
    }
}
}

function toggleMenu() {
var startMenu = this.href.lastIndexOf("/")+1;
var stopMenu = this.href.lastIndexOf(".");
var thisMenuName = this.href.substring(startMenu,stopMenu);

var thisMenu = document.getElementById(thisMenuName).style;
if (thisMenu.display == "block")  {
    thisMenu.display = "none";
}
else {
    thisMenu.display = "block";
}

return false;
}

In the javascript code:

  1. what do these 2 statements do ?

    var startMenu = this.href.lastIndexOf("/")+1;
    var stopMenu = this.href.lastIndexOf(".");
  2. what does this.href mean . I know that this refers to the link but what does href denote ?
  3. what does the statement thisMenu.display == "block" mean ? I mean to say what is display and what is block . The code does not declare it anywhere.
  4. In the same way what is meant by none ?
  5. What does the statement document.getElementById(thisMenuName).style return ?

Upvotes: 0

Views: 163

Answers (1)

RobG
RobG

Reputation: 147453

1. what do these 2 statements do ?

var startMenu = this.href.lastIndexOf("/")+1;
    var stopMenu = this.href.lastIndexOf(".");

That code is within the toggleMenu function that is assigned to an onclick listener of link elements (they are probably the items in your menu). When the function is called by the onclick handler, the function's this keyword is set to a reference to the element (i.e. the link). So the first line is getting the position of the last '/' in the href property, the second is getting the index of the last "." in the href.

2. what does this.href mean . I know that this refers to the link but

what does href denote ?

It is a refernce to the link's href property, which is initially set to the value of the href attribute.

3. what does the statement thisMenu.display == "block" mean ? I mean

to say what is display and what is block . The code does not declare it anywhere.

It is changing the value of the display property of the element's style object to "block", which is one value that it may have according to the CSS 2.1 specification. A better strategy is to set the display property in CSS (or just use the default) and in code set it to "" (empty string) so that it adopts the default or cascaded style (which can be any one of 13 values and might be different in different browsers so setting it specifically can be an issue).

That way the layout and display are independent of the code, which just hides it or returns it to whatever it was.

4. In the same way what is meant by none ?

That makes the element not part of the document flow, effectively hiding it and meaning it doesn't have any effect on the document layout.

5. What does the statement document.getElementById(thisMenuName).style return ?

It returns a reference to the element's style object, it's used to make the code more concise (and likely a tad faster, not that you'd notice here).

Upvotes: 1

Related Questions