...

View Full Version : Naming the DIV to open content in that frame/div(?)



Dennis_Ajax
04-04-2009, 07:05 PM
First of all, don't laugh about my English :D

Ok. Let start my 'story'

I've made a site layout in Photoshop and sliced it in there. In order to write some text I must delete that image and insert a DIV tag. Now, on some pages the site has a submenu on the left site. If i click on that link it refreshes the whole site, but I only want that the place of content resfreshes. Is thit possible?

I'm a noob :p

timgolding
04-04-2009, 08:49 PM
using anchor tags for links will refresh the whole page. To another page or to itself. If you really don't want it to refresh the whole page then you need a different page approach than the standard anchor tag. You could use javascript or ajax. Though then your links wouldn't work when people are using browsers without javascript or with javascript disabled. You just do a contetns swap like so.

Code to put inside your head tags


<script language="javascript" type="text/javascript">
<!--
function content_swap(page)
{
var txt='';
switch(page)
{
case 1 :
txt='Some content for your page 1.<br />';
txt+='Some more content for your page 1';
break;
case 2 :
txt='Some different content for your page 2<br />';
txt+='and more';
break;
}
document.getElementById('the_div').innerHTML = txt;
}
-->
</script>





Code inside body tags


<a class="custom anchors" onclick="content_swap(1);">Link 1</a><br />
<a class="custom achnors" onclick="content_swap(2);">Link 2</a><br />

<div id="the_div">
Some content for your page 1.<br />
Some more content for your page 1
</div>

timgolding
04-04-2009, 09:05 PM
What's the reason you don't want whole page to refresh?

Rowsdower!
04-04-2009, 09:26 PM
First of all, don't laugh about my English :D

Ok. Let start my 'story'

I've made a site layout in Photoshop and sliced it in there. In order to write some text I must delete that image and insert a DIV tag. Now, on some pages the site has a submenu on the left site. If i click on that link it refreshes the whole site, but I only want that the place of content resfreshes. Is thit possible?

I'm a noob :p

Yes, you could use javascript to achieve this. Here is a brief javascript example (Or is this AJAX? I don't really know what AJAX is to be honest) of how to change content without reloading a whole page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Replacement Text</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">
//<!--
function ahah(url, target) {
document.getElementById(target).innerHTML = ' Fetching data...';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (req != undefined) {
req.onreadystatechange = function() {ahahDone(url, target);};
req.open("GET", url, true);
req.send("");
}
}

function ahahDone(url, target) {
if (req.readyState == 4) { // only if req is "loaded"
if (req.status == 200) { // only if "OK"
document.getElementById(target).innerHTML = req.responseText;
} else {
document.getElementById(target).innerHTML=" AHAH Error:\n"+ req.status + "\n" +req.statusText;
}
}
}

function load(name,div) {
ahah(name,div);
return false;
}
//-->
</script>
</head>
<body>
<div>
<a href="#" onclick="load('http://www.google.com', 'manipulated_div');return false;">Click to load text below!</a>
<div id="manipulated_div"><span>You have not clicked on the link yet, have you?</span></div>
</div>
</body>
</html>

THIS ALLOWS YOU TO LOAD WHOLE PAGES. It works.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum