Script to do a simulated popup window with divs

[tshad]

I am trying to find a javascript that will allow me to show and hide a named
div that is a just a styled window.

I don't want to open a window just show a div (that looks like a window)
then close it when the user clicks anywhere on the window. Maybe anywhere
on the screen but the popup but that is not necessary. Something simple.

The code I have is something like:

<div id="pnlPractitioners" class="popupControl">
<span id="dlResults"
style="font-weight:bold;text-decoration:underline;">Practitioners:</span>
<div class="prac">
<span id="Name">Peter J. Helton DO</span>
</div>
</div>

The css for popupControl is:

..popupControl
{
background-color: White;
position: absolute;
visibility: hidden;
border: solid 1px #000;
padding: 7px;
}

I originally tried to use Ajax to do this but it was gobbling up my onclick
event so I want to just do a quick open and close.

Thanks,

Tom

[tshad]

I can almost get this to work.

I have an event that shows the Div and another that hides it.

I am trying set a timer for 10 seconds or until the user presses the
mousedown.

The problem is that now it goes directly to the HidePopup function instead
of waiting for the 10 seconds.

function ShowPopup(object)
{
var prefix =
object.id.substring(0,object.id.lastIndexOf("_")+1 );
var theObject = prefix + "pnlPractitioners"
var popup = document.getElementById(theObject);
var temp = popup.style;
var temp2 = temp.visibility;
temp.visibility = 'visible';

document.addEventListener("mousedown",HidePopup(th eObject),true);
setTimeout("HidePopup('" + theObject + "');",10000);

return;
}

function HidePopup(theObject)
{
document.removeEventListener("mousedown",HidePopup (theObject),true);
var popup = document.getElementById(theObject);
var temp = popup.style;
var temp2 = temp.visibility;
temp.visibility = 'hidden';
}

Am I missing something here?

Thanks,

Tom
"tshad" <tf*@dslextreme.comwrote in message
news:kS***************@fe097.usenetserver.com...

>I am trying to find a javascript that will allow me to show and hide a
named div that is a just a styled window.

I don't want to open a window just show a div (that looks like a window)
then close it when the user clicks anywhere on the window. Maybe anywhere
on the screen but the popup but that is not necessary. Something simple.

The code I have is something like:

<div id="pnlPractitioners" class="popupControl">
<span id="dlResults"
style="font-weight:bold;text-decoration:underline;">Practitioners:</span>
<div class="prac">
<span id="Name">Peter J. Helton DO</span>
</div>
</div>

The css for popupControl is:

.popupControl
{
background-color: White;
position: absolute;
visibility: hidden;
border: solid 1px #000;
padding: 7px;
}

I originally tried to use Ajax to do this but it was gobbling up my
onclick event so I want to just do a quick open and close.

Thanks,

Tom

[Captain Paralytic]

On 16 May, 03:05, "tshad" <[e-mail]:

I am trying to find a javascript that will allow me to show and hide a named
div that is a just a styled window.

How hard are you "trying"?

A google search for
popup divs
lists loads.

Here is one of my favourites:
http://www.dynamicdrive.com/dynamicindex11/abox2.htm

[Henry]

On May 16, 9:57 am, "tshad" wrote:
<snip>

The problem is that now it goes directly to the HidePopup function
instead of waiting for the 10 seconds.

function ShowPopup(object)
{
var prefix =
object.id.substring(0,object.id.lastIndexOf("_")+1 );
var theObject = prefix + "pnlPractitioners"
var popup = document.getElementById(theObject);
var temp = popup.style;
var temp2 = temp.visibility;
temp.visibility = 'visible';

document.addEventListener("mousedown",HidePopup(th eObject),true);

^^^^^^^^^^^^^^^^^^^
The - addEventListener - method is expecting a reference to a function
as its second argument but your - HidePopup - function does not return
a reference to a function (it returns the default - undefined -
value).

<snip>

Tom"tshad" wrote in message:

<snip>

Top-posting (and failing to suitably trim/edit quoted material) will
not encourage people to help you on Usenet.

[Thomas 'PointedEars' Lahn]

tshad wrote:

I have an event that shows the Div and another that hides it.

You have an event _listener_ triggered by an event.

I am trying set a timer for 10 seconds or until the user presses the
mousedown.

The problem is that now it goes directly to the HidePopup function instead
of waiting for the 10 seconds.

[...]
document.addEventListener("mousedown",HidePopup(th eObject),true);

^^^^^^^^^^^^^^^^^^^^

setTimeout("HidePopup('" + theObject + "');",10000);
[...]

Am I missing something here?

You are calling the method before it is time to call it. You should change
the above into this at least:

var f = function(e) { HidePopup(theObject); };
document.addEventListener("mousedown", f, true);
window.setTimeout(f, 10000);

Are you sure you want an capturing event (`true'), which is incompatible to
the MSHTML DOM?

http://www.w3.org/TR/DOM-Level-2-Eve...ts-EventTarget

`HidePopup' should be `hidePopup' as it does not refer to a constructor.

All your method calls have to be feature-tested at runtime before:

http://www.jibbering.com/faq/faq_not...er_detect.html
Fewer spaces for indentation when posting would have been nice.
PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann