By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,636 Members | 1,189 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,636 IT Pros & Developers. It's quick & easy.

DHTML Popups Explained

P: n/a
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

Sep 4 '06 #1
Share this Question
Share on Google+
4 Replies


P: n/a
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/
Sep 4 '06 #2

P: n/a
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
Sep 4 '06 #3

P: n/a
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

Sep 4 '06 #4

P: n/a
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
Sep 4 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.