Tuesday, April 11th, 2006
DOMInclude: Replacing pop-ups
Category: JavaScript
, Library
DOMInclude is a library that allows you to add inline dynamic includes of content rather than using window popups.
Pop-up windows are a pain for both the developer and the users. Often enough a page needs to link to a terms and conditions document and as the client does not want the user to leave the page you are asked to implement them in a pop-up.
The problem with this are technical and psychological:
- years of unsolicited pop-up windows have conditioned users to immediately close windows when they open
- the same reason and security concerns made people install pop-up blocker software and browsers to include pop-up blocking options, and depending on their configuration these may even block your “friendly pop-ups�.
Usage
Simply insert DOMinclude in the head of your document with these two script tags:
HTML:
Add a class called DOMpop to each link you want to turn into a popup like the ones shown here.
HTML:
-
-
<a href="saywhat.jpg" class="DOMpop">photo of a confused puppy</a>
-
Alter the configuration by editing the DOMinclude_config.js file:
CSS:
-
-
DOMinccfg={
-
// CSS classes
-
// trigger DOMinclude
-
triggerClass:'DOMpop',
-
// class of the popup
-
popupClass:'popup',
-
// class of the link when the popup
-
// is open
-
openPopupLinkClass:'popuplink',
-
// text to add to the link when the
-
// popup is open
-
displayPrefix:'Hide ',
-
// filter to define which files should
-
// not open in an iframe
-
imagetypes:'jpg|JPG|JPEG|jpeg|gif|GIF|png|PNG',
-
// dimensions of the popup
-
frameSize:[320,180]
-
}
-
4.2 rating from 42 votes
This has been done several times now, but I do like this implementation. Very slick way to confgure the options and I like the unobtrusive adding to the links via a class name. Though I fear the day that malacious ad developers start learning of these libraries.
[...] Via Ajaxian, descubro DOMinclude, una curiosa aplicación para crear pop-ups dinámicos. [...]
Wow, some good copy and paste here. Oh, cheeky, you even hotlinked my images :-)
Rich, I think it is pretty naive of us to think we are ahead of advertisers who really want to bombard you with advertising. I am quite sure they had this idea before me. However, you can use it for good aswell, and I hope people will.
I think all of these neat little scripts need to find their way into some framework like Scriptaculous does with it’s effects. Cool though.
Brian, I might just do that once I got my book finished. This was actually to be a part of it but then I ditched it as an example as the chapter was already 50 pages :-)
This does not seem to work in Windows IE
Works here in IE7 and IE6, and I am behind a brutal proxy server? Can it be you have IFRAME blocking software running?
Works for me in Firefox, Safari, and IE 6, but not IE 5.5 Mac (I doubt it would take much to get it working in it, but I didn’t look closely at the code). Simple and intuitive, though, but I would suggest the ability to set a default size and then allow people to add additional classes to specify the size of the iframe with their own CSS.
OK it works now.
I may have been usuing the iframeblock page before.
What’s the deal with the iframeblock. Call me ignorant on this one but what’s a big reason to block iframes?
Brian: the main reason people have to block iFrames is that “popup-vandalists” have been using them for “ages” to bypass normal popup blockers.
More on the subject; that looks like an interesting library, and I believe I’ll need to add it on my “do follow progress on this”-list.
And then totally off the subject; would someone happen to have a pointer or two for me on how to interact with iFrames on Safari (Mac) and Konqueror (Linux)? It appears that the way I’ve done it in the past (var f = window.frames["foobar"];) doesn’t work on those browsers though it works just great on FF, IE and Opera. Major problem is that I don’t have the said browsers to test with, and am thus forced to relying on customer feedback on the issue, that can be - to say the least - misleading sometimes.
test
It works after two, three times in IE6-7, not the first times.
I’m not using anything but clean browsers.
It’s just a bug - fix it.
Hmm, first of all, who are you to *order* people to fix things given out for free?
Secondly, can anybody else confirm this? I tried the script on about 20 different computers and settings so far (yes, also different connections) and never had that problem. Could it be that you are the impatient type and you didn’t wait for the image or the documents to load and your connection is slow for some reason? The second and third time indicates that it is a caching issue.
chris : tested on IE5,5.5 & 6 - images/iframes not loading properly on 5, but on 5.5 & 6 all is fine.
Of course, I meant IE 5.3.2 Mac, not 5.5. Not that it matters–you can’t even download it from the Microsoft website anymore. Huzzah.
[...] DOMInclude: Replacing pop-ups DOMInclude provides javascript replacement for popup windows. “DOMInclude is a library that allows you to add inline dynamic includes of content rather than using window popups.” The effect is pretty cool. (tags: javascript webdev) [...]
Let me preface this by saying I’m not a full time programmer, so sorry if I sould like a noob. Can this script be used on a mouse over instead of having to click on the link? Thanks in advance for the help.