/** * WoWRoster.net WoWRoster * * Main javascript file * * LICENSE: Licensed under the Creative Commons * "Attribution-NonCommercial-ShareAlike 2.5" license * * @copyright 2002-2008 WoWRoster.net * @license http://creativecommons.org/licenses/by-nc-sa/2.5 Creative Commons "Attribution-NonCommercial-ShareAlike 2.5" * @version SVN: $Id: mainjs.js 1791 2008-06-15 16:59:24Z Zanix $ * @link http://www.wowroster.net * @since File available since Release 1.03 */ function submitonce(theform) { //if IE 4+ or NS 6+ if (document.all||document.getElementById) { //screen thru every element in the form, and hunt down "submit" and "reset" for (i=0;i tag like it is supposed to */ function setvalue(ElementID,ElementVal) { if(document.getElementById) if(document.getElementById(ElementID)) document.getElementById(ElementID).value = ElementVal; } /* Basic id based show */ function show(ElementID) { if(document.getElementById) if(document.getElementById(ElementID)) document.getElementById(ElementID).style.display = ''; } /* Basic id based hide */ function hide(ElementID) { if(document.getElementById) if(document.getElementById(ElementID)) document.getElementById(ElementID).style.display = 'none'; } /* Swaps visability of two ids */ function swapShow(ElementID,ElementID2) { if(document.getElementById) { if(document.getElementById(ElementID).style.display == 'none') { hide(ElementID2); show(ElementID); } else { hide(ElementID); show(ElementID2); } } } var lpages = new Array(); function addLpage( name ) { lpages[lpages.length] = name; } function doLpage( div ) { for( i=0 ; i','',''); */ function showHide(ElementID,ImgID,ImgShow,ImgHide) { if(document.getElementById) { if(document.getElementById(ElementID).style.display == 'none') { show(ElementID); if(ImgShow) document.getElementById(ImgID).src = ImgShow; } else { hide(ElementID); if(ImgHide) document.getElementById(ImgID).src = ImgHide; } } } function setOpacity( sEl,val ) { oEl = document.getElementById(sEl); if(oEl) { oEl.style.opacity = val/10; oEl.style.filter = 'alpha(opacity=' + val*10 + ')'; } } // ADAMS's RADIO CUSTOMISATION // adam.burmister@gmail.com, Copyright 2005. /** NAME: initARC() ABOUT: Detects the current user browser and customises the form's radio buttons if the browser is not IE mac, <= IE 4 or NS4. USAGE: In your main HTML body use onLoad() to call initARC(), passing in the form id and on/off class names you wish to use to customise your radio buttons. e.g. PARAMS: formId - The ID of the form you wish to customise onClass - The CSS class name for the radio button's on style offClass - The CSS class name for the radio button's off style */ function initARC(formId,onClassRadio,offClassRadio,onClassCheckbox,offClassCheckbox) { var agt=navigator.userAgent.toLowerCase(); // Browser Detection stuff this.major = parseInt(navigator.appVersion); this.ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1)); this.ie3 = (this.ie && (this.major < 4)); this.ie4 = (this.ie && (this.major == 4) && (agt.indexOf("msie 4")!=-1) ); this.iemac = (this.ie && (agt.indexOf("mac")!=-1)); if( !(this.iemac || ie3 || ie4) ){ customiseInputs(formId,onClassRadio,offClassRadio,onClassCheckbox,offClassCheckbox); } } //Add a .label reference to all input elements. Handy! Borrowed from... //http://www.codingforums.com/archive/index.php/t-14672 function addLabelProperties(f){ if(typeof f.getElementsByTagName == 'undefined') return; var labels = f.getElementsByTagName("label"), label, elem, i = j = 0; while (label = labels[i++]){ if(typeof label.htmlFor == 'undefined') return; elem = document.getElementById(label.htmlFor); //elem = f.elements[label.htmlFor]; /* old method */ if(typeof elem == 'undefined'){ //no label defined, find first sub-input var inputs = label.getElementsByTagName("input"); if(inputs.length==0){ continue; } else { elem=inputs[0]; } } else if(typeof elem.label != 'undefined') { // label property already added continue; } else if(typeof elem.length != 'undefined' && elem.length > 1 && elem.nodeName != 'SELECT'){ for(j=0; jtext - while it is possible to modify this code to allow for this form I have left this as an exercise for the reader. PARAMS: formId - Parent form of this label label - The label for a radio button we wish to toggle onClass - The CSS class name for the radio button's on style offClass - The CSS class name for the radio button's off style */ function toggleLabelStyle(formId, label, onClass, offClass){ if(!document.getElementById || !label) return; var form = document.getElementById(formId); //label.form; if(!form) return; //find radio associated with label (if in htmlFor form) if(label.htmlFor) { var e = document.getElementById(label.htmlFor); if(e.type=="checkbox"){ e.label.className = (e.label.className==onClass) ? offClass : onClass; e.checked = (e.label.className==onClass); } else if(e.type=="radio"){ var radioGroup = form.elements[e.name]; if(!radioGroup) return; for(var i=0; i's within the passed form and attaches a .label reference to the element, and also adds an onClick function to that label to the toggleLabelStyle() function. It hides all radio elements from the form and mirrors the startup checked values in the label's customised radio button styles. USAGE: Called from initARC() PARAMS: formId - The form we're customising onClass - The CSS class name for the radio button's on style offClass - The CSS class name for the radio button's off style */ function customiseInputs(formId, onClassRadio, offClassRadio, onClassCheckbox, offClassCheckbox) { if(!document.getElementById) return; var prettyForm = document.getElementById(formId); if(!prettyForm) return; //onReset, reset radios to initial values prettyForm.onreset = function() { customiseInputs(formId, onClassRadio, offClassRadio, onClassCheckbox, offClassCheckbox); } //attach an easy to access .label reference to form elements addLabelProperties(prettyForm); var inputs = prettyForm.getElementsByTagName('input'); for (var i=0; i < inputs.length; i++) { /* NB: Yeah, i know this code is duplicated - I can't figure out how to create a local, persistent variable within the anonymous function calls. Fix it if you can, and let me know. */ //RADIO ONLY if( (inputs[i].type=="radio") && inputs[i].label && onClassRadio && offClassRadio){ //hide element inputs[i].style.position="absolute"; inputs[i].style.left = "-2000px"; //initialise element inputs[i].label.className=offClassRadio; //when the label is clicked, call toggleLabelStyle and toggle the label if(inputs[i].label.onclick){ var originalOnclick = inputs[i].label.onclick; inputs[i].label.onclick = function (){ toggleLabelStyle(formId, this, onClassRadio, offClassRadio); originalOnclick(); return false; }; }else{ inputs[i].label.onclick = function (){ toggleLabelStyle(formId, this, onClassRadio, offClassRadio); return false; }; } //enable keyboard navigation inputs[i].onclick = function (){ toggleLabelStyle(formId, this.label, onClassRadio, offClassRadio); }; //if the radio was checked by default, change this label's style to checked if(inputs[i].defaultChecked || inputs[i].checked){ toggleLabelStyle(formId, inputs[i].label, onClassRadio, offClassRadio); } } //CHECKBOX ONLY if( (inputs[i].type=="checkbox") && inputs[i].label && onClassCheckbox && offClassCheckbox){ //hide element inputs[i].style.position="absolute"; inputs[i].style.left = "-2000px"; //initialise element inputs[i].label.className=offClassCheckbox; inputs[i].checked = false; //when the label is clicked, call toggleLabelStyle and toggle the label if(inputs[i].label.onclick){ var originalOnclick = inputs[i].label.onclick; inputs[i].label.onclick = function (){ toggleLabelStyle(formId, this, onClassCheckbox, offClassCheckbox); originalOnclick(); return false; }; }else{ inputs[i].label.onclick = function (){ toggleLabelStyle(formId, this, onClassCheckbox, offClassCheckbox); return false; }; } //enable keyboard navigation inputs[i].onclick = function (){ toggleLabelStyle(formId, this.label, onClassCheckbox, offClassCheckbox); }; //if the radio was checked by default, change this label's style to checked if(inputs[i].defaultChecked || inputs[i].checked){ toggleLabelStyle(formId, inputs[i].label, onClassCheckbox, offClassCheckbox); } } if( (inputs[i].type=="checkbox") || (inputs[i].type=="radio") && inputs[i].label ){ //Attach keyboard navigation if(!this.ie){ //IE has problems with this method //You could set these to grab a passed in class name if you wanted to //do something a bit more interesting for keyboard states. But for now the //generic dotted outline will do for most elements. inputs[i].label.style.margin = "1px"; inputs[i].onfocus = function (){ this.label.style.border = "1px dotted #333"; this.label.style.margin="0px"; return false; }; inputs[i].onblur = function (){ this.label.style.border = "none"; this.label.style.margin="1px"; return false; }; } } } } /** * AJAX functions. Use loadXMLDoc, pass the URL you need to talk to. * Include the following GET paramters in the url: * * method: The php-side function reference * cont: The javascript function to call once the reply is in. * addon: Addon name the function belongs to, if not a roster function */ function loadXMLDoc(url,post,callback) { if( arguments.length < 2 ) { return false; } else if( arguments.length == 2 ) { callback=loadAjaxResult; } // branch for native XMLHttpRequest object if (window.XMLHttpRequest) { req = new XMLHttpRequest(); req.onreadystatechange = function(){ callback(req ); }; req.open("POST", url, true); req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); req.send(post); // branch for IE/Windows ActiveX version } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) { req.onreadystatechange = function(){ callback(req ); }; req.open("POST", url, true); req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); req.send(post); } } } function loadAjaxResult( req ) { // only if req shows "complete" if (req.readyState == 4) { // only if "OK" if (req.status == 200) { // Unescape this to show the result XML in a popup for debugging. // alert(req.responseText); if (req.responseXML == null) { alert(req.responseText.replace(/<\/?[^>]+>/gi, '')); } else { response = req.responseXML.documentElement; cont = response.getElementsByTagName('cont')[0].firstChild.data; result = response.getElementsByTagName('result')[0]; status = response.getElementsByTagName('status')[0].firstChild.data; errmsg = response.getElementsByTagName('errmsg')[0]; if (status == 0) { eval(cont + '(result)'); } else { alert('Error '+status+': '+errmsg.firstChild.data); } } } else { alert("There was a problem retrieving the XML data:\n" + req.statusText); } } } /** * Use an ajax call to fetch HTML to put in a tag (probably a

or ) somewhere in your document. * Usage: loadXMLDoc( "url", "post", function( req ){ loadAjaxInDiv( req, "id" ); } ) * * url = url to request * post = post string * id = element ID to insert into */ function loadAjaxInDiv( req, id ) { if(!document.getElementById) return; // only if req shows "complete" if (req.readyState == 4) { // only if "OK" if (req.status == 200) { // Unescape this to show the result XML in a popup for debugging. // alert(req.responseText); document.getElementById( id ).innerHTML = req.responseText; } else { alert("There was a problem retrieving the page data:\n" + req.statusText); } } }