Hi to all.....I've bitten off more than I can chew with this one.
I'm looking for some help with getting a custom alert box to work with a javascript shopping cart.
Using the standard javascript alert method, when an item is selected, a modal window popup alert comes up, takes focus, tells the customer what item has been selected, click ok then the item is added to the cart.
This custom method uses a div as the child to overlay the parent.
I've got the custom alert box working great up to the point where the box appears on the screen for a second then disappears as the parent takes focus and prematurely adds the item to the cart.
I've tried many ways to get the cart script to pause or the alert box script to hold focus but nothing seems to work.
Any pointers greatly appreciated.
Cheers
Rayo

This is the add to cart and alert handling script

function AddToCart(thisForm) {
   var iNumberOrdered = 0;
   var bAlreadyInCart = false;
   var notice = "";
   var ELE, ATR;
   ELE=thisForm;                                                                
   sID       = "";      if(ATR= ELE._ID || ELE.ID || ELE.ID_NUM ) sID      =ATR.value;        
   sQUANTITY = "1";     if(ATR= ELE._QUANTITY   || ELE.QUANTITY ) sQUANTITY=ATR.value;
   sPRICE    = "0.00";  if(ATR= ELE._PRICE      || ELE.PRICE    ) sPRICE   =ATR.value;
   sNAME     = "";      if(ATR= ELE._NAME       || ELE.NAME     ) sNAME    =ATR.value;
   sWEIGHT   = "0";     if(ATR= ELE._WEIGHT     || ELE.WEIGHT   ) sWEIGHT  =ATR.value;         
   sLENGTH   = "0";     if(ATR= ELE._LENGTH     || ELE.LENGTH   ) sLENGTH  =ATR.value;          
   sWIDTH    = "0";     if(ATR= ELE._WIDTH      || ELE.WIDTH    ) sWIDTH   =ATR.value;          
   sHEIGHT   = "0";     if(ATR= ELE._HEIGHT     || ELE.HEIGHT   ) sHEIGHT  =ATR.value;          
   sPROMPT   = "";                                                              
   for(var i=0;i<thisForm.elements.length;++i){                                 
      ELE=thisForm.elements[i];
      if(ELE.type!="hidden") continue;
      if(!ELE.getAttribute)  continue;                                          
      if(     ATR= ELE.getAttribute("_ID")      || ELE.getAttribute("ID_NUM")   ) sID      = ATR;       
      if(     ATR= ELE.getAttribute("_QUANTITY")|| ELE.getAttribute("QUANTITY") ) sQUANTITY= ATR;
      if(     ATR= ELE.getAttribute("_PRICE")   || ELE.getAttribute("PRICE")    ) sPRICE   = ATR;
      if(     ATR= ELE.getAttribute("_NAME")                                    ) sNAME    = ATR;       
      if(     ATR= ELE.getAttribute("_WEIGHT")  || ELE.getAttribute("WEIGHT")   ) sWEIGHT  = ATR;
      if(     ATR= ELE.getAttribute("_LENGTH")  || ELE.getAttribute("LENGTH")   ) sLENGTH  = ATR;
      if(     ATR= ELE.getAttribute("_WIDTH")                                   ) sWIDTH   = ATR;       
      if(     ATR= ELE.getAttribute("_HEIGHT")                                  ) sHEIGHT  = ATR;      
   }
   for(var N=0;N<=2;++N) for(var n=0;n<=9;++n){                                 
      var selname=["ADDITIONALINFO","USERCHOICE","_USERCHOICE"][N] + (n?n:"");  
      var selector=thisForm[selname];
      if(selector==null) continue;
      if(typeof selector.selectedIndex == "undefined"){                         
         for(var i=0;i<selector.length;++i) if(selector[i].checked) ELE=selector[i];
      }else{                                                                   
         ELE=selector[selector.selectedIndex];
      }
      function NewStr(OLD,NEW) {return    (NEW.substring(0,1)=="+" ?        OLD +        NEW.substring(1,NEW.length)  :NEW);}  
      function NewNum(OLD,NEW) {return ""+(NEW.substring(0,1)=="+" ?NumberZ(OLD)+NumberZ(NEW.substring(1,NEW.length)) :NEW);}   

      if(!ELE.getAttribute)  if(ATR= ELE.value                                  ) sNAME    +=" "+ATR;                   
      if(!ELE.getAttribute)  continue;                                                                                 

      if(     ATR= ELE.getAttribute("_ID")      || ELE.getAttribute("ID")       ) sID      = NewStr(sID,ATR);           
      else if(ATR=                                 ELE.getAttribute("ID_NUM")   ) sID      = NewStr(sID,ATR);           
      if(     ATR= ELE.getAttribute("_QUANTITY")|| ELE.getAttribute("QUANTITY") ) sQUANTITY= NewNum(sQUANTITY,ATR);     
      if(     ATR= ELE.getAttribute("_PRICE")   || ELE.getAttribute("PRICE")    ) sPRICE   = NewNum(sPRICE,ATR);
      if(     ATR= ELE.getAttribute("_NAME")                                    ) sNAME    = NewStr(sNAME,ATR); 
      else if(ATR= ELE.value                                                    ) sNAME   +=" "+ATR;                    
      else if(ELE.type!="radio"  &&  (ATR=         ELE.getAttribute("NAME"))    ) sNAME    = NewStr(sNAME,ATR);         
      if(     ATR= ELE.getAttribute("_WEIGHT")  || ELE.getAttribute("WEIGHT")   ) sWEIGHT  = NewNum(sWEIGHT,ATR);
      if(     ATR= ELE.getAttribute("_LENGTH")  || ELE.getAttribute("LENGTH")   ) sLENGTH  = NewNum(sLENGTH,ATR);
      if(     ATR= ELE.getAttribute("_WIDTH")   || ELE.getAttribute("WIDTH")    ) sWIDTH   = NewNum(sWIDTH,ATR);       
      if(     ATR= ELE.getAttribute("_HEIGHT")  || ELE.getAttribute("HEIGHT")   ) sHEIGHT  = NewNum(sHEIGHT,ATR);      
      if(     ATR= ELE.getAttribute("_PROMPT")  || ELE.getAttribute("PROMPT")   ) sPROMPT  += (sPROMPT?"; ":"")+ATR;      
   }
   if(sID+sNAME=="" && sPROMPT=="") sPrompt="Please select an option";          
   if(sPROMPT!="")  {alert(sPROMPT);  return false;}                           
   if(PrefEQ(sID,PrefDonation))  sPRICE=CKprice(sPRICE);                       
   if(     ATR=thisForm._USERTEXT||thisForm.USERTEXT) {if(ATR.value)sNAME+= "; " + ATR.value;}         
   else if(ATR=thisForm.USERENTRY)                    {if(ATR.value)sNAME+= "; " + ATR.value;}         
 iNumberOrdered= iGetCookie("NumberOrdered",0);
   for(var i=1; i<=iNumberOrdered; ++i){
      GetRow(i);                                               
      if(fields[0] == sID    &&
         fields[3] == sNAME  &&                                                
        (fields[2] == sPRICE || PrefEQ(sID,PrefDonation))                      
      ){                                                       
         bAlreadyInCart = true;
         if(PrefEQ(sID,PrefDonation)){                         
            dbUpdatedOrder = sID + "|" +
               sQUANTITY + "|" +
               (Number(sPRICE)+Number(fields[2])) + "|" +
               sNAME     + "|" +
               sWEIGHT   + "|" +
               sLENGTH   + "|" +
               sWIDTH    + "|" +
               sHEIGHT;                                         
         }else{                                                 
            dbUpdatedOrder = sID + "|" +
               (Integer(sQUANTITY)+Integer(fields[1])) + "|" +
               sPRICE    + "|" +
               sNAME     + "|" +
               sWEIGHT   + "|" +
               sLENGTH   + "|" +
               sWIDTH    + "|" +
               sHEIGHT;                                         
         }
         sNewOrder = "Order." + i;
         DeleteCookie(sNewOrder, "/");
         SetCookie(sNewOrder, dbUpdatedOrder, null, "/");
         notice = strAdded + "\n-------------------------------------\n" + strAddedQuantity + sQUANTITY + "\n" + strAddedProduct + sNAME;
         break;
      }
   }
   if(!bAlreadyInCart){                                         
      iNumberOrdered++;
      if(iNumberOrdered > 15) alert(strSorry);                  
      else {
         dbUpdatedOrder = sID + "|" +
            sQUANTITY + "|" +
            sPRICE    + "|" +
            sNAME     + "|" +
            sWEIGHT   + "|" +
            sLENGTH   + "|" +
            sWIDTH    + "|" +
            sHEIGHT;                                            
         sNewOrder = "Order." + iNumberOrdered;
         SetCookie(sNewOrder,       dbUpdatedOrder, null, "/");
         SetCookie("NumberOrdered", iNumberOrdered, null, "/");
         notice = strAdded + "\n-------------------------------------\n" + strAddedQuantity + sQUANTITY + "\n" + strAddedProduct + sNAME;
      }
   }
   if(DisplayPopupOnAdd && notice!="")  alert(notice);
   return true;
}


This is the custom alert box script

var ALERT_TITLE = "Custom Title";
var ALERT_BUTTON_TEXT = "Ok";
if(document.getElementById) {
window.alert = function(txt) {
createCustomAlert(txt);
}
}
function createCustomAlert(txt) {
d = document;
if(d.getElementById("modalContainer")) return;
mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
mObj.id = "modalContainer";
mObj.style.height = document.documentElement.scrollHeight + "px";
alertObj = mObj.appendChild(d.createElement("div"));
alertObj.id = "alertBox";
if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
h1 = alertObj.appendChild(d.createElement("h1"));
h1.appendChild(d.createTextNode(ALERT_TITLE));
msg = alertObj.appendChild(d.createElement("p"));
msg.innerHTML = txt;
btn = alertObj.appendChild(d.createElement("a"));
btn.id = "closeBtn";
btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
btn.href = "#";
btn.onclick = function() { removeCustomAlert();return false; }
}
function removeCustomAlert() {
document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
}


This is the css for the custom alert box

#modalContainer {
background-color:transparent;
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:10000;
}

#alertBox {
position:relative;
width:300px;
min-height:100px;
margin-top:50px;
border:2px solid #000;
background-color:#F2F5F6;
background-image:url(alert.png);
background-repeat:no-repeat;
background-position:20px 30px;
}

#modalContainer > #alertBox {
position:fixed;
}

#alertBox h1 {
margin:0;
font:bold 0.9em verdana,arial;
background-color:#78919B;
color:#FFF;
border-bottom:1px solid #000;
padding:2px 0 2px 5px;
}

#alertBox p {
font:0.7em verdana,arial;
height:50px;
padding-left:5px;
margin-left:55px;
}

#alertBox #closeBtn {
display:block;
position:relative;
margin:5px auto;
padding:3px;
border:1px solid #000;
width:70px;
font:0.7em verdana,arial;
text-transform:uppercase;
text-align:center;
color:#FFF;
background-color:#78919B;
text-decoration:none;
}

I can understand wanting to do it as a technical challenge but as a way of implementing a UI it sucks! Why do it?

Hi Paulw....not quite the input I was looking for but yes in a way it does.
Probably better to have an auto close confirmation popup in javascript, but the construction of this for me would be an even more time consuming challenge I may never complete.

Rayo

I've caught myself often enough this way - you have an idea, you get drawn into the technical fun and you completely forget to question the value of what you're doing. Go with the mantra "popups bad" and reserve a clear area on screen as part of the basket display for messages. Have a look at http://www.sainsburys.co.uk/ for a nice example.

Hi PaulW....thank's for the input and yes you're absolutely right...the problem for me (not a javascript expert by any stretch) is implementing this Idea into this cart.
I have already made a fair effort, and still am, attemting to call a function such as this from the displaypopuponadd section of the cart script but with dismal results so far....so any pointers most welcome.
Cheers
Rayo

Okay...appologies for posting twice but I have made some progress and need a bit of help if possible.
I have created a small javascript div auto close popup box I wish to display for just a second as confirmation that the item has been added to the cart.
It's working fine but as with the problem in the previous post, the cart script prematurely taking focus and closing the div....any ideas anyone.

This is the popup script

var q;
var s = null;
var timer_on = false;
function setup_timer(){q=2;stopcounter();start_timer();}
function stopcounter(){
    document.getElementById('popup1').style.display='block';
    if(timer_on){clearTimeout(s);}
    timer_on=false;}
function start_timer(){
    if (q==0){stopcounter();bye();}
    else {q=q-1;timer_on=true;
    s=self.setTimeout("start_timer()",1000);}}
function bye(){document.getElementById('popup1').style.display = 'none';}

Hi everyone......I have cracked this problem and thank's to anyone who gave it a look over.
For anyone who may be interested I added the script below to the end of the addtocart function, and a return false in HTML form script.

if(DisplayPopupOnAdd && notice!="" ,setup_timer());
}
var q;
var s = null;
var timer_on = false;
function setup_timer(){q=2;stopcounter();start_timer();}
function stopcounter(){
document.getElementById('popups').style.display='b lock';
if(timer_on){clearTimeout(s);}
timer_on=false;}
function start_timer(){
if (q==0){stopcounter();bye();}
else {q=q-1;timer_on=true;
s=self.setTimeout("start_timer()",1000);}}
function bye(){document.getElementById('popups').style.disp lay = 'none';
location.reload(true);
}

Cheers
Rayo