jump to anchor w/o breaking history

[Bjorn Nordbo]

Hello,

I have a page with a vertical list of photos separated with bits of text.
Using page down to view the photos is a bit annoying as it will typically
cut the photos as it only jumps a screenfull at a time.

To work around this I added an anchor just before every photo, so that
the page was organised as follows:

<a name="1" id="1"/>
<img src="foo.jpg"/>
<p>Some text..</p>
<a name="2" id="2"/>
<img src="bar.jpg"/>
<p>Etc..</p>

Then I capture a key, space for instance, and invoke the following
function:

function navigateNext() {
if (!window.location.hash) {
window.location.hash = "#2"
} else {
newItem = parseInt(window.location.hash.substring(1)) + 1
if (document.getElementById(newItem)) {
window.location.hash = "#" + newItem
} else {
window.location.hash = "#1"
}
}
}

This works as a charm, jumping to the next anchor until the end of the
page before starting again. There are two problems, however:

The first (and small one) is that if you have a big monitor you will
fit two pictures in a screenful so that when you hit the end of the
page you will have to press space twice to return to the top.

The second (and much bigger one) is that all this anchor jumping
clutters up the history so that when the user hits the back button
of his browser (and he usually will), he will just jump backwards
through the page. Doh! He would of course expect to get back to
the overview page to browse another series of pictures.

I can't seem to find any solution to these problems, though a back
link might help slightly. Another possibility would be to bounce
the user back to the previous page (the overview) instead of the
start of the page after the last picture.

Good ideas are greatly appreciated!

 

[Bjorn Nordbo]

The second (and much bigger one) is that all this anchor jumping
clutters up the history so that when the user hits the back button
of his browser (and he usually will), he will just jump backwards
through the page. Doh! He would of course expect to get back to
the overview page to browse another series of pictures.

And this was of course the really easy one: history.go(n).

 

[Bjorn Nordbo]

Bjorn Nordbo said the following on 1/11/2007 5:17 PM:

Instead of an anchor use history.replace(anchor) via the onclick of the
anchor and you don't clutter up the history trail.

Good idea, that works perfectly in Firefox and Safari, but Opera refuses
to replace the history. Also, the code looks nicer now.

function navigateNext() {
if (!window.location.hash) {
window.location.replace(window.location.href + unescape("#2"))
} else {
newItem = nextItem(window.location.hash)
if (document.getElementById(newItem)) {
window.location.replace(stripHash(window.location) + "#" + newItem)
} else {
window.location.replace(stripHash(window.location) + "#1")
}
}
}