logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > Javascript and JS frameworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 08-15-2010, 05:52 PM   #1
songboy
 
Join Date: Jan 2009
Posts: 115
Question trying to initiate a link dropdown

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 is offline   Reply With Quote
Old 08-17-2010, 01:23 PM   #2
songboy
 
Join Date: Jan 2009
Posts: 115
Unhappy moving it on a bit

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
songboy is offline   Reply With Quote
Old 08-17-2010, 03:34 PM   #3
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Have you got a 'display: none;' on your HTML to start with?
Corrosive is offline   Reply With Quote
Old 08-17-2010, 04:40 PM   #4
songboy
 
Join Date: Jan 2009
Posts: 115
Default display 'none'

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.
songboy is offline   Reply With Quote
Old 08-17-2010, 06:11 PM   #5
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Sorry, I didn't mean remove it I just asked if it was there!
Corrosive is offline   Reply With Quote
Old 08-17-2010, 08:33 PM   #6
songboy
 
Join Date: Jan 2009
Posts: 115
Default display 'none'

Yes it is still there - I put it back.
songboy is offline   Reply With Quote
Old 08-17-2010, 11:46 PM   #7
songboy
 
Join Date: Jan 2009
Posts: 115
Angry moving on a bit more

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 is offline   Reply With Quote
Old 08-20-2010, 07:18 PM   #8
songboy
 
Join Date: Jan 2009
Posts: 115
Default at last a solution

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 is offline   Reply With Quote
Old 08-21-2010, 07:28 PM   #9
songboy
 
Join Date: Jan 2009
Posts: 115
Default I've added a timer

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=Rese tTimer;
document.getElementById("Layer9").onmouseout=Start Timer;

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


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 12:32 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com