0

In the past, I used to rely on hash for inline navigation, for example:

http://url?Category=a&item=3#Paragrah1

(Pointing to Paragraph1 within the http://url?Category=a&item=3 page)

With the widespread use of ajax, the hash tag has switched to a different purpose, allowing page refresh without full page reload. For example:

http://url#!Category=a&item=3
http://url#!Category=a&item=4 (the page switches to item 4, no full page reload)

My question: how can I make inline navigation work in such pages? To take the above example, how can I point to Paragraph1 in the http://url#!Category=a&item=4 page?

Christophe
  • 27,383
  • 28
  • 97
  • 140

2 Answers2

0

If you need to use the hash # for both webapp page navigation and also for moving to a specific element on a specific page, then you'll need to handle the scrolling yourself.

javascript provides: window.scroll(x, y).

In your example, when you handle the URL http://url#!Category=a&item=4, you'll need to do a window.scroll using coordinates that cause Paragraph1 to move to the right place on the page, i.e. the top. You'll need to adjust these coordinates anytime the page layout changes.

pb2q
  • 58,613
  • 19
  • 146
  • 147
  • Well, Paragraph1 is just one instance. I would expect my inline navigation to allow navigation within the page. There's also a Paragraph2, Paragraph3, etc. – Christophe Jul 29 '12 at 23:04
0

Use the HTML5 history API instead. Then you can use the hash for scrolling again.

Neil
  • 54,642
  • 8
  • 60
  • 72
  • Unfortunately the application is already built around #!, I have to live with it and add inline navigation. Also, would the HTML5 history API without #! avoid a full page reload when switching from item 3 to item 4? – Christophe Jul 29 '12 at 23:43
  • Yes, you would get a [popstate](https://developer.mozilla.org/en/DOM/window.onpopstate) event. – Neil Jul 30 '12 at 23:45
  • I am marking this as answer, as it seems like the go forward choice. Unfortunately it is not an option in my specific case. – Christophe Jul 31 '12 at 17:00