Solved

onMouseOut change div to visibility:hidden

Posted on 2004-03-22
6
2,653 Views
Last Modified: 2008-03-03
I have a list - onmouseout of the <ul> I want it to hide a div on the page.  Any suggestions?

Thanks,
Hayden
0
Comment
Question by:Quarfelburg
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 3

Expert Comment

by:xp_commander
ID: 10653110
<script type="text/javascript">

function showIt() {
document.frm.text.style.visibility="visible"; //set to visible
}
function hideIt() {
document.frm.text.style.visibility="hidden"; //set to hidden
}
</script>

call this on your onmouseout event such as :-

<UL>
<LI><A HREF="order.html"
    onMouseOver="describe('Order a product'); return true;"
    onMouseOut="hideIt()">
Order Form</A>
<LI><A HREF="email.html"
    onMouseOver="describe('Send us a message'); return true;"
    onMouseOut="hideIt();">
Email</A>
</UL>


Alternatively, you can use
document.frm.text.style.display="none"; // hide
AND
document.frm.text.style.display="block"; // show
As this above code will not only makes it invisible but removes it from the page, so it does not takes up any space
0
 

Author Comment

by:Quarfelburg
ID: 10653150
Perhaps I wasn't clear - I have a div absolutely positioned on a page and want an onmouseout to change the css on my style sheet to visiblity:hidden


0
 
LVL 3

Expert Comment

by:xp_commander
ID: 10653179
Sorry , forgot to mention above code was two snapshot from one of my apps , you would need to use
document.getElementById to get the pointer to your div tag , i.e :-

So the pseudo code would look like :-

In your list   : onMouseOut="hideIt(div id);"

In hide function :- function hideIt(Pass the div Object here) {
document.getElementById(div id).style.visibility="hidden"; //set to hidden
}
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Quarfelburg
ID: 10653358
what do you mean by "Pass the div Object here"?

Pardon my ignorance.
0
 
LVL 3

Accepted Solution

by:
btech1 earned 125 total points
ID: 10653649
<html>
<head<script type="text/javascript">
function hideIt() {
     document.getElementById("me").style.visibility="hidden";
}
</script>
</head>
<body>
<div id="me">
  Seeing me?
</div>
<ul>
  <li><a href onmouseout="hideIt();">Hide it</a>
</ul>
</body>
</html>
0
 

Author Comment

by:Quarfelburg
ID: 10653718
Sorry meant to put assist on xp_commander

Anyway to change that?

Thanks guys,
Hayden
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

695 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question