DHTML Popups Explained

[ciprian.dosoftei]

Hello,

I just finished a tutorial website regarding the development of DHTML
popups. The site features several examples with downloadable samples.
It also feature more complex effects like drop-down popups, fade
in/out, slide in etc.

The URL is: http://dhtmlpopups.webarticles.org/

I hope you will find the information useful. Any feedback is welcomed
:)

Thanks,
Ciprian

[Randy Webb]

ci**************@gmail.com said the following on 9/4/2006 8:25 AM:

Hello,

I just finished a tutorial website regarding the development of DHTML
popups. The site features several examples with downloadable samples.
It also feature more complex effects like drop-down popups, fade
in/out, slide in etc.

The URL is: http://dhtmlpopups.webarticles.org/

I hope you will find the information useful. Any feedback is welcomed
:)

<quote>
The first issue is that now the popup cannot be closed
</quote>

That is a trivial problem to fix. You simply add an "X" image with an
onclick that does a this.parentNode.style.display="hidden"

But, all in all, this site is a better example of in window popups:

<URL: http://www.litotes.demon.co.uk/js_info/pop_ups.html>
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[Matt Kruse]

ci**************@gmail.com wrote:

I just finished a tutorial website regarding the development of DHTML
popups. The site features several examples with downloadable samples.
It also feature more complex effects like drop-down popups, fade
in/out, slide in etc.
The URL is: http://dhtmlpopups.webarticles.org/
I hope you will find the information useful. Any feedback is welcomed

I just skimmed it, but I have a couple comments:

>document.getElementById("mypopup").style.top = topOffset + "px";
document.getElementById("mypopup").style.left = leftOffset + "px";
document.getElementById("mypopup").style.displa y = "block";

Especially in code where execution speed is important, doing repeated calls
to document.getElementById is very wasteful. Instead, get a reference to the
object in a local variable.

>var ie = document.all;
var nn6 = document.getElementById &&! document.all;

This just screems out "bad code". I can assure you that the existence of
document.all does not mean the browser is IE.
See http://www.jibbering.com/faq/faq_not...tect.html#bdOI

>The same note goes for dropdown lists (<select>) in HTML forms. Disabling
their visibility is the only workaround I'm aware of at the moment.

Placing an iframe object behind the popup will hide controls that don't
honor z-index values.

See also my example page for in-page div popups:
http://www.javascripttoolbox.com/lib/popup/example.php

I'm working on the code now to get rid of memory leaks (it currently leaks
terribly in IE due to closures and DOM objects) but it will soon be ready as
a stand-alone lib to easily and quickly create these kinds of popups.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com

[Ciprian]

Thanks Randy and Matt for your feedback and suggestions, I was aware of
most of them but wanted to put emphasis strictly on the topic, however,
after second thoughts there I have better options to express my points
and to keep the code optimized, not just educational.

Randy, just a single note:

</quote>
The first issue is that now the popup cannot be closed
</quote>

That is a trivial problem to fix. You simply add an "X" image with an
onclick that does a this.parentNode.style.display="hidden"

If you'd have checked the next lesson you'd realised where was my
point. I split the topic in several parts, focusing separately in each
lesson (and closing the popup was explained few clicks away).

Thanks again for your constructive feedback and I'll take your
suggestions in account ASAP,
Ciprian

[RobG]

ci**************@gmail.com wrote:

Hello,

I just finished a tutorial website regarding the development of DHTML
popups. The site features several examples with downloadable samples.
It also feature more complex effects like drop-down popups, fade
in/out, slide in etc.

The URL is: http://dhtmlpopups.webarticles.org/

I hope you will find the information useful. Any feedback is welcomed
:)

The font and background colours for you code blocks makes the code very
hard to read.

You could consider making the pop-up a single object with all the
functions added to its prototype as methods.

--
Rob