looking to reproduce div popup behavior

I'm looking to reproduce the div popup behavior like vBulletin's search
link:

http://www.vbulletin.com/forum/

I've looked at many examples, but most are complicated and/or convoluted
menu systems.

I simply want to enable a small div window containing a form with a text
input field and submit button. If the user clicks outside of the div window,
it closes.

I have already created the div containing the form. The div's default style
definition contains 'display:none' to initially hide it.

I'm now looking for a JavaScript function to enable the aforementioned
functionality.

Can someone recommend an existing function or at least point me to an
example? Thanks!

re: looking to reproduce div popup behavior

Hi,

Unless you want to get into some event listener stuff it is probably
easier just to have a close button inside your form to make the div
disappear.

<div id="my_popup_div" style="display:none;">
form stuff here
<span style="cursor:pointer;"
onclick='document.getElementById("my_popup_div").s tyle.display="none";'>close</span>
</div>
<span style="cursor:pointer;"
onclick='document.getElementById("my_popup_div").s tyle.display="block";'>open</span>

Is that good enough? If not, are you using any JavaScript libraries
that have some event listener stuff? Yahoo! UI event library?

Peter

re: looking to reproduce div popup behavior

<petermichaux@gmail.com> wrote in message
news:1145000635.775384.226520@g10g2000cwb.googlegr oups.com...[color=blue]
> Hi,
>
> Unless you want to get into some event listener stuff it is probably
> easier just to have a close button inside your form to make the div
> disappear.
>
> <div id="my_popup_div" style="display:none;">
> form stuff here
> <span style="cursor:pointer;"
>[/color]
onclick='document.getElementById("my_popup_div").s tyle.display="none";'>clos
e</span>[color=blue]
> </div>
> <span style="cursor:pointer;"
>[/color]
onclick='document.getElementById("my_popup_div").s tyle.display="block";'>ope
n</span>[color=blue]
>
> Is that good enough? If not, are you using any JavaScript libraries
> that have some event listener stuff? Yahoo! UI event library?
>
> Peter
>[/color]

This should get me particially there--thanks.

re: looking to reproduce div popup behavior

"Bosconian" <bosconian@planetx.com> wrote in message
news:6JSdnQGEpvnS3qLZnZ2dnUVZ_tqdnZ2d@comcast.com. ..[color=blue]
> I'm looking to reproduce the div popup behavior like vBulletin's search
> link:
>
> http://www.vbulletin.com/forum/
>
> I've looked at many examples, but most are complicated and/or convoluted
> menu systems.
>
> I simply want to enable a small div window containing a form with a text
> input field and submit button. If the user clicks outside of the div[/color]
window,[color=blue]
> it closes.
>
> I have already created the div containing the form. The div's default[/color]
style[color=blue]
> definition contains 'display:none' to initially hide it.
>
> I'm now looking for a JavaScript function to enable the aforementioned
> functionality.
>
> Can someone recommend an existing function or at least point me to an
> example? Thanks!
>
>[/color]

This is just a quick follow-up to my original post.

I have discovered a few useful links that provide information regarding
dynamic popups.

The first is probably the best known and most popular, overlib:

http://www.bosrup.com/web/overlib/

The second is a simple and limited example, but provides the core
functionality without the bloat:

http://www.dynamicdrive.com/dynamici...tmltooltip.htm

The third provides the same features as overlib, by weighs in at a fraction
of the size:

http://migoicons.tripod.com/dhtips.htm

re: looking to reproduce div popup behavior

Bosconian said the following on 4/21/2006 3:55 PM:[color=blue]
> "Bosconian" <bosconian@planetx.com> wrote in message
> news:6JSdnQGEpvnS3qLZnZ2dnUVZ_tqdnZ2d@comcast.com. ..[color=green]
>> I'm looking to reproduce the div popup behavior like vBulletin's search
>> link:
>>
>> http://www.vbulletin.com/forum/
>>
>> I've looked at many examples, but most are complicated and/or convoluted
>> menu systems.
>>
>> I simply want to enable a small div window containing a form with a text
>> input field and submit button. If the user clicks outside of the div[/color]
> window,[color=green]
>> it closes.
>>
>> I have already created the div containing the form. The div's default[/color]
> style[color=green]
>> definition contains 'display:none' to initially hide it.
>>
>> I'm now looking for a JavaScript function to enable the aforementioned
>> functionality.
>>
>> Can someone recommend an existing function or at least point me to an
>> example? Thanks!
>>
>>[/color]
>
> This is just a quick follow-up to my original post.
>
> I have discovered a few useful links that provide information regarding
> dynamic popups.
>
> The first is probably the best known and most popular, overlib:
>
> http://www.bosrup.com/web/overlib/
>
> The second is a simple and limited example, but provides the core
> functionality without the bloat:
>
> http://www.dynamicdrive.com/dynamici...tmltooltip.htm
>
> The third provides the same features as overlib, by weighs in at a fraction
> of the size:
>
> http://migoicons.tripod.com/dhtips.htm[/color]

And this one:

<URL: http://www.litotes.demon.co.uk/js_info/pop_ups.html >

Beats them all.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

re: looking to reproduce div popup behavior

"Randy Webb" <HikksNotAtHome@aol.com> kirjoitti viestissä
news:Jdadnaz6YaQX19TZnZ2dnUVZ_vydnZ2d@comcast.com. ..

....[color=blue]
> And this one:
>
> <URL: http://www.litotes.demon.co.uk/js_info/pop_ups.html >
>
> Beats them all.[/color]

....

Thanks for the link. It is an interesting set of pages. At first glance I
did not find any license agreement, download instructions, documentation of
the code. Is this supposed to be ready to be copied and used by anyone for
any purpose?

re: looking to reproduce div popup behavior

optimistx said the following on 4/22/2006 2:11 AM:[color=blue]
> "Randy Webb" <HikksNotAtHome@aol.com> kirjoitti viestissä
> news:Jdadnaz6YaQX19TZnZ2dnUVZ_vydnZ2d@comcast.com. ..
>
> ....[color=green]
>> And this one:
>>
>> <URL: http://www.litotes.demon.co.uk/js_info/pop_ups.html >
>>
>> Beats them all.[/color]
>
> ....
>
> Thanks for the link. It is an interesting set of pages. At first glance I
> did not find any license agreement, download instructions, documentation of
> the code. Is this supposed to be ready to be copied and used by anyone for
> any purpose?[/color]

You would have to ask Richard Cornford about that, it is his code.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/