By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,474 Members | 3,141 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,474 IT Pros & Developers. It's quick & easy.

jump to anchor w/o breaking history

P: n/a
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!

--
Bjørn
Jan 11 '07 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Bjorn Nordbo <bn@strangedays.nowrites:
>
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).

--
Bjørn
Jan 11 '07 #2

P: n/a
Bjorn Nordbo said the following on 1/11/2007 5:17 PM:
Bjorn Nordbo <bn@strangedays.nowrites:
>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).
Instead of an anchor use history.replace(anchor) via the onclick of the
anchor and you don't clutter up the history trail.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jan 11 '07 #3

P: n/a
Randy Webb <Hi************@aol.comwrites:
Bjorn Nordbo said the following on 1/11/2007 5:17 PM:
>>
And this was of course the really easy one: history.go(n).

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")
}
}
}

--
Bjørn
Jan 12 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.