Forum Moderators: open
i have a drop down menu thing containing <a> links
these links open another page. the only different thing on the page is a centre <div> which the main content goes in.
is there a way to load the html for each link into the centre <div> on the page that is loaded? meaning that my visitors never really leave index.html?
the only different thing on the page is a centre <div> which the main content goes in.is there a way to load the html for each link into the centre <div> on the page that is loaded? meaning that my visitors never really leave index.html?
Well, yes there are a few ways to go about it.., first of all you may not want to use javascript for this (although it can be easily done with javascript, but there are more drawbacks as opposed to server-side solution). The best solution would be to use server-side scripting, such as php. Send a variable through the url to the page to determine what to include in the centre div. Such as, your links would be set up like:
<a href="index.php?centre=1">Index content 1</a>
<a href="index.php?centre=2&centrestyle=blue">Index content 2 with style blue</a>
Note how 'centre' or 'centrestyle' are being used as variables, with their values to right of = sign. And then you could determine on each page from the 'get' url string what to display (just a quick 'off the cuff' example of what the php could look like on the index page, I'm not an expert on it, but do use includes myself):
<html>
<head>
<?php
$centreDivVar = $_GET["centre"];
$centreStyle = $_GET["centrestyle"];
if ($centreStyle) {
$styles = Array("red"=>'red_style.css', "blue"=>'blue_style.css', "green"=>'green_style.css');
if ($styles[$centreStyle]) {
echo '<link href="'.$styles[$centreStyle].'" type="text/css" rel="stylesheet" />';
}
}
?>
</head>
<body>
<div id="centre">
<?php
if ($centreDivVar >= 0 && $centreDivVar < 3) {
$centreIncludes = array('centre_content0.php', 'centre_content1.php', 'centre_content2.php');
include($centreIncludes[$centreDivVar]);
}
?>
</div>
</body>
</html>
For more info, 'google' php includes or server-side includes, or come on back and ask about them more (but, preferably in the php forum here). If you are dead-set on a javascript solution, or the amount of content being changed is really a trivial amount, come on back and say 'javascript only please', but that would be my recommendation for now.
However, the site which I am working on has no app server or database, so unfortunately I need a client side solution using javascript :-(
to keep things simple:
<div id="links">
<a href="page1.html">Page 1</a>
<a href="page2.html">Page 2</a>
<a href="page3.html">Page 3</a>
</div>
<div id="content">
{CONTENT-SHOULD GO HERE}
</div>
Thanks again!
Derek :-)
function jah(url,target) {
// native XMLHttpRequest object
document.getElementById(target).innerHTML = 'sending...';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = function() {jahDone(target);};
req.open("GET", url, true);
req.send(null);
// IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = function() {jahDone(target);};
req.open("GET", url, true);
req.send();
}
}
}
function jahDone(target) {
// only if req is "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
results = req.responseText;
document.getElementById(target).innerHTML = results;
} else {
document.getElementById(target).innerHTML="jah error:\n" +
req.statusText;
}
}
}
to call it :
<a href="jah('external.html','target_div_id');">click</a>
brilliant stuff!
