ajax or php to load new content into div? - HTML Forums

dustin// · 10-13-2009, 04:31 AM

a site i'm working on has a flash header, so i'm trying to avoid having to reload that every time you click within the navigation.

to accomplish this, i was planning on using ajax to load in the content in a div, since all the content to be loaded will be on the same server.

is there a way to do this and change the url so that i don't break the ability to bookmark? or is there possibly a better solution to my desire to not reload the header? or should i just make it reload?

Vege · 10-14-2009, 10:53 AM

You don't need ajax, just javascript that swaps visibility of divs with onclick effect.
You can maintain the bookmarkability (

) with anchor tag that you can read with javascript then set the visibility of div with that information from anchor.

Vege · 10-14-2009, 05:16 PM

K, i was bored:
needs jquery http://jquery.com/

HTML 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="fi">
	<head>
<script src="jquery.js" type="text/javascript" ></script>
<script>

$(document).ready(function()
{
  if(self.document.location.hash.substring(1))
  change(self.document.location.hash.substring(1));
  else
  change('first');
});

function change(refreshthis)
{

  if(self.document.location.hash.substring(1))
  {
    $(".divs").each(function() {
     if(this.id== refreshthis)
       this.style.display='block';	
     else
       this.style.display='none';

    });
  }
}

</script>

	</head>
	<body>
        <a onclick="change('first');" href="#first" >first</a>
        <a onclick="change('second');" href="#second">second</a>
        <a onclick="change('third');" href="#third">third</a>

        	<div id="first" class="divs" >a</div>
        	<div id="second" class="divs" >b</div>
        	<div id="third" class="divs">c</div>
<br />
<embed src="http://www.youtube.com/v/W-Q7RMpINVo&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
	</body>
</html>