/* Gemeral Notes: boxes which are written using ajax must have a close mechanism within them even though you hope that the mouseout will work. Because of response delays, the mouse may have already been moved out by the user and in this case the box stays open until you go back. Moral always use close verion when using ajax. popups have select boxes shining through them in IE this is an IE bug only. Naff! This is because in IE select boxes are window objects rather than html objects in the underlying code and therefore are oblivious to the zIndex property. Basic technique is to cover each select box with an iframe which is normally invisible. When the iframe is visible it obscures the underlying select box. The iframe obeys the zindex rules so you have a) the select box b) the iframe on top of it c) the popup div on top of the iframe When you want to show the the div, you make the iframe visible and set its zindex to be negative so it underlies the div. vers 1 hf 13/12/2005 based on original sample from AJM vers 2 hf 06/01/2006 Now working in synchronous mode with ajax and dealing with the select box problem in IE vers 3 hf 18/01/2006 Added popup blocker test vers 4 hf 29/03/2006 reduced popup window to 1x1 and added iframe_resize() version 3.2 */ // selectObject is the object that will be populated. var selectObject; // set up javascript compliance details (if you are using the latest style.js you can delete these lines and replace all references // to js_ with the trail bit ie js_w3c becomes w3c etc var js_w3c=(document.getElementById)?true:false; var js_ns4=(document.layers)?true:false; var js_ie4=(document.all && !js_w3c)?true:false; var js_ie5=(document.all && js_w3c)?true:false; var js_ns6=(js_w3c && navigator.appName.indexOf("Netscape")>=0 )?true:false; var js_opera=(window.opera)?true:false; // keep track of mouse position so know where to put popup box if using variable position var mx=0; var my=0; if(js_ns4)document.captureEvents(Event.MOUSEMOVE); document.onmousemove=function (evt) { mx=(js_ie5||js_ie4)?event.clientX:evt.pageX; my=(js_ie5||js_ie4)?event.clientY:evt.pageY; } var counter // are we filling the box (writingText) or simply moving the mouse around the screen? var writingText=false; // array of iframes that you want to use to hide the select boxes var hideBoxes = new Array(); var noBoxes = 0 var STATIC, POPUP; // You now need to populate the array but you must be certain to do this after page has loaded so append or include in your own // OnLoad function. If you want to hide more than one box, pipe delimit them eg // hideBoxes['popup_txt'] = 'document.all.coverup|document.all.nextbox' ; // The array indices are the names of the target objects you are populating function local_onLoad() { if (!js_ns4 && !js_ns6 && !js_opera ) { hideBoxes['popup_txt'] = 'document.all.coverup'; hideBoxes['static_txt'] = 'document.all.coveruplev1'; noBoxes = 2; } } // this routine is specified in the getURL statement as the routine to run when return to the browser. The data returned // is a text stream, so in the example below it is split first on new line and then on \030 which is the delimiter in this case function customCallBackDropDown() { if (requestObject.readyState == 4) { if (requestObject.status==200) { sObj=document.frm.elements[selectObject]; if (sObj.length) for (i = sObj.length - 1 ; i >= 0 ; --i) sObj.options[i]=null; items=requestObject.responseText.split('\n'); for (i = 0 ; i < items.length ; ++i) { parts=items[i].split('\030'); sObj.options[i]=new Option(); sObj.options[i].text=parts[1]; sObj.options[i].value=parts[0]; } }else alert('The server returned status: ' + requestObject.status + ' (' + requestObject.statusText + ')'); } } // populate multiple dropdown boxes // if first char is a # then this is the field name // otherwise $1 = value $2 = text of option function customCallBackMulti() { var k; if (requestObject.readyState == 4) { if (requestObject.status==200) { items=requestObject.responseText.split('\n'); if (js_debug) jsLog.Info(requestObject.responseText); for (i = 0 ; i < items.length - 1 ; ++i) { if (items[i].substr(0,1) == "#") { if (js_debug) jsLog.Info('Creating ' + items[i]); sObj=document.advertstep1.elements[items[i].substr(1)] if (sObj.length) for (i = sObj.length - 1 ; i >= 0 ; --i) sObj.options[i]=null; k=0; } else { parts=items[i].split('|'); sObj.options[k]=new Option(); sObj.options[k].text=parts[1]; sObj.options[k].value=parts[0]; ++k; } } } else alert('The server returned status: ' + requestObject.status + ' (' + requestObject.statusText + ')'); } } /* for this we expect back a pipe delimited file with the following fields: $1 div name which you want to use to put your data in $2 is the div to be in a fixed position or relative to the cursor (fixed/relative) $3 set to 1 to disable autoclose by mouseout $4 is set to a number between 0 and 100 and controls opacity in conjunction with bs_boxshadow.js. If you have several objects with shadows you will need to alter this as I have id'd the objects bs_01, bs_02 etc (see boxshadow.awk). If you do alter this, take a local copy for your site!! The higher the number the more opaque the border eg 20 would make it very transparent whereas 90 would make it virtually opaque $5 the blurb you want to appear */ function customCallBackText() { if (requestObject.readyState == 4) { if (requestObject.status==200) { // to debug, unremark out this line to see what you are getting back. Chaos will reign afterwards and the writetxt will fail // but you will be wiser! // if (js_debug) jsLog.Info(requestObject.responseText); parts=requestObject.responseText.split('|'); target_object_name = parts[0]; // your div/iframe in the main page position = parts[1]; // if set to 'variable' then will be moved to correct position depending on v_offset/h_offest disable_mouseout = parts[2]; // if set to 1 mouseout will not close box opacity = parts[3]; // set to value between 0 and 100 - the higher the more opaque v_offset = parts[4]; // set to zero for default vertical offset h_offset = parts[5]; // set to zero for default horizontal offset text2write = parts[6]; AT = new altObject(target_object_name,position,disable_mouseout,v_offset,h_offset); if (v_offset>0) AT.xoffset=v_offset; if (h_offset>0) AT.yoffset=h_offset; AT.writeTxt(text2write); if (!js_ns4 && !js_ns6 && !js_opera && noBoxes > 0) { if (js_debug) jsLog.Info('Hiding select boxes'); hideSelectBoxes(hideBoxes[target_object_name]) } if (opacity >0) do_opacity(opacity) if (position=='variable'){ POPUP = AT; if (js_debug) jsLog.Info('Setting POPUP' + ' posvary is ' + AT.posvary + ' for id ' + AT.popup_txt.id); } else { STATIC=AT; if (js_debug) jsLog.Info('Setting STATIC' + ' posvary is ' + AT.posvary + ' for id ' + AT.popup_txt.id); } }else alert('The server returned status: ' + requestObject.status + ' (' + requestObject.statusText + ')'); if (STATIC && STATIC.popup_txt) if (js_debug) jsLog.Info(' and now posvary for STATIC is ' + STATIC.posvary + ' for id ' + STATIC.popup_txt.id); if (POPUP && POPUP.popup_txt) if (js_debug) jsLog.Info(' and now posvary for POPUP is ' + POPUP.posvary + ' for id ' + POPUP.popup_txt.id); } } // tobj is name of div to be cleared // position states if this is the variable or static object being populated function clearText(tobj,position) { if (js_debug) jsLog.Info('1'); if (!js_ns4 && !js_ns6 && !js_opera && noBoxes > 0) { if (js_debug) jsLog.Info('2'); showSelectBoxes(hideBoxes[tobj]) if (js_debug) jsLog.Info('3'); } if (js_debug) jsLog.Info('4'); if (js_debug) jsLog.Info('Position: ' + position); // if (js_debug) jsLog.Info(AT + ' - ' + POPUP + ' - ' + STATIC); if (js_debug) jsLog.Info(AT + ' - ' + STATIC); if (position=='variable'){ if (js_debug) jsLog.Info('1.1: ' + POPUP.popup_txt.id); AT = POPUP; if (js_debug) jsLog.Info('1.2: ' + POPUP.popup_txt.id); } else { if (js_debug) jsLog.Info('2.1: ' + STATIC.popup_txt.id); AT = STATIC if (js_debug) jsLog.Info('2.2: ' + STATIC.popup_txt.id); } if (js_debug) jsLog.Info('position is ' + position + ' posvary is ' + AT.posvary + ' for id ' + AT.popup_txt.id); AT.writeTxt('0'); } function hideSelectBoxes(inList) { boxes=inList.split('|'); if (js_debug) jsLog.Info('hiding boxes ' + boxes.length); if (boxes.length > 0) { for (i = 0 ; i < boxes.length ; ++i) { thisobj = eval(boxes[i]) thisobj.style.display='block'; } } } function showSelectBoxes(inList) { boxes=inList.split('|'); if (boxes.length > 0) { for (i = 0 ; i < boxes.length ; ++i) { thisobj = eval(boxes[i]) thisobj.style.display='none'; } } } function customCallBackToc() { var text2write ; if (requestObject.readyState == 4) { if (requestObject.status==200) { items=requestObject.responseText.split('|'); text2write=''; for (i = 0 ; i < items.length ; ++i) { text2write = text2write + '