Problem with divs hidden/visibility

[_sese_]

I need some help from you people

What i'm looking for is a solution for making a div visible after hover on graphic button, which is somewhere else on the site.

Then after hover over graphic when the div will appear on the screen. I need this div to stay on it (links with graphics inside div) so i can choose a link.
after that i need this div to change its state to hidden again.
also I need this div to change state to hidden when cursor will go off the div,without any action iside the div.

so my question is:
is it even possible ?

I'd be thankfull if you could give me some advice on this or show me where i can find resources to read about the problem.

[votter]

So in short you are trying to do this:

Have an image
When you hover over an image, a div appears, in which links are shown.

[_sese_]

yes:)

but it's part of the case.
what is more important is that i would like this div to stay visible after hover as long as one of the folowing will happen:

1. action inside div (link activation)
2. leaving div without action (taking cursor off the div)
3. hovering on the graphic again (same graphic that set the div to visible)

[votter]

Why would you need the div to stay open after a link is clicked?

[_sese_]

no no

the div stays open until one of this three events will occur.
so it means that the div disappears after clicking on link inside div.

[votter]

Oh, I understand now. lol

Yes, that would be possible.

You'd need to call a function on hover, which would display the div. Then you'd need a function to close it for the onclick of a link, and mouseout, ect. If that makes sense?

[_sese_]

no sense for me yet :D

I'm new to coding. So if you could specify..?

does it mean that i have to use "js"? or can it be done in css alone?

if you could send me somewhere where i could read or look at the similiarcase??

i will appreciate that

[votter]

http://snipplr.com/view/3624/show-floating-div-near-cursor-on-mouseover-hide-on-mouseout/

Yes, it would need to use javascript. Here is an example I found if this is sort of what you mean.

[_sese_]

thanks

i'll check it later on and post here if i found what i needed.

now i need some sleeeeep ;)

[votter]

Ok, sleep well. :)

[MrEnder]

My recent project is working off the technology being asked for here

except I use onclicks. Would be very easy to look at my code and change it to your needs.

feel free to ask any questions about it

http://opentech.durhamcollege.ca/~intn2201/brittains/labs/

it will even fade in the stuff.

var browser=navigator.appName;
var frameWidth = "";
var frameHeight = "";
var bgImage = "";
var desktop = "";
var menuBar = "";
var menuBarButton = "";
var menuBarContainer = "";
var menuBarClock = "";
var action1 = "";
var action2 = "";
var action3 = "";
var d = new Date();
var year = d.getFullYear();
var date = "";
var menuCheck = false;
var si = "";
var io = "";
var windowT = "";

function requestWindow(url) {

windowOpen()

if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}

else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
document.getElementById('action1').innerHTML=xmlhttp.responseText;

}

function requestDesktop(url) {

if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}

else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.open("GET",url,false);
xmlhttp.send(null);
document.getElementById('desktop').innerHTML=xmlhttp.responseText;

}

requestDesktop('desktop.php');

function reset() {

if (self.innerWidth) {
frameWidth = self.innerWidth;
frameHeight = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
frameWidth = document.documentElement.clientWidth;
frameHeight = document.documentElement.clientHeight;
}
else if (document.body) {
frameWidth = document.body.clientWidth;
frameHeight = document.body.clientHeight;
}

bgImage = document.getElementById("bgImage");
desktop = document.getElementById("desktop");
menuBar = document.getElementById("menuBar");
menuBarButton = document.getElementById("menuBarButtonSpan");
menuBarContainer = document.getElementById("menuBarContainer");
menuBarClock = document.getElementById("menuBarClock");
action1 = document.getElementById("action1");
action2 = document.getElementById("action2");
action3 = document.getElementById("action3");
desktopButton = document.getElementById("menuBarButtonShowDesktopInput");

if(browser!="Netscape") {

bgImage.style.top = 8 + "px";
bgImage.style.left = 8 + "px";
desktop.style.top = 8 + "px";
desktop.style.left = 8 + "px";
menuBar.style.top = (frameHeight - 45) + "px";
menuBar.style.left = 8 + "px";
desktopButton.style.width = "24px";

}

bgImage.style.width = (frameWidth - 21) + "px";
bgImage.style.height = (frameHeight - 51) + "px";
desktop.style.width = (frameWidth - 20) + "px";
desktop.style.height = (frameHeight - 50) + "px";
menuBar.style.width = (frameWidth - 20) + "px";
menuBar.style.top = (frameHeight - 40) + "px";
menuBarClock.style.left = (frameWidth - 100) + "px";
t=setTimeout('reset()',500);

}

function menuSize() {


action3.style.backgroundColor = "black";
action3.style.color = "#C0C0FF";
action3.style.border = "1px solid #C0C0FF";
action3.style.width = "250px";
action3.style.height = "400px";
action3.style.padding = "5px";

if(browser!="Netscape") {

action3.style.top = (frameHeight - 452) + "px";
var winCheck = frameWidth - 1651;
if(winCheck<=0) {

action3.style.left = 8 + "px";

}
else {

action3.style.left = (frameWidth - 1672) + "px";

}

}
else {

action3.style.top = (frameHeight - 452) + "px";
var winCheck = frameWidth - 1672;
if(winCheck<=0) {

action3.style.left = 8 + "px";

}
else {

action3.style.left = (frameWidth - 1672) + "px";

}

}

//menuT=setTimeout('menuSize()',500);

}
function menu() {

if(menuCheck==false) {

var lab1 = "'lab1.php'";
var lab2 = "'lab2.php'";
var lab3 = "'lab3.php'";
var lab4 = "'lab4.php'";
var lab5 = "'lab5.php'";
var lab6 = "'lab6test.php'";
menuSize();
action3.innerHTML = '<input type="button" class="menuButtons" id="menuButton1" value="Lab1" onclick="requestWindow(' + lab1 + ')" /><input type="button" class="menuButtons" id="menuButton2" value="Lab2" onclick="requestWindow(' + lab2 + ')" /><input type="button" class="menuButtons" id="menuButton3" value="Lab3" onclick="requestWindow(' + lab3 + ')" /><input type="button" class="menuButtons" id="menuButton4" value="Lab4" onclick="requestWindow(' + lab4 + ')" /><input type="button" class="menuButtons" id="menuButton5" value="Lab5" onclick="requestWindow(' + lab5 + ')" /><input type="button" class="menuButtons" id="menuButton6" value="Lab6" onclick="requestWindow(' + lab6 + ')" /><input type="button" class="menuButtons" id="menuButtonShowDesktop" value="Show Desktop" onclick="showDesktop()" />';
menuCheck=true;

}
else if(menuCheck==true) {

action3.style.backgroundColor = "transparent";
action3.style.border = "0px solid #C0C0FF";
action3.style.width = "0px";
action3.style.height = "0px";
action3.style.padding = "0px";
action3.style.top = "0px";
action3.style.left = "0px";
action3.innerHTML = "";
window.clearTimeout(menuT);
menuCheck=false;

}

}

function clearMenu() {

action3.style.backgroundColor = "transparent";
action3.style.border = "0px solid #C0C0FF";
action3.style.width = "0px";
action3.style.height = "0px";
action3.style.padding = "0px";
action3.style.top = "0px";
action3.style.left = "0px";
action3.innerHTML = "";
menuCheck=false;
//menuT=setTimeout('clearMenu()',500);

}
function showDesktop() {

clearMenu();
action1.style.backgroundColor = "transparent";
action1.style.border = "0px solid #C0C0FF";
action1.style.width = 0 + "px";
action1.style.height = 0 + "px";
action1.style.left = 0 + "px";
action1.style.top = 0 + "px";
window.clearInterval(si);
window.clearTimeout(windowT);

}
function windowSize() {

action1.style.backgroundColor = "black";
action1.style.color = "#C0C0FF";
action1.style.border = "1px solid #C0C0FF";
action1.style.width = (frameWidth - 375) + "px";
action1.style.height = (frameHeight - 200) + "px";
action1.style.left = (frameWidth - 1500) + "px";
var winCheck1 = (frameWidth - 1500);
if(winCheck1<=0) {

action1.style.left = (frameWidth - 850) + "px";

}
winCheck1 = (frameWidth - 850);
if(winCheck1<=0) {

action1.style.left = (frameWidth - 300) + "px";
action1.style.width = (frameWidth - 50) + "px";

}
action1.style.top = (frameHeight - 750) + "px";
var winCheck2 = (frameHeight - 750);
if(winCheck2<=0) {

action1.style.top = (frameHeight - 500) + "px";

}
windowT=setTimeout('windowSize()',500);

}

function windowOpen() {

windowSize()
document.getElementById("action1").innerHTML = '';
action1.style.filter = "alpha(opacity=" + (0*100) + ")";
action1.style.opacity = 0;

var si = setInterval(function() {

io+=0.05;

action1.style.filter = "alpha(opacity=" + (io*100) + ")";
action1.style.opacity = io;

}, 100);

io = 0;

if(io==1) {

window.clearInterval(si);

}

clearMenu();

}

it basically works off



document.getElementById("someID").innerHTML = "some html here";



and changing your CSS to make it visible like this



document.getElementById("someID").style.backgroundColor: "transparent";



picture suddenly you remove the text from an area... the background becomes transparent and the boarders disapear... but when your mouse hovers over it presto the code puts it all back.
thats what that there code does.

[_sese_]

Votter thanks for link but it wasn't exactly what i needed.
js under this link just shows div on mouseover but you can't click on anything iside the div as it disapperas when you mouseout.
anyway thanks

mr.Ender i'm checking your solution just now. will post results here.

[MrEnder]

cool

[R4N_S_S]

you want to toggle the functionality on and off with mouseover and mouseout and it will work as you desire

[R4N_S_S]

<script type="text/javascript">
function toggle5(showHideDiv, switchImgTag) {
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchImgTag);
if(ele.style.display == "none") {
ele.style.display = "block";
imageEle.innerHTML = '<img src="image1.gif">';
}
else {
ele.style.display = "none";
imageEle.innerHTML = '<image2.gif">';
}
}
</script>

<a
onmouseover="ShowContent('HotelContent'); return true;"
onmouseout="HideContent('HotelContent'); return true;"
href="javascript:ShowContent('HotelContent')">
<div class="HotelButton"></div>
</a>


<div id="HotelContent" style="display:none;">
<p>
InSERT YOUR CONTENT HERE
</p>
</div>

[R4N_S_S]

obviosuly you need to add styles and additional html or divs around the elements to get it to look how you want but the functionality is there

[votter]

Yeah, I know. I just posted an example you could work from.

[_sese_]

MrENDER:
thanks for help. but your solution is too complicated for me.
I'm just a Humble begginer ;) anyway thanks!!

R4N S S:
thanks for help:) could you help memore ;)?

my HTMl:
<!DOCTYPE html>
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div test</title>
<link href="divtest.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section id="main">

<script type="text/javascript">
function toggle5(showHideDiv, switchImgTag) {
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchImgTag);
if(ele.style.display == "none") {
ele.style.display = "block";
imageEle.innerHTML = '<img src="image1.gif">';
}
else {
ele.style.display = "none";
imageEle.innerHTML = '<image2.gif">';
}
}
</script>
<a
onmouseover="ShowContent('HotelContent'); return true;"
onmouseout="HideContent('HotelContent'); return true;"
href="javascript:ShowContent('HotelContent')">
<div class="HotelButton">testing</div>
</a>
<div id="HotelContent" style="display:none;">
<h2>social</h2>
<ul>
<li><a href="http://delicious.com/" rel="me">delicious</a></li>
<li><a href="http://digg.com/users/" rel="me">digg</a></li>
<li><a href="http://facebook.com/" rel="me">facebook</a></li>
<li><a href="http://www.lastfm.es/user/" rel="me">last.fm</a></li>
<li><a href="http://website.com/feed/" rel="alternate">rss</a></li>
<li><a href="http://twitter.com/" rel="me">twitter</a></li>
</ul>
</div>
</section>
</body>
</html>


and CSS:
@charset "utf-8";
/* HTML5 tags */
section {
display: block;
}
/* Body */
body{
background: #000;
color: #945c13;
font-size: 150%;
text-align: left;
}

/*Layout*/
body{
margin:auto;
width:900px;
}
section{
float:left;
position:relative;
background-color:#099;
width:665px;
height:453px;
top:68px;
left:85px;
}
#HotelContent{
float:right;
position:relative;
background-color:#CC0;
width:400px;
height:350px;
top:32px;
left:65px;
}
/*Link*/
a{
display:block;
background-repeat:none;
}



where I'm wrong?

what are these *.gif 's in your JS script?

regards.

[_sese_]

still need help with this one :(

have no ideawhere it is wrong?