show / hide div

**remaeis** · 02-24-2011 09:32 AM

Hello everybody!!!
Help please!!!

How to make that div hide when i click somewhere else (onblur)
I already have code that works perfect for show/hide div!!!

----------here is code--------

Click <a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();'
onclick="document.getElementById('PopUp').style.display = 'block' " >
here</a>

<div id='PopUp' style='display:none;position:absolute;left:50px;top:50px;border:solid black 1px;padding:10px;background-color:rgb(255,255,225);
text-align:justify;font-size:12px;width:135px;'>

Some content of div

<br />

<div style='text-align: right;'>
<a onmouseover='this.style.cursor="pointer" '
style='font-size: 12px;'
onfocus='this.blur();'
onclick="document.getElementById('PopUp').style.display = 'none' " >
<span style="text-decoration: underline;">close</span></a>
</div>
</div>

**remaeis** · 02-24-2011 05:23 PM

hi guys, am back! with great solution!!!

check this out:

<html>
<head>
<title>(Type a title for your page here)</title>
<style type="text/css">
#div1 {display: none;}
#div2 {display: none;}
#div3 {display: none;}
#div4 {display: none;}
</style>
<script type="text/javascript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
</head>
<body >
Userid<a href='#' onfocus="setVisibility('div1','inline')"; onBlur="setVisibility('div1','none')";>some link</a><br>
Password<input type=text name=t2 onfocus="setVisibility('div2','inline')"; onBlur="setVisibility('div2','none')";><br>
Name<input type=text name=t1 onfocus="setVisibility('div3','inline')"; onBlur="setVisibility('div3','none')";>
<div id="div1"><a href="http://google.com">google</a></div>
<div id="div2">Your Password</div>
<div id="div3">Your full name</div>
</body>
</html>

BUT please!!! if anyone can help me to find how to change javascript code and let me use content of shown div! (like: let me to click on link inside that div)

THANKS IN ADVANCE!!!

**JMRKER** · 02-24-2011 07:16 PM

You cannot use one event to perform two actions.

For example, onBlur to hide a section and at the same time cause to go to a linked URL.

If you are just trying to hint to the operator the function of an input,
you could add a "title=" statement to the tag, but then there is no need for the toggle function

Consider this modification (and then remove visibility logic)

Code:

<html>
<head>
<title>(Type a title for your page here)</title>
<style type="text/css">
#div1 {display: none;}
#div2 {display: none;}
#div3 {display: none;}
#div4 {display: none;}
</style>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?t=242755
function setVisibility(id, visibility) {
  document.getElementById(id).style.display = visibility;
}
</script>
</head>
<body >
<span>
Userid 
<a href='#' title="google.com"
 onfocus="setVisibility('div1','inline')"; onBlur="setVisibility('div1','none')";> some link </a>
 <div id="div1"><a href="http://google.com">google</a></div>
</span><br>
<span>
Password 
<input type=text name=t2 title="Your password"
 onfocus="setVisibility('div2','inline')"; onBlur="setVisibility('div2','none')";>
 <div id="div2">Your Password</div>
</span><br>
<span>
Name 
<input type=text name=t1 title="Your full name"
 onfocus="setVisibility('div3','inline')"; onBlur="setVisibility('div3','none')";>
 <div id="div3">Your full name</div>
</span>
</body>
</html>

**remaeis** · 02-24-2011 07:44 PM

Thanks for reply!
But am not much sure if you get me. I just i wish that div is shown, don't disappear when i click on itself.
(and i don't need more than once to be shown at the same time)

-thanks!

**JMRKER** · 02-24-2011 07:50 PM

Originally Posted by remaeis

Thanks for reply!
But am not much sure if you get me. I just i wish that div is shown, don't disappear when i click on itself.
(and i don't need more than once to be shown at the same time)

-thanks!

Then remove the "onblur=" logic from your original code.

**remaeis** · 02-24-2011 07:54 PM

Bro, thank you very very much! but i just found some jQuery code that working amazing perfect!!! when i finish that page i will show to you how its looks!!! thank you anyway for your good wish to help me!!!

Thread: show / hide div

Thread Tools

Display

show / hide div

Something to try ...

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions