SubModal Windows and Safari
July 19, 2006
I’m working on a project and I thought I found a great way to do a shipping estimate form without using the default pop-up window by using the SubModal window script found at gabrito.com. This particular window works by loading the content into an iframe – which, in this case was the solution I was looking for. I’m not a big fan of iFrames, but hey, sometimes you do what you gotta do.
I was working along with it and everything was going fine until I tried using it with Safari. Safari refuses to load the content of the iFrame. Even on their demo site, Safari won’t load their samples. I do suppose that they don’t make any claims as to what browsers are supported, but GEEZ. You think it wouldn’t be that tough to get something like this to work in a robust browser such as Safari.
I don’t have a Phd in Javascript, so I’m a bit leery to try and debug this myself. I was hoping the answer would be just a Google search away, but I can’t find the words “safari” and “submodal” on the same site, let alone in the same sentence. Too bad this window pop-up script doesn’t have a more descriptive name that would be easily searchable. Like “Wacko Window”, or “Submodalicious”.
At any rate, on the off chance that anyone has used this script and gotten it to work with Safari, would you mind sharing your Javascript-tweakin’ knowledge? Or is there a better (I’m always looking for something better…) script out there that degrades nicely, has a relatively light footprint, and can load external content into an iFrame…and works in Safari?
For the record, a nice page explaining the Safari/Hidden iFrame bug is over at quirksmode.
July 20th, 2006
You might want to look into Lightbox Gone Wild. The only rub is that I’m not sure that the Particletree guys have it working with form submissions yet. But it’s worth looking into nonetheless.
There were also a couple of more modal-window type scripts floating around a few months ago, however, I can’t recall their names right now. If I happen to run across any, I’ll make sure to shoot you an email.
-----
July 21st, 2006
Yes, I’ve found quite a few “modal” scripts out there, but only a few will really do an iFrame, which is what I would need in this case because of the form. Which means SubModal is the one I want. I think the problem Safari has, after googling the heck out of this, is that it won’t load the content of a hidden iFrame. The script I was working on starts with an iFrame (or its container) that has an inline style of
display:noneand is revealed via Javascript only when the user clicks on the “Estimate Shipping” link.I’ve read that the workaround can be to set the iFrame up as 1px by 1px in size, then expand from there via Javascript. I was going to mess with that route, but found a setting in the store admin I’m using that allows me to include the shipping code block on the main page of the shopping cart, as opposed to using the default pop-up window. I’m just going to go this route for now.
For anyone interested in Javascript dialog boxes, here’s a list of most of the ones I’ve found in the course of this project:
Thickbox
GreyBox
Lightbox Gone Wild
Litebox
Lightbox
Leightbox
SubModal
iBox
July 21st, 2006
Hi Ryan, I work on a Mac and it works on Safari for me. Yours is the first complaint I’ve heard about it not working on Safari, what version os OSX are you running?
http://gabrito.com/files/subModal/
For what it’s worth I don’t have a PHD in Javascript either but that’s what open source is all about… learning and contributing. If you have the skills to develop a website then learning enough Javascript to troubleshoot and fix the problem is definitely within your skillset, it’s just a matter of putting in the time.
July 21st, 2006
Hi Todd, thanks for writing. I’m sure I could figure this out, but I’ve spent so much time on it over the last few days that I sort of got burned out on it (at least this week...). But I would like to solve the problem, if not for this project, then for future projects where I know I could use this window type in this way.
I do remember someone else commenting on your blog about this not working in Safari for them either, but there was no definitive answer further along in the comments.
I’m using Safari Version 2.0.4 (419.3) on Mac OS X version 10.4.7.
I am going to make a few more attempts today. If I find out anything new, I will certainly post something.
July 21st, 2006
Todd and Ryan - I’m having a similar issue. What’s odd on my end is that submodal *sometimes* works with Safari. (I’m using 2.0.4 on 10.4.7 too). The behavior seems to stem from the size of the content getting loaded into the modal dialog, or rather the time it takes to load the content. However I cannot replicate the bug using the demo links from your site Todd.
I’m not ready to give up on submodal yet ... it suits my needs so well everywhere else. I’ll keep tweaking and if I find a solution I’ll post it here and wit Todd.
July 21st, 2006
I agree Henry. I was able to get Todd’s demos to work in Safari earlier today, but only briefly. Now they no longer work. I’m not sure I think the size of the content matters, because with the SubModal script I have it loading a “loading.html” page which has one line of text on it. That page is supposed to be replaced with the shipping page I have. Safari won’t even load the loading.html file.
Let me clarify - Safari loads the file FINE if the iframe wasn’t initially hidden. Once the iFrame is hidden, Safari doesn’t know it is there. Hence the problems with the SubModal script. (See the link to the bug I put at the end of the post, above).
I’ve tried everything today, and just can’t get this to work. Very frustrating. I’m sure that my client’s customer base doesn’t use Safari much (if past logs are any indication), but I’ve turned off the clock and it’s just the PRINCIPLE of the thing now! Work, damn you! All this because I’m trying to A+ the customer and eliminate pesky pop-up windows from the open-source store script I’m using as a base for their small online store.
If I were solid at AJAX, I would just reveal my shipping estimation form in a (previously hidden) div and use some sort of httprequest to get the shipping data asynchronously, without the need to refresh the page - which, I believe, would eliminate the need for the iFrame.
July 21st, 2006
Ok I think I’m onto something. I’m using Rails and conveniently the dev log displays page load times. So depending on what else is going on with the machine, pages vary in how long they take to load. Longer load times ... blank modal. So I looked for a timeout setting in the JS (I’m no expert either) and just commented out the following:
window.setTimeout("setPopTitle();", 600);
in showPopWin() and
window.setTimeout("setPopTitle();", 10);
in setPopTitle()
Now it works all the time, BUT my loading page never appears in Safari 2. This is probably good enough, but as you said, it’s the principle of it all at this point.
My guess is that the loading of the loading page never works in Safari due to the aforementioned visibility quirk (though my browser passes the quirksmode test you posted above!) and the timeout somehow interrupted the loading of the iframe with the modal content.
July 21st, 2006
One other thing ... I changed my loading page to an essentially blank page and through CSS am using a loading graphic as the background for popupInner. Works like a charm IE6, IE5.5, FF win, FF Mac, Safari Mac. Caveats: haven’t tested with Opera or FF linux. Also I haven’t fully investigated the effect of commenting out those lines.
November 09th, 2006
Thank you very much Henry. You are a genious. SubModal works on Mac Safari when commented out the time out.
December 07th, 2006
Hi guys,
I wrote a little javascript function to set the title bar of the submodal window in Safari (and all browsers for that matter). This works with the above solution of commenting out the setTimeOut lines as well.
Just drop this JS function on your final loaded page:
function setPopupTitle(title) {var parentlist = parent.document.getElementsByTagName("body")[0];
var len = parentlist.childNodes.length;
var list = "";
for (i=0; i<parentlist.childNodes.length;i++) {
if (parentlist.childNodes[i].id=="popupContainer") {
var popupTitle =
parentlist.childNodes[i].childNodes[0].childNodes[0].childNodes[0];
}
}
popupTitle.innerHTML = title;
}
... and the body onload call (just for newbie support):
onLoad="setPopupTitle('My Submodal Title');December 07th, 2006
Doh! kfancy, I think wordpress stripped your javascript. If you want to send it to me in an email, I’ll make sure the whole snippet gets posted. Thanks for taking the time to comment on this issue.
OK, I fixed it so all of your JS shows. I might avoid doing the onload that way (and use something like DOMfunction instead), but otherwise, thanks a lot for sharing.
February 01st, 2007
Hello… sorry i have a big problem when the submodal window is charged into an iframe.... i cant return values to the function....
Any idea??
Many thanks 4 ur help…