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

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

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

Code:

<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

Code:

<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

Quote:

Originally Posted by Dennis_Ajax

First of all, don't laugh about my English

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

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:

Code:

<!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.