Replace Pop-Ups with dynamic includes using DOMinclude (updated)
Update 25/05/06: DOMinclude now supports only one include window at a time and closing include windows from external files.
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”.
One solution is to use JavaScript to create a new layer with the content of the document when JavaScript is available and simply link to the page when it isn’t.
DOMnclude is a script that does that for you
Following is an example what it does to a normal link when you add a certain CSS class. Enjoy, and kiss those pop-ups good-bye.
Update: Would people who have IFRAMES blocked please test the version that checks for blocked iframes? You should be sent to the page instead of trying to load the page into the layer when you click the “Amber Spyglass” link in the demo page. Please comment below if it works then I will include the fix.
April 11th, 2006 at 2:52 pm
Abril 11, 2006
Via Ajaxian, descubro DOMinclude, una curiosa aplicación para crear pop-ups dinámicos. [Download] [Ejemplo][DOM con Ajax] [...]
May 25th, 2006 at 12:15 pm
June 26th, 2006 at 11:16 am
July 6th, 2006 at 12:00 am
February 20th, 2007 at 4:06 pm
http://www.wait-till [...]
March 27th, 2006 at 4:55 pm
Hi, thanks again for a neat script.
I have a problem with it on Opera though, because I have disabled iframe (I hate iframes, I won’t re-enable them anytime soon).
I think you should at least have some alternate content to indicate what’s going on to marginal users.
I would really like an Ajax version where you could also pull the content from a specific file or from a DB, but that could now be inserted in a simple div.
I know it’s big change, just suggesting.
March 27th, 2006 at 5:07 pm
Hmm, might have to check how I could see that the iframe was blocked. I disagree a bit on the AJAX solution – although I will offer one of those. AJAX only works with local files, so you will have to write a PHP script to scrape the document of the third party site and that is not possible all the time either.
It is dirty, but not as dirty as a popup is. And you hating and turning off IFRAMES is a choice that is not that common.
March 28th, 2006 at 4:16 am
I agree that I am a “marginal user”…
Anyway I thought you could put alternate content for iframes within the opening and closing tags. UAs that render iframes don’t display that content while others display only that content (NB: The blocked iframe test page seems to be down at the moment).
The other problem with iframe is it invalidates strict markup.
As for the Ajax “solution” it was just an idea off the top of my head. I have no idea how to actually do it, that’s why I asked (that and also, I’m lazy).
BTW disabling iframes is a great way to easily disable Google ads and others in one fell swoop, while being able to re-enalbe them at a moment’s notice, unlike a HOST file.
March 28th, 2006 at 7:10 am
Sebastien, have you taken a look at the IFRAMES checking version advertised above? I did this at your request, and would be grateful for feedback from a user that is affected.
March 28th, 2006 at 7:37 am
Chris, neat stuff!
March 28th, 2006 at 8:35 am
Sorry Chris,
As I said, the page was not accessible at the time.
I was able to check it just now and it works. On Opera with iframes disabled I simply go to the page when clicking the link.
March 28th, 2006 at 5:10 pm
Chris, is it possible to have the contents of the popup delivered from a JavaScript call? My specific use case is showing the most recent entries from a different blog through the Feed2JS script (which already works for me on the same site called directly, so I’m pretty sure that’s not the problem.
Thanks!
March 28th, 2006 at 5:30 pm
It looks like the “Terms and Conditions” DOMinclude link causes the nightly build of Safari to core.
March 31st, 2006 at 9:31 am
You’re obviously a skilled JavaScript and CSS coder, why must you waste your talent on new ways to deliver unwanted content? Ads are terrible, and hopefully this fad will just end up being blocked as well. I’ll end up writing a Firefox extension that eliminates these new nuisances, if gets to that point. Nobody wants to see ads man. Stop littering the internet.
March 31st, 2006 at 10:40 am
@Bjorn: Where did you get the impression I want people to use this for advertising? It is a nice option to include smaller content bits in the page without going to another page, that is all. This automated response to anything pop-up-ish is worrying, paranoia will get us nowhere.
April 3rd, 2006 at 1:06 pm
Awesome stuff…Maybe one day I’ll be half as smart as you!
Thanks
April 5th, 2006 at 11:56 am
Hi Chris, reading your articles, I am totally converted and can’t wait for your new book. Playing around with DOMInclude, I was using it to popup a full size image form a thumbnail link. This works as described in firefox but all W3C DOM versions of IE place the full size image below the thumbnail, not the link. (The link is in the paragraph that describes the, floated to the right, thumbnail image). Can this be fixed? Bill.
April 11th, 2006 at 2:46 pm
Hi Chris,
I checked the Iframe blocked version in IE6 with pop ups blocked and security settings to the highest and the only difference in functionality is that instead of displaying in the iframe, one goes straight to the stand-alone pages where the puppy dog pic and terms text are.
Cheers,
Luis
April 11th, 2006 at 6:02 pm
Not working in IE 6.0.2900…
April 11th, 2006 at 6:18 pm
e|a it does here (proof screenshot). Are you sure you don’t have some IFRAMES blocking software enabled? If so, try the version linked above.
April 11th, 2006 at 10:05 pm
Chris-
I’m still finding my way with js, so hopefully you’ll forgive what’s probably a naive question – is there an obivious tweak to the script that will open the popup via a mouseover event on the link, rather than a click on it? I’d quite like to use this widget for a link viewer (e.g. my original proof of concept, which also needs updating to use JSON).
My coding abilities are largely limited to reusing stuff I find and hacking it around till I can get a proof of concept half working, so any hints appreciated…
thanks
tony
April 12th, 2006 at 4:46 pm
Hey, good script, but the loading image doesn’t work with Ie, only with firefox!
good job, bye.
April 13th, 2006 at 7:19 am
awesome stuff..thanks for sharing
April 14th, 2006 at 3:14 am
I like a lot. But it seems there is a bug if you click on a second pop up link when a first one is open, e.g. if I click on the terms and conditions link and then without hiding it click on the puppy link the results are unexpected.
I’m wondering if closing the “popup” on a click anywhere outside of the popup would be more intuitive?
Great stuff at anyrate!
April 19th, 2006 at 1:51 am
One enhancement I’ve had no success in adding is a way to specify different size windows. Could someone drop a hint (if it’s even possible)?
Thanks!
April 19th, 2006 at 2:40 am
I reread the comment and it could be a little more clear.
I’d like to have different classes like DOMpop640, DOMpop760, etc or something that would let me have different size windows on the same page.
April 20th, 2006 at 3:23 am
Neat! thanks!
April 22nd, 2006 at 9:37 pm
Nice one but does not work with IE6
Edit: Interesting, I must be hallucinating as it does work here
May 8th, 2006 at 10:53 pm
Any idea how I can call a DOMInclude from flash?
May 10th, 2006 at 5:30 pm
Any suggestions on how to close the popup from within the Iframe?
When the DOMinclude uses an IFrame, I’d like to have a “CLOSE [X]” link inside the IFrame. However, I can’t find a way to have the event on the “CLOSE [X]” call killPopup with the right event passed.
May 17th, 2006 at 10:22 pm
I’m also looking for a way to close the popup from within the iframe. I want to use this to confirm a delete so that when user clicks a confirm link inside the iframe it 1) does the delete, 2) closes the iframe, and 3) reloads the main page.
The first step is easy but I’m stuck on the others. Any suggestions would be welcome. Thank you.
May 18th, 2006 at 2:29 am
Someone pointed out that an easy solution for what I needed was to include my script in the parent page and then reload it with a link in the iframe, using target=”_parent” in the href.
It would still be nice to have a way to close the iframe without reloading the page though, for other cases.
Scott
May 22nd, 2006 at 2:57 pm
I’d also like to know how to close the popup from within the IFrame.
thanks.
May 25th, 2006 at 1:17 pm
Added the closing feature now.
May 29th, 2006 at 9:30 pm
I like your dynamic menu script (yadm). How much would it cost to use it unrestricted and unlimited?
Not to distribute – just use as nav on sites.
May 31st, 2006 at 9:17 am
I am trying to apply dominclude on Image hyperlink, F.E.:
tag.
Works fine with FireFox, but got error in IE.
The error message is:
Error: Unknown runtime error
Code: 0
Good script Chris
June 12th, 2006 at 5:52 pm
Is there a way to include dynamically a term like “+Read” before the user defined text?
This way it is removed when the pop is open and is replaced with Hide.
My reasoning is to prevent people from assuming it is a link to a new window or link out of the current page.
You can get a feel for what I am talking about here.
Thanks for an excellent script and your help!
Mark
June 12th, 2006 at 8:42 pm
Very nice. Someone had asked earlier whether this script could be modified for mouseovers rather than onclicks. Would that be difficult?
June 12th, 2006 at 8:46 pm
Not difficult, just very annoying…
You’d need to set mouseover and mouseout handlers on the links AND on the “popup”, and you block out keyboard users.
As a laptop user using trackpointers exclusively I am very annoyed with fiddly mouseover stuff …
June 12th, 2006 at 8:54 pm
If the user has to actually mouseover to get a response it defeats the whole purpose. I was hoping there was a way similar to the inhtml that is curently used.
I know very little about scripts but I am learning the lingo. Speak the language but don’t make me read and write it thing ;-)
July 3rd, 2006 at 12:19 am
Hello, thanks for your efforts on this Chris. I plan to make wholesome use of it. (And possibly buy your book as well. ;-)
However, missing from your How To instructions is the need to also link/insert the three classes from the DOMinclude.css file. Without those, the iframe shunts to the bottom of the page.
Cheers,
July 23rd, 2006 at 12:47 am
Just tried DOMinclude in Firefox 1.5 and spotted a potential problem for keyboard-only users. The puppy image was OK. But with the Terms and Conditions example it was impossible to tab into the text area and scroll down to read anything. Hope this helps you with further development of the script.
August 17th, 2006 at 10:33 am
Hi, thanks for making these excellent scripts.
I just have one question: I am also using your domcollapse module which is working great. However, when your DOM popup is activated in an expaned section and then collapsed the popup remains.
My preferred solution would be to close the popup if it is in the collapsed section, but closing the popup regardless of its position would be acceptable.
I can see I should be calling DOMinclude.killPopup() but I’m not sure where or how I should call it.
Thanks in advance.
August 23rd, 2006 at 1:36 pm
Hi, very cool script. I, like Bob would like to be able size the popups on the fly depending on the content. Has anyone worked out how to do this?
September 3rd, 2006 at 8:37 pm
Any reason why the layer would load in the page’s footer instead of below the link ? Both documents are valid.
September 14th, 2006 at 6:07 pm
How about including a demo of this tool in the page so we don’t have to download it to see it?
April 16th, 2007 at 9:10 am
Does anyone know why windows are opening behind the current table, into the background? Is there any attribute that makes them show up in the foreground?
April 19th, 2007 at 2:23 pm
How do I trigger this other than from a link? Is that possible.
I need to open the popup from within an accordion (mootools) and so can’t just make it a link as this breaks the accordion.
I have an event linked to the correct opening box then am trying to call the event
if (toggler.parentNode.id==”mapheader”){
alert(’stuff’);
DOMinclude.openPopup(this);
Clearly ‘this’ is not what’s needed
Can you help please?
TIA
}
June 20th, 2007 at 11:57 am
Closing the iframe from within works with a link like href=”#” onclick=”javascript:parent.DOMinclude.killPopup(); BUT to reopen it, you have to click the DOMpop-Link twice. What am I missing?
July 2nd, 2007 at 4:17 am
Just wanted to write to express a problem that I am having getting this too work correctly. Actualy I can’t get this to work at all. Would great appreciate your help with this. This could greatly help with space saving on my website. Thanks and hope to hear from you soon.
The dom llink that I have is the terms and conditions link.
February 20th, 2008 at 11:08 pm
[...] Wait till I come! ? Blog Archive ? Replace Pop-Ups with dynamic …Chris, is it possible to have the contents of the popup delivered from a JavaScript call? My specific use case is showing the most recent entries from a … [...]
February 22nd, 2008 at 5:06 pm
[...] Wait till I come! ? Blog Archive ? Replace Pop-Ups with dynamic …Popup Blocker is a Browser Helper Object (BHO) that eliminates all popup and popunder windows, including those opened automatically by script.; Author: John … [...]
February 24th, 2008 at 5:05 am
[...] Wait till I come! ? Blog Archive ? Replace Pop-Ups with dynamic …Popup Blocker is a Browser Helper Object (BHO) that eliminates all popup and popunder windows, including those opened automatically by script.; Author: John … [...]
February 25th, 2008 at 5:15 am
[...] Wait till I come! ? Blog Archive ? Replace Pop-Ups with dynamic …Popup Blocker is a Browser Helper Object (BHO) that eliminates all popup and popunder windows, including those opened automatically by script.; Author: John … [...]
April 25th, 2008 at 11:30 am
Hi. I’ve used DOMInclude in my site to load an Iframe containing 3 links which have the result of reloading the main window using 1 of 3 URLs (see code below). Works well for my IE6 users but am getting problems running from Windows Mobile 5.0: Scripting is enabled on the Mobile. The Iframe loads as expected containing a page with 3 hyperlinks. So far so good. But clicking any of the 3 links does not reload the main window.
Any idea why this worked in IE6 but not Windows Mobile 5.0.?
In the iframe page : <a href=”#” onclick=”parent.PopUpNavigation.CanComplete(”);return false;”
JavaScript in the main page:
PopUpNavigation={
ifrContainer:null,
currentTrigger:null,
CanComplete:function(taskid)
{
document.Form1.submitTaskId.value = taskid;
document.location=’nextpage.aspx?taskid=’+taskid;
}
}
November 6th, 2009 at 12:02 pm
[...] the content of the document. If JavaScript isn’t used it simply links to the page instead. DOMInclude is a library that allows you to add inline dynamic includes of content rather than using window [...]
December 22nd, 2009 at 7:52 pm
hi
I discover your site digging the web to find a clean popup solution to show some text or img contents to my pupils when they look at a castle (see the link above)
it is a big picture mappped: do your code deal with that or not?
here is the code i use :
thnks for sharing !
pascal
December 22nd, 2009 at 7:54 pm
oops the code disappears…
hi
I discover your site digging the web to find a clean popup solution to show some text or img contents to my pupils when they look at a castle (see the link above)
it is a big picture mappped: do your code deal with that or not?
here is the code i use :
thanks for sharing !
pascalv
December 22nd, 2009 at 11:43 pm
I guess it could. I am on my blackberry now so I cannot debug this, but I can look at it when I get back home after christmas :)