jQuery - hide(); issue

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Vael Victus
Forum Newbie
Posts: 24
Joined: Wed Jun 03, 2009 9:29 am

jQuery - hide(); issue

Post 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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: jQuery - hide(); issue

Post 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).
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Vael Victus
Forum Newbie
Posts: 24
Joined: Wed Jun 03, 2009 9:29 am

Re: jQuery - hide(); issue

Post 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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: jQuery - hide(); issue

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
anjanesh
DevNet Resident
Posts: 1679
Joined: Sat Dec 06, 2003 9:52 pm
Location: Mumbai, India

Re: jQuery - hide(); issue

Post by anjanesh »

This works properly when FireBug is enabled !
Vael Victus
Forum Newbie
Posts: 24
Joined: Wed Jun 03, 2009 9:29 am

Re: jQuery - hide(); issue

Post 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. :(
User avatar
anjanesh
DevNet Resident
Posts: 1679
Joined: Sat Dec 06, 2003 9:52 pm
Location: Mumbai, India

Re: jQuery - hide(); issue

Post 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.
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: jQuery - hide(); issue

Post 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
Vael Victus
Forum Newbie
Posts: 24
Joined: Wed Jun 03, 2009 9:29 am

Re: jQuery - hide(); issue

Post 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.
Post Reply