navigation menu in javascript

How do I get my navigation menu to load its pages on the main page and

Page 1 of 1

5 Replies - 744 Views - Last Post: 20 June 2009 - 06:47 AM

#1 yello  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 11-June 09

navigation menu in javascript

Post icon  Posted 17 June 2009 - 07:52 AM

Quote

Hello everyone, I am having a problem with my navigation menu; when a user clicks on a button (ex. About Us) the page is displayed as a pop-up (i.e. a new window pops-up). What I would like is have the contents displayed on the sites main page; each time the user click a button the contents are displayed right there on the main page...NOT it's own individual window.
I have attempted many things and still cannot seem to get it to work. I am a beginner so perhaps its my novelty that's the problem.

....any help at all will be so greatly appreciated!!!!

Below is my code (html + JS and css)---essentially where the flyer is located is the main page...that is where I would like each page to load onto.




Quote

html + javascript code...I have created a .js file (to specify functionality of the menu...but I have no idea how to code it...i.e it is empty file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GGSA</title>


<link href="index4.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="navcontainer.js"></script>


<!---BEGINNING OF BANNER--->

  <script LANGUAGE=javascript>
  <!--

  function window_onresize() {
  myImg.height = window.document.body.clientHeight
  myImg.width = window.document.body.clientWidth
  }

  //-->
  </SCRIPT>


  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" language="javascript" src="script.js"></script>
  <link href="GGSA_Style.css" rel="stylesheet" type="text/css" />


</head>


<body scroll="auto" onload="return window_onresize()" onresize="return window_onresize()">


<div id="mainWrapper"> <!---THIS IS THE MAIN window...WITH EVERYTHING IN IT--->
<div id="contentWrapper">

<div id="div1">
   <img id=myImg src="Golden_Goal_Banner.jpg" style="position:absolute;left:0px;top:0px;">


<BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/>
<div id="navcontainer">
<p>
<a href="java script:navcontainer();"><b><u>HOME</u></a>
<a href="java script:navcontainer();"><b><u>REGISTER</u></b></a>
<a href="java script:navcontainer();"><b><u>FAQs</u></a></p>
<a href="java script:navcontainer();"><b><u>MAP TO FIELD</u></a>
<a href="java script:navcontainer();"><b><u>SPONSORS</u></a>
<a href="java script:navcontainer()"><b><u>PICTURE GALLERY</u></a>
<a href="ABOUT US.html" target="bodyContent"><b><u>ABOUT US</u></a></p>
<a href="java script:navcontainer();"><b><u>CONTACT US</u></a>
</p>
</div>
</div>

<div id="bodyContent">
<div id="main">
  <img src="flyer.jpg" width="612" height="792" />
</div>
</div>
</div>
</div>




</body>
</html>



Quote

css code

@charset "utf-8";
/* CSS Document */


#bodyContent 
  {	
	background-color: #FFFFFF;
	display: inline-block;
	float: left;
	height: 461px;
	width: 528px;
  }

#contentWrapper 
  {
	padding: 4px;
  }


#mainWrapper 
  {
	background-color: #0066CC;
	background-image: url(../images/body_bg.gif);
	background-repeat: repeat-y;
	border: 1px #FFFFFF solid;
	margin: 0 auto;
	width: 900px;
   }

#navcontainer
  {
	float:left;
	width:20%;
  }

#main
  {
	float:right;
	width:80%;
	display: inline-block;
  }		


#navcontainer ul
  { 
	margin: 0;					  
	padding: 0;
	list-style-type: none;		   
  }


#navcontainer a	 
  {  
	display: block; 
	color: ffffff;
	background-color: #16C13A;
	width: 13em;
	padding: .3em .6em;
	text-decoration: none;
  }


#navcontainer a:hover
 {
   background-color: none;
   color: #FFD700;
   font: weight-strong; 
 }
#navcontainer a:hover
 {
   background-color: none;
   color: #FFD700;
   font: weight-strong; 
 }



Is This A Good Question/Topic? 0
  • +

Replies To: navigation menu in javascript

#2 predator101  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 06-March 09

Re: navigation menu in javascript

Posted 17 June 2009 - 08:27 AM

<a href="java script:navcontainer();"><b><u>HOME</u></a>
<a href="java script:navcontainer();"><b><u>REGISTER</u></b></a>
<a href="java script:navcontainer();"><b><u>FAQs</u></a></p>
<a href="java script:navcontainer();"><b><u>MAP TO FIELD</u></a>
<a href="java script:navcontainer();"><b><u>SPONSORS</u></a>
<a href="java script:navcontainer()"><b><u>PICTURE GALLERY</u></a>
<a href="ABOUT US.html" target="bodyContent"><b><u>ABOUT US</u></a></p>
<a href="java script:navcontainer();"><b><u>CONTACT US</u></a>


as far as i know javascript is one word and is used as such (take out spaces between java and script).

<script [b]type=text/javascript[/b]>
  <!--

  function window_onresize() {
  myImg.height = window.document.body.clientHeight
  myImg.width = window.document.body.clientWidth
  }

  //-->
  </SCRIPT>


when defining a script you use "type=text/javascript" (or whatever the scripting language is)

Those are my guesses but im not the greatest coder alive so i might be wrong
Was This Post Helpful? 0
  • +
  • -

#3 yello  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 11-June 09

Re: navigation menu in javascript

Posted 17 June 2009 - 08:48 AM

Quote

Thanks...but I could even go so far as to take out that whole line because the function that it calls is empty...I am also a novice and therefore have no idea how to code for this. (I have taken them out so as to not give the impression that they are actually doing something). This is really the last thing left and obviously that's why I am struggling with it...thank you so much...if you have any other suggestions I am open to them!!!


View Postpredator101, on 17 Jun, 2009 - 07:27 AM, said:

<a href="java script:navcontainer();"><b><u>HOME</u></a>
<a href="();"><b><u>REGISTER</u></b></a>
<a href="();"><b><u>FAQs</u></a></p>
<a href="();"><b><u>MAP TO FIELD</u></a>
<a href="();"><b><u>SPONSORS</u></a>
<a href="()"><b><u>PICTURE GALLERY</u></a>
<a href="ABOUT US.html" target="bodyContent"><b><u>ABOUT US</u></a></p>
<a href="();"><b><u>CONTACT US</u></a>


as far as i know javascript is one word and is used as such (take out spaces between java and script).

<script [b]type=text/javascript[/b]>
  <!--

  function window_onresize() {
  myImg.height = window.document.body.clientHeight
  myImg.width = window.document.body.clientWidth
  }

  //-->
  </SCRIPT>


when defining a script you use "type=text/javascript" (or whatever the scripting language is)

Those are my guesses but im not the greatest coder alive so i might be wrong

Was This Post Helpful? 0
  • +
  • -

#4 CamoDeveloper  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 20
  • View blog
  • Posts: 250
  • Joined: 12-June 09

Re: navigation menu in javascript

Posted 18 June 2009 - 05:22 PM

You were calling the javascript wrong, you don't call the name of the file. You call the name of the function inside of it. Let's say you had a .js file named myJSFile.js. You would link it as normal, then whatever function you had in it is what you would call.

myJSFile.js :
<!--
	function sayHello {
		alert("Hello");
	  }
//-->



Calling the function :
<input type="submit" name="btnSubmit" value="Submit" onclick="sayHello();">



You don't need a .js file for something this simple. Using the java script:window.location works just fine. Here is the HTML code you gave and I changed it to work. You just need to change the page names in the links.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>GGSA</title>
		<link href="index4.css" rel="stylesheet" type="text/css" />
		<link href="GGSA_Style.css" rel="stylesheet" type="text/css" />

		<!-- BEGINNING OF BANNER -->
		<script LANGUAGE=javascript type="text/javascript">
			  <!--
 				function window_onresize() {
					  myImg.height = window.document.body.clientHeight
					  myImg.width = window.document.body.clientWidth
				  }
			  //-->
		  </SCRIPT>
	</head>
	<body onload="return window_onresize();">
		<div id="mainWrapper"> <!-- THIS IS THE MAIN window...WITH EVERYTHING IN IT -->
			<div id="contentWrapper">
				<div id="div1">
   					<img id=myImg src="Golden_Goal_Banner.jpg" style="position:absolute;left:0px;top:0px;" />
						<BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/>
						<div id="navcontainer">
							<p>
								<a href="java script:window.location='home.html';"><b><u>HOME</u></b></a>
								<a href="java script:window.location='register.html';"><b><u>REGISTER</u></b></a>
								<a href="java script:window.location='faqs.html';"><b><u>FAQs</u></b></a>
								<a href="java script:window.location='map-to-field.html';"><b><u>MAP TO FIELD</u></b></a>
								<a href="java script:window.location='sponsors.html';"><b><u>SPONSORS</u></b></a>
								<a href="java script:window.location='picture-gallery.html';"><b><u>PICTURE GALLERY</u></b></a>
								<a href="java script:window.location='about-us.html';"><b><u>ABOUT US</u></b></a>
								<a href="java script:window.location='contact-us.html';"><b><u>CONTACT US</u></b></a>
							</p>
						</div>
				</div>
				<div id="bodyContent">
					<div id="main">
 	 					<img src="flyer.jpg" width="612" height="792" />
					</div>
				</div>
			</div>
		</div>
	</body>
</html>



Hope this helps!

~Camo
Was This Post Helpful? 0
  • +
  • -

#5 yello  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 11-June 09

Re: navigation menu in javascript

Posted 19 June 2009 - 08:05 AM

View PostCamoDeveloper, on 18 Jun, 2009 - 04:22 PM, said:

You were calling the javascript wrong, you don't call the name of the file. You call the name of the function inside of it. Let's say you had a .js file named myJSFile.js. You would link it as normal, then whatever function you had in it is what you would call.

myJSFile.js :
<!--
	function sayHello {
		alert("Hello");
	  }
//-->



Calling the function :
<input type="submit" name="btnSubmit" value="Submit" onclick="sayHello();">



You don't need a .js file for something this simple. Using the java script:window.location works just fine. Here is the HTML code you gave and I changed it to work. You just need to change the page names in the links.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>GGSA</title>
		<link href="index4.css" rel="stylesheet" type="text/css" />
		<link href="GGSA_Style.css" rel="stylesheet" type="text/css" />

		<!-- BEGINNING OF BANNER -->
		<script LANGUAGE=javascript type="text/javascript">
			  <!--
 				function window_onresize() {
					  myImg.height = window.document.body.clientHeight
					  myImg.width = window.document.body.clientWidth
				  }
			  //-->
		  </SCRIPT>
	</head>
	<body onload="return window_onresize();">
		<div id="mainWrapper"> <!-- THIS IS THE MAIN window...WITH EVERYTHING IN IT -->
			<div id="contentWrapper">
				<div id="div1">
   					<img id=myImg src="Golden_Goal_Banner.jpg" style="position:absolute;left:0px;top:0px;" />
						<BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/>
						<div id="navcontainer">
							<p>
								<a href="java script:window.location='home.html';"><b><u>HOME</u></b></a>
								<a href="java script:window.location='register.html';"><b><u>REGISTER</u></b></a>
								<a href="java script:window.location='faqs.html';"><b><u>FAQs</u></b></a>
								<a href="java script:window.location='map-to-field.html';"><b><u>MAP TO FIELD</u></b></a>
								<a href="java script:window.location='sponsors.html';"><b><u>SPONSORS</u></b></a>
								<a href="java script:window.location='picture-gallery.html';"><b><u>PICTURE GALLERY</u></b></a>
								<a href="java script:window.location='about-us.html';"><b><u>ABOUT US</u></b></a>
								<a href="java script:window.location='contact-us.html';"><b><u>CONTACT US</u></b></a>
							</p>
						</div>
				</div>
				<div id="bodyContent">
					<div id="main">
 	 					<img src="flyer.jpg" width="612" height="792" />
					</div>
				</div>
			</div>
		</div>
	</body>
</html>



Hope this helps!

~Camo


Quote

Thank you Camo!
mmmm.....perhaps I am missing something here...I had initially implemented this type of code but found that it was still loading event contents onto a separate page; I then have to click the back button to get back to the menu page. Do I have a problem with my <div>'s OR is this a javascript issue?

Was This Post Helpful? 0
  • +
  • -

#6 CamoDeveloper  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 20
  • View blog
  • Posts: 250
  • Joined: 12-June 09

Re: navigation menu in javascript

Posted 20 June 2009 - 06:47 AM

You could create a layout page have that HTML code in it, and then when you create a page just include that layout page and you will be set.

~Camo
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1