Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Showing Div 1

Status
Not open for further replies.
zbphill

zbphill

Technical User
Jan 30, 2007
40
US
I have 6 divs that show and hide on rollover.(service0 - 6)
I want service 6 to show up any time that service 0-5 aren't rolled over. Please help.

/*<![CDATA[*/

var showInterval = [false, false, false, false, false, false, false];
var hideInterval = [false, false, false, false, false, false, false];
var opacityValue = [0, 0, 0, 0, 0, 0, 0];

function showDiv(objNum) {
//check to see if we're currently hiding this div, if so we stop execution on that interval
if (hideInterval[objNum]) {
clearInterval(hideInterval[objNum]);
hideInterval[objNum] = false;
}
//store a reference to this interval so we can stop it later
showInterval[objNum] = setInterval("showDivFunction(" + objNum + ")", 50);
}

function showDivFunction(objNum) {
var obj = document.getElementById("service" + objNum);
//if the div is not fully shown, we increase the opacity in 10% increments
if (opacityValue[objNum] < 100) {
opacityValue[objNum] += 25;
obj.style.opacity = (opacityValue[objNum] / 100);
obj.style.MozOpacity = (opacityValue[objNum] / 100);
obj.style.KhtmlOpacity = (opacityValue[objNum] / 100);
obj.style.filter = "alpha(opacity=" + opacityValue[objNum] + ")";
}

//if the div is fully shown we clear the interval and set the reference to false
else {
clearInterval(showInterval[objNum]);
showInterval[objNum] = false;
}
}

function hideDiv(objNum) {
//check to see if we're currently showing this div, if so we stop execution on that interval
if (showInterval[objNum]) {
clearInterval(showInterval[objNum]);
showInterval[objNum] = false;
}
hideInterval[objNum] = setInterval("hideDivFunction(" + objNum + ")", 50);
}

function hideDivFunction(objNum) {
var obj = document.getElementById("service" + objNum);
//if the div is not fully hidden, we decrease the opacity in 10% increments
if (opacityValue[objNum] > 0) {
opacityValue[objNum] -= 25;
obj.style.opacity = (opacityValue[objNum] / 100);
obj.style.MozOpacity = (opacityValue[objNum] / 100);
obj.style.KhtmlOpacity = (opacityValue[objNum] / 100);
obj.style.filter = "alpha(opacity=" + opacityValue[objNum] + ")";
}
//if the div is fully hidden we clear the interval and set the reference to false
else {
clearInterval(hideInterval[objNum]);
hideInterval[objNum] = false;
}
}

/*]]>*/
 
Sort by date Sort by votes
That will require quite a few changes to your code. I recognize this code, and I got it to work in my test. You need to make changes to your CSS and HTML moreso than your Javascript.

I can help you if you start off by posting your HTML on the divs that fade in and out.

Then the CSS for with the classNames of those divs.
 
Upvote 0 Downvote
I understand how to make service 6 div to show up in the background. My problem is that when you rollover one link to another you see the service 6 div. See HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="<head>
<title>Opacity Test</title>
<link rel="shortcut icon" href="./images/arch-icon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

/*<![CDATA[*/

var showInterval = [false, false, false, false, false, false, false];
var hideInterval = [false, false, false, false, false, false, false];
var opacityValue = [0, 0, 0, 0, 0, 0, 0];

function showDiv(objNum) {
//check to see if we're currently hiding this div, if so we stop execution on that interval
if (hideInterval[objNum]) {
clearInterval(hideInterval[objNum]);
hideInterval[objNum] = false;
}
//store a reference to this interval so we can stop it later
showInterval[objNum] = setInterval("showDivFunction(" + objNum + ")", 50);
}

function showDivFunction(objNum) {
var obj = document.getElementById("service" + objNum);
//if the div is not fully shown, we increase the opacity in 10% increments
if (opacityValue[objNum] < 100) {
opacityValue[objNum] += 10;
obj.style.opacity = (opacityValue[objNum] / 100);
obj.style.MozOpacity = (opacityValue[objNum] / 100);
obj.style.KhtmlOpacity = (opacityValue[objNum] / 100);
obj.style.filter = "alpha(opacity=" + opacityValue[objNum] + ")";
}
//if the div is fully shown we clear the interval and set the reference to false
else {
clearInterval(showInterval[objNum]);
showInterval[objNum] = false;
}
}

function hideDiv(objNum) {
//check to see if we're currently showing this div, if so we stop execution on that interval
if (showInterval[objNum]) {
clearInterval(showInterval[objNum]);
showInterval[objNum] = false;
}
hideInterval[objNum] = setInterval("hideDivFunction(" + objNum + ")", 50);
}

function hideDivFunction(objNum) {
var obj = document.getElementById("service" + objNum);
//if the div is not fully hidden, we decrease the opacity in 10% increments
if (opacityValue[objNum] > 0) {
opacityValue[objNum] -= 10;
obj.style.opacity = (opacityValue[objNum] / 100);
obj.style.MozOpacity = (opacityValue[objNum] / 100);
obj.style.KhtmlOpacity = (opacityValue[objNum] / 100);
obj.style.filter = "alpha(opacity=" + opacityValue[objNum] + ")";
}
//if the div is fully hidden we clear the interval and set the reference to false
else {
clearInterval(hideInterval[objNum]);
hideInterval[objNum] = false;
}
}

/*]]>*/

</script>
<style type="text/css">

* {
border:0px;
margin:0px;
padding:0px;
}

ul {
list-style-type:none;
}

ul li {
display:inline;
padding:0px 10px;
border-left:1px solid black;
}

ul li.first {
border-left:0px;
}

div#service0, div#service1, div#service2, div#service3, div#service4, div#service5 {
height:100px;
width:100px;
opacity: 0.0;
-moz-opacity: 0.0;
-khtml-opacity: 0.0;
filter: alpha(opacity=0);
margin-top:30px;
margin-left:50px;
position: absolute;

}


div#service0 {
border:1px solid blue;
background-color: white;
}

div#service1 {
border:1px solid green;
background-color: white;
}

div#service2 {
border:1px solid red;
background-color: white;
}
div#service3 {
border:1px solid black;
background-color: white;
}
div#service4 {
border:1px solid #4f6baa;
background-color: white;
}
div#service5 {
border:1px solid #f2cfc3;
background-color: white;
}
div#service6 {
border:1px solid #404040;
background-color: #000000;
height:100px;
width:100px;
opacity: 100.0;
-moz-opacity: 100.0;
-khtml-opacity: 100.0;
filter: alpha(opacity=100);
margin-top:30px;
margin-left:50px;
position: absolute;
}

</style>
</head>
<body>

<ul>
<li class="first"><a href="#" onmouseover="showDiv(0)" onmouseout="hideDiv(0)">link1</a></li>
<li><a href="#" onmouseover="showDiv(1)" onmouseout="hideDiv(1)">link2</a></li>
<li><a href="#" onmouseover="showDiv(2)" onmouseout="hideDiv(2)">link3</a></li>
<li><a href="#" onmouseover="showDiv(3)" onmouseout="hideDiv(3)">link4</a></li>
<li><a href="#" onmouseover="showDiv(4)" onmouseout="hideDiv(4)">link5</a></li>
<li><a href="#" onmouseover="showDiv(5)" onmouseout="hideDiv(5)">link6</a></li>
</ul>

<div id="service6">This one stays if all the other ones aren't showen</div>
<div id="service0"></div>
<div id="service1"></div>
<div id="service2"></div>
<div id="service3"></div>
<div id="service4"></div>
<div id="service5"></div>


</body>
</html>
 
Upvote 0 Downvote
The easy way to do this is to do the following, since you already have div6 showing:

Code: 
   <li class="first"><a href="#" onmouseover="showDiv(0)[!]; hideDiv(6)[/!]" onmouseout="hideDiv(0)[!]; showDiv(6)[/!]">link1</a></li>
   <li><a href="#" onmouseover="showDiv(1)[!]; hideDiv(6)[/!]" onmouseout="hideDiv(1)[!]; showDiv(6)[/!]">link2</a></li>
   <li><a href="#" onmouseover="showDiv(2)[!]; hideDiv(6)[/!]" onmouseout="hideDiv(2)[!]; showDiv(6)[/!]">link3</a></li>
   <li><a href="#" onmouseover="showDiv(3)[!]; hideDiv(6)[/!]" onmouseout="hideDiv(3)[!]; showDiv(6)[/!]">link4</a></li>
   <li><a href="#" onmouseover="showDiv(4)[!]; hideDiv(6)[/!]" onmouseout="hideDiv(4)[!]; showDiv(6)[/!]">link5</a></li>
   <li><a href="#" onmouseover="showDiv(5)[!]; hideDiv(6)[/!]" onmouseout="hideDiv(5)[!]; showDiv(6)[/!]">link6</a></li>
 
Upvote 0 Downvote
Thanks for the help, but the problem with that is when you roll off the links you still see div 6 in there.

What I'm looking for is that div 6 only shows up if nothing is active
 
Upvote 0 Downvote
Make these values in your CSS = 1.0, not 100.0:

Code: 
  opacity: 100.0;
  -moz-opacity: 100.0;
  -khtml-opacity: 100.0;
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
1K
ggriffit
ggriffit
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
392
waubain
waubain
malibu65k
  • Locked
  • Question
Hide/Unhide div using Radio button onClick
Replies
4
Views
136
malibu65k
malibu65k
bluemask11
  • Locked
  • Question
jQuery hide div class if total equal to 0
2
Replies
23
Views
313
bluemask11
bluemask11
GRIFFIJ
  • Locked
  • Question
Centre a div
Replies
5
Views
96
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top