In this tutorial, I will show you how to use PHP and jQuery to dynamically change webpage content.

All this code should be done in the <HEAD> portion of your index page:

Include the various javascript files needed:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.history.js"></script>

Create a PHP multi-dimensional array of all pages:


<?php

$pages = Array(

Array(page => ‘main.php’, title => ‘Home’, hash => ‘main’),

Array(page => ‘portfolio.php’, title => ‘Portfolio’, hash => ‘portfolio’),

Array(page => ‘templates.php’, title => ‘Templates’, hash => ‘templates’),

Array(page => ‘price.php’, title => ‘Pricing’, hash => ‘price’),

Array(page => ‘contact.php’, title => ‘Contact Us’, hash => ‘contact’),

Array(page => ‘policy.php’, title => ‘Privacy Policy’, hash => ‘policy’)

);

?>

Since PHP is pre-processed at the server, we can use the array created above to populate a javascript associative array:

<script type="text/javascript">

// [CDATA[

var pages = [

<?php

$i = 0; // count variable

$end = “‘ },\n”; // variable for the end of the array variable

$page_count = count($pages); // number of pages for the site

foreach ($pages as $page) { // Iterate through the PHP array

if ($i++ == $page_count) { // current page is last page,

$end = “‘ }\n”; // close the array.

}

echo “\t\t{ title: ‘{$page[‘title’]}’, hash: ‘” . $page[‘hash’] . $end; // output the array values for the javascript array

}

?>

];

// ]]

</script>

<script type=”text/javascript”>

// <!–

// PageLoad function

// This function is called when:

// 1. after calling $.historyInit();

// 2. after calling $.historyLoad();

// 3. after pushing “Go Back” button of a browser

function pageload(hash) {

// hash contains a value, let’s use it.

if(hash) {

// restore ajax loaded state

// Load data from the server and place the returned HTML into

// the matched element.

$(“#art-content”).load(hash + “.php?noheader=false”,

null,

contentLoaded); // javascript function contentLoaded() function is called

cur_hash = hash;

} else { // otherwise, load the home page

// start page

$(“#art-content”).load(“main.php?noheader=false”,

null,

contentLoaded);

cur_hash = ‘main’;

<?php

$page[‘page’] = ‘main.php’;

?>

}

}

$(document).ready(function(){

// After the DOM is done loading,

// Initialize history plugin.

// The callback is called at once by present location.hash.

$.historyInit(pageload);

// set onlick event for buttons

$(“a[rel=’history’]”).click(linkClick);

});

function contentLoaded() {

// for each page, make any links that go to that page

// use the hash-mark href instead and have rel=’history’

// so that they use the jquery history plugin to process

// and load their content through ajax instead of a link

$(function() {

$.each(pages, function(i, val) {

$(‘a[href=’ + val[‘hash’] + ‘.php]’)

.attr(‘rel’, ‘history’)

.attr(‘href’, ‘#’ + val[‘hash’])

.click(linkClick);

});

});

if(cur_hash) {

cur_hash = cur_hash.replace(/^.*#/, ”);

$(“a[rel=’history’]”).removeClass(‘active’);

$(‘#l_’ + cur_hash).addClass(‘active’);

}

}

var cur_hash;

function linkClick() {

cur_hash = this.href;

cur_hash = cur_hash.replace(/^.*#/, ”);

// moves to a new page.

// pageload is called at once.

$.historyLoad(cur_hash);

$(‘#link’).attr(‘href’).valueOf() = cur_hash;

return false;

}

// –>

</script>

For more info on the jQuery Library, visit their website at http://jquery.com/.

Now for the html part…

<ul class="art-menu">

<?php

/*construct the menu from the item array built in the head section */

foreach ($pages as $item) {

echo “<li><a id=\”l_{$item[‘hash’]}\” href=\”{$item[‘page’]}\”><span class=\”l\”></span><span class=\”r\”></span><span class=\”t\”>{$item[‘title’]}</span></a></li>\n”;

}

?>

<li>

<a href=”https://manzwebdesigns.com/” title=”Opens in new window” target=”_blank>

<span class=”l”></span><span class=”r”></span><span>MWD Events</span></a>

</li>

</ul>

<div class=”art-content”>

<!—jQuery code dumps the requested content here –>

</div>

Leave a Comment

Scroll to Top