homepage Welcome to WebmasterWorld Guest from 23.20.34.25
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Toggle for contact form
toplisek




msg:4584105
 8:41 am on Jun 14, 2013 (gmt 0)

I like to transfer toggle function with link into mouse over effect.
Source. [circlecube.com...]

How to change in the correct way from click link into mouse effect when user goes over link/button?

<script type="text/rocketscript">
function toggleVisibility() {
document.getElementById("toggleMe").style.display = "";
if(document.getElementById("toggleMe").style.visibility == "hidden" ) {
document.getElementById("toggleMe").style.visibility = "visible";
}
else {
document.getElementById("toggleMe").style.visibility = "hidden";
}
}
function toggleDisplay() {
document.getElementById("toggleMe").style.visibility = "visible";
if(document.getElementById("toggleMe").style.display == "none" ) {
document.getElementById("toggleMe").style.display = "";
}
else {
document.getElementById("toggleMe").style.display = "none";
}
}
</script>

<p><a href="#" onclick="toggleDisplay();">Click to toggle display.</a> | <a href="#" onclick="toggleVisibility();">Click to toggle visibility.</a></p>
<div id="toggleMe" style="visibility: visible;display=''"> Something to Hide and show. Display collapses it's layout while visibility will keep it's layout.</div>
<p> From <a href=""></a></p>
</body></html>

 

JAB Creations




msg:4591384
 2:30 am on Jul 9, 2013 (gmt 0)

The CSS visibility property AFAIK is used as a read-only method to determine whether an element is visible.

You will want to use the display property...

.hidden {display: none;}
.show {display: block;}/*div,table*/
.show {display: inline;}/*em,span*/


Since you're using JavaScript instead of merely using a :hover selector use my change function...

function change(id,newClass)
{
if (document.getElementById(id)) {document.getElementById(id).className=newClass;}
else if (id) {id.className=newClass;}
else {alert('Error: the id \''+id+'\' was not found or has not yet been imported to the DOM.\n\nNew class intended: '+newClass);}
}


- John

frobozz




msg:4617667
 1:26 pm on Oct 18, 2013 (gmt 0)

The visibility property is not read-only; you can definitely change it via JavaScript.

The difference between "display" and "visibility" is that turning off visibility (
document.getElementById('my_object').style.visibility = 'hidden') preserves the real estate occupied by the object on screen, whereas turning off display (document.getElementById('my_object').style.display = 'none') collapses the space occupied by that object.

This is an important distinction because it can drastically affect how things are rendered on the page.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved