arielmedel Posted October 17, 2006 Share Posted October 17, 2006 I need to be able to change the content of a page without changing the header and the menu. I read that iframes or AJAX are NOT search engine friendly(plus AJAX is pretty difficult).Can someone give me advise? Any links to tutorials? Please help. Thanks. Quote Link to comment Share on other sites More sharing options...
btherl Posted October 17, 2006 Share Posted October 17, 2006 Would reloading the entire page, but reading the menu, header etc from a common file be good enough? That's the sort of thing that php is quite good at, especially using Smarty templates. Quote Link to comment Share on other sites More sharing options...
arielmedel Posted October 17, 2006 Author Share Posted October 17, 2006 Well, what I want to do is this:I have a page for a band, on top there's a mp3 player, below it it's a header and the menu. If I leave it as common html, when the user clicks on a menu button, and the page for that link starts to load, the song in the mp3 player will stop playing, I want the user to be able to navigate through the site without the music stoping. So I think if the top part of the pages does not reload, then the music will continue to play no matter where on the site the user goes.... Quote Link to comment Share on other sites More sharing options...
tomfmason Posted October 17, 2006 Share Posted October 17, 2006 You could use ajax and that would be fine. Just have a site map for the bots. Quote Link to comment Share on other sites More sharing options...
arielmedel Posted October 17, 2006 Author Share Posted October 17, 2006 Tomfmason:Do you know a good tutorial to do that? Thanks. Quote Link to comment Share on other sites More sharing options...
tomfmason Posted October 17, 2006 Share Posted October 17, 2006 First, this is not very different from using the get method in php..here is a simple example of parsing the incomming url(javascript) and then you can act on it based on the input. Later I will give a simple example of a site map. I personaly like to split the url by the ? and then send the url to a php script for processing. Like this.[code=php:0]//first we create a standard xmlhttprequestfunction createRequestObject() { if (window.XMLHttpRequest) { // Mozilla, Safari, Opera... var xmlhttp = new XMLHttpRequest(); if (xmlhttp.overrideMimeType) xmlhttp.overrideMimeType('text/xml'); } else if (window.ActiveXObject) { // IE try { var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!xmlhttp) { alert('Giving up :( Cannot create an XMLHTTP instance'); return false; } return xmlhttp;} //now we parse the incomming urlfunction parseUrl() { //this will get the url in the address bar. var url = window.location.href; //now we split the url by the ? var parts = url.split("?"); //now we check to see if the array create is empty and if it is we // will return home (or whatever). This means that we do not load process any further. if (parts.length == 0) { //now we return home return 'home'; } else { //now we get the parts of the url after the ? var urlString = parts[1]; return urlString; }}//now we open the backend processing file and use the get method to get the pagevar http = createRequestObject();function getPage() { var urlString = parseUrl(); if (urlString !== 'home') { //now we use the urlString to get the page http.open('GET', 'yourscript.php?' + urlString); http.send(null); http.onreadystatechange = handlePage; }}//now this will handle the response from the php file.function handlePage() { if (http.readyState == 4) { //the response text from the php file var response == http.responseText; //now we write the response to your div that contains the dynamic content document.getElementById('yourDiv').innerHtml = response; }}[/code]That was a short and sweet example of parseing a url with javascript and then using ajax to send the results to a php processing file and then acting on the response.So say you wanted to go to the page about us you would have the following in the address bar.[b]index.html?page=contact[/b]Now in the php file I would do something like this..[code]<?phpsession_start();//just incase you need it later//now we set up a valid array of pages$valid_pages = array('test', 'anotherpage');//now we set up a valid array of actions or pages. This is the ?something part the the passed url$valid_keys = array('page', 'action');$keys = array_keys($_GET); //now we use array_values to get the first value of the first part of the array$vals = array_values($_GET);if ((!in_array($keys[0], $valid_keys)) || (!in_array($vals[0], $valid_pages))) { echo "Invalid Page"; exit();}function getPage($page) { switch($page) { case "about": echo '<b>This is the contact us page</n>'; break; case "anotherpage": //your other page goes here break; }}getPage($vals[0]);?>[/code]Now as far as the site maps here is a post at digitalpoint that I think will help you alot http://forums.digitalpoint.com/showthread.php?t=54516Hope that helps,Tom[b]EDIT[/b]I almost forgot to tell you that will need an onload event in the body of the html.. Like this[code]<body onload="getPage();">[/code] Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.