Call onmouseover in a script

**augomat** · 07-08-2008, 04:11 PM

1) Script Title: Chrome CSS Drop Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...rome/index.htm

3) Describe problem:
I could find a solution to this in the forum, so sorry if the problem is already solved.

I need to implement a hotkey-feature. The structure is already there and workes (tested with JsDOMenuBar), the only thing i fail to achive is to call the apropriate function to let the drop-down box appear on a certain keystroke.

the important thing is, it has to work in both browsers (ff, ie).
(A solution for firefox is the following:
HTMLAnchorElement.prototype.doMouseOver = function() {
var evt = this.ownerDocument.createEvent('MouseEvents');
evt.initMouseEvent('mouseover', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
}

but this isn't supported by IE as far is i know)

i tried calling (route elements have an id)
document.getElementById('mm1').onmouseover();

but i couldn't figure out how to pass a valid parameter e to make it all work.
all other functions (e.g. dropit()) also requiere the parameter e.

hope somebody can help.

best regards,
georg

**Nile** · 07-09-2008, 12:40 AM

Ok, you lost me at the first character. It seems like you had a whole story before this and you cut off the first 5 paragraphs. Can you make this more comprehensible?

**jscheuer1** · 07-09-2008, 06:55 AM

None of the objects highlighted are supported by IE as far as I know, the red ones I am certain are not:

Code:

HTMLAnchorElement.prototype.doMouseOver = function() {
var evt = this.ownerDocument.createEvent('MouseEvents');
evt.initMouseEvent('mouseover', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
}

Neither by the way is the 'e' event model. In fact, other objects in the above may also be unsupported in IE.

However, under these specific (and similar event) circumstances, the following (and some variations) is/are possible cross browser:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function myfunc(e){
e = e? e : window.event;
var t = e.target? e.target : e.srcElement;
alert(t.innerHTML);
}

function spoofover(id){
var spoof = {target:document.getElementById(id)};
spoof.target.onmouseover(spoof);
}

window.onload = function(){
document.getElementById('test').onmouseover = myfunc;
}
</script>
</head>
<body>
<span id="test">Hi</span><br>
<input type="button" value="Spoof" onclick="spoofover('test');">
</body>
</html>

And I believe this would be a good spoofover for this menu script:

Code:

function spoofover(id){
var el = document.getElementById(id);
var spoof = {type:'mouseover'};
el.onmouseover(el, spoof, el.rel);
}

But even then, the mouse will not be over the trigger, so unexpected things might happen. All in all, a custom function that triggers the menu the way that you want it to be triggered via hot key might be best. That, or a modification to the dropit:function to get it to recognise and interpret input from key stroke (document.onkeydown) events.

Still more worries, there are many browsers out there that can use this menu, not just IE and FF. Those are mentioned in the code, but in reality other browsers like Safari, Opera, etc. can use the menu. Every browser already has hot keys reserved, and these vary from browser to browser, so in the end, this whole idea might be pointless.

**augomat** · 07-09-2008, 01:08 PM

hey, manymany thanks for the quick reply, although i couldn't quite get out of it what i needed (what a shame... :/)

Quote:
"All in all, a custom function that triggers the menu the way that you want it to be triggered via hot key might be best."
--> Yes, that is exactely what i want...i just can't get it working...

Maybe further explanation will help:
The following function (simplified) will be called on the keyup-event:

Code:

function handleKeyUpEvent() {
    [...]

    if (str == '#27' || str == '#123') {
        hideAllMenus();
    }
  		
    switch (str) {
        case '#80':
            openMenu(1);
            break;
        [...]
    }
}

(Don't mind the "#80"-Syntax, there is a special reason for this.. :P)

What i must adapt/reimplement now is the openMenu-Function which in whatever way has to open up the menu for me.

I'm sorry for beeing so dumb but might it be possible just to show me how to implement this specific function?

(Btw: Browsercompatibility does only matter for ie and ff as it is an intranet-application)

best regards,
georg

**jscheuer1** · 07-09-2008, 02:35 PM

Did you try using (change highlighted, worked here):

Code:

function spoofover(id){
var el = document.getElementById(id);
var spoof = {type:'mouseover'};
cssdropdown.dropit(el, spoof, el.rel);
}

with (from your key function, addition highlighted):

Code:

        case '#80':
            spoofover(menu1_id);
            break;

where menu1_id would be the quoted id of that menu's trigger?

If you need more help, please make up a mock-up of the menu and put it up live somewhere on the web and give us a link to it.

**jscheuer1** · 07-09-2008, 03:30 PM

I also had good results with this spoofover function:

Code:

function spoofover(id){
var el = document.getElementById(id);
var spoof = {type:'mouseover'};
el.onmouseover.apply(el, [spoof]);
}

**augomat** · 07-10-2008, 09:41 PM

Yes, that worked perfectly.
Thanks for all the help!!!

best regards,
georg

Thread: Call onmouseover in a script

Thread Tools

Search Thread

Call onmouseover in a script

Bookmarks

Bookmarks

Posting Permissions