Static Menu, Dynamic Content

eddyc · 02-03-2007 5:19pm #1

Hi I have been asked to do a web site for a local radio station. I was wondering how I can keep the menu and the header present in the page as menu items are clicked while the content appears dynamically in the content area without reloading the whole page.
Do I use javascript to do this? Frames?
I havent got a clue.
I have a jpg attatched so you can see exactly what I mean.
Cheers

seamus · 02-03-2007 5:34pm

You can use frames, but frames are the spawn of the devil. Iframes too.

If it's really important that the page doesn't reload when you click on a menu item, then you can use AJAX to dynamically load the content of the text part.

Liam Byrne · 03-03-2007 2:20am

Ajax is probably the best bet; it'll also allow you set up the "sub-page" so that it includes the header if they have JavaScript disabled - that way, search engines will actually get the header content.

1) Set up a content div on each page
2) Download jquery
3) Add both a standard href and an onclick javascript function such as

onclick='$("div#content").load(this.href+"?loadHeaders=false");return false'

4) Set up the content pages so that they check if $_GET["loadHeaders"] is set and ONLY include the header & navigation if they're not, e.g.

<?php if (!isset($_GET["loadHeaders"])) { ?>
<HTML>
<HEAD>
:
</HEAD>
<BODY>

<DIV ID="content">
<?php } ?>
ACTUAL CONTENT OF PAGE GOES HERE
<?php if (!isset($_GET["loadHeaders"])) { ?>
</DIV>
</BODY>
</HTML>
<?php } ?>

Be aware that if anything within that page requires an onload or a script, then the above is far too simplistic!

eddyc · 03-03-2007 7:03pm

Thanks for the replys.

Wow so its gonna have to be AJAX, damn I was hopin it wasnt going to be too complicated!!
I'm pretty novice at this kinda thing, I have a BASIC understanding of css and thats about it, I'll give it a go anyway, cheers

PixelTrawler · 08-03-2007 2:27pm

Another solution is to have, say, an asp.net or a php page I guess.

Every menu link could link to the page and pass in a different querystring id.

e.g.
Link 1 --> default.aspx?pid=1
Link 2 --> default.aspx?pid=2

Based on the id you could either switch on and off some content or retrieve it from a database.

If you don't want to use any server side code, you could also do it in pure javascript and html. Use a javascript function to hide/display divs on your page.
So each menu item is a call to the javascript to only display the block requested.

Any particular reason you only want one page, is it because you only want to maintain one header & menu in all pages.

Theres loads of ways to do this, javascript, asp includes or if your feeling a bit adventurous look into asp.net 2.0, master pages and menu controls ( which are a really nice, easy way of build standards compliant sites when you get the hang of them)..

eddyc · 08-03-2007 6:13pm

After a bit of googling I found an ajax script on 'dynamic drive' to do exactly what I wanted, My question is ,will there be problems for people trying to view the page in older browsers, or do all reasonably modern browsers support ajax, should I make a static version of the page just in case or is that overkill?

Wompa1 · 08-03-2007 8:26pm

Could try using Flash with XML, have a static Flash frame with content being loaded in using XML files, just a suggestion

Static Menu, Dynamic Content

Comments