Javascript Visibility Toggle
Javascript Code
+ 1 likes
Please Register to submit score.
| Average Score | 0.0 (of 0 scores) |
| Date Added | Sep 10, 2008 |
| Last Updated | Sep 10, 2008 |
| Tags | javascript toggle visibility |
Description
This is a very simple Javascript toggle that'll show or hide a div depending on its current state. Here is the HTML code:
| Code: |
| <div onmouseover="toggle('mydiv');" onmouseout="toggle('mydiv');">Hover</div> <div id='mydiv' style="visibility: hidden;">I see you!</div> |
Javascript Snippet:
Javascript Visibility Toggle
Posted on Sep 11, 2008 12:31 pm
Posted on Sep 11, 2008 12:31 pm
Nice work, interesting the way you chose to add the document.getELementById to a variable, then seperate for the styles, rather than assign the style to a variable and do:
document.getElementById(obj).style.visibility = style;
But works nicely :-)
document.getElementById(obj).style.visibility = style;
But works nicely :-)
Javascript Snippet:
Javascript Visibility Toggle
Posted on Sep 11, 2008 12:36 pm
Posted on Sep 11, 2008 12:36 pm
Thanks, I think it just helps make it more clear and reduces the overall number of characters used.
Javascript Snippet:
Javascript Visibility Toggle
Posted on Sep 11, 2008 12:43 pm
Posted on Sep 11, 2008 12:43 pm
Also, the 'var' before the variable name is not necessary, although there's no problem having it, I guess different people prefer doing things differently, it's definitely clearer having it there - but longer.
Javascript Snippet:
Javascript Visibility Toggle
Posted on Sep 11, 2008 12:51 pm
Posted on Sep 11, 2008 12:51 pm
Actually, you need the 'var' because IE errors out if you don't use it. I struggled with this in the past only to realize I had forgotten a var declaration.
Javascript Snippet:
Javascript Visibility Toggle
Posted on Sep 11, 2008 1:19 pm
Posted on Sep 11, 2008 1:19 pm
Really? That's odd, several of my scripts have worked without it. I'll bear that in mind when creating more scripts, thanks!
Javascript Snippet:
Javascript Visibility Toggle
Posted on Sep 11, 2008 1:33 pm
Posted on Sep 11, 2008 1:33 pm
Then I'm not sure why it made a difference for me, maybe its the version of IE I'm using.
Javascript Snippet:
Javascript Visibility Toggle
Posted on Sep 11, 2008 1:55 pm
Posted on Sep 11, 2008 1:55 pm
Which one is that? And I guess it's best to add it in anyway, so as to cater for all versions.
Javascript Snippet:
Javascript Visibility Toggle
Posted on Sep 13, 2008 8:29 am
Posted on Sep 13, 2008 8:29 am
Your changing the visibility attribute, basically your saying if the visibility is OFF, keep that space but dont show it, if its on USING That space show it..
Visibility is not recommended it. change it to 'display'
Visibility is not recommended it. change it to 'display'
Javascript Snippet:
Javascript Visibility Toggle
Posted on Sep 13, 2008 11:51 am
Posted on Sep 13, 2008 11:51 am
Yes, the point is to keep the space just as we've done in the site menu above when you hover over a link and the drop down arrow appears.
Javascript Snippet:
Javascript Visibility Toggle
Posted on Sep 13, 2008 2:06 pm
Posted on Sep 13, 2008 2:06 pm
You can also space some lines and change line 4-5 to:
item.style.visibility = (item.style.visibility == 'visible') ? 'hidden' : 'visible';
item.style.visibility = (item.style.visibility == 'visible') ? 'hidden' : 'visible';
Javascript Snippet:
Javascript Visibility Toggle
Posted on Sep 13, 2008 4:16 pm
Posted on Sep 13, 2008 4:16 pm
Good suggestion Digital, that's another way to do it.
Javascript Snippet:
Javascript Visibility Toggle
Posted on Mar 2, 2010 11:55 pm
Posted on Mar 2, 2010 11:55 pm
jquery is much more efficient with this imo, since you have it, you should use it =p
The cool thing about this is the wide range of customization:
OR
live example at http://left4quake.com/this.html
you'll find jquery is the best =]
outcome = unobtrusive lightweight effective dynamic code, also a really cool effect.
| Code: |
| <button>You cant see <div style='visibility:hidden;'>this</div></button> <script> $('button').hover(function(){jQuery(":first-child", this).css('visibility', 'visible');},function(){jQuery(":first-child", this).css('visibility', 'hidden');});</script> |
The cool thing about this is the wide range of customization:
| Code: |
| <table cellpadding=0 cellspacing=0><tr class='hov'><td>PLATFORMS</td><td style='width:30px; height:30px;'><img class='hidden' src='http://www.hawkee.com/images/bullet_arrow_down.png' /></td></tr></table> |
| Code: |
| <div class='hov'>Hover<div class='hidden'>I see you!</div></div> |
| Code: |
| $(document).ready(function() { $('.hidden').hide(); $('.hov').hover(function(){jQuery(".hidden",this).fadeIn();},function(){jQuery(".hidden",this).fadeOut();}); }); |
you'll find jquery is the best =]
outcome = unobtrusive lightweight effective dynamic code, also a really cool effect.
Javascript Snippet:
Javascript Visibility Toggle
Posted on Mar 3, 2010 1:29 am
Posted on Mar 3, 2010 1:29 am
I've started to play around with jQuery a lot more lately and I'm very pleased with it. I'll likely be doing a lot more of the functionality here using it as I get around to it.
Javascript Snippet:
Javascript Visibility Toggle
Posted on Mar 3, 2010 9:35 am
Posted on Mar 3, 2010 9:35 am
if u need any help, i'm always willing =p
