Hi All

 

I'm currently putting together my portfolio website and really like the navigation style on this website - http://www.theisandkhan.com/content/

 

I'm a newbie to web design and know I can simply create this nav style by creating individual files but I hate the way each page loads seperately when you select the page. I want to learn how to create this navigation technique on that website.

 

I've researched and googled everything but I cant seem to find anything close to this. I have recently read a lot into 'PHP includes' - Am I on the right track?.... Please can anybody help me?? Im getting really desperate at this stage so any help or direction would really be appreciated

 

Thanks in advance!

Edited October 13, 201213 yr by redned99

That menu is mainly Ajax (a kind of javascript). The home page http://www.theisandkhan.com/content/# has a # at the end and also code

<script language="[url=""]javascript[/url]" type="[url=""]text/javascript[/url]">
function ajaxContent(div, url) {
	$("#"+div).load(url);	
}
[

which adds a url as necessary

and html

<div id="[url=""]text_wrapper[/url]">
		<p></p>			</div>

which appears to have nothing inside the p tag but that is loaded by Ajax:

<div id="[url=""]nav_wrapper[/url]"><ul><li><a href="[url="view-source:http://www.theisandkhan.com/content/#"]#[/url]" onclick="[url=""]javascript:ajaxContent('nav_wrapper', '/docs/ajax/nav.php?id=1:2:0:0:0');ajaxContent('text_wrapper', '/docs/ajax/list.php?id=1:2:0:0:0');[/url]" class="">News + Events</a></li>

Edited October 14, 201213 yr by Wickham

With PHP includes the distinct pages still load seperatly but because the browser is re-using bits of the page it already has, it can pull those from your cache on your computer rather than having to re-request it from the server giving it the illusion of not reloading.

 

As Wickham said above, the example you posted is using AJAX ( Asynchronous Javascript and XML) to pull in the menu and keep it constant.

With PHP includes the distinct pages still load seperatly but because the browser is re-using bits of the page it already has, it can pull those from your cache on your computer rather than having to re-request it from the server giving it the illusion of not reloading.

 

As Wickham said above, the example you posted is using AJAX ( Asynchronous Javascript and XML) to pull in the menu and keep it constant.

 

I would like to create this effect with my own navigation (i.e. I dont want the page to reload each time I select the link) so sould I consider using AJAX? Or is there something else I can use?

That menu is mainly Ajax (a kind of javascript). The home page http://www.theisandkhan.com/content/# has a # at the end and also code

<script language="[url=""]javascript[/url]" type="[url=""]text/javascript[/url]">
function ajaxContent(div, url) {
	$("#"+div).load(url);	
}
[

which adds a url as necessary

 

I am aware there was something else being used but am I'm a newbie to all of this I'm struggling to work out how it works. To be honest I copy & pasted the relevant elements (html, css, php) from the site so I could play with it and amend it where necessary - no success though.

 

and html

<div id="[url=""]text_wrapper[/url]">
		<p></p>			</div>

which appears to have nothing inside the p tag but that is loaded by Ajax:

<div id="[url=""]nav_wrapper[/url]"><ul><li><a href="[url="view-source:http://www.theisandkhan.com/content/#"]#[/url]" onclick="[url=""]javascript:ajaxContent('nav_wrapper', '/docs/ajax/nav.php?id=1:2:0:0:0');ajaxContent('text_wrapper', '/docs/ajax/list.php?id=1:2:0:0:0');[/url]" class="">News + Events</a></li>

 

 

Ah if I had to see something between the <p> tags in the html file that would have helped me... possibly! lol.... but if that is something AJAX is doing instead that is beyond my knowledge at the moment.

 

I really want to create something like this though - Its simple and clean. Is there something else I can use instead of AJAX (i.e. limited knowledge). Is 'PHP includes' actually relevant? Does it actaully create this effect also (i.e stops page from reloading)?

To be honest I copy & pasted the relevant elements (html, css, php) from the site so I could play with it and amend it where necessary - no success though.

 

I think you probably needed to download one or more .js files, probably the jquery-1.2.6.min.js file but I'm not sure becuse there is also a javascript image show.

 

This http://www.designchemical.com/blog/index.php/jquery/simple-tabs-with-ajax-and-jquery/ is a simple Ajax jquery/javascript tutorial.

 

You could do something similar with only PHP "includes" and no Ajax/javascript.

 

PHP means more requests from the host's server which might add a little time or get disrupted while Ajax is all client-side so should take data from cache (unless there is a bit of PHP as well).

 

The Theis + Khan page has a brief menu and when you click Studio a list of links appears alongside. You could do the same with PHP like a News Box shown here:

http://www.wickham43....php#phpnewsbox

where Football News and Tennis News are links and clicking shows new information in the right hand box. The links could be a vertical list and the News Box could be empty and invisible until a link is clicked. PHP does not reload the whole page, it just requests a bit more data from the server and uses what it already has from cache. You hardly see the page blink.

Edited October 14, 201213 yr by Wickham

I think you probably needed to download one or more .js files, probably the jquery-1.2.6.min.js file but I'm not sure becuse there is also a javascript image show.

 

Yea i think I was close - I can send you a ZIP file what I downloaded if you wish

 

This http://www.designche...jax-and-jquery/ is a simple Ajax jquery/javascript tutorial.

 

 

You could do something similar with only PHP "includes" and no Ajax/javascript.

 

PHP means more requests from the host's server which might add a little time or get disrupted while Ajax is all client-side so should take data from cache (unless there is a bit of PHP as well).

 

The Theis + Khan page has a brief menu and when you click Studio a list of links appears alongside. You could do the same with PHP like a News Box shown here:

http://www.wickham43....php#phpnewsbox

where Football News and Tennis News are links and clicking shows new information in the right hand box. The links could be a vertical list and the News Box could be empty and invisible until a link is clicked. PHP does not reload the whole page, it just requests a bit more data from the server and uses what it already has from cache. You hardly see the page blink.

 

It seems AJAX is the way to go then. Thanks for the links - the PHP news box is very handy indeed