JavaScript Forum

**figaro_al** · 04:10 AM

Hi there. Time ago I did come across a rather old but small js library called JQPopUp. it was ideal for a project I am working on (popping out windows with images AND with possibility of CSS styling. I am much more skilled at CSS than Javascript and I ignore how to modify it so it works in Firefox. I know that it requires getElementById instead of id's but I don't know how to modify the event.clientX and event.clientY events.

Is there anybody there who can lend a hand? The script is below.

Thanks a lot...

Figaro

Code:

/*************************************************************
* Program   : JQPopUp.js                                     *
* Purpose   : Genereert diverse Popup schermpjes.            *
* Author    : Ron Bausch                                     *
* Version 1 : 9 mei 2003                                     *
* Copyright : Ron Bausch                                     *
* Website   : www.justquick.com                              *
* Email     : ron.bausch@wanadoo.nl                          *
**************************************************************/
var bStay=false;
var aHelp;
var aFields;
var iWidth;
var sWidth;
var sOption;
var sHtml;
var i,iX,iY,iClX,iClY;
var JQPrompt="";

function JQPopUp(sHelptext) 
{ aHelp=sHelptext.split("|");
  sWidth="";
  iWidth=aHelp[0].length;
  if      (iWidth > 30 && iWidth <= 150) sWidth='width="250"';
  else if (iWidth > 150) sWidth='width="375"';
  if (!bStay)
  { if (aHelp.length==1) 
      idHelp.innerHTML='<table '+sWidth+' class="JQColorTable" cellpadding="0" cellspacing="0"><tr><td '+sWidth+' class="JQColorBody" align="center">' + aHelp[0] + '</td></tr></table>';
    else if (aHelp.length==2) 
      idHelp.innerHTML='<table '+sWidth+' class="JQColorTable" align="center" cellpadding="0" cellspacing="0"><tr><td>'+aHelp[1]+'</td></tr><tr><td '+sWidth+' class="JQColorBody" align="center">' + aHelp[0] + '</td></tr></table>';
    else if (aHelp.length==3)
    { bStay=true;
      idHelp.innerHTML=
      '<table '+sWidth+' class="JQColorTable" cellpadding="0" cellspacing="0">' +
      '<tr><td><b>'+aHelp[1]+'</b></td></tr><tr><td '+sWidth+' class="JQColorBody" align="center">' + aHelp[0] + '</td></tr>' +
      '<tr><td class="JQColorBody" align="center"><button class="JQColorTable" onClick="idHelp.style.visibility=\'hidden\'; bStay=false;">'+aHelp[2]+'</button>' +
      '</td></tr></table>';
    }
    else if (aHelp.length==4)
    { bStay=true;
      sOption=aHelp[2].replace(/ /g,"");
      if (sOption.toUpperCase()=="CONFIRM")
      { idHelp.innerHTML=
       '<table '+sWidth+' class="JQColorTable" cellpadding="0" cellspacing="0">' +
       '<tr><td><b>'+aHelp[1]+'</b></td></tr><tr><td '+sWidth+' class="JQColorBody" align="center">' + aHelp[0] + '</td></tr>' +
       '<tr><td class="JQColorBody" align="center"><button class="JQColorTable" onClick="'+aHelp[3]+' idHelp.style.visibility=\'hidden\'; bStay=false;">OK</button>' +
       '<button class="JQColorTable" onClick="idHelp.style.visibility=\'hidden\'; bStay=false;">Cancel</button>' +
       '</td></tr></table>'; 
      }
      else if (sOption.toUpperCase()=="PROMPT")
      { sHtml=
       '<table '+sWidth+' class="JQColorTable" cellpadding="0" cellspacing="0">' +
       '<tr><td><b>'+aHelp[1]+'</b></td></tr><tr><td '+sWidth+' class="JQColorBody" align="center">' + aHelp[0] + '</td></tr><tr><td>'+
       '<form name="frmJQ">';
       aFields=aHelp[3].split(",");
       for (i=0; i<aFields.length; i++)
       {  sHtml+=
         '<b>'+aFields[i]+'</b><br>\r<input type="text" name="txt'+aFields[i].replace(/ /g,"")+'" size="30"><br>\r';
       }
       sHtml+=
       '</tr></td><tr><td class="JQColorBody" align="center"><button name="cmdOK" class="JQColorTable" onClick="JQPrompt=document.forms.frmJQ; idHelp.style.visibility=\'hidden\'; bStay=false;">OK</button>' +
       '<button name="cmdCancel" class="JQColorTable" onClick="idHelp.style.visibility=\'hidden\'; bStay=false;">Cancel</button>' +
       '</form></td></tr></table>';
       idHelp.innerHTML=sHtml;
      }
      else
      { idHelp.innerHTML=
       '<table '+sWidth+' class="JQColorTable" cellpadding="0" cellspacing="0">' +
       '<tr><td><b>'+aHelp[1]+'</b></td></tr><tr><td '+sWidth+' class="JQColorBody" align="center">' + aHelp[0] + '</td></tr>' +
       '<tr><td class="JQColorBody" align="center"><button class="JQColorTable" onClick="idHelp.style.visibility=\'hidden\'; bStay=false;">'+aHelp[2]+'</button>' +
       '</td></tr></table>';
      }
    }

    iClX=event.clientX+10;
    iClY=event.clientY;
    iX = document.body.clientWidth  - iClX;
    iY = document.body.clientHeight - iClY;

    if ( iX < idHelp.offsetWidth)
      idHelp.style.left = document.body.scrollLeft + iClX - idHelp.offsetWidth;
    else
      idHelp.style.left = document.body.scrollLeft + iClX;

    if (iY < idHelp.offsetHeight)
      idHelp.style.top = document.body.scrollTop + iClY - idHelp.offsetHeight;
    else
      idHelp.style.top = document.body.scrollTop + iClY;
     
    idHelp.style.visibility="visible"; 
    idHelp.style.position="absolute"; 
  }
}

function JQPopOut() 
{ if (!bStay) idHelp.style.visibility="hidden"; 
}

document.write('<span style="visibility:hidden;" id="idHelp"> </span>');

// EOF