TalkPHP - pop up box

TalkPHP (http://www.talkphp.com/forums.php)

- Javascript, AJAX, E4X (http://www.talkphp.com/javascript-ajax-e4x/)

- - pop up box (http://www.talkphp.com/javascript-ajax-e4x/2434-pop-up-box.html)

freenity

03-07-2008 10:39 PM

pop up box

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 (Post 12127)

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 (Post 12124)

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???

this code not work at IE6+

Please help me , repair it:-D

Wildhoney

12-06-2008 02:26 PM

How about specifying the type? Does that help?

html4strict Code:

<style type="text/css">

kids0407

12-06-2008 03:26 PM

FF that work
but IE 6, it not work :'-(:'-(:'-(

sketchMedia

12-06-2008 04:28 PM

IE doesnt support :hover pseudo class on anything other than a link.

All times are GMT. The time now is 01:50 PM.