3

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.

Carl
  • 111
  • 1
  • 12
  • Post your code please.. Useful link about detecting back button clicks: http://stackoverflow.com/questions/10462511/is-there-a-way-using-jquery-to-detect-the-back-button-being-pressed-cross-browse – Pieter Jul 20 '13 at 21:46
  • 2
    You should take a look at [pjax](https://github.com/defunkt/jquery-pjax) or any other `pushState`/`hashchange` implementations. – gustavohenke Jul 20 '13 at 22:01

2 Answers2

1

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.

QuinDa
  • 918
  • 1
  • 12
  • 19
  • I was wondering if there was an easy way to do it my way but I think I'll have to use .load() anyway. Thanxs... – Carl Jul 20 '13 at 22:29
0

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'); };
Ozan Deniz
  • 1,087
  • 7
  • 22
  • I have 4 div's in the same html and I show or hide them depending on the button I press. I don't have different html, I have the same html file always. Sorry I've edited the post and explained this. – Carl Jul 20 '13 at 21:54
  • Yep your are right and in this case you can use hide and show jquery function in window.onbeforeunload event – Ozan Deniz Jul 20 '13 at 21:59