SHow/hiding with multiple divs. Jquery or javascript issue

baybook · 05-04-2012, 03:07 AM

he my_click script shows some text in the display div. The visibiity of each spot div is originally set to hidden. I want to change the visibility of the div I click to visible and set everything else to hidden. Jquery seems to handle hiding differently than css.

How would I set that up?

Thank you

Here is the test code. I want to be able to show the hidden div when I hover. Pass the info to a function when I click and show the hidden div when it is clicked until another div is clicked.

[CODE]
<html>
<head>
<script>
function my_click(clicked_id)
{
//alert("hg");
var idName = ""+clicked_id;
//alert(idName);
//var index = idName.indexOf("-");
//var roomNumber = idName.substring(index+1);
//getInfoByRoom(roomNumber);
}
</script>

<style type="text/css">
body {color:#ccccff;}
#wrap{
position:relative;
z-index:0;
width:100px;
height:100px;
top:0px;
left:0px;
background: url(http://vtour.dev4.webenabled.net/images/test/black.jpg)

}

#spot1:hover{
background: url(http://vtour.dev4.webenabled.net/images/test/red.jpg) no-repeat;
}
#spot1{
position:absolute;
width:50px;
height:50px;
top:0px;
left:0px;
background: url(http://vtour.dev4.webenabled.net/images/test/red.jpg)
visibility:hidden;
}
#spot2:hover{
background: url(http://vtour.dev4.webenabled.net/images/test/purple.jpg) no-repeat;
}
#spot2{
position:absolute;
width:50px;
height:50px;
top:0px;
left:50px;
background: url(http://vtour.dev4.webenabled.net/images/test/purple.jpg)
visibility:hidden;
}
#spot3:hover{
background: url(http://vtour.dev4.webenabled.net/images/test/green.jpg) no-repeat;
}
#spot3{
position:absolute;
width:50px;
height:50px;
top:50px;
left:50px;
background: url(http://vtour.dev4.webenabled.net/images/test/green.jpg)
visibility:hidden;
}
#spot4:hover{
background: url(http://vtour.dev4.webenabled.net/images/test/blue.jpg) no-repeat;
}
#spot4{
position:absolute;
width:50px;
height:50px;
top:50px;
left:0px;
background: url(http://vtour.dev4.webenabled.net/images/test/blue.jpg)
visibility:hidden;
}
</style>
</head>
<body>
<div id="wrap">
<div id="spot1" class="sections" onclick="my_click(this.id)"></div>
<div id="spot2" class="sections" onclick="my_click(this.id)"></div>
<div id="spot3" class="sections" onclick="my_click(this.id)"></div>
<div id="spot4" class="sections" onclick="my_click(this.id)"></div>
<div id="display"></div>
</div>
</body> [CODE]

sunfighter · 05-04-2012, 04:32 PM

The # in the tool bar above the text input box will give you the [code] tags.

You can not hover over something that is not there. So I got rid of the big black box and made it with the four divs. Of course I had to set their initial color to black and change it on hover (CSS).

To do a click you do need javascript. I broke that into two sections. One to get rid of any box color that was showing already and two to set the color of the section clicked on.

Hope this is what you wanted. jquery might be a little simpler with a toggle, but I did it so you could see whats going on.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="">
function my_click(clicked_id)
{
document.getElementById('spot1').style.backgroundColor='';
document.getElementById('spot2').style.backgroundColor='';
document.getElementById('spot3').style.backgroundColor='';
document.getElementById('spot4').style.backgroundColor='';

if(clicked_id == 1) document.getElementById('spot1').style.backgroundColor='red';
if(clicked_id == 2) document.getElementById('spot2').style.backgroundColor='purple';
if(clicked_id == 3) document.getElementById('spot3').style.backgroundColor='green';
if(clicked_id == 4) document.getElementById('spot4').style.backgroundColor='blue';
}
</script>

<style type="text/css">
body {color:#ccccff;}
#spot1:hover{
background-color: red;
}
#spot1{
position:absolute;
width:50px;
height:50px;
top:0px;
left:0px;
background-color: black;
}
#spot2:hover{
background-color: purple;
}
#spot2{
position:absolute;
width:50px;
height:50px;
top:0px;
left:50px;
background-color: black;
}
#spot3:hover{
background-color: green;
}
#spot3{
position:absolute;
width:50px;
height:50px;
top:50px;
left:50px;
background-color: black;
}
#spot4:hover{
background-color: blue;
}
#spot4{
position:absolute;
width:50px;
height:50px;
top:50px;
left:0px;
background-color: black;
}
</style>
</head>
<body>
<div id="spot1" class="sections" onclick="my_click('1')"></div>
<div id="spot2" class="sections" onclick="my_click('2')"></div>
<div id="spot3" class="sections" onclick="my_click('3')"></div>
<div id="spot4" class="sections" onclick="my_click('4')"></div>
<div id="display">Some Text</div>

</body>
</html>

We start with a box colored black and change it's color upon hover or when we click it. The hover is temporary and the click is permanent.

baybook · 05-07-2012, 03:15 AM

Thank you. I will try to make this a function and test for my use.

I appreciate iy since it seems I was heading in the wrong direction.

Quote:

Originally Posted by sunfighter

The # in the tool bar above the text input box will give you the [code] tags.

You can not hover over something that is not there. So I got rid of the big black box and made it with the four divs. Of course I had to set their initial color to black and change it on hover (CSS).

To do a click you do need javascript. I broke that into two sections. One to get rid of any box color that was showing already and two to set the color of the section clicked on.

Hope this is what you wanted. jquery might be a little simpler with a toggle, but I did it so you could see whats going on.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="">
function my_click(clicked_id)
{
document.getElementById('spot1').style.backgroundColor='';
document.getElementById('spot2').style.backgroundColor='';
document.getElementById('spot3').style.backgroundColor='';
document.getElementById('spot4').style.backgroundColor='';

if(clicked_id == 1) document.getElementById('spot1').style.backgroundColor='red';
if(clicked_id == 2) document.getElementById('spot2').style.backgroundColor='purple';
if(clicked_id == 3) document.getElementById('spot3').style.backgroundColor='green';
if(clicked_id == 4) document.getElementById('spot4').style.backgroundColor='blue';
}
</script>

<style type="text/css">
body {color:#ccccff;}
#spot1:hover{
background-color: red;
}
#spot1{
position:absolute;
width:50px;
height:50px;
top:0px;
left:0px;
background-color: black;
}
#spot2:hover{
background-color: purple;
}
#spot2{
position:absolute;
width:50px;
height:50px;
top:0px;
left:50px;
background-color: black;
}
#spot3:hover{
background-color: green;
}
#spot3{
position:absolute;
width:50px;
height:50px;
top:50px;
left:50px;
background-color: black;
}
#spot4:hover{
background-color: blue;
}
#spot4{
position:absolute;
width:50px;
height:50px;
top:50px;
left:0px;
background-color: black;
}
</style>
</head>
<body>
<div id="spot1" class="sections" onclick="my_click('1')"></div>
<div id="spot2" class="sections" onclick="my_click('2')"></div>
<div id="spot3" class="sections" onclick="my_click('3')"></div>
<div id="spot4" class="sections" onclick="my_click('4')"></div>
<div id="display">Some Text</div>

</body>
</html>

We start with a box colored black and change it's color upon hover or when we click it. The hover is temporary and the click is permanent.

baybook · 05-07-2012, 03:49 AM

One last. I'm wondering if it is possible to use a variable in

document.getElementById(idName).style.background="url(somevariablename) no-repeat";

sunfighter · 05-07-2012, 03:28 PM

All you have to do is play with things to see if they work, but this one is complicated.

Code:

<script type="text/javascript">
function new_bkgrnd(){
	var stuff = 'images/right_border.png';
	document.getElementById('idName').style.backgroundImage = "url("+stuff+")";
	document.getElementById('idName').style.backgroundRepeat = "no-repeat";
}
</script>

May I suggest you spend some time here: http://www.w3schools.com/js/default.asp