PDA

View Full Version : trying to initiate a link dropdown


songboy
08-15-2010, 04:52 PM
I've got this in my html page head:
<script src="getdrop.js" script language="Javascript" type="text/JavaScript"></script>

This is the getdrop.js code:
var toplink=<a href="create_writer_account.php">add jobs</a>;
var obj=document.getElementById('layer9');
function GetDrop()
{
toplink.onmouseover=obj.style.display="block";
}
(This file is in the same folder as the html page.)
When I run the mouse over the link nothing happens. I'm guessing I've got it badly wrong. However, if I put the onmouseover in the <a> tag in the actual html page, it works ie a div with some extra links drops down.
I have a suspicion that it's all to do with calling the function. If this is the case, I'm not sure where to call it.
Some help would be much appreciated.
Songboy

songboy
08-17-2010, 12:23 PM
I'll move this on a bit myself. Having done some searching, I now have this code to achieve the appearance of a div when you mouse over a link:
var toplink = <a href="create_writer_account.php">add songs</a>;
function doit()
{
document.getElementById("Layer9").style.display ="block";
}
function getit()
{
toplink.onmouseover=doit;
}
window.onload=getit;

OK I've tried the onmouseover statement in line and it works (as long as you create a display property as 'none' in the CSS to begin with).
However, when I put the above script into a .js file, when the page loads the div appears at once without the onmouseover event.
I've used the Firefox error console to check the code but it doesn't show an error - so I guess the code is valid.
Could someone explain why the div 'block' appears without having to mouseover the appropriate link first ?
I saw a thread somewhere else where the guy used the term "I'm sending it all to window.onload...." I didn't really get it after that but he was having a similar problem. Maybe this is a clue.
I really need some input here folks !
Songboy

Corrosive
08-17-2010, 02:34 PM
Have you got a 'display: none;' on your HTML to start with?

songboy
08-17-2010, 03:40 PM
Yes display 'none' was part of the CSS file which refers to Div id 'Layer9'. I've just removed that rule but now, onload, the div just appears anyway. Basically, it is doing the same as before - the onmouseover part isn't being recognised. When the page loads, the onmouseover is being reacted to even without doing the mouseover.

Corrosive
08-17-2010, 05:11 PM
Sorry, I didn't mean remove it I just asked if it was there!

songboy
08-17-2010, 07:33 PM
Yes it is still there - I put it back.

songboy
08-17-2010, 10:46 PM
I now have this:

var toplink = <a href="create_writer_account.php">add songs</a>;
function doit()
{
document.getElementById("Layer9").style.display ="block";
}
function getit()
{
toplink.onMouseOver=doit;
}
function hideit()
{
document.getElementById("Layer9").style.display ="none";
}
function loseit()
{
toplink.onMouseOut=hideit;
}
window.onload=hideit;

If I use hideit for window.onload the div is not showing.
If I use doit for window.onload the div is showing.
If I use getit or loseit nothing happens. (What actually happens is that the CSS rule display; none just kicks in - getit and loseit don't overide the set rule.)
Basically, the getit and loseit functions aren't working. The error console shows nothing and the code syntax seems to match what I have researched.
Help !!!
Songboy

songboy
08-20-2010, 06:18 PM
If you've been following this torture you may be relieved to know that I've got an initial solution. If I give the link an id of "create", this will allow a div to appear and disappear based on onmouseover and onmouseout.

var toplink = document.getElementById("create");
function Getit()
{
document.getElementById("Layer9").style.display ="block";
}
toplink.onmouseover=Getit;
function Hideit()
{
document.getElementById("Layer9").style.display ="none";
}
toplink.onmouseout=Hideit;

I wasn't putting the DOM object 'document' in where it was needed.
Now for the timer!!

songboy
08-21-2010, 06:28 PM
This code allows a div to drop down (mine contains extra links) and the timer allows enough time to move the pointer from the original link to the dropdown before the dropdown gets cancelled. When you move off the dropdown it gets cancelled after a short time.

var toplink = document.getElementById("create");
function Getit()
{
document.getElementById("Layer9").style.display ="block";
}
toplink.onmouseover=Getit;
toplink.onmouseout=StartTimer;
function Hideit()
{
document.getElementById("Layer9").style.display ="none";
}
function StartTimer()
{
t = window.setTimeout("Hideit()",200);
}
function ResetTimer()
{
if (t) window.clearTimeout(t);
}
document.getElementById("Layer9").onmouseover=ResetTimer;
document.getElementById("Layer9").onmouseout=StartTimer;

PS
My original problem was much to do with not knowing what window.onload was all about. Anyway my facility is now working.
Songboy