Change fragment identifier for single key site navigation?

This thread is related to but not the same as getting single key presses to load bookmarks at...
[webmasterworld.com...]

Initial Situation: Script initially allows pressing a single key to navigate the browser to a bookmark. For example I can assign the '1' key to to header 'ha', '2' to 'hb', '3' to 'hc' and so on essentially allow the user to skip portions of the page they may already be familiar with. Other keys I've included are 's' for search (but this gives focus to a search field) and 'c' for content (returns the user to the top of where the content begins). Upon investigation the script does not make a request to the server when a key is pressed.

The Problem: The fragment identifier (thank you Suzy) which is the # sign inside of the URL is not being dynamically updated. Pressing a series of keys thus results in the url string appearing as so...

test.html#hbcontenthahbhbhb

The Goal: I would like to dynamically have each key allow the user to navigate to various fragment identifier without making any further requests to the server if at all possible.

Ideas
First I tried removing the # directly inside the location command itself...

{location.href = location - '#' + idha;}

...but I received some sort of nan output (did not generate an error but was not the desired output).

I then removed the # from the variables but it still added the requested fragment identifier after the already existing fragment identifier in the URL.

Next I figured maybe I could get cheap and just navigate back using history.go(-1);. This does get around the problem but it's still cheap and has a drawback. After making the page it's own referer with #ha at the end of the URL I managed to make the computer laugh at me Nelson Muntz style. (#ha#ha) (DOH!)

I'm out of ideas at this point. I might figure out how to make it work the cheap way but I don't want to settle for just that!

Code
Here is where I'm at right now...

- John

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Power Keys</title>
<script type="text/javascript">
document.onkeypress = function(e) {
if (!e) { // for IE
e = event;
if (e.srcElement.id=="query_string") return;
e.which = e.keyCode;
} else { // for Fx
if (e.target.id=="query_string") return;
}
var id = "#"
var id1 = "content";
var idha = "ha"; // frag. id. is header ha
var idhb = "hb"; // frag. id. is header hb
// 1 = #ha
switch (e.which) {
case 49: // lower s
{history.go(-1); location.href = location + '#' + idha;}
}
// 2 = #hb
switch (e.which) {
case 50: // lower s
{history.go(-1); location.href = location + '#' + idhb;}
}
// C = #content
switch (e.which) {
case 99: // lower s
{history.go(-1); location.href = location + '#' + id1;}
}
// S = #search
switch (e.which) {
case 115: // lower s
document.getElementById("query_string").focus();
}
switch (e.which) {
case 83: // cap S
case 115: // lower s
document.getElementById("query_string").focus();
}
var id1 = "#content";
switch (e.which) {
case 99: // lower s
{location.href = location + id1;}
}
}
</script>
<style type="text/css">#query_string:focus {background: #abc;}
h1, h2 {margin-top: 600px;}</style>
</head>
<body>
<p>Press the keys 1, 2, and c to navigate however navigating back can create a problem.</p>
<form>
<fieldset>
<label for="query_string">Search Site</label><input id="query_string" type="text" value="Search this site..." /><input type="submit" value="Search" />
</fieldset>
</form>
<h1 id="ha">Header id is ha (key 1)</a>
<div id="content" style="margin-top: 600px;">Content (key c)</div>
<h1 id="hb">Header id is hb (key 2)</a>
</body>
</html>

Change fragment identifier for single key site navigation?

Works the first time, but fragment identifier gets "stuck".

JAB Creations

Fotiman

Dabrowski

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week