bcoffin Posted September 21, 2009 Share Posted September 21, 2009 I have a div that appears when a link is clicked: (<a href='javascript:void(0);' onclick='javascript:document.getElementById("quicklinks").style.display="block"; return false;'>Quicklinks</a>) the div is basically a box of links with different hover states. <div> <img /> <a></a> <a><img /></a> <a></a> </div> it looks nice as you roll over them because the links or images change color and src. i'd like to hide this div when the visitor completely rolls out of the div. i've tried to put a "this.style.display='none';' on rollout, but rolling over links or images acts as a rollout. any suggestions on how this can be accomplished easily? Quote Link to comment Share on other sites More sharing options...
R4nk3d Posted September 21, 2009 Share Posted September 21, 2009 possibly try the visibilty ="hidden"; ? Quote Link to comment Share on other sites More sharing options...
bcoffin Posted September 21, 2009 Author Share Posted September 21, 2009 a long while agao, ive tried putting a: #quicklinks { visibility:hidden; } #quicklinks:hover { visibility: visible; } to no avail I'm wondering how this is commonly done. Quote Link to comment Share on other sites More sharing options...
R4nk3d Posted September 23, 2009 Share Posted September 23, 2009 Ok, i kinda get what ur trying to do.... You need to make a link such as.. <a href="javascript:void(0);" onclick="showDiv('div_1');">Click!</a> And then make your div <div id="div_1"> Hey hey hey </div> then make the showDiv(id) function.... function showDiv(id) { var div_vis = document.getElementById(id).style.display; if(div_vis == "none") document.getElementById(id).style.display = "block"; if(div_vis == "block") document.getElementById(id).style.display = "none"; return 1; } I think thatll work Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted September 23, 2009 Share Posted September 23, 2009 The simplest way to get what you want to work is to give both your toggle element and your div the same onmouseover behavior. That'll force the div to stay open while you navigate through it. I've written a demo that works in both IE 8 and FF 3.5. <html> <head> <title>Quick Links</title> <style> #linkbox { width: 350px; border: 1px solid black; display: none; } #linkbox a:hover { color: green; } </style> <script type="text/javascript"> window.onload = function(){ var toggle = document.getElementById('toggle'); var linkbox = document.getElementById('linkbox'); toggle.onmouseover = function(){ linkbox.style.display = 'block'; } linkbox.onmouseover = function(){ this.style.display = 'block'; } linkbox.onmouseout = function(){ this.style.display = 'none'; } } </script> </head> <body> <a id="toggle" href="#">Mouse over me</a><br /><br /> <div id="linkbox"> <a href="http://www.google.com/">Google</a><br /><br /> <a href="http://www.microsoft.com/">Microsoft</a><br /> <a href="http://www.apple.com/">Apple</a><br /> <a href="http://www.ubuntu.org/">Ubuntu</a> </div> </body> </html> One final note, and it's something I tell all aspiring JavaScript coders - you should always attempt to write your code in an unobtrusive manner. What that essentially means is that you shouldn't have JavaScript code embedded in your HTML. It makes it easier to debug existing code and add new code if your script is in one centralized location. More importantly, it makes it easy to write sites that degrade gracefully in older browsers. Further, JavaScript gives you plenty of tools to grab whatever element you want, so there's no real excuse not to. Also, to R4nk3d, you shouldn't be using multiple getElementById() calls to get a hold of the same element. That's very inefficient/slow. Instead, store that retrieved element in a variable. That way, you won't be asking JavaScript to repeatedly search for the element you already have. Quote Link to comment Share on other sites More sharing options...
bcoffin Posted October 9, 2009 Author Share Posted October 9, 2009 Well this is pretty simple and exactly what i need. I'm curious whether i can put image links in there or form elements and have it remain open. Thanks for the help, Nightslyr.. i'm going to mark this one solved. I appreciate your contribution, bigtime. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.