Page 1 of 1

jQuery - hide(); issue

Posted: Tue Jul 27, 2010 2:05 pm
by Vael Victus
I hate to use my main site as the example, but see here.

http://vaelvictus.com/

Just click any link, then hit the back button in your browser. The page has disappeared. The code behind it is,

Code: Select all

<script type="text/javascript">
$(document).ready(function(){

	$("div#content").hide();
	$("div#content").fadeIn('slow');

	$("map#Map").click(function(){
	$("div#content").fadeOut();
	$("div#content").show();
	});
	
});
</script>
I basically need some way for it to come back when people hit the back button. I hope one of you know a way to do this.

Re: jQuery - hide(); issue

Posted: Tue Jul 27, 2010 2:28 pm
by pickle
For some reason, it would appear your document.ready() isn't firing when you click back. Put an alert() in there just to verify.

Also, there's no need to put the element type in front of an ID (ex: "div#content"). In fact, that will slow down your selectors (as Sizzle can't just use getElementById() right away).

Re: jQuery - hide(); issue

Posted: Tue Jul 27, 2010 6:00 pm
by Vael Victus
Thanks for that tip!

And yes, that is what's happening. I just put an alert down and it worked as imagined. So is there a way to make the document.ready() "fire" on the back button? Keep in mind I mean the browser's, not my site's.

Re: jQuery - hide(); issue

Posted: Tue Jul 27, 2010 6:04 pm
by pickle
It should be - that's what's weird. Maybe the browser has something cached? However, I would think that would result in the browser executing the Javascript code from the cache rather than downloading it.

Not much help, but I'm not sure what the problem is.

Re: jQuery - hide(); issue

Posted: Tue Jul 27, 2010 7:28 pm
by anjanesh
This works properly when FireBug is enabled !

Re: jQuery - hide(); issue

Posted: Tue Jul 27, 2010 9:51 pm
by Vael Victus
I'm not sure what that means - I thought (and from what I can tell) Firebug is just used for debugging. I still wouldn't expect my users to have Firebug for every site I create. This has happened on each site. :(

Re: jQuery - hide(); issue

Posted: Wed Jul 28, 2010 4:28 am
by anjanesh
I was trying to figure out why your ready() wasnt firing on hitting the back button. I switched on FireBug for that reason , but after hitting the back button , ready() did execute fully.

Re: jQuery - hide(); issue

Posted: Wed Jul 28, 2010 8:04 am
by Eran
Your problem is the 'fadeOut' that is called when the links are clicked. somehow the browser 'remembers' that state since the page is completely cached and it doesn't re-run the javascript when you click back. By the way, image-maps are pretty much obsolete nowadays

Re: jQuery - hide(); issue

Posted: Fri Jul 30, 2010 3:54 pm
by Vael Victus
Pytrin - perfect! The cache idea worked. So, here's the PHP code. I'm guessing it's not the best idea to toss into your main site, like a header, but for this one situation where I have a hub of initial content to return to, it's perfect. Thanks. :}

Code: Select all

//Set no caching
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
And not sure by what you mean by "obsolete" - as far as I know, smartphones will render image maps perfectly as do all other browsers. If you mean to say they're just not that great of an idea to implement, that's definitely true - I have plans to put the links into nice little divs eventually, but that front page was made a while ago and I just wanted to get it done. I don't think it's particularly hideous, anyway. ;) But it's time to spruce the page up a bit.

Thanks for all your helps.