Jump to content

Recommended Posts

okay, I ditched that idea. After some planning I've found that using pushState would be better. Things have become a little complicated as I have an overlay (issues explained here http://www.sitepoint.com/forums/showthread.php?868023-Some-complex-jquery!&p=5154252#post5154252)

 

I have it kind of working and going forward and back, but sometimes when I press back, it just refreshes the same page. I'm getting there! Trial and error!

I've more often heard # as pound sign, but sometimes a hash MARK. I've never heard someone call that symbol a hash, only a hash sign or hash mark.

I personally call it an octothorpe because I'm obstinate that way.

 

The point remains that what he's talking about is the anchor, not the # symbol, he's talking about what comes after it. And it doesn't explain why he's trying to do what he's trying to do.

i guess it must have been invalid as i've abandoned it and instead am using pushState() as I stated. Much easier that way however:

 

 

just a bit of confusion I have run in to. I'm using the history.js script and that is really helping with the forward and back movements etc. HOWEVER it doesn't seem to work in Firefox. Both Chrome and Safari have been tested and work. Any ideas why Firefox won't work? If you have experience with the plugin that is.

That's not a hash in programming terms, that's an anchor on a URL.

Why don't you just remove it from the URL?

Do you understand what the point is of the anchor?

 

In real English # = "hash" ;)

 

Understood, but we're not in the context of real English here. It's not an anchor either, it's called a 'fragment identifier'

 

Semantics aside, the example made it pretty clear what the OP wants.

 

Your best bet is to use the fragment identifier. Changing this shouldn't cause a page refresh, unless you change the document in the URI. Using the fragment identifier also allows usage of the back/forward buttons without reloading the entire page (assuming they don't go forward/back to a different page). It also allows people to link directly or bookmark a certain state, assuming you recreate the state from scratch when a 'fragid' is changed. You can use the following library to trigger an event when the 'fragid' changes. I've used this one with much success

http://benalman.com/projects/jquery-hashchange-plugin/

 

You need to check when this changes, parse the data you've stored in this hash, and use JS/AJAX to update the content on your webpage - this includes closing any possibly open lightboxes/overlays ;)

Thanks that's really helpful.

 

Would you recommend using this method or using pushState() etc to add new GET parameters to the URL?

 

Also, with this method, is it wrong to have multiple parts after the #? e.g. '#u=asd&i=asd'

 

Could you possibly give a short example of how you would do it? Would this work on all browsers too?

 

Thanks a lot

You can do it any way you want, you just need to parse the result in JS to get each component.

 

I'd suggest using this over pushState myself, because using the fragid is the 'correct' way to navigate to different content on the same page. It's also bookmarkable, and should be logged in the browser's history.

 

As far as browser compatibility goes, check out the hashchange page I showed you. I don't think it works with IE6/7=, but can't remember offhand. Personally, I refuse to support those browsers when dealing with client-side scripting.

 

As far as example, I'd set the following event to go off when the fragid changes:

 

explode the fragid string by '&'

loop through the exploded results, building an object by exploding the pieces by '='

check the application's current state, and compare it to the state the created object above needs

if there are dramatic changes, reset the application to it's default state, and rebuild it based on the requested one

if there are minor changes, modify the applications state to show the requested changes

 

it's quite complex, and I'm being very vague, but I'm trying to be more conceptual here than provide a concrete solution. That part is up to you :D

Okay, well to be honest I was using the hashchange thing initially but it kept reloading when I was changing it which became a little annoying.

 

What I was doing was checking if the hash has changed then seeing whether certain parameters had been set in the hash (using another of Ben's plugins) and then if certain parameters had been set then execute something. Not very well explained but I'll show you what happened through the process I was doing.

 

Initially url ends with '#u=2'

Then user clicks and it changes to '#u=2&p=4'

When user clicks away, my code was quickly changing it to just '#' and then doing a comparison to land it back on to the initial page '#u=2' and this was causing reloading.

 

However I was getting two issues with that. There was constant reloading which was annoying and also, say a user scrolled miles down a page, then they would be shot back to the top again. So far with pushState(), I have got past both these issues but it won't work in Firefox as of yet. If the same can be achieved with hashchange then I'm all for trying it.

Well, if it doesn't work, it doesn't work. It's hard to address your issues without intimate knowledge of your script, and gaining that knowledge can be a very time consuming process.

 

Depending on how you're 'changing' the fragid, the page should NOT reload. Generally, you shouldn't be directly changing the fragid, it should be changed when the user clicks an anchor. I don't see why you'd want to empty it, and then populate it immediately after. I'm not sure what you mean by 'clicks away'

I've more often heard # as pound sign, but sometimes a hash MARK. I've never heard someone call that symbol a hash, only a hash sign or hash mark.

I personally call it an octothorpe because I'm obstinate that way.

 

Why do you think you access it through location.hash, or "hash bangs" for the URLs with "#!" in them? I was only pulling your tail anyway, I'm not fussed. Call it an obtuse pencil sharpener if you want :)

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.