HTML/javascript page jumping to different div -
i have simple nav menu page toggles pages when clicked. i'm having issue when selecting menu content seems retain hover attributes. when hovering content , clicking or anywhere on page jumps 'pg11' 2.3 events div. when performing example on page @ bottom clicking try me button completing alert messages again jumps 'pg11' 2.3 events div. solutions problem? i've included content 1.1 variables click item view problems. 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 { 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 containers storing information come in different data types. data types variables can hold "undefined, null, boolean, number, string or object."</p> <h1 class="h1"> general syntax </h1> <p> variables declared "var" statement. variables must start letter, underscore (_), or dollar signt ($). after numbers can used. variables case sensitve. </p> <p> here's example of undefined variable:</p> <p style="text-indent: 5em;"><i> var aneel; </i></p> <p> here's example of variable string value:</p> <p style="text-indent: 5em;"><i> var aneel = "javascript"; </i></p> <p> here's example of variable numeric value:</p> <p style="text-indent: 5em;"><i> var aneel2 = 6; </i></p> <p> here's example of variable adds expressions:</p> <p style="text-indent: 5em;"><i> var aneel3 = (aneel + aneel2); </i></p> <p> result javascript6 </p> <h1 class="h1"> methods </h1> <p> per examples above assign variables values "=" assigns variable expression on right value on left. per last example above can add expression "+" operator. <h1 class="h1"> properties </h1> <p>if variable created in function may have properties. if created global variable 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 name", "");<br> var myage = prompt("please enter age", "");<br> var myphone = prompt("please enter phone number", "");<br> var myemail = prompt("please enter email", "");<br> var concatstring;<br> //concatenation of strings , variables<br> concatstring = greetingstring + " " + myname + "\nwow, " + myage + " years old!" + "\ni contact 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 id="pg3" class="pg"> <h1 class="h1"> 1.4 loops </h1> <div id="pg4" class="pg"> <h1 class="h1"> 1.5 functions </h1> <div id="pg5" class="pg"> <h1 class="h1"> 1.6 js objectsgeneral overview </h1> <p> javascript objects contain properties, methods , constructors. properties values associated object. methods actions can performed object. constructors used create objects. in javascript 3 types of objects can used are: 1. native objects (objects supplied javascript) 2. host objects (object supplied browser environment) 3. user-defined objects (objects defined programmer). in javascript objects copied, passed, compared reference. <h1 class="h1"> general syntax </h1> <p> syntax create object follows: myobj = new date(2010); -- creates object myobj date object. way of creating object is: var myobj = {property1, property2,....} <h1 class="h1"> methods </h1> <p>accessing object methods follows: objectname.methodname example myobj.setyear(2012); myobj.getyear(); <h1 class="h1"> properties </h1> <p>accessing object properties follows: objectname.propertyname = value example myobj.size=3; <h1 class="h1"> examples </h1> <p style="margin-left: 100px;"><i> var person = {<br> firstname : "john",<br> lastname : "doe",<br> age : 50,<br> eyecolor : "blue"<br> };<br> alert(person.firstname + " " + person.age + " years old.");<br> </i> <br> <input type=button onclick="example6();" value='try me'> </p> </div> <div id="pg6" class="pg"> <h1 class="h1"> 1.7 js built-in objects </h1> <p> built-in objects (native objects) have pre-defined methods , properties. can string objects, math objects, array objects, date objects. </p> <h1 class="h1"> general syntax </h1> <p> built-in objects follow general syntax of javascript object. date objects can instantiate date follows: 1. var d = new date(); 2. var d = new date (milliseconds); 3. var d = new date(datestring); 4. var d = new date(year, month, day, hourse, minutes, seconds, milliseconds);</p> <h1 class="h1"> methods </h1> <p> date objects there 3 types of methods: 1. extracting information date object (all 'get' methods) 2. set components of date object (all 'set' methods) 3. other date (all 'to' methods). math object methods can invoked math.methodname(params)</p> <h1 class="h1"> properties </h1> <p> date object properties follows: constructor - returns function created date objects' prototype, prototype - allows add properties , methods object. math object properties can invoked math.propertyname </p> <h1 class="h1"> examples </h1> <p style="margin-left: 100px;"><i> //returns math property pi variable x<br> var x = math.pi;<br> //instantiate datetime date object<br> var datetime = new date();<br> //sets date of object datetime<br> datetime.setdate(12);<br> datetime.setfullyear(2015);<br> datetime.setmonth(4);<br> alert("the date " + datetime);<br> alert("max of 5 , 7 " + math.max(5,7));<br> alert("value of pie " + x);<br> </i> <br> <input type=button onclick="example7();" value='try me'> </p> </div> <div id="pg7" class="pg"> <h1 class="h1"> 1.8 array object </h1> <p> arrays built-in javascript object collects elements under single name. each element identified index. arrays can multidimensional result in arrays of arrays</p> <h1 class="h1"> general syntax </h1> <p> creating array follows: var amyarray = new array(); or var amyarray = array();, if know numbers of element: var amyarray = new array(element1, element2, .......); or var amyarray = array(element1, element2,........); can use literal notation follows: var amyarray = [element1, element2,........]. accessing element follows: amyarray[elementnumber] 0 first element</p> <h1 class="h1"> methods </h1> <p> array object has 5 methods: 1. conversion methods (i.e tostring()), 2. stack methods (i.e pop()) 3. queue methods (i.e shift()) 4. reordering methods (i.e reverse()) 5. manipulation methods (i.e. slice(start, stop)</p> <h1 class="h1"> properties </h1> <p> array objects have length property can called by: amyarray.length</p> <h1 class="h1"> examples </h1> <p style="margin-left: 100px;"><i> var mycars = new array();<br> mycars[0] = new array();<br> mycars[0][0] = "bmw";<br> mycars[0][1] = 50.500;<br> mycars[1] = new array();<br> mycars[1][0] = "mercedes";<br> mycars[1][1] = 58.800;<br> mycars[2] = new array();<br> mycars[2][0] = "ferrari"; mycars[2][1] = 80.750;<br> var totalprice = mycars[0][1] + mycars[1][1] + mycars[2][1];<br> alert("the price of " + mycars[0][0] + " car \$" + mycars[0][1] + "<br>");<br> alert("the price of " + mycars[1][0] + " car \$" + mycars[1][1] + "<br>");<br> alert("the price of " + mycars[2][0] + " car \$" + mycars[2][1] + "<br>");<br> alert("the total price of " + mycars.length + " cars \$" + totalprice);<br> </i> <br> <input type=button onclick="example8();" value='try me'> </p> </div> <div id="pg8" class="pg"> <h1 class="h1"> 1.9 string object </h1> <p> string object used manipulate stored piece of text</p> <h1 class="h1"> general syntax </h1> <p> string objects created new string(). example var txt = new string("string"); creates new string object 'txt' value "string". simplifying syntax yield var txt = "string";</p> <h1 class="h1"> methods </h1> <p> there various methods such indexof(), charat(), concat() etc etc returns, splits or extracts various parts of string. there exist string html wrapper method returns string wrapped inside appropriate html tag. (i.e. big (), bold(), fixed(), etc etc)</p> <h1 class="h1"> properties </h1> <p> string properties constructors returns function created string object's prototype. length property returns length of string. prototype allows add properties , methods object </p> <h1 class="h1"> examples </h1> <p style="margin-left: 100px;"><i> var txt = "aneel";<br> var txt2 = "nauth";<br> alert("length of string " + txt.length);<br> alert("upper case string " + txt.touppercase());<br> alert("lower case string " + txt.tolowercase());<br> alert("first occurence of n occurs @ " + txt.indexof('n'));<br> </i> <br> <input type=button onclick="example9();" value='try me'> </p> </div> <div id="pg9" class="pg"> <h1 class="h1"> 2.1 browser objects </h1> <p> browser object model (document object model level 0) proved objects expose browser functionality javascript. primary bom objects window objects. every instance of body or frameset tag in every browser window or frame window object created. </p> <h1 class="h1"> general syntax </h1> <p> window objects created other built-in objects. (i.e var myvar = objectname.property)</p> <h1 class="h1"> methods </h1> <p> there numerous window object method such close() - closes window, open() - opens new browser window, stop() - stops window loading etc etc</p> <h1 class="h1"> 2.1 properties </h1> <p> there numerous window object properties. primary ones being navigator object designed contain information version of browser, screen object returns information on display screen's dimensions , color depth, location object contains complete url of given window object or, if none specified, of current window object, history object array of url strings reflect entries in history object </p> <h1 class="h1"> examples </h1> <p style="margin-left: 100px;"><i> document.getelementbyid("pg9").innerhtml = <br> alert("screen width " + screen.width);<br> document.getelementbyid("pg9").innerhtml = <br> alert("screen height " + screen.height);<br> document.getelementbyid("pg9").innerhtml = <br> alert("page location is: " + window.location.href);<br> document.getelementbyid("pg9").innerhtml = alert(history.length);<br> document.getelementbyid("pg9").innerhtml = <br> alert("name " + navigator.appname +<br> "\ncode name " + navigator.appcodename);<br> </i> <br> <input type=button onclick="example10();" value='try me'> </p> </div> <div id="pg10" class="pg"> <h1 class="h1"> 2.2 html objects </h1> <p> html objects (document object model - level 1) provides framework through html documents represented in hieracrchical tree-like structure allow programmers add, remove , modify parts of web page. example of html object forms. web forms used collect information user , send data server processing.</p> <h1 class="h1"> general syntax </h1> <p> forms presented form tag element in html. common elements fieldset, legend, label, input, textarea, select, button. here's general format of form - action , method being form attribute , input being form elements:</p> <img src="forms.jpg" alt="forms" style="width:404px;height:228px"> <h1 class="h1"> methods </h1> <p> forms have reset() method resets form , submit() methods submits form</p> <h1 class="h1"> properties </h1> <p> form properties consist of attributes such action, method, target, autocomplete etc etc. common property in form action sets or returns value of action attribute in form</p> <h1 class="h1"> example </h1> <img src="formex.jpg" alt="formsex" style="width:304x;height:628px"> <p> functions test if information entered in form valid. form code included retrieve user information. button submit information verification. try code below</p> <form action="" name="form1"> please enter following details: <p> name: <br /> <input type="text" name="txtname" onchange="txtname_onchange()" /> </p> <p> age: <br /> <input type="text" name="txtage" onblur="txtage_onblur()" size="3" maxlength="3" /> </p> <p> <input type="button" value="check details" name="btncheckform" onclick="btncheckform_onclick()"> </p> </form> </div> <div id="pg11" class="pg"> <h1 class="h1"> 2.3 events </h1> </div> </div> <script type="text/javascript"> function toggle(ids) { var sel = document.getelementbyid('pg').getelementsbytagname('div'); (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 name", ""); var myage = prompt("please enter age", ""); var myphone = prompt("please enter phone number", ""); var myemail = prompt("please enter email", ""); var concatstring; concatstring = greetingstring + " " + myname + "\nwow, " + myage + " years old!" + "\ni contact phone " + myphone + " or email: " + myemail + "\nthank you!" ; alert(concatstring); } </script> </body> </html>