Karim Belkhiria Karim Belkhiria - 4 months ago 9
HTML Question

How to have a fix php webpage, that has a fix navigation-bar and footer

I would like to have a webpage, which has the same horizontal navigation bar, and footer, but the content will be loaded dynamically, depending on what the user clicks on the nav-bar.

for ex

<div class="nav-bar">
/* this is always same mainTemplate.php */
</div>

<div class="main-content">
/* here i load different pages like content1.php or content2.php or content3.php, depending what the user clicks on the different nav-bar sections/buttons */
</div>

<footer>
/* this is always same mainTemplate.php */
</footer>


how to do it with javascript or ajax or php or something?

Answer

like this maybe:

PHP:

<div class="nav-bar">
/* this is always same mainTemplate.php */
<ul>
  <li id="op1">op1</li>
  <li id="op2">op2</li>
  <li id="op3">op3</li>
</div>

<div class="main-content">
/* here i load different pages like content1.php or content2.php or content3.php, depending what the user clicks on the different nav-bar sections/buttons */ 
</div>

<footer>
/* this is always same mainTemplate.php */
</footer>

<script src="yourScript.js" type="text/javascript"></script>

JS:(yourScript.js)

(function(){
   var elems = document.getElementsByTagName("li");
   for(idx = 0; idx < elems.length; idx++){
       elems[idx].addEventListener("click", menuClick, false);
   }
   loadDoc("homePage.html");
 })();

 function menuClick(li){
      li.stopPropagation();
      li.stopImmediatePropagation();
      if(li.target.getAttribute("id") == "op1"){
         loadDoc("yourContentPage.php");
      }
      if(li.target.getAttribute("id") == "op2"){
         loadDoc("yourContentPage2.php");
      }
      if(li.target.getAttribute("id") == "op3"){
         loadDoc("yourContentPage3.php");
      }
 }

 function loadDoc(yourContentPage) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
             document.getElementById("main-content").innerHTML = xhttp.responseText;
        }
    };
    xhttp.open("POST", yourContentPage, true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send();
 }