Reputation: 3

Html/javascript page jumping to div

I have a simple nav menu page that toggles pages when clicked on a section. When I do click on a section I get some functionality problems with the content. All the content in section is clickable as the pointer turns into a hand and when clicked it jumps to section 2.3 events. Also when clicking the try me button and performing the alert messages the page again jumps the end of the divs to 2.3 events. How do I get my page to stay on the section which I select after completing the example. Also how do I remove that problem of the page jumping to 2.3 when clicking anywhere on a section. Thanks

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Final Project</title> 
<style type="text/css"> 

body {


}
.nav {
	list-style-type:none;
	padding-left:0px;
	padding-right:0px;
	text-align:center;
	
}

.nav li {
	float:left;
	width:450px;
	border:solid 1px black;
	margin-right:-1px;	
}

.nav a {
 	text-decoration:none;
	display:block;
	color: black;

}


.submenu {

	display:none;
	list-style-type:none;
	padding-left:0px;
	padding-right:0px;
 	
}

.nav a:hover {
	background-color:grey;
}


li:hover .submenu {
	display:block;
	
}

.pg {
display:none;
position:absolute;
padding-top:200px;
z-index: -1;
}

.pg h1 {

color: black;

}

.pg p {

    word-wrap: normal;
color: black;
  width: 58em; 

}
</style> 
</head> 
<body> 
<div class="header">
  <ul class="nav"> 
	<li><a href="#">Javascript Language Fundamentals</a>
		<ul class="submenu">
			<li><a href="#" onclick="return toggle('pg0')">1.1 Variable</li>
			<li><a href="#" onclick="return toggle('pg1')">1.2 Operators</li>
			<li><a href="#" onclick="return toggle('pg2')">1.3 Conditional Statements</li>
			<li><a href="#" onclick="return toggle('pg3')">1.4 Loops</li>
			<li><a href="#" onclick="return toggle('pg4')">1.5 Functions</li>
			<li><a href="#" onclick="return toggle('pg5')">1.6 JS ObjectsGeneral Overview</li>
			<li><a href="#" onclick="return toggle('pg6')">1.7 JS Built-in Objects</li>
			<li><a href="#" onclick="return toggle('pg7')">1.8 Array Object</li>
			<li><a href="#" onclick="return toggle('pg8')">1.9 String Object</li>
		</ul>
         </li> 
	<li><a href="#">Javascript - Web Document Interaction</a>
			<ul class="submenu">
			<li><a href="#" onclick="return toggle('pg9')">2.1 Browser Objects</li>
			<li><a href="#" onclick="return toggle('pg10')">2.2 HTML Objects</li>
			<li><a href="#" onclick="return toggle('pg11')">2.3 Events</li>	
		</ul>


	</li> 
  </ul> 
</div>
<div id="pg">
  <div id="pg0" class="pg"> 
	<h1 class="h1"> 1.1 Variables </h1> 
	<p> Variables are containers for storing information that come in different data types. The data types that variables can hold are "Undefined, Null, Boolean, Number, String or 

Object."</p>
	<h1 class="h1"> General Syntax </h1>
	<p> Variables are declared with a "var" statement. Variables must start with a letter, underscore (_), or dollar signt ($). After that numbers can be used. Variables are case 

sensitve. </p>
	<p> Here's an example of an undefined variable:</p>
	<p style="text-indent: 5em;"><i> var aneel; </i></p>
	<p> Here's an example of a variable with string value:</p>
	<p style="text-indent: 5em;"><i> var aneel = "javascript"; </i></p>
	<p> Here's an example of a variable with numeric value:</p>
	<p style="text-indent: 5em;"><i> var aneel2 = 6; </i></p>
	<p> Here's an example of a variable which adds expressions:</p>
	<p style="text-indent: 5em;"><i> var aneel3 = (aneel + aneel2); </i></p>
	<p> The result would be javascript6 </p>
	<h1 class="h1"> Methods </h1>
	<p> Per the examples above you assign variables values  with the "=" which assigns the variable expression on the right a value on the left. Per the last example above you can add 

expression with the "+" operator.
	<h1 class="h1"> Properties </h1>
	<p>If a variable was created in a function then it may have properties. If it was created as a global variable then it probably doesn't have properties</p>
	<h1 class="h1"> Example </h1>
	<p style="margin-left: 100px;"><i>
		//declaration of variables<br>
		var greetingString = "Hello";<br>
		//User entry<br> 
		var myName = prompt("Please enter your name", "");<br>
		var myAge = prompt("Please enter your age", "");<br>
		var myPhone = prompt("Please enter your phone number", "");<br>
		var myEmail = prompt("Please enter your email", "");<br>
		var concatString;<br>
		//concatenation of strings and variables<br>
		concatString = greetingString + " " + myName + "\nWOW, you are " + myAge + " years old!"  + "\nI will 		contact you by phone " + myPhone + " or email: " + myEmail + 

"\nThank you!";<br>
		//Display concatenation<br>
		alert(concatString);<br>
	</i>
	<br>
		<input type=button onClick="example1();" value='Try Me'>
	</p>	 
  </div>


  <div id="pg1" class="pg"> 
	<h1 class="h1"> 1.2 Operators </h1> 
	
	
 </div>
  <div id="pg2" class="pg"> 
	<h1 class="h1"> 1.3 Conditional Statements </h1>
    </div>
	
  <div id="pg3" class="pg"> 
	<h1 class="h1"> 1.4 Loops </h1>
    </div>
	
  <div id="pg4" class="pg"> 
	<h1 class="h1"> 1.5 Functions </h1> 
    </div>
	
  <div id="pg5" class="pg"> 
	<h1 class="h1"> 1.6 JS ObjectsGeneral Overview </h1> 
	





</div>
  <div id="pg6" class="pg">
	 <h1 class="h1"> 1.7 JS Built-in Objects </h1> 	
	

</div>
  <div id="pg7" class="pg"> 
	<h1 class="h1"> 1.8 Array Object </h1> 
	
</div>
  <div id="pg8" class="pg"> 
	<h1 class="h1"> 1.9 String Object </h1> 
	
	
</div>
  <div id="pg9" class="pg"> 
	<h1 class="h1"> 2.1 Browser Objects </h1> 
	
</div>
  <div id="pg10" class="pg"> 
	<h1 class="h1"> 2.2 HTML Objects </h1> 
	



</div>
  <div id="pg11" class="pg"> <h1 class="h1"> 2.3 Events </h1> </div>
  

<script type="text/javascript">
function toggle(IDS) {
  var sel = document.getElementById('pg').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) { 
    if (sel[i].id != IDS) { sel[i].style.display = 'none'; }
  }
  var status = document.getElementById(IDS).style.display;
  if (status == 'block') { document.getElementById(IDS).style.display = 'none'; }
                    else { document.getElementById(IDS).style.display = 'block'; }

return false;
}

function example1() {
var greetingString = "Hello";
var myName = prompt("Please enter your name", "");
var myAge = prompt("Please enter your age", "");
var myPhone = prompt("Please enter your phone number", "");
var myEmail = prompt("Please enter your email", "");
var concatString;

concatString = greetingString + " " + myName + "\nWOW, you are " + myAge + " years old!"  + "\nI will contact you by phone " + myPhone + " or email: " + myEmail + "\nThank you!" ;
alert(concatString);
}



</script>

</body> 
</html>

Upvotes: 0

Answers (2)

Wee Tai

Reputation: 123

You have no closing </a> for each of your menu items.

<li><a href="#" onclick="return toggle('pg0')">1.1 Variable</li>

Add the closing </a>'s to fix your problems.

Upvotes: 1

Victor Lin

Reputation: 141

all of the <a> tags should have closing tag, you missed the </a> tag, add it back to your HTML, your code will work well.

example:

<li><a href="#" onclick="return toggle('pg0')">1.1 Variable</li>

should be

<li><a href="#" onclick="return toggle('pg0')">1.1 Variable</a></li>

Upvotes: 1

Html/javascript page jumping to div

Answers (2)

Related Questions