...

View Full Version : Custom Alerts not working in IE



boogily
08-24-2011, 02:58 AM
http://becompleteamerica.com/index.php?option=com_chronocontact&Itemid=80

It works awesome in all browsers but IE 7 & 8. The custom "alert" is actually a dialog box, with a background fader underneath it, kind of like lightbox.

Any ideas why IE doesn't play nice? Thx

Old Pedant
08-24-2011, 03:35 AM
I dunno why it doesn't work, but an easy fix is to create the whole thing *statically*, instead of using createElement, et al., but just leave it as display: none; until needed. Put the text in place via innerHTML and then change to display: block;. I do it this way all the time and it works cross-browser perfectly. Not to mention being less code.

webdev1958
08-24-2011, 03:56 AM
How are you creating your customised alert boxes? If you're using innerHTML to create elements you are increasing the probability of browser incompatibility issues.

You're less likely to have issues if you use DOM methods like createElement(), appendChild() etc etc to create and place elements where you like. Can you post the code you are using to create your alert boxes

boogily
08-24-2011, 02:49 PM
// constants to define the title of the alert and button text.
var ALERT_TITLE = "The Results Are In!";
var ALERT_BUTTON_TEXT = "Thanks";

// over-ride the alert method only if this a newer browser.
// Older browser will see standard alerts
if(document.getElementById) {
window.alert = function(txt) {
createCustomAlert(txt);
}
}

function createCustomAlert(txt) {
// shortcut reference to the document object
d = document;

// if the modalContainer object already exists in the DOM, bail out.
if(d.getElementById("modalContainer")) return;

// create the modalContainer div as a child of the BODY element
mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
mObj.id = "modalContainer";
// make sure its as tall as it needs to be to overlay all the content on the page
mObj.style.height = document.documentElement.scrollHeight + "px";

// create the DIV that will be the alert
alertObj = mObj.appendChild(d.createElement("div"));
alertObj.id = "alertBox";
// MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert
if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
// center the alert box
alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";

// create an H1 element as the title bar
h1 = alertObj.appendChild(d.createElement("h1"));
h1.appendChild(d.createTextNode(ALERT_TITLE));

// create a paragraph element to contain the txt argument
msg = alertObj.appendChild(d.createElement("p"));
msg.innerHTML = txt;

// create an anchor element to use as the confirmation button.
btn = alertObj.appendChild(d.createElement("a"));
btn.id = "closeBtn";
btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
// btn.href = "#";
// set up the onclick event to remove the alert when the anchor is clicked
btn.onclick = function() { ChronoContact_EnergyQuiz.submit();}


}
function createCustomAlert2(txt) {
// shortcut reference to the document object
d = document;

// if the modalContainer object already exists in the DOM, bail out.
if(d.getElementById("modalContainer")) return;

// create the modalContainer div as a child of the BODY element
mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
mObj.id = "modalContainer2";
// make sure its as tall as it needs to be to overlay all the content on the page
mObj.style.height = document.documentElement.scrollHeight + "px";

// create the DIV that will be the alert
alertObj = mObj.appendChild(d.createElement("div"));
alertObj.id = "alertBox";
// MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert
if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
// center the alert box
alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";

// create an H1 element as the title bar
h1 = alertObj.appendChild(d.createElement("h1"));
h1.appendChild(d.createTextNode(ALERT_TITLE));

// create a paragraph element to contain the txt argument
msg = alertObj.appendChild(d.createElement("p"));
msg.innerHTML = txt;

// create an anchor element to use as the confirmation button.
btn = alertObj.appendChild(d.createElement("a"));
btn.id = "closeBtn";
btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
// btn.href = "#";
// set up the onclick event to remove the alert when the anchor is clicked
btn.onclick = function() { ChronoContact_EnergyQuiz.submit();}


}
function createCustomAlert3(txt) {
// shortcut reference to the document object
d = document;

// if the modalContainer object already exists in the DOM, bail out.
if(d.getElementById("modalContainer")) return;

// create the modalContainer div as a child of the BODY element
mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
mObj.id = "modalContainer3";
// make sure its as tall as it needs to be to overlay all the content on the page
mObj.style.height = document.documentElement.scrollHeight + "px";

// create the DIV that will be the alert
alertObj = mObj.appendChild(d.createElement("div"));
alertObj.id = "alertBox";
// MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert
if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
// center the alert box
alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";

// create an H1 element as the title bar
h1 = alertObj.appendChild(d.createElement("h1"));
h1.appendChild(d.createTextNode(ALERT_TITLE));

// create a paragraph element to contain the txt argument
msg = alertObj.appendChild(d.createElement("p"));
msg.innerHTML = txt;

// create an anchor element to use as the confirmation button.
btn = alertObj.appendChild(d.createElement("a"));
btn.id = "closeBtn";
btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
// btn.href = "#";
// set up the onclick event to remove the alert when the anchor is clicked
btn.onclick = function() { ChronoContact_EnergyQuiz.submit();}


}
function createCustomAlert4(txt) {
// shortcut reference to the document object
d = document;

// if the modalContainer object already exists in the DOM, bail out.
if(d.getElementById("modalContainer")) return;

// create the modalContainer div as a child of the BODY element
mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
mObj.id = "modalContainer4";
// make sure its as tall as it needs to be to overlay all the content on the page
mObj.style.height = document.documentElement.scrollHeight + "px";

// create the DIV that will be the alert
alertObj = mObj.appendChild(d.createElement("div"));
alertObj.id = "alertBox";
// MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert
if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
// center the alert box
alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";

// create an H1 element as the title bar
h1 = alertObj.appendChild(d.createElement("h1"));
h1.appendChild(d.createTextNode(ALERT_TITLE));

// create a paragraph element to contain the txt argument
msg = alertObj.appendChild(d.createElement("p"));
msg.innerHTML = txt;

// create an anchor element to use as the confirmation button.
btn = alertObj.appendChild(d.createElement("a"));
btn.id = "closeBtn";
btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
// btn.href = "#";
// set up the onclick event to remove the alert when the anchor is clicked
btn.onclick = function() { ChronoContact_EnergyQuiz.submit();}

}


// removes the custom alert from the DOM
function removeCustomAlert() {
document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
}
function removeCustomAlert2() {
document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer2"));
}
function removeCustomAlert3() {
document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer3"));
}
function removeCustomAlert4() {
document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer4"));
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum