Jump to content

menu link1

vj5

By vj5
in HTML/XHTML

Recommended Posts

vj5 Member

vj5

Posted
Posted

I changed my code to this one. Can you tell if I can link to the main content area.

<!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" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>pool Inc</title><style type="text/css">body{margin: 0;padding: 0;border: 0;overflow: hidden;height: 100%; max-height: 100%; }#framecontent{position: absolute;top: 0;bottom: 0; left: 0;width: 200px; /*Width of frame div*/height: 100%;overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/background: navy;color: white;}#maincontent{position: fixed;top: 0; left: 200px; /*Set left value to WidthOfFrameDiv*/right: 0;bottom: 0;overflow: auto; background: #fff;}.innertube{margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/}* html body{ /*IE6 hack*/padding: 0 0 0 200px; /*Set value to (0 0 0 WidthOfFrameDiv)*/}* html #maincontent{ /*IE6 hack*/height: 100%; width: 100%; }</style></head><body><div id="framecontent"><div class="innertube"><h3>Home</h3><h3>About</h3><h3>Careers</h3></div></div><div id="maincontent"><div class="innertube"><h1>Welcome to our home page</h1></div></div></body></html>

Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted

You can use AJAX (read the tutorial) to update only the maincontent division.

Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted

This example should be c/p-able for your scriptJavaScript

function load(page) {	var xmlHttp;	xmlHttp = ((window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"));	xmlHttp.open("GET", page, true);	xmlHttp.onreadystatechange = function() {		if (xmlHttp.readyState == 4) {			document.getElementById("maincontent").innerHTML = xmlHttp.responseText;		}	}	xmlHttp.send(null);}

Menubar

<div id="framecontent"><div class="innertube"><a onclick="load(home.html)">Home</a><a onclick="load(about.html)">About</a><a onclick="load(careers.html)">Careers</a></div></div>

NOTE: with this method, the pages holding content only need to have the content, not the rest of the HTML structure such as the head or the navigation markup. So home.html may just look like this:

<div class="innertube"><h1>Welcome to our home page</h1></div>

Link to comment
Share on other sites
vj5 Member

vj5

Posted
  • Author
Posted
This example should be c/p-able for your scriptJavaScript
function load(page) {	var xmlHttp;	xmlHttp = ((window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"));	xmlHttp.open("GET", page, true);	xmlHttp.onreadystatechange = function() {		if (xmlHttp.readyState == 4) {			document.getElementById("maincontent").innerHTML = xmlHttp.responseText;		}	}	xmlHttp.send(null);}

Menubar

<div id="framecontent"><div class="innertube"><a onclick="load(home.html)">Home</a><a onclick="load(about.html)">About</a><a onclick="load(careers.html)">Careers</a></div></div>

NOTE: with this method, the pages holding content only need to have the content, not the rest of the HTML structure such as the head or the navigation markup. So home.html may just look like this:

<div class="innertube"><h1>Welcome to our home page</h1></div>

The above codes in italic - don't they have to have <a href> tag to them?
Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted

There is the <a> tag but it is handled through onclick instead of href. If your still want to use href you can do (remove the spaces between java and script)

<a href="java script:load(home.html)">Home</a><a href="java script:load(about.html)">About</a><a href="java script:load(careers.html)">Careers</a>

Link to comment
Share on other sites
vj5 Member

vj5

Posted
  • Author
Posted
There is the <a> tag but it is handled through onclick instead of href. If your still want to use href you can do (remove the spaces between java and script)
<a href="java script:load(home.html)">Home</a><a href="java script:load(about.html)">About</a><a href="java script:load(careers.html)">Careers</a>

When I click on the link, I get an error page saying:Firefox can't find the file at /C://java script:load(home.html). When I use onclick, hyperlink isn't working.
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted
When I click on the link, I get an error page saying:Firefox can't find the file at /C://java script:load(home.html). When I use onclick, hyperlink isn't working.
Try removing the spaces between "java" and "script:". This forum puts them automatically to prevent hacking.The link won't appear like a link without the href attribute, so I usually make my links with "onclick" in them like this:<a href="javascript:void(0)" onclick="load(home.html)">Home</a>
Link to comment
Share on other sites
vj5 Member

vj5

Posted
  • Author
Posted
Try removing the spaces between "java" and "script:". This forum puts them automatically to prevent hacking.The link won't appear like a link without the href attribute, so I usually make my links with "onclick" in them like this:<a href="javascript:void(0)" onclick="load(home.html)">Home</a>
I tried with java script:void(0), it is not doing anything. Hyperlink isn't working.
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

Well, ok.You can attach images to threads but that wouldn't help me.I'll just go through a series of steps.First, are you using either Fierfox or Opera?If so, can you click on one of the links and check the error console?

Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted

Try uploading your file to an online server - many browsers disable local scripts. Also, make sure you've put your JS in a script block and that home.html does exist. And that you aren't using IE 5 or lower. If you use FF you can open their error console (Tools -> Error Console) and check for JS errors.

Link to comment
Share on other sites
vj5 Member

vj5

Posted
  • Author
Posted
Try uploading your file to an online server - many browsers disable local scripts. Also, make sure you've put your JS in a script block and that home.html does exist. And that you aren't using IE 5 or lower. If you use FF you can open their error console (Tools -> Error Console) and check for JS errors.
In Error console, this is what I got:Error: uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIXMLHttpRequest.open]" nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame :: file:///C:../layout.html :: load :: line 12" data: no]The file is in online server, for some reason, when I run the file, getting an error message, that is why I am running locally.
Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted

Well load it back on to the online server and let us have a look, we may be able to find the trouble.

Link to comment
Share on other sites
jesh Devoted Member

jesh

Posted
Posted 
<a onclick="load(home.html)">Home</a><a onclick="load(about.html)">About</a><a onclick="load(careers.html)">Careers</a>

Part of the problem may be the arguments being passed to load are being passed as objects rather than strings and there are no objects in your script with the name of home.html, about.html, and careers.html.Try changing the above code to (notice the single quotes):
<a onclick="load('home.html');">Home</a><a onclick="load('about.html');">About</a><a onclick="load('careers.html');">Careers</a>

Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted

Oops did I really write that? Sorry :)

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...