/    Sign up×
Community /Pin to ProfileBookmark

Using onMouseOver with multiple DIV tags

Copy linkTweet thisAlerts:
Apr 13.2008

[B]How do I keep DIV display = ” when mouse is over LOGIN div?[/B]

Script:
<script language=”Javascript” type=”text/javascript”>
function show(id)
{
hideshow = document.getElementById(id);
if (hideshow.style.display == ‘none’)
{
hideshow.style.display = ”;
}
}
function hide(id)
{
hideshow = document.getElementById(id);
if (hideshow.focus())
{
hideshow.style.display = ”;
} else {
setTimeout(“hideshow.style.display = ‘none’;”, 1000); //Set delay
}
}
</script>

<div onMouseOver=”javascript:show(‘login’);” onMouseOut=”javascript:hide(‘login’);”>Login</div>

<div id=”login” onMouseOut=”javascript:show3(‘login’);”>
<form action=”#”>
Username: <input type=”text”><br />
Password: <input type=”password”>
</form>
</div>

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangApr 13.2008 — &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;hide show&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;script type="text/javascript"&gt;
window.onload=function(){document.getElementById('login').style.display = 'none'};

function show(id)
{
hideshow = document.getElementById(id);
if (hideshow.style.display == 'none') {
hideshow.style.display = '';
timeoutID=setTimeout("show('login')", 1000); //Set delay
}
else {
hideshow.style.display = 'none';
}
}

function stopTimer() {
window.clearTimeout(timeoutID);
}
&lt;/script&gt;

&lt;style type="text/css"&gt;

&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;div onmouseover="show('login');"&gt;Login&lt;/div&gt;

&lt;div id="login" onmouseover="stopTimer();" onmouseout="show('login');"&gt;
&lt;form action="#"&gt;
Username: &lt;input type="text"&gt;&lt;br /&gt;
Password: &lt;input type="password"&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@arjdesignsauthorApr 13.2008 — Fang,

I removed the 'window.onload' line of code. In certain browsers, there was a visibility delay. The layer was displaying longer than a second before it became hidden. Instead, I put style="display: none;" in the 'login' DIV.

I also removed 'timeoutID=setTimeout("show('login')", 1000);' from the 'show' function. The 'show' function was starting the Timeout during the onMouseOver causing the 'login' DIV to hide. I set the 'else' to clearTimeout.

I added a 'hide' function with a Timeout.

[B]Is there a way to simplify this anymore?[/B]

<i>
</i>&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;hide show&lt;/title&gt;

&lt;script type="text/javascript"&gt;
function show(id)
{
hideshow = document.getElementById(id);
if (hideshow.style.display == 'none')
{
hideshow.style.display = '';
} else {
window.clearTimeout(timeoutID);
}
}

function hide(id)
{
timeoutID=setTimeout("hideshow.style.display = 'none'", 1000); //Set delay
}

function stopTimer() {
window.clearTimeout(timeoutID);
}
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div onmouseover="show('login');" onmouseout="hide('login');" style="cursor: pointer; width: 190px; height: 27px; background-color: #cccccc;"&gt;&lt;b&gt;Login&lt;/b&gt;&lt;/div&gt;

&lt;div id="login" onmouseover="stopTimer();" onmouseout="hide('login');" style="display: none;"&gt;
&lt;form action="#"&gt;
Username: &lt;input type="text"&gt;&lt;br /&gt;
Password: &lt;input type="password"&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
×

Success!

Help @arjdesigns spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...