i.e. how to formulate the link so that it will point the script to the page we want to load in the div we want?
The script:
Expand|Select|Wrap|Line Numbers
- $(document).ready(function() {
- // Check for hash value in URL
- 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-5)){
- var toLoad = hash+'.html #content';
- $('#content').load(toLoad)
- }
- });
- $('#nav li a').click(function(){
- var toLoad = $(this).attr('href')+' #content';
- $('#content').hide('fast',loadContent);
- $('#load').remove();
- $('#wrapper').append('<span id="load">LOADING...</span>');
- $('#load').fadeIn('normal');
- window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
- function loadContent() {
- $('#content').load(toLoad,'',showNewContent())
- }
- function showNewContent() {
- $('#content').show('normal',hideLoader());
- }
- function hideLoader() {
- $('#load').fadeOut('normal');
- }
- return false;
- });
- });
The instructions specify the following:
1. We want to target the links within the navigation menu and run a function when they are clicked:
Expand|Select|Wrap|Line Numbers
- $('#nav li a').click(function() {
- // function here
- });
2. We need to define what page to get the data from when a link is clicked on:
Expand|Select|Wrap|Line Numbers
- var toLoad = $(this).attr('href')+' #content';
3. The loadContent function calls the requested page:
Expand|Select|Wrap|Line Numbers
- function loadContent() {
- $('#content').load(toLoad,'',showNewContent)
- }
It's very likely that the above is all that's needed to run the script as intended but only if you know how to do it, which I don't.
I will be much obliged if the experts here care to give me a guiding hand.
PS: The tutorial all this comes from is here:
http://net.tutsplus.com/javascript-a...t-with-jquery/