Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

checking keys while mouse over links II

Status
Not open for further replies.
lambi2001

lambi2001

Programmer
Feb 2, 2005
18
DE
I have a follow up question about the code that I am trying to produce.
So what I would like to do is:
Mouse goes over a link and then determines which key is pressed.
This seems to be ok with the following code:

function checkKeycode(e) {

document.onkeydown = checkKeycode

var keycode
if (window.event)
keycode = window.event.keyCode;
else if (e)
keycode = e.which;

switch (keycode) {
case 65:
alert("keycode: " + keycode);
break;
case 68:
alert("keycode: " + keycode);
break;
}
}

and this is one of the links:

<a href="link" onmouseout="document.onkeydown = null" onmouseover="checkKeycode()">text</a>

But now I want to be able to do some additional things according to which key is pressed.

For example somebody moves over the link and presses a and then an item is added to a shopping cart. Or he presses d and an itme is deleted.

I tried I to pass more variables in the checkKeycode function like checkKeycode(e, itemname, itemprice) for example, but its not working.

Thanks for help ...
 
Sort by date Sort by votes
lambi2001,

One way to do it is to store the necessary info in the hash. I put an id for the anchor as well in case you need to use getElementById() to get to it. In order to coordinate better, make a variable (sinfo say) to global scope. Putting together, something like this.
Code: 
<html>
<script language="javascript">
var sinfo="";
function checkKeycode(obj) {

    document.onkeydown = checkKeycode;
    if (obj) {
        sinfo=obj.href.substring(obj.href.indexOf("#")+1);
    }

    var keycode;
    if (window.event)
        keycode = window.event.keyCode;
    else if (obj)
        keycode = obj.which;

    switch (keycode) { 

        case 65:	//ascii a
            alert("keycode: " + keycode + "\n" + sinfo);
            break;
        case 68:	//ascii d
            alert("keycode: " + keycode + "\n" + sinfo);
            break;
    }
}
</script>
</head>
<body>
<a href="link#h1" id="h1" onmouseout="document.onkeydown = null" onmouseover="checkKeycode(this)">Mouseover detect to keyCode</a><br />
<a href="link#h2;ctmg93;2080" id="h2" onmouseout="document.onkeydown = null" onmouseover="checkKeycode(this)">Chateau Margaux 93 @2080</a><br />
<a href="link#h3;ctmg94;2500" id="h3" onmouseout="document.onkeydown = null" onmouseover="checkKeycode(this)">Chateau Margaux 94 @2500</a>
</body>
</html>
Of course, you have to implemented all the actions related to the keyCode interested using information so retrieved from the hash (sinfo). Just give necessary info to it one way or the other. Here, I just put info in a ";" delimited string as an illustration.

regards - tsuji
 
Upvote 0 Downvote
Thanks a lot, that brought me another step closer to what I would like to do.

It works fine in IE, but it does not work with Firefox.

When I press a key, Javascript console tells me that obj.href has no properties ...

Any ideas why?

Thanks
 
Upvote 0 Downvote
Change the script to this:
Code: 
var sinfo="";
function checkKeycode(obj) {

    document.onkeydown = checkKeycode;
    if (obj) {
        [COLOR=red]obj = new String(obj);[/color]
	sinfo=obj.substring(obj.indexOf("#")+1);
    }

    var keycode;
    if (window.event)
        keycode = window.event.keyCode;
    else if (obj)
        keycode = obj.which;

    switch (keycode) {

        case 65:    //ascii a
            alert("keycode: " + keycode + "\n" + sinfo);
            break;
        case 68:    //ascii d
            alert("keycode: " + keycode + "\n" + sinfo);
            break;
    }
}

hope that helps

"It is the mark of an educated mind to be able to entertain a thought without accepting it." - Aristotle
 
Upvote 0 Downvote
Thanks for your reply.

It gets a little bit better, no error messages, but in Firefox nothing happens now if I press a key.

Can it have something to do with different keycodes.
Alerting a little bit (see in code) shows that IE has a keycode of 0 if I just hover over a link, while in Firefox its undefined ???


<script language="javascript">
var sinfo="";

function checkKeycode(obj) {

document.onkeydown = checkKeycode;
if (obj) {

obj = new String(obj);
sinfo=obj.substring(obj.indexOf("#")+1);
//alert(sinfo)
}

var keycode;
if (window.event)
keycode = window.event.keyCode;
else if (obj)
keycode = obj.which;

alert(keycode)

switch (keycode) {

case 65: //ascii a
alert("keycode: " + keycode + "\n" + sinfo);
break;
case 68: //ascii d
alert("keycode: " + keycode + "\n" + sinfo);
break;
}
}
</script>
<body>
<br>
<a href="link#h1" id="h1" onmouseout="document.onkeydown = null" onmouseover="checkKeycode(this)">Mouseover detect to keyCode</a><br />
</body>
</html>
 
Upvote 0 Downvote
The event wasn't making its way through the function, this seems like it fixed it:
Code: 
<html>
<script language="javascript">
var sinfo="";
function checkKeycode(e,obj) {

    document.onkeydown = checkKeycode;
    if (obj) {
        obj = new String(obj);
	sinfo=obj.substring(obj.indexOf("#")+1);
    }

    var keycode;
    if (window.event){keycode = window.event.keyCode;}
    else if (e){keycode = e.which;}
    switch (keycode) {
        case 65:    //ascii a
            alert("keycode: " + keycode + "\n" + sinfo);
            break;
        case 68:    //ascii d
            alert("keycode: " + keycode + "\n" + sinfo);
            break;
    }
}
</script>
</head>
<body>
<a href="link#h1" id="h1" onmouseout="document.onkeydown = null" onmouseover="checkKeycode(event,this)">Mouseover detect to keyCode</a><br />
<a href="link#h2;ctmg93;2080" id="h2" onmouseout="document.onkeydown = null" onmouseover="checkKeycode(event,this)">Chateau Margaux 93 @2080</a><br />
<a href="link#h3;ctmg94;2500" id="h3" onmouseout="document.onkeydown = null" onmouseover="checkKeycode(event,this)">Chateau Margaux 94 @2500</a>
</body>
</html>

"It is the mark of an educated mind to be able to entertain a thought without accepting it." - Aristotle
 
Upvote 0 Downvote
Hello all,

The obj.href is already for firefox and netscape, only that "if (obj) {}" will be evaluated to true when keyboard is pressed as well. Hence, to get the script to work on ff & nn, it is sufficient to change it to this.
[tt]
if (obj.href) { //FF & NN, but no IE
sinfo=obj.href.substring(obj.href.indexOf("#")+1);
}
[/tt]
But then it won't work on IE. So to combine the effort, this will be working across browsers.
Code: 
    if (obj && obj.href) {    //works across browsers
        sinfo=obj.href.substring(obj.href.indexOf("#")+1);
    }
- tsuji
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

dannyo12
  • Locked
  • Question
Async library error in terminal while running Ethereum Smart Contracts test with mocha?
Replies
0
Views
87
dannyo12
dannyo12
c0deM0nK424
  • Locked
  • Question
drop-down menu links 'overlapping' main responsive menu links (in mobile mode) ? 1
Replies
5
Views
174
c0deM0nK424
c0deM0nK424
wbodger
  • Locked
  • Question
Regular expressions for data checking 1
Replies
5
Views
119
wbodger
wbodger
jeffwest21
  • Locked
  • Question
Checking dates is more than 14 before
Replies
2
Views
74
jeffwest21
jeffwest21
maharg
  • Locked
  • Question
Return beginning and ending coordinates of a mouse drag 1
Replies
5
Views
96
jpadie
jpadie

Part and Inventory Search

Sponsor

Back
Top