Using anchor jumps with 'instant' anchor based navigation

[Kez1304]

Hi guys,

Having a little bit of trouble with a site I'm currently working on...

I'm using some AJAX for the instant g-mail/facebook style navigation, you know the kind, with no refreshes, etc.

Problem is, to allow for back/forward and bookmarks, I currently use a URL that looks like:

http://www.mySiteOfFun.com/index.html#page=news.html;

This is fine, not a problem... The issue comes into play when I want to open up the news.html page, from my home.html page, and have it open to news item #6 (for example).

I can't add a #, because one is already being used to reference the anchor for the content div.


Has anyone run into a similar problem before? If so, how did you resolve it?

Can some jQuery be used to find the location of the news item div in question, on load, and scroll to it like that?

Just not sure how to progress really, and any help would be greatly appreciated!

[devnull69]

You could combine two hashes into one using either

1. fixed length for the first hash, something like #XXXXYYYYYY so you will know that the second one begins on position 4 (counting from 0) or
2. a separator that is not part of one of the hashes but is generally valid for hashes, e.g. #XXX_YYY and then split the hash at that specific character or
3. any other combination that might come into your mind :-)

[Arbitrator]

Problem is, to allow for back/forward and bookmarks, I currently use a URL that looks like:

http://www.mySiteOfFun.com/index.html#page=news.html;

Wouldn't it make more sense to use something like http://www.example.com/index.html?page=news.html? This would allow you to use a fragment identifier normally: http://www.example.com/index.html?page=news.html#item_6.

[Kez1304]

Thanks for both of your replies!

I'm using the # to tell which page to load at the moment because I'm using foreign code that I personally didn't write.

I'm a Java and VB developer by trade, so javascript and jquery are quite a bit different being non OO.

I was under the impression that the navigation I speak of requires the # to lookup the appropriate anchor. If this is not the case, I'll have to check out the code and see if I can modify it simply enough to use a '?' instead of a '#'. Luckily the code I'm using is quite well commented, so hopefully I should be able to make the necessary adjustments.

Failing that, I'll have a look into seperating the hashes with an identifier (probably '_' as suggested), and see if I can get it working that way.

Food for thought. Thanks a lot, I'll be sure to update this thread as I encounter more problems.

[Arbitrator]

I'm using the # to tell which page to load at the moment because I'm using foreign code that I personally didn't write.

Apparently, it's badly written code since it's not using the fragment identifier for its intended purpose.

I was under the impression that the navigation I speak of requires the # to lookup the appropriate anchor.

Yes, to reference a certain point in a document, you would use a hash mark followed by a fragment identifier. In this case, your fragment identifier is "page=news.html" which points to an element in the document with id="page=news.html" (which is not necessarily an anchor element).

I suppose you could prefix the current string to every ID in your document and use that as a fragment identifier: id="page=news.html;item_6". As far as I'm aware, all of those characters are legal in an ID.

[Kez1304]

I was using the examples given:

http://www.scibuff.com/2009/06/08/unobtrusive-ajax-navigation-version-2/

But am thinking I may have to change over... The way that code is structured, a link is made in html by using:

<a href="home.html" class="ajax-link">Home</a>

Which then creates the anchor URL as previously posted.


I'm thinking I'll have to try and find another way around this. I don't have a server side backend, so using a ?page=blah.html for page lookup is out of the question I think.

Bit of a bummer really. I'll have to try and look into splitting the url with a standard identifier I reckon.

[Arbitrator]

I'm thinking I'll have to try and find another way around this. I don't have a server side backend, so using a ?page=blah.html for page lookup is out of the question I think.

I wasn't suggesting that you implement that on the server-side. I was suggesting that you change your script so that it recognizes a query string instead of a fragment identifier.

I'm thinking that they might have used the fragment identifier because it doesn't trigger a page reload though... I'd guess that changing the query string will cause a reload, which sort of defeats the point of this script.

[Kez1304]

Yeah, that's the problem... Would devnull69's suggestion be possible with this kind of setup do you think?

[Arbitrator]

Yeah, that's the problem... Would devnull69's suggestion be possible with this kind of setup do you think?

devnull69's first and second suggestions are pretty much the same thing I suggested later in post #5.

Essentially, you would append information to the end of the current fragment identifier that could be used for linking to a point within the document. Then you would rework your script so that it ignores this new information while continuing to process the part of the fragment identifier that it needs.

devnull69's first and second suggestions are essentially the same,thing, but use different JavaScript methods. The first would use the substring method to get the part of the fragment identifier that you want by splitting the string at a certain number of characters. The second would involve using the split method to split the fragment identifier at a specific character and choosing the part that you need for your script (presumably the first part).

The only problem that I see here is that areas outside of the internal "page" areas can only be associated with one page unless you reconfigure your script to also update every ID in the document.

For example, if you have a footer with id="page=news.html;footer" and want to be able to link directly to the footer, you would need to dynamically update the attribute to, say, id="page=contact_us;footer" after an internal "page" change.

Unfortunately, that also might entail updating other scripts (that operate off of IDs) as well as dynamically updating style sheets. That's a lot of headache just to avoid a page reload.