RollOver display/hide div script [Archive]

greed83

02-09-2008, 04:23 PM

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

scragar

02-09-2008, 04:34 PM

http://meyerweb.com/eric/css/edge/popups/demo.html

that any help?

greed83

02-10-2008, 02:05 AM

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?

scragar

02-10-2008, 06:00 AM

javascript:<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><a class='HoverMe'>link 1</a><a class='HoverMe'>link 2</a>
<div class='showMe'>stuff 1</div><div class='showMe'>stuff 2</div>
only tested in opera 9.25

edited to fix a minor bug.

WebJoel

02-10-2008, 08:23 AM

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>

greed83

02-10-2008, 02:41 PM

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

letufts

10-26-2011, 01:17 PM

javascript:<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><a class='HoverMe'>link 1</a><a class='HoverMe'>link 2</a>
<div class='showMe'>stuff 1</div><div class='showMe'>stuff 2</div>
only tested in opera 9.25

edited to fix a minor bug.

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!

scragar

11-01-2011, 02:12 AM

Replace

x[i]. onmouseover =

With

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