RollOver display/hide div script

@greed83Feb 09.2008

Hey All.

I have a question that is probably pretty simple for the majority. I am by no means a coder. Understand the basics and can fiddle with existing code but am useless when starting from scratch. Here is my question.

I am looking for a script that will essentially do a basic hide/show when u roll over a group of text headers. Once you roll over “text 1”, content will display. When you roll over “text 2” it will replace the existing text with new content. I had a script that did this, but it would “hide” the content when you mouseOut. I tried to fiddle with this script but never achieved my goal.

I got frustrated and trashed the script i had been working with so I have nothing to show you all 🙁 Any help or a point in the right direction would be greatly appreciated.

Cheers,
G

to post a comment

JavaScript

8 Comments(s) _↴

@scragarFeb 09.2008 — #http://meyerweb.com/eric/css/edge/popups/demo.html

that any help?

@greed83authorFeb 10.2008 — #That is close but i want the content displayed when you mouse over to stay displayed until you mouse-over another one of the defined "texts". Does that make sense?

@scragarFeb 10.2008 — #javascript:

[code=php]<script type='text/javascript'>
 /* <![CDATA[ */
 document.getElementsByClassName = function(){
 if(arguments.length == 1)
 arguments[1]='*';
 var retnode = [];
 var myclass = new RegExp('\b'+arguments[0]+'\b');
 var elem = this.getElementsByTagName(arguments[1]);
 for(var i = 0; i < elem.length; i++){
 var classes = elem[i].className;
 if(myclass.test(classes))
 retnode.push(elem[i]);
 };
 return retnode;
 };
 window.onload=function(){
 var x = document.getElementsByClassName('HoverMe', 'a');
 for(var i = 0; i < x.length; i++){
 x[i].onmouseover=function(){
 var m = document.getElementsByClassName('HoverMe', 'a');
 var n = document.getElementsByClassName('showMe', 'div');
 for(var i = 0; i<m.length; i++){
 n[i].style.display = (m[i]==this)?'block':'none';
 };
 };
 };
 x = document.getElementsByClassName('showMe','div');
 for(var i = 0; i < x.length; i++){
 x[i].style.display = 'none';
 };
 };
 /* ]]> */
 </script>[/code]

[code=html]<a class='HoverMe'>link 1</a><a class='HoverMe'>link 2</a>
 <div class='showMe'>stuff 1</div><div class='showMe'>stuff 2</div>
 [/code]

only tested in opera 9.25

edited to fix a minor bug.

@WebJoelFeb 10.2008 — #I was playing around with this (it's from another site, -modified for my use but based entirely upon their excellent work), and this seems to describe exactly what you're after:

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title> New Document </title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="Generator" content="" />

<meta name="Author" content="" />

<meta name="Keywords" content="" />

<meta name="Description" content="" />

<style type="text/css">

body, html {margin:0; padding:0; border:0;} /* Re-sets IE to "zero" for these values */

#switchcontent {position:absolute; left:300px; border:1px solid gray; width:350px; margin:26px auto; padding:5px 5px 10px 5px; background-color:#ececec;}

#switchcontent #one, #switchcontent #two, #switchcontent #three, {color:black; background-color:white; padding:10px; height:130px; overflow-y:scroll;}

div.headfoot {height:23px; padding-top:2px; background-color:wheat; color:red;

text-align:center; border:1px solid purple; margin-bottom:10px;}

#switchcontent a {cursor: pointer;}

#switches {display:inline; width:350px; margin:0 auto; text-align:center;}

#switches li {text-align:center; float:left; width:114px; height:25px; list-style-type:none;}

#switches li a{text-align:center; display:block; width:114px; text-decoration:none;}

#switchcontent li a:hover {color:black; font-weight:bold; padding-top:2px;letter-spacing:0.03em; text-decoration:underline;}

</style>

<script type="text/javascript">

function switch1(div) {

var option=['one','two','three'];

for(var i=0; i<option.length; i++) {

if (document.getElementById(option[i])) {

obj=document.getElementById(option[i]);

obj.style.display=(option[i]==div)? "block" : "none";

}

}

}

window.onload=function () {switch1('one');}

</script>

</head>

<body>

<div id="switchcontent">

<div class="headfoot">

<ul id="switches">

<li><a href="javascript:void[0];" onclick="switch1('one');">News One</a></li>

<li><a href="javascript:void[0];" onclick="switch1('two');">News Two</a></li>

<li><a href="javascript:void[0];" onclick="switch1('three');">More...</a></li>

</ul>

</div>

<div id="one">

<h2>First Page Here</h2>

<p>Here can go any news for the first page.</p>

<p>This is the first page. The FIRST page information and text goes here. This is page #1. Here can go any news for the first page.</p>

<img alt="This is an image" src="#" style="float:left; border:1px solid black; width:85px; height:40px; background-color:silver; margin:6px;" />

<p>Things for the first page will be in this section</p>

<p>Here can go any news for the first page.</p>

</div>

<div id="two">

<h2>Second Page Here</h2>

<p>Here can go any news for our second page, -whatever you want to say.

<img alt="This is an image" src="#" style="float:left; border:1px solid black; width:85px; height:40px; background-color:silver; margin:6px;" />

This is page TWO. Our second pages of information, text, etc. Here can go any news for our second page, -whatever you want to say.</p>

<img alt="This is an image" src="#" style="float:right; border:1px solid black; width:85px; height:40px; background-color:silver; margin:6px;" />

<p>Here can go any news for our second page, -whatever you want to say.</p>

</div>

<div id="three">

<h2>Third Page Here</h2>

<img alt="This is an image" src="#" style="float:right; border:1px solid black; width:85px; height:40px; background-color:silver; margin:6px;" />

<p>This is the third page, -for whatever information you wish to say goes here. Page three is here. For whatever text and commentary you require.</p>

<img alt="This is an image" src="#" style="float:right; border:1px solid black; width:85px; height:40px; background-color:silver; margin:6px;" />

<p>This is the third page, -for whatever information you wish to say goes here. Page three is here. For whatever text and commentary you require, -this is our final news brief for this section.</p>

<p>Page three, -this is our final news brief for this section.</p>

</div>



</div>

<div class="clear"></div>

</body>

</html>[/QUOTE]

@greed83authorFeb 10.2008 — #WHAAAAAAAA HOOOOOO! That works perfectly. All i had to do was switch the "onclick" to a "onmouseOver" and it worked perfectly. Thank you so much. I'm not much of a scripter so i do rely heavily on the online communities to help me out when i'm in need. Thanks so much!

Cheers,

G

@letuftsOct 26.2011 — #javascript:

[code=php]<script type='text/javascript'>
 /* <![CDATA[ */
 document.getElementsByClassName = function(){
 if(arguments.length == 1)
 arguments[1]='*';
 var retnode = [];
 var myclass = new RegExp('\b'+arguments[0]+'\b');
 var elem = this.getElementsByTagName(arguments[1]);
 for(var i = 0; i < elem.length; i++){
 var classes = elem[i].className;
 if(myclass.test(classes))
 retnode.push(elem[i]);
 };
 return retnode;
 };
 window.onload=function(){
 var x = document.getElementsByClassName('HoverMe', 'a');
 for(var i = 0; i < x.length; i++){
 x[i].onmouseover=function(){
 var m = document.getElementsByClassName('HoverMe', 'a');
 var n = document.getElementsByClassName('showMe', 'div');
 for(var i = 0; i<m.length; i++){
 n[i].style.display = (m[i]==this)?'block':'none';
 };
 };
 };
 x = document.getElementsByClassName('showMe','div');
 for(var i = 0; i < x.length; i++){
 x[i].style.display = 'none';
 };
 };
 /* ]]> */
 </script>[/code]

[code=html]<a class='HoverMe'>link 1</a><a class='HoverMe'>link 2</a>
 <div class='showMe'>stuff 1</div><div class='showMe'>stuff 2</div>
 [/code]

only tested in opera 9.25

edited to fix a minor bug.[/QUOTE]

I stumbled across this post today and this script is EXACTLY what I needed! I was wondering - can it be modified so that when you mouse off the links, the displayed div is hidden again? I would really appreciate help with this!

Thanks!

@scragarNov 01.2011 — #Replace

x[i]. onmouseover =

With

x[i]. onmouseout =x[i]. onmouseover =

@AstartheAug 08.2012 — #I stumbled upon this code and it really helped me. It's really just what I needed. Thanks a lot.

I tested the code and it worked correctly in Firefox and Chrome, but when I tried the code (I tried both code by scragar and WebJoel) in IE, the image inside the hidden div didn't show. Any idea what's the problem?

The link for the page is this

Also in #JavaScript _↴

IE 6 - scrollTop not reporting simple code.... big problem Updating dependent listboxes from a piped seperated txt file

Success!

Help @greed83 spread the word by sharing this article on Twitter...

Tweet This

RollOver display/hide div script

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

RollOver display/hide div script

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴