Welcome to WebmasterWorld Guest from 35.173.57.202

Forum Moderators: open

Message Too Old, No Replies

need link to open in a div

only one div on the page for all changing content

     
4:28 pm on May 20, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 25, 2004
posts:161
votes: 0


Hi everyone!
I have just converted my site layouts from using <table> to a nice shiny css liquid layout! that was a pain! (but a different story)

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?

2:26 am on May 21, 2009 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 18, 2008
posts:408
votes: 0


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&amp;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.

8:20 pm on May 25, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 25, 2004
posts:161
votes: 0


Thanks very much for that! Very handy to know and I will use this in any sites that use server side scripting (PHP being my choice of language too, so thanks!)

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 :-)

8:23 pm on May 25, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 25, 2004
posts:161
votes: 0


also if it helps i am using dreamweaver cs3 so i have the spry ajax thingy at my disposal. only seem to be able to read xml though and not html :-s
8:33 pm on May 25, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2002
posts:18903
votes: 0


Never link to a named index page, end the URL with a trailing slash.
10:12 pm on May 25, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 25, 2004
posts:161
votes: 0


the html example i just knocked up whilst writing the post. all i meant to say was that i have a div full of links and an empty div that i need javascript to fill with the contents of the linked html files :-) somehow :-s
1:19 am on May 31, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 25, 2004
posts:161
votes: 0


this is what you need! some guy wrote a function he calls JAH - just asynchronous html
this will load any html and stick it in a div :-)

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!

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members