Solved

onMouseOut change div to visibility:hidden

Posted on 2004-03-22
6
2,652 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
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 

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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Clear input text 15 27
Validating Date 4 29
how can i break an array into a couple 5 26
Keyup listener getting fired on initial page load 1 16
This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
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…

726 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