Indexhibit Support

Hi there,
I'm trying to implement an jquery script I found on the web in order to navigate from an exhibit to another, but without having to refresh the page. Indeed, I've got a flash audio player, so it would stop the song each time I move... and I do not want this.

So basically, here is the javascript.
You can see that #menu ul li a refers to the links that will enable a jquery nav. #content is where the... content will be loaded. So I guess it's okay for that part.

What blocks me is the parts with $(ele).php . If I understand well, it gets the name of the page to load then add .php to the end. But it cannot work this way...

Could you give me any clue on how to get the extension to put down to get the page loaded ?
Hope I've been quite clear... cause I'm not a progammer :/
Here's my site in construction.

Thanks a lot !

The real problem here is that you can't simply grab a page and insert it into the #content area. Your script needs to access a script that only returns 'content'. But, the problems magnify because you will likely need to enable/disable javascript on the fly as well...

This is a rather advanced thing you are trying to do...it takes a solid amount of skill to do this.

Aww :( ... Thanks for your answer.
Have you any alternative to prevent the player from refreshing with the rest of the page ?
I guess I could use iframes... even if ajax is sexier.

Hello Kazt.

The following code should load the menu and content via ajax, while leaving your flashplayer alone.
The body class does not get updated thought, so if you need that, I will leave it to you to find out how :-).
It also does not take into account any accordion functions etc that may be attached to the menu, instead it simply replaces the whole menu with the newly loaded one.

The whole block of code simply goes in a separate js doc, unless you already have one with a $(document).ready function in which case you just insert the code that is between the dashed lines.

Hope this helps,

Regards, Jesper.

$(document).ready(function() {
    
//--------
        function exhibitload(url){
            $.get(url, {}, function(data) {

            var content = $(data).find('#content');
            var menu = $(data).find('#menu');

            var contenthtml = $(content).html();
            var menuhtml = $(menu).html();

            $('#content').html(contenthtml);
            $('#menu').html(menuhtml);        
            $('body').removeClass('loading');
            ajaxclick();
            
            });

        }

        function ajaxclick(){
            $('body').addClass('loading');
        $('#menu li a').click(function(event) {
            event.preventDefault();
            var url = $(this).attr('href');
            exhibitload(url);
        });
        }

    ajaxclick();
//--------    
});

Aww thank you so much for your help ! I'm gonna try this right now !

Okay so I've tried to implement it... but it doesn't work. When I click on a link in the menu, nothing happens.
Maybe I made something wrong.. but I believe I have done what you told me :/

Anyone :/ ?
I'm trying to modify the code for some days but I don't get anything...

Hi, perhaps this code can be a solution for my problem: I can a subsetions (hide normals sections) but the collapsable menu closed when you enter.
http://carlosmoreno.com.es

Any solutions? This code to runnig for me...

Thanks