CODEWITHSUNDEEP
phpjquerycss
jan199674
jan199674

Reputation: 753

load and exchange pages from li without reloading menu

I would like to load all pages of the website into 1 single page on which the menu is placed - the menu should never reload.

Im using an ordinary ul / li setup, but instead of loading pages through which will replace the entire page, im looking for a solution that loads page into the existing "master page" - og replaces it when another link is clicked

Is there a way to accomplish this with php or Jquery?

Ive tried this php-solution, but the content of the loaded page is not showing:

<?php  
$p = $_GET['page'];

switch($page)
{
    case "item_1":
        $page = "includes/item_1.php";
    break;

    case "item_2":
        $page = "includes/item_2.php";
    break;
}
?>  

   <ul class="sub">      
      <li><a href="#.php"> items </a>
          <ul class="ul_third">
              <li><a href="#.php?p=item_1.php"> item 1 </a></li>
              <li><a href="#.php?p=item_2.php"> item 2 </a></li>
          </ul> 
      </li>
   </ul>

Upvotes: 0

Views: 1581

Answers (1)

Sridhar R
Sridhar R

Reputation: 20418

try this method..this will load all pages div has id #content

<ul id="nav">
    <li><a href="index.php">welcome</a></li>
    <li><a href="about.php">about</a></li>
    <li><a href="portfolio.php">portfolio</a></li>

</ul>
<div id="content">
    //Here load the pages
</div>

Script

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-4)){
            var toLoad = hash+'.php #content';
            $('#content').load(toLoad)
        }                                           
    });

    $('#nav li a').click(function(){

        var toLoad = $(this).attr('href')+' #content';
        $('#content').hide('fast',loadContent);
        $('#load').remove();
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#content').show('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;

    });

});

Upvotes: 1

Related Questions