Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder boogily's Avatar
    Join Date
    Jul 2009
    Posts
    275
    Thanks
    18
    Thanked 4 Times in 4 Posts

    Custom Alerts not working in IE

    http://becompleteamerica.com/index.p...tact&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
    Joomla Development Company and MN SEO
    "Joomla development from design to SEO"

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    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

  • #4
    Regular Coder boogily's Avatar
    Join Date
    Jul 2009
    Posts
    275
    Thanks
    18
    Thanked 4 Times in 4 Posts
    Code:
    // 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"));
    }
    Last edited by boogily; 08-24-2011 at 02:53 PM.
    Joomla Development Company and MN SEO
    "Joomla development from design to SEO"


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •