website:
www.strivingforcairo.com/test
I am redesigning a site and am trying to use a code I found on the net and have previously altered to work the way I intended on a different site.
I have the main navigation working properly on the home page, but am trying to use the same script with altered id's to make the photo video buttons on the media page refresh the lower container to have either photo or video thumbnails in it.
The files I am working with are contentswitch.js + sections.html
and also media.js + media.html
I dont know much about Java script but shouldnt I be able to package it all into the contentswitch.js file by adding new var's to control the divs I want to load into?
Here is the code for contentswitch.js:
$(document).ready(function(){
//References
var sections = $("#mainWrap div");
var loading = $("#eventsLoading");
var contentWrap = $("#contentWrap");
//Manage click events
sections.click(function(){
//show the loading bar
showLoading();
//load selected section
switch(this.id){
case "home":
contentWrap.load("sections.html #homeData", hideLoading);
break;
case "booking":
contentWrap.load("sections.html #bookingData", hideLoading);
break;
case "media":
contentWrap.load("sections.html #mediaData", hideLoading);
break;
case "store":
contentWrap.load("sections.html #storeData", hideLoading);
break;
case "bio":
contentWrap.load("sections.html #bioData", hideLoading);
break;
case "contact":
contentWrap.load("sections.html #contactData", hideLoading);
break;
default:
//hide loading bar if there is no selected section
hideLoading();
break;
}
});
//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
and here is the code for media.js
$(document).ready(function(){
//References
var sections = $("#mediaNav div");
var loading = $("#eventsLoading");
var contentWrap = $("#mediaThumbWrap");
//Manage click events
sections.click(function(){
//show the loading bar
showLoading();
//load selected section
switch(this.id){
case "photoBtn":
contentWrap.load("media.html #photoData", hideLoading);
break;
case "videoBtn":
contentWrap.load("media.html #videoData", hideLoading);
break;
default:
//hide loading bar if there is no selected section
hideLoading();
break;
}
});
//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});