• Advertisement
Sign in to follow this  

[web] Using javascript to change visibility.

This topic is 4929 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Ok i'm trying to use javascript to set a div that is hidden to visible on mouse over. I did this.
<script language="JavaScript">
layername = "drop";
<a class = "nav" href="AboutUs.html" onMouseOver="document.getElementById(layername).style.visibility="visible""><strong><</strong>About Us<strong>></strong></a>
</script>
It didn't work.
BTW drop is the name of the div. Is this how you do this. If not is there a way?

My css file looks like this
a.nav{text-decoration:none;}
a.nav:link{color:red;} 
a.nav:visited{color:red;} 
a.nav:hover{color:blue;} 
a.nav strong{color:purple;} 
a.nav:hover strong{color:red;}
font.heading{
	font-size: 25px;
}
font.date{
	font-size: 20px;
}
font.news{
	font-size: 15px;
	text-indent: 35px;
}
#container{
	width: 800px;
	height: 100%;
	background-color: black;
	position: absolute;
}
#menu{
	margin-left: 0px;
	width: 150px;
	height: 200px;
	background-color: purple;
	position: absolute;
}
#main{
	margin-left: 160px;
	width: 650px;
	height: 100%;
	color: white;
	background-color: black;
	position: absolute;
}
#news{
	margin-left: 10px;
	margin-top: 5px;
	width: 650px;
	background-color: teal;
	position: relative;
}
#newshead{
	margin-left: 10px;
	width: 650px;
	background-color: teal;
	position: relative;
	text-indent: 50%;
}
#newsbody{
	margin-left: 10px;
	width: 650px;
	background-color: purple;
	position: relative;
}
#drop{
	margin-left: 0px;
	margin-top: 250px;
	width: 650px;
	background-color: purple;
	position: absolute;
	visibility: hidden;
}

Thanks guys,

Share this post


Link to post
Share on other sites
Advertisement
Guest Anonymous Poster
maybe try:

style.display = 'none';



Share this post


Link to post
Share on other sites
You have not escaped your javascript code correctly on the onmouseover attribute.

You need to either use different quotes, or use HTML entities.

Probably easier to put it in a function in a script block or js file.

style.visiblity is right though.

Mark

Share this post


Link to post
Share on other sites
You don't even need javascript for that. It can be done with CSS only as well (at least it should be possible) through the :hover class.

Share this post


Link to post
Share on other sites
Display (should) "physically" remove the element from the page (the layout adjusts to fill the gap) whereas visibility (should) remove the element but keep the gap.

In your original example, the syntax was incorrect. You cannot have regular HTML inside of the <script language="javascript"> tag. Instead, you would use something like the following:


<script language="javascript">
layername = "drop";
</script>

<a class="nav" href="AboutUs.html" onMouseOver="document.getElementById(layername).style.visibility='visible';"><strong>About Us</strong></a>




Note that the <strong> tags aren't messed up, and that you do not have conflicting double-quotes (you nest " and ', or escape the double quote by putting a backslash infront of it: \") ;)

However, as mentioned above, you can accomplish the same thing (hiding/showing) with CSS ;)

Share this post


Link to post
Share on other sites
Thanks i'll test it out when I come home from work. Oh crap i'm late!
EDIT: How do you do the same thing with css? I couldn't figure out how to access one element from another.
CYA LATER,

Share this post


Link to post
Share on other sites
You can hide/show elements with css by doing something like this:

<a href="destination_url">Title<span>Content to hide/show</span></a>

a span {visibility: hidden;}

a:hover span {visibility: visible;}

That should work.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement