pop up box

freenity · 03-07-2008, 10:39 PM

Hi. I am making a test page to see how to make a pop up box (div) that will appear when a the cursor is over other div and disappear when it is not over this div. The appearing is quite easy, just made it with css, when the div2 is hover div1 should be visible.

But the problem is how to determine when the cursor is not over this div.
Of course it could be done with javascript: settinming a function for every 1 sec, to check the mouse position and calculate if it's over the div or not, but I think it's very bad method, I guess there should be something easier...
Any ideas?

TlcAndres · 03-07-2008, 10:43 PM

<div onmouseover="javascript:alert('ello');"> boom! </div>

works

freenity · 03-07-2008, 10:45 PM

no, I meant not alert...
something like a tooltip...
will look for an example and post it here if I find

freenity · 03-07-2008, 10:46 PM

DHTML JavaScript Tooltips

like this one, when you mouse your cursor over the photo.
A personalized div with html in it.. not an alert box

TlcAndres · 03-07-2008, 10:52 PM

Oh - you also want to know the javascript neccesary to make the actual tooltipbox - I got you.

I'd check out DHTML JavaScript Tooltips

haha, beat me to it.

freenity · 03-08-2008, 07:03 PM

ok, I guess some code is needed here:

PHP Code:


			
<style>

#btn1
{
    width: 300px;
    height: 50px;
    position: absolute;
    top: 100px;
    left: 50px;
    background: #eeeeee;
    z-index: 22;
}

#popup
{
    width: 200px;
    height: 200px;
    z-index: 999;
    background: #ee8888;
    border: 1px solid #222222;
    position: relative;
    top: 0px;
    left: 0px;
    visibility: hidden;
}

#btn1:hover #popup
{
    visibility: visible;
}

</style> 


<div id="btn1">
    <div id="popup"></div>
</div>

so when you hover btn1, popup appears. So how do I hide it?? How do I know when the mouse is not over btn1???

DeMo · 03-08-2008, 09:15 PM

Why don't you use JavaScript? It's a lot easier...

HTML Code:

<script type="text/javascript">
function show() {
  document.getElementById("popup").style.display = "block";
}

function hide() {
  document.getElementById("popup").style.display = "none";
}
</script>


<div id="btn1" onmouseover="show()" onmouseout="hide()">
  <div id="popup">content</div>
</div>

Gareth · 03-08-2008, 11:39 PM

Another way, which is in my opinion nicer, is to use the jquery framework to produce tooltips.

Actually, I am going to write a tutorial / article on it now!

Gareth

ubie · 03-09-2008, 07:29 AM

try mootools tooltip .. ^__^

freenity · 03-09-2008, 10:50 AM

Quote:

Originally Posted by DeMo

Why don't you use JavaScript? It's a lot easier...

HTML Code:

<script type="text/javascript">
function show() {
  document.getElementById("popup").style.display = "block";
}

function hide() {
  document.getElementById("popup").style.display = "none";
}
</script>


<div id="btn1" onmouseover="show()" onmouseout="hide()">
  <div id="popup">content</div>
</div>

thanks!
So there is no way to detect the mouseout event only with css??

DeMo · 03-09-2008, 07:58 PM

Quote:

So there is no way to detect the mouseout event only with css??

I guess not.
CSS is to be used only for styling, and not for showing/hiding other elements.

Orc · 03-10-2008, 04:40 AM

No, you can detect the mouse, heres some code to get the position:

Code:

function CursorPosition(e) 
{
	if (!e) e = window.event;
	
    var cursor = {x:0, y:0};
	
	if (!e)
	{
		return cursor;
	}
	
    if (e.pageX || e.pageY) {
        cursor.x = e.pageX;
        cursor.y = e.pageY;
    } 
    else {
        cursor.x = e.clientX + 
            (document.documentElement.scrollLeft || 
            document.body.scrollLeft) - 
            document.documentElement.clientLeft;
        cursor.y = e.clientY + 
            (document.documentElement.scrollTop || 
            document.body.scrollTop) - 
            document.documentElement.clientTop;
    }
    return cursor;
}

// Then you could do
function popup(e)
{

   var pos = CursorPosition(e);
   var popElem = document.getElementById('popup');
   popElem.style.display = "block";
   popElem.style.left = pos.x + '32';
   popElem.style.top = pos.y + '32';
}

Tanax · 03-10-2008, 10:37 AM

Check this out.

mootools demos - Tips

Really easy.

html Code:

<h3>Tips 1</h3>
<img src="/demos/MousewheelCustom/moo.png" alt="mooCow" class="Tips1" title="Tips Title :: This is my tip content" />

javascript Code:

var Tips1 = new Tips($$('.Tips1'));

freenity · 03-10-2008, 10:49 AM

Thanks.
I definitely have to learn some javascript library like mootools or jQuery :)

kids0407 · 12-06-2008, 01:35 PM

Quote:

Originally Posted by freenity

ok, I guess some code is needed here:

PHP Code:


			
<style>



#btn1

{

    width: 300px;

    height: 50px;

    position: absolute;

    top: 100px;

    left: 50px;

    background: #eeeeee;

    z-index: 22;

}



#popup

{

    width: 200px;

    height: 200px;

    z-index: 999;

    background: #ee8888;

    border: 1px solid #222222;

    position: relative;

    top: 0px;

    left: 0px;

    visibility: hidden;

}



#btn1:hover #popup

{

    visibility: visible;

}



</style> 





<div id="btn1">

    <div id="popup"></div>

</div>

so when you hover btn1, popup appears. So how do I hide it?? How do I know when the mouse is not over btn1???