CODEWITHSUNDEEP
javascriptjquery
Carl
Carl

Reputation: 111

Make browser's back button work when using hide and show (jquery)

I've seen the new website of megaupload (mega) and we've got this:

enter image description here
Ok, if I press on left-menu contacts, it only reloads the white part on the image, if I press messages, the same, it only reloads white part. But if I go from contacts to messages and I press browser's back button, it goes from messages to contact and only reloads white part as always.

In my website, I do the same using jquery hide and show, but obviously, if I press browser's back button it doesn't hide the div and shows the other one.

My web site is only one html file and there are 4 div that get shown or hidden depending on the button you press, this is an example:

$("#btn_contact").click(function () {
    $("#content_contact").show();
    $("#content_home").hide();
    $("#content_products").hide();
    $("#body_aux").hide() ;  
    $(this).addClass('visited');
    $('#btn_products').removeClass('visited');
    $('#btn_home').removeClass('visited');  
});


Can anybody tell me how to find this with jquery or whatever I have to use.
I don't know if I've explained myself well, if not, ask me to do it better.
I would appreciate any help. Thanxs a lot.

Upvotes: 3

Views: 1729

Answers (2)

QuinDa
QuinDa

Reputation: 928

Maybe it'd be easier for you and more appropiate to make "content_contact.html", "content_home.html", and so on and use .load() function as Ozan Deniz said. You wouldn't have to change margins, positions, etc. and back button would work withouth programming. I think is not appropiate to make the whole website using just one html file, showing and hiding div's, ofcourse you can do this but maybe is not the right way. I'm newbie at this, but that's what an expert told me beacuse I was doing something similar to that.
Hope to help you.

Upvotes: 1

Ozan Deniz
Ozan Deniz

Reputation: 1087

You can use jquery load function to load white part

For example;

$('#result').load('ajax/test.html');

And in back button event you can load the white part

jquery hide and show

window.onbeforeunload = function() { $('#result').hide(); }; or

window.onbeforeunload = function() { $('#result').show(); };

jquery load function

window.onbeforeunload = function() { $('#result').load('ajax/test.html'); };

Upvotes: 0

Related Questions