homepage Welcome to WebmasterWorld Guest from 50.17.86.12
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

This 49 message thread spans 2 pages: 49 ( [1] 2 > >     
JavaScript location = bookmark/id on same page?
Pressing c brings user to #content, m to #menu, etc...
JAB Creations

WebmasterWorld Senior Member jab_creations us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3320399 posted 6:56 pm on Apr 24, 2007 (gmt 0)

This script is in conjunction with another however with a different goal. That thread dealt with enabling letter keys to work due to a case issue.
[webmasterworld.com...]

My goal here is to have JavaScript go to the location of a bookmark/id (what is the proper terminology btw for it's usage? bookmark?) on the page without of course reloading the page when a key is pressed. So for example I want pressing the 'c' key to bring the user to the top of the page where the #content begins.

Here is one example (F2 key) that seems to work on it's own...
document.onkeypress = function(e) {
if (e.keyCode == 113) {location.href = "http://www.webmasterworld.com";}
}

I've also thought of somehow using the current page as the URL and then adding the bookmark at the end inside of a combined variable but I'm not sure if this will reload the page and then go to the bookmark? I'm having a little trouble figuring out how to join the self link with the bookmark in to a variable plus I'm not even sure it'd work. I'm open to any suggestions right now! :)

- John

 

Dabrowski

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3320399 posted 7:06 pm on Apr 24, 2007 (gmt 0)

Can you use the <a name='bookmark'> and then do location.href='#bookmark'?

JAB Creations

WebmasterWorld Senior Member jab_creations us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3320399 posted 7:14 pm on Apr 24, 2007 (gmt 0)

That was one of the very first things I tried.

- John

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3320399 posted 7:19 pm on Apr 24, 2007 (gmt 0)

what is the proper terminology btw for it's usage?

Fragment Identifier [w3.org]

JAB Creations

WebmasterWorld Senior Member jab_creations us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3320399 posted 7:38 pm on Apr 24, 2007 (gmt 0)

Well I know in PHP you can join two things with a dot. How do I join stuff in JavaScript?

- John

alert (location);
var url = location;
var fragmentid1 = "#ha";
var url1 = url.fragmentid1;
alert (fragmentid1);

JAB Creations

WebmasterWorld Senior Member jab_creations us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3320399 posted 7:48 pm on Apr 24, 2007 (gmt 0)

Did a Google search and found only one result for JavaScript+ "merge two variables" and go figure the people who replied to that person do anything but help!

JAB Creations

WebmasterWorld Senior Member jab_creations us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3320399 posted 8:42 pm on Apr 24, 2007 (gmt 0)

Nothing is more obnoxious then realizing that you've been using bad references!

This works, code might be a tad messy but it works! It gets a bit glitchy when there is already a fragment identifier in the URL so I've got to figure out how to avoid having my prompts add the pound to the URL when clicked, interesting challenges!

- 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;
}
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;}</style>
</head>

<body>

<p>Press F2 to give focus to search text field, use keycode 83 to assign to letter S though it will not work?</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>

<div id="content" style="margin-top: 600px;">Content</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</body>
</html>


Dabrowski

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3320399 posted 9:41 pm on Apr 24, 2007 (gmt 0)

Hmmm,

ok if that works, after you appended #content onto the location, it may not work a second time, it might append another bookmark, so location would be .....mypage.html#content#othercontent.

So try this:

// This should copy location.href AND remove any #something on the end
var myPage = location.href.replace( /(.*)#.*/, "$1");

location.href = myPage +thisID;

Yep, that works, just did a little test page for the regex. C&P test page code:

<html>

<head>
<title>Test Page</title>
</head>

<body>

<script>

document.writeln( "<p>Your page: "+ location.href +"</p>");
document.writeln( "<p>Without bookmark: "+ location.href.replace( /(.*)#.*/, "$1") +"</p>");

</script>

</body>

</html>

Just remember to put a #thing on the end of the filename!

JAB Creations

WebmasterWorld Senior Member jab_creations us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3320399 posted 1:10 am on Apr 25, 2007 (gmt 0)

Awesome bro! I just can't read those kind of filters. Here is the final working test case for anyone else who wants to play around with it. :)

- 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

var fixurl = location.href.replace( /(.*)#.*/, "$1");

// location.href = fixurl + thisID;

// 1 = #ha
switch (e.which) {
case 49: // lower s
{location.href = fixurl + idha;}
}

// 2 = #hb
switch (e.which) {
case 50: // lower s
{location.href = fixurl + idhb;}
}

// C = #content
switch (e.which) {
case 99: // lower c
{location.href = fixurl + 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();
}

}
</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>


Dabrowski

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3320399 posted 1:24 am on Apr 25, 2007 (gmt 0)

Awesome bro! I just can't read those kind of filters. Here

np. I like the easy ones! ;)

You seem fairly new to JS, so getting into Regular Expressions, that's what /(.*)#.*/ is, is a *huge* step. Google will give you hundreds of reference pages, but you'll need some good tutorials to follow, and at least 12 months experience to make good ones.

They are very powerful but very difficult.

Dabrowski

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3320399 posted 3:02 am on Apr 25, 2007 (gmt 0)

Actually that Regex won't work.

You need to use /(.*?)(#$)/ instead. The one you've got will return null if there is no #thing on the end. That one will do either.

Note improper representation of symbol! It should be a logical OR, SHIFT +BACKSLASH on UK keyboard. No idea on US.

Drag_Racer

5+ Year Member



 
Msg#: 3320399 posted 8:47 am on Apr 27, 2007 (gmt 0)

instead of worrying about the hash, you could use it instead of a search param (query string)

var myID = false;
if(window.location.hash && window.location.hash!= "#"){
myID = window.loacation.hash.substring(1,window.location.hash.length);
}

now 'myID' contains everything after the '#' in your url if you need it

... or just rewrite your window.location with a new hash upon keystroke as below

<script type="text/javascript">
function goTO(){
var myID = document.getElementById('myInput').value;
document.getElementById('myInput').value = '';
var fixurl;
if(window.location.hash){
fixurl = window.location.href.replace( /.+#(.*)/, myID);
}
else {
fixurl = window.location + "#" + myID;
}
window.location = fixurl;
}
</script>

<form><input id="myInput" onChange="goTO()"></form>

maybe I'm just missing something your trying to do, but the above should navigate around a page. Even if the page does refresh, the hash will still make the uri good to your destination...

Drag_Racer

5+ Year Member



 
Msg#: 3320399 posted 8:54 am on Apr 27, 2007 (gmt 0)

I should add not to use numbers, only letters and then use anchors
(anchor names should not begin with numbers)

<a name="a"><!-- --></a><h1>header a</h1>

<a name="b"><!-- --></a><h1>header b</h1>

etc...

Dabrowski

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3320399 posted 10:05 am on Apr 27, 2007 (gmt 0)

ok, I got it down to 1 line:

location.href = location.href.replace( /(#\w*)?$/, newHashName);

No need for fixurl, no need for that long winded IF statement, what were you thinking Drag_Racer? ;)

Drag_Racer

5+ Year Member



 
Msg#: 3320399 posted 10:31 am on Apr 27, 2007 (gmt 0)

ok, I had errors...

I was half thinking a 'replace' on the regex... a little sleepy
and the onChange event won't fire until the input looses focus
you need to add the autocomplete=off to the form else you get an exception error for the autocomplete in FF.

I just tested this in IE5.5, OP6.06, FF1.5

now you can figure out how to grab the keystroke with out the input, cause you have to scroll back up the page to enter a new letter. adding focus back to the input kind of defeats the whole thing as the page scrolles back to it. you could have the input follow you around the page, maybe...

<script type="text/javascript">
function goTO(){
var myID = document.getElementById('myInput').value;
document.getElementById('myInput').value = '';
var fixurl;
if(window.location.hash){
fixurl = window.location.href.replace( /#.*$/,'')+'#'+myID;
}
else {
fixurl = window.location + "#" + myID;
}
window.location = fixurl;
}
</script>

<form autocomplete='off'><input id="myInput" onKeyUp="goTO()"></form>


<a name="a"><!-- --></a><h1>header a</h1>

<a name="b"><!-- --></a><h1>header b</h1>

<a name="c"><!-- --></a><h1>header a</h1>

<a name="d"><!-- --></a><h1>header b</h1>

<a name="e"><!-- --></a><h1>header a</h1>

<a name="f"><!-- --></a><h1>header b</h1>

Drag_Racer

5+ Year Member



 
Msg#: 3320399 posted 10:40 am on Apr 27, 2007 (gmt 0)

good one Dabrowski, I have a habit of the long way around then fix it later... ;)

so this maybe...

<script type="text/javascript">
function goTO(){
window.location=window.location.href.replace( /(#.*)?$/,'')+'#'+document.getElementById('myInput').value;
document.getElementById('myInput').value='';
}
</script>

<form autocomplete='off'><input id="myInput" onKeyUp="goTO()"></form>

Dabrowski

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3320399 posted 12:00 pm on Apr 27, 2007 (gmt 0)

It's still overkill:

window.location=window.location.href.replace( /(#.*)?$/,'')+'#'+document.getElementById('myInput').value;

Can be shortened to:
location.href = location.href.replace( /(#.*)?$/, "#"+ document.getElementById('myInput').value);

Hmmm, ok not that much shorter, but I prefer it that way anyways. Noticed you changed the regex from \w* to .*, probably wise just incase it contains numbers or underscores or something.

Drag_Racer

5+ Year Member



 
Msg#: 3320399 posted 1:11 pm on Apr 27, 2007 (gmt 0)

the reason I used window is in case of frames so not to confuse with document.URI

this is from Sun's documentation
In event handlers, you must specify window.location instead of simply using location. Due to the scoping of static objects in JavaScript, a call to location without specifying an object name is equivalent to document.location, which is a synonym for document.URL.

document.location is depresiated...

anyway, lets just shorten it all the way

window.location.hash=document.getElementById('myInput').value;

Drag_Racer

5+ Year Member



 
Msg#: 3320399 posted 1:20 pm on Apr 27, 2007 (gmt 0)

complete example....

<script type="text/javascript">
function goTO(x){
window.location.hash=x;
document.getElementById('myIn').value='';
}
</script>
<form autocomplete='off'><input id="myIn" onKeyUp="goTO(this.value)"></form>
<a name="a"><!-- --></a><h1>header a</h1>
<a name="b"><!-- --></a><h1>header b</h1>
<a name="c"><!-- --></a><h1>header a</h1>
<a name="d"><!-- --></a><h1>header b</h1>
<a name="e"><!-- --></a><h1>header a</h1>
<a name="f"><!-- --></a><h1>header b</h1>

Drag_Racer

5+ Year Member



 
Msg#: 3320399 posted 1:29 pm on Apr 27, 2007 (gmt 0)

another quote from Sun...

Setting the hash property navigates to the named anchor without reloading the document. This differs from the way a document is loaded when other location properties are set

just in case anyone wanted to know...

Dabrowski

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3320399 posted 1:34 pm on Apr 27, 2007 (gmt 0)

LOL! We were waaaaaaay off! :D

Drag_Racer

5+ Year Member



 
Msg#: 3320399 posted 2:05 pm on Apr 27, 2007 (gmt 0)

I think this is funny, and I don't know why, but this was fun... :)

here is what your looking for JAB, no form needed and jumps to anchors by keystrokes.

just change the letters in p=/abcd/ to what ever you use in your anchor names

<script type="text/javascript">
function goTO(e){
var x=String.fromCharCode(e.which).toLowerCase();
var p=/[abcd]/gi;
if(p.test(x)){
window.location.hash=x;
}
}
document.onkeyup=goTO;
document.captureEvents(Event.KEYUP);
</script>

<a name="a"><!-- --></a><h1>header a</h1>
<a name="b"><!-- --></a><h1>header b</h1>
<a name="c"><!-- --></a><h1>header c</h1>
<a name="d"><!-- --></a><h1>header d</h1>

Dabrowski

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3320399 posted 2:07 pm on Apr 27, 2007 (gmt 0)

And that could be shortened a little:

if( p.test( x)) window.location.hash=x;

Don't need the {} as it's a one liner.

Drag_Racer

5+ Year Member



 
Msg#: 3320399 posted 2:29 pm on Apr 27, 2007 (gmt 0)

I know, but I wanted to let you have the last word...

;)

doesn't JS1.0 require it? I forgot. or was that semicolons?

Dabrowski

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3320399 posted 2:36 pm on Apr 27, 2007 (gmt 0)

No idea. I always use semicolons anyway, I started programming with C++, now use Perl, so semicolons are habit.

JAB Creations

WebmasterWorld Senior Member jab_creations us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3320399 posted 7:00 pm on Apr 27, 2007 (gmt 0)

Whoa, my focus() (;)) has been elsewhere, so I see you two have been having fun with this! :D

Actually I intentionally want to use the number keys (headers) and even the numeric keys (individual menus) as it makes more of a logical choice. (if you're at one you move your finger a center-meter to go to the next header though using letters would be the next logical choice, at least in my head)

Ok the real issue (that I'm aware of) is that once implemented this script becomes really nasty when the user starts trying to type in input (text) and textarea elements. One user on my local/private test page was complaining that, "the page is jumping around!" So the next step in my head would be the disable the script (return false?) if any input (text) or textarea have focus (but hover does not count).

The textarea element is simple enough but I can foresee complications with the input element. First there are several types so I'm not sure how or if you can detect the type of input (though I would assume one can). Also all my text fields have a class of text if that makes it any easier (form styling is such a pain!)

Anyway as far as making the script more dynamic I will share what I have created for user events thus far so you guys can understand what I'm doing with it.

Thanks for your continued enthusiasm!

- John

scripts-2.8_functions-power-keys.js]
//
// Power Keys
//

// Menu Fix
//
function menuhide() {
change('menub1', 'prompt'); change('menub2', 'prompt'); change('menub3', 'prompt'); change('menub4', 'prompt'); change('menub5', 'prompt'); change('menub6', 'prompt'); change('menub7', 'prompt'); change('menub8', 'prompt'); change('menub9', 'prompt');
}

// ESC - Close all Prompts
//
document.onkeypress = function(e) {

// make IE more like Fx
if (!e) {e = event; e.which = e.keyCode;}

var id = "#"
var id1 = "#content";
var idha = "#ha";
var idhb = "#hb";
var idhc = "#hc";
var idhd = "#hd";
var idhe = "#he";
var idhf = "#hf";
var idhg = "#hg";
var idhh = "#hh";
var idhi = "#hi";
var idhj = "#hj";
var fixurl = location.href.replace( /(.*)#.*/, "$1");

// /(.*)#.*/ OLD
// /(.*?)(#$)/ NEW

// 1 = #ha
switch (e.which) {
case 49: // lower s
{menuhide(); location.href = fixurl + idha;}
}

// 2 = #hb
switch (e.which) {
case 50: // lower s
{menuhide(); location.href = fixurl + idhb;}
}

// 3 = #hc
switch (e.which) {
case 51: // lower s
{menuhide(); location.href = fixurl + idhc;}
}

// 4 = #hd
switch (e.which) {
case 52: // lower s
{menuhide(); location.href = fixurl + idhd;}
}

// 5 = #he
switch (e.which) {
case 53: // lower s
{menuhide(); location.href = fixurl + idhe;}
}

// 6 = #hf
switch (e.which) {
case 54: // lower s
{menuhide(); location.href = fixurl + idhf;}
}

// 7 = #hg
switch (e.which) {
case 55: // lower s
{menuhide(); location.href = fixurl + idhg;}
}

// 8 = #hh
switch (e.which) {
case 56: // lower s
{menuhide(); location.href = fixurl + idhh;}
}

// 9 = #hi
switch (e.which) {
case 57: // lower s
{menuhide(); location.href = fixurl + idhi;}
}

// 10 = #hj
switch (e.which) {
case 58: // lower s
{menuhide(); location.href = fixurl + idhj;}
}

// C = #content
switch (e.which) {
case 99: // lower s
{menuhide(); location.href = fixurl + id1;}
}

// M = #location1
switch (e.which) {
case 109: // lower m
document.getElementById("menua1k").focus();
}

// L = #location1
switch (e.which) {
case 108: // lower L
menuhide(); document.getElementById("location1").focus();
}

// S = #search
switch (e.which) {
case 115: // lower s
menuhide(); document.getElementById("query_string").focus();
}

// Esc = Close all prompts
if (e.keyCode == 27) {
function prompt() {change('body', 'body'); change('head', 'head');}
change('chatroom', 'prompt'); change('audio', 'prompt'); change('browser', 'prompt'); change('browserpatch', 'prompt');
change('connection', 'prompt'); change('dhtml', 'prompt'); change('dhtmlengine', 'prompt'); change('dtd', 'prompt');
change('extendedcss', 'prompt'); change('extendedjs', 'prompt'); change('ieccss', 'prompt');
change('keyboardlayout', 'prompt'); change('keyboardpowerkeys', 'prompt'); change('mediatype', 'prompt');
change('themes', 'prompt'); prompt();
}

}//end power keys!


Dabrowski

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3320399 posted 9:27 pm on Apr 27, 2007 (gmt 0)

ok, this is an easy one. And also your code is getting long and repetitive.

When code is long and repetitive, there's normally an easy way to shrink it, and in this case this is also true.

Firstly, you need a function called addEvent for this bit, I can't take credit for this one:

function addEvent(elm, evType, fn, useCapture)
{
//Credit: Function written by Scott Andrews
//(slightly modified)

var ret = 0;

if (elm.addEventListener)
ret = elm.addEventListener(evType, fn, useCapture);
else if (elm.attachEvent)
ret = elm.attachEvent('on' + evType, fn);
elseelm['on' + evType] = fn;

return ret;
}

Now this function is additive, in that you can assign as many onload (for example) events to <body> as you like, all in separate scripts, and they will all run. If you use onLoad='' you can only do a couple, and it looks untidy. Also addEvent allows you to keep your JS completely separate from your markup, which in this case is going to mean a considerably difference.

Lecture over, here we go....

We'll start with your textarea and input boxes. As these are the only boxes that require keypresses, we'll only need to use these. But the the keyboard-aware, we'll also do select boxes. All these elements support the necessary events which makes things easier.

Make 2 (particularly short) functions, and a global variable, and tweak your function a bit.

var powerKeysEnabled = true;

function powerKeysEnable { powerKeysEnabled = true; }
function powerKeysDisable { powerKeysEnabled = false; }

function keyPressed( evt) {

if(!powerKeysEnabled) return;

var e = evt event;
var key = e.which e.keyCode;

switch( key) {
.....
.....
}

ok, now we have a method to enable, and disable the keypress. And the keyPressed bit being a function makes it a little easier to work with in my oppinion.

Now we need to add event handlers............


function powerKeysInit() {
// Find all input fields we're interested in
var inputs = document.getElementsByTagName( "INPUT");
var selects = document.getElementsByTagName( "SELECT");
var texts = document.getElementsByTagName( "TEXTAREA");
var tags = new Array();

// Push every element into tags
for( var i =0 ; inputs[ i]; i++) tags.push( inputs[ i]);
for( var s =0 ; selects[ s]; s++) tags.push( selects[ s]);
for( var t =0 ; texts[ t]; t++) tags.push( text[ t]);

// Search all our input fields....
for( var t = 0; t < tags.length; t++) {
var tag = tags[ t]; // Make code a little more legible

// Check it's INPUT text, or SELECT, or TEXTAREA
if( (tag.tagName == "INPUT" && tag.type == "text")
(tag.tagName == "SELECT") ( tag.tagName == "TEXTAREA")) {

addEvent( tag, "focus", powerKeysDisable); // Disable when active
addEvent( tag, "blur", powerKeysEnable); // Enable when not active
}
}

addEvent( document, "keydown", keyPressed);
}

addEvent( window, "load", powerKeysInit);

ok, notice copious amounts of addEvent? Saves a lot of markup. Also we've added the document keypress event in the init function, and now that function kicks everything off, without the need for anything in the HTML.

Dabrowski

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3320399 posted 9:37 pm on Apr 27, 2007 (gmt 0)

It's worth noting that for that one, I assigned onkeydown to document, instead of keypress. That will work better, as you just want a single key press it will act when the key is pressed, rather than when it's released. Won't work for shifted or ctrl, etc..... have to change it back to keypress if you want those.

ok, got your head around that one? Now lets chop that code down to size..........

First we're going to stick that growing number of IDs in an array, which corresponds to their keycode:

var ids = new Array();

ids[ 49] = "#ha";
ids[ 50] = "#hb";
ids[ 51] = "#hc";
ids[ 52] = "#hd";
ids[ 53] = "#he";
ids[ 54] = "#hf";
ids[ 55] = "#hg";
ids[ 56] = "#hh";
ids[ 57] = "#hi";
ids[ 58] = "#hj";
ids[ 99] = "#content";

Don't worry about the gaps in the numbers, they'll automatically get filled in with undefined's. Since not all these bits of code are the same, you still need a little switch, but the rest is identical.

Now, with Drag_Racer's location.hash method we can get rid of 2 pages of code by doing this:

if( ids[ key]) {
menuhide();
location.hash = ids[ key]; // I know he'll correct this to window....
}
else switch( key) {
......
your focus events and escape key code
......

Dabrowski

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3320399 posted 12:25 pm on Apr 28, 2007 (gmt 0)

ok, I've put all that together, and tested it. No problems, IE6+, FF1.5+.

A couple of errors in my post though, that's what you get for writing all that code untested!

The powerKeysEnable/Disable functions should have ()'s on them before the {. This line has a missing 's':
for( var t =0 ; texts[ t]; t++) tags.push( texts[ t]);

Looking at your other code, I would certainly make your change function, whatever that is as it's not here, work with a list, rather than just 2 parameters. That way you only need to call it once, not 15 times!

Sticky me your email and I'll send you the entire code over.

Dabrowski

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3320399 posted 12:26 pm on Apr 28, 2007 (gmt 0)

Incidentally, using keydown instead of keypress makes it immune to upper/lowercase keys.

You can also actually record things like shift, ctrl, caps lock etc. Maybe even extend the code to detect if they're holding a key down.

This 49 message thread spans 2 pages: 49 ( [1] 2 > >
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved