Power Keys - Activate Anchor via JavaScript?

[JAB Creations]

On my site's music player I have three anchors I wish to activate with the Keyboard Power Keys script...here is an earlier thread that we worked on the Power Keys script...
[webmasterworld.com...]

Anyway I'm interested in in assigning three keys to do two different things.

F9 - I want to have the Power Keys script activate the link with the associated ID. In English the music player on my site in a frame will have anchors with an ID unique to the music player and those anchors with the ID link to the previous track. So for example just like I have XP and the F9 key associated to previous track (which I use in conjunction with Winamp) I want to be able to ultimately press F9 to have the browser activate the link and go to the previous track.
Previous Anchor ID: mpprevious

F12 - Same thing as F9 though navigating to the next track with of course an ID unique to each page in an anchor linked to the next track page.
Next Anchor ID: mpnext

F10 - Play/Pause.
Pause Anchor ID: mppause
Play Anchor ID: mpplay

Here is the most current version of Power Keys in full. Keep in mind that I load the function for window.onload in a separate file on my website.

- John

//
// Power Keys
// Version 1.0.2

// JAB Creations
// (with a little help! ;))

var showmeallcodes = false; // Debugging
var powerKeysEnabled = true;// Default state
var ids = new Array();

// Assign IDs to keycodes
ids[ 49] = "#ha"; // 1
ids[ 50] = "#hb"; // 2
ids[ 51] = "#hc"; // 3
ids[ 52] = "#hd"; // 4
ids[ 53] = "#he"; // 5
ids[ 54] = "#hf"; // 6
ids[ 55] = "#hg"; // 7
ids[ 56] = "#hh"; // 8
ids[ 57] = "#hi"; // 9
ids[ 58] = "#hj"; // :
ids[ 99] = "#content"; // c

function menuhide() {
change('menub1', 'hidden');
change('menub2', 'hidden');
change('menub3', 'hidden');
change('menub4', 'hidden');
change('menub5', 'hidden');
change('menub6', 'hidden');
change('menub7', 'hidden');
change('menub8', 'hidden');
change('menub9', 'hidden');
}

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

function keyPressed( evt) {
var e = evt ¦¦ event;
var key = e.which ¦¦ e.keyCode;

if(!powerKeysEnabled) return;

if( showmeallcodes) {
alert( key);
return;
}

if (ids[ key]) {
menuhide();
window.hash = ids[ key];

} else switch( key) {
// M = #location1
case 77: // lower m
document.getElementById("menua1k").focus();
break;

// L = #location1
case 76: // lower L
menuhide();
document.getElementById("location1").focus();
break;

// S = #search
case 83: // lower s
menuhide();

document.getElementById("searchquery").focus();
break;

// Esc = Close all prompts 23
case 27:
setstylebyid('body', 'opacity', '1.0');
setstylebyid('head', 'opacity', '1.0');
setstylebyid('prompts', 'display', 'none');
//
// If using page specific prompts, detect ID first, put id in page div.
//
// Hide Browser Gallery Prompts!
//
if (document.getElementById("browsers")) {
change('nixkonqueror355', 'hidden');
change('osxcamino15', 'hidden');
change('osxicab303', 'hidden');
change('osxmsie523', 'hidden');
change('osxfirefox2', 'hidden');
change('osxomniweb553', 'hidden');
change('osxopera921', 'hidden');
change('osxsafari3', 'hidden');
change('osxshiira21', 'hidden');
change('xpmsie70', 'hidden');
change('xpmsie60', 'hidden');
change('xpmsie55', 'hidden');
change('xpmsie50', 'hidden');
change('xpfirefox2', 'hidden');
change('xpopera921', 'hidden');
change('xpopera854', 'hidden');
change('xpopera802', 'hidden');
change('xpopera754', 'hidden');
change('xpopera723', 'hidden');
change('xpopera512', 'hidden');
change('xpopera402', 'hidden');
change('xpsafari3', 'hidden');
}
break;
}
}

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( texts[ 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);
}

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);
else
elm['on' + evType] = fn;

return ret;
}

// addEvent( window, "load", powerKeysInit);

[Dabrowski]

ok, I'm not sure you can activate an anchor on it's own, you can manually fire an onclick event, but I've looked around and apparently that won't activate the link:

Note that manually firing an event does not generate the default action associated with that event. For example, manually firing a focus event does not cause the element to receive focus (you must use its focus method for that), manually firing a submit event does not submit a form (use the submit method), manually firing a key event does not cause that letter to appear in a focused text input, and manually firing a click event on a link does not cause the link to be activated, etc. In the case of UI events, this is important for security reasons, as it prevents scripts from simulating user actions that interact with the browser itself

But please post your link code, your <a> tags here, there may be a way to generically 'emulate' them, which we can tie a key to.

[JAB Creations]

I remember how you mentioned triggering functions determined by the class value on an element; why not just detect the href value of an anchor and have the script change the location based on that? In that instance I'm not sure how to get the value (url) inside of an anchor's href attribute?

As far as the play / pause function, Flash doesn't use a single function to play or pause. I'm not even sure how to approach that one off hand at the moment.

- John

// Music Player
function getFlashMovieObject()
{
if (navigator.appName.indexOf("Microsoft Internet")!=-1)
{
return window.mplayer;
}
else
{
return document.getElementById("mplayer");
}
}

function PauseFlashMovie()
{
var flashMovie=getFlashMovieObject();
flashMovie.StopPlay();

mplayer_play();

}
function PlayFlashMovie()
{
var flashMovie=getFlashMovieObject();
flashMovie.Play();

mplayer_pause();
}

[Dabrowski]

John, please post the code you're talking about!

I need to see the HTML for your links, and the intended function of any keypress.

As for mapping keys for your media player, can't you just map the keys to those functions?

[JAB Creations]

I'm not sure how to toggle between calling a play and a pause function. Perhaps we could try calling the pause function first and then have the script toggle between calling the two functions? The flash object starts playing automatically when it loads, that makes sense...not sure how to make it toggle however?

GUI controls for my music player...

<div><a accesskey="1" class="mpprevious" href="mplayer/jab-creations-2.0-06.php" id="mpprevious" tabindex="2" title="Go to previous chronological track."><img alt="Previous Track" src="images/interface-transparency.gif" /></a></div>

<div><a accesskey="2" class="mpplaylist" href="music/music-playlist-2.8.php#track01" id="mpplaylist" rel="content" tabindex="3" title="View detailed information about this track."><img alt="Music Playlist" src="images/interface-transparency.gif" /></a></div>

<div><a accesskey="3" class="mpplay" href="javascript:PlayFlashMovie();" id="mpplay" tabindex="4" title="Play this track if it's paused."><img alt="Play" src="images/interface-transparency.gif" /></a></div>

<div><a accesskey="4" class="mppause" href="javascript:PauseFlashMovie();" id="mppause" tabindex="5" title="Pause this track if it's playing."><img alt="Pause" src="images/interface-transparency.gif" /></a></div>

<div><a accesskey="5" class="mpstop" href="mplayer/jab-creations-00.php" id="mpstop" tabindex="6" title="Click to stop the music player."><img alt="Stop" src="images/interface-transparency.gif" /></a></div>

<div><a accesskey="6" class="mpnext" href="mplayer/jab-creations-2.7-04.php" id="mpnext" tabindex="7" title="Go to the next chronological track."><img alt="Next Track" src="images/interface-transparency.gif" /></a></div>

[Dabrowski]

I'm confused as to why some of the links are JavaScript, and some are PHP pages?

[JAB Creations]

The JavaScript links simply trigger functions, it's what I've been referring to as modular JavaScript. No I won't be upgrading to unobtrusive JavaScript, this method supports more browsers. I'm willing to sacrifice an absolute minimal amount of perfection right now for adding further backwards compatibility...I do eventually plan on working on another version of my site any way, have to have something to work on then! ;) Besides, I want to get to serverside coding, I don't want my site to become the Duke Nukem Forever of the internet.

The Music Player has a Flash object on each page, so previous and next anchors will load those pages and the flash object will just start playing.

- John

[Dabrowski]

it's what I've been referring to as modular JavaScript

Others would simply just call it JavaScript.

No I won't be upgrading to unobtrusive JavaScript, this method supports more browsers

As long as the JavaScript you are running is supported by all browsers. If not, then you are clearly wrong.

I'm willing to sacrifice an absolute minimal amount of perfection right now for adding further backwards compatibility

That depends on your idea of 'perfection'. You shouldn't need backwards compatibility, if you have written the site correctly with unobtrusive script. I will code up an example for you to look at.

The Music Player has a Flash object on each page, so previous and next anchors will load those pages and the flash object will just start playing.

ok, that makes sense. Well I'll tell you now how to trigger the functions, if you can't work out the code then I'll be happy to help.

First, you need to get the text in the 'href' property of the link.

If it begins with 'javascript:' then capture the rest of it into a variable. Think RegExp for that part. Then use 'setTimeout( varible, 0);', that should kick off the function.

If it's not, then simply direct the frame? I assume it's a frame from the way it works.

Have a go with that and let me know how you get on.

[JAB Creations]

Quick and dirty, but it works...

any_file_name.html

<script>
function gethref() {
var div1 = document.getElementById("div1");
var align = div1.getAttribute("align");
alert(align); // shows the value of align for the element with id="div1"
}
</script>

<div id="div1" align="left12"><a href="javascript:gethref();">get href</a></div>

So I now have the confidence to approach that (and yes I know the value and attribute are invalid though it doesn't matter so long as the script itself works).

My remaining goal is to initially call a function, then "toggle" to another function...and infintely toggle between calling those functions.

The first function should be PauseFlashMovie() and then the toggle should call PlayFlashMovie(), and just endlessly toggle between them. I'm not sure how to setup the toggle part though I know how to trigger a function. So all I need to know is how to toggle.

Also my term for my existing implementation of JavaScript is valid because it extends backwards compatibility. Yes, those pages are already correctly written (and I'll take any challenge). Maybe I'll work towards completely unobtrusive JavaScript in Version 2.9 but I have to be more economical right now and Modular isn't a BS term, you've read how I can simply swap out DHTML libraries and such and have everything still work while the functions are still called within the XHTML. I'll be concentrating on serverside soon for the most part and it makes the most sense to approach it as I have.

- John

[JAB Creations]

I'm having difficulty capturing the function keys (F9, F10, and F12). I have a reference I'm using though waiting to see if the link is ok to post. Capturing the key events of those keys is the only thing I don't have working (will work on the play/pause toggle function after this).

- John