Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Apr 2009
    Posts
    29
    Thanks
    1
    Thanked 1 Time in 1 Post

    javascript not loading correctly

    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);
    };
    });

  • #2
    New Coder
    Join Date
    Apr 2009
    Posts
    29
    Thanks
    1
    Thanked 1 Time in 1 Post
    bump^


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •