APPENDIX D: THE COMPLETE CODELIBRARY.JS FILE

Size: px

Start display at page:

Download "APPENDIX D: THE COMPLETE CODELIBRARY.JS FILE"

Hector Denis Patrick
6 years ago
Views:

1 APPENDIX D: THE COMPLETE CODELIBRARY.JS FILE This appendix presents the entire codelibrary.js file organized by the chapter in which each of the functions first appeared. At the end appear a number of additional functions you may find useful in your Web development work. Many of the extra functions are from my earlier book, The Web Wizard s Guide to JavaScript. /*CHAPTER 4 CODE BEGINS HERE*/ /* Browser Detection Script begins here. */ /* The variable thedom1 will be true for modern browsers. */ var thedom1 = (document.getelementbyid)? true : false; /* theapp will contain the browser name */ var theapp = navigator.appname.tolowercase(); /* UA (user agent) contains detailed browser info. For example, UA for Internet Explorer on Mac would be 'mozilla/4.0 (compatible; msie 5.0; mac_powerpc)' */ var UA = navigator.useragent.tolowercase(); /* variables for the two major browsers in existence today. */ var isie = (UA.indexOf('msie') >= 0)? true : false; var isns = (UA.indexOf('mozilla') >= 0)? true : false; /* 'compatible' text string is only in non-netscape browsers */ if (UA.indexOf('compatible')>0){ isns = false; /* platform */ var theplatform = navigator.platform.tolowercase(); var ismac = (UA.indexOf('mac') >= 0)? true : false; var iswin = (UA.indexOf('win') >= 0)? true : false; /* Most UNIX users use X-Windows so this detects UNIX most of the time.*/ var isunix = (UA.indexOf('x11') >= 0)? true : false; D-1

2 D-2 Appendix D The Complete codelibrary.js File /* browser version */ var version = navigator.appversion; var ismajor = parseint( version ); /* Internet Explorer version 5 on the Mac reports itself as version 4. This code corrects the problem. */ if(isie && ismac) { if(ua.indexof("msie 5")) { ismajor = 5; var stringloc = UA.indexOf("msie 5"); version = UA.substring(stringLoc + 5, stringloc + 8); /* Internet Explorer version 6 on Windows reports itself as version 4. This code corrects the problem. */ if(isie && iswin) { if(ua.indexof("msie 6")) { ismajor = 6; var stringloc = UA.indexOf("msie 6"); version = UA.substring(stringLoc + 5, stringloc + 8); if(ua.indexof("msie 5.5")) { ismajor = 5; var stringloc = UA.indexOf("msie 5.5"); version = UA.substring(stringLoc + 5, stringloc + 8); /* Netscape 6 reports itself as version 5 on all platforms. This code corrects the problem. */ if(isns && ismajor>4) { if(ua.indexof("netscape6")) { ismajor = 6; var stringloc = UA.indexOf("netscape6"); version = UA.substring(stringLoc + 10, stringloc + 14); var isminor = parsefloat( version ); /* a function to report browser info */ function getbrowserinfo(){ var temp="<p>"; temp += "User Agent: " + UA + "<br>"; temp += "Platform: " + theplatform + "<br>"; temp += "Macintosh: " + ismac + "<br>"; temp += "Windows: " + iswin + "<br>"; temp += "Application: " + theapp + "<br>"; temp += "Version: " + version + "<br>"; temp += "Netscape: " + isns + "<br>";

3 Appendix D The Complete codelibrary.js File D-3 temp += "Internet Explorer: " + isie + "<br>"; temp += "Major Version: " + ismajor + "<br>"; temp += "Full Version: " + isminor + "<br>"; temp += "<br>"; if (thedom1){ temp += "You appear to have a modern browser.<br>"; temp += "Netscape 6, IE 6, or IE5Mac are recommended."; else{ temp += "Alert! Your browser is obsolete.<br>"; temp += "You may enjoy the Web more if you upgrade."; temp +="<\/p>"; return temp; /* End of browser detection code */ /* Convert object name string or object reference into a valid object reference */ function getobj(elementid){ if (typeof elementid == "string") { return document.getelementbyid(elementid); else{ return elementid; /* Object Motion and Position Scripts */ /*This function places a positionable object (obj) in three dimensions (x,y, and z).*/ function shiftto(obj,x,y,z){ var newobj = getobj(obj) newobj.style.left = x + "px"; newobj.style.top = y + "px"; newobj.style.zindex = z; /*This function gets the x coordinate of a positionable object.*/ function getobjx(obj){ return parseint(getobj(obj).style.left); /*This function gets the y coordinate of a positionable object.*/ function getobjy(obj){ return parseint(getobj(obj).style.top); /*This function gets the z-index of a positionable object.*/

4 D-4 Appendix D The Complete codelibrary.js File function getobjz(obj){ return parseint(getobj(obj).style.zindex); /*The emptynode() function loops through the array of child nodes and removes each one.*/ function emptynode(elementid){ var thenode = getobj(elementid); for (i=0;i<thenode.childnodes.length;i++){ thenode.removechild(thenode.childnodes[i]); /*This function gets the available width of the window.*/ function getavailablewidth(){ var thewidth=null; /*Netscape uses window.innerwidth */ if (window.innerwidth) { thewidth = window.innerwidth; /*IE uses document.body.clientwidth */ if (document.body.clientwidth) { thewidth = document.body.clientwidth; return thewidth; /*This function gets the available height of the window. IE6.0 on Windows has a bug and returns null.*/ function getavailableheight(){ var theheight = null; /*Netscape uses window.innerheight */ if (window.innerheight) { theheight = window.innerheight; /*IE uses document.body.clientheight */ if (document.body.clientheight) { theheight = document.body.clientheight; return theheight; /*This function sets the total height and width of the window.*/ function setwindowsize(w,h){ window.resizeto(w,h); /*This function sets the size of the window to cover all of the screen.*/ function maximizewindow(){ window.moveto(0,0); window.resizeto(screen.availwidth,screen.availheight); /*END OF CHAPTER 4 CODE*/

5 Appendix D The Complete codelibrary.js File D-5 /*CHAPTER 5 CODE BEGINS HERE.*/ /* Redirects visitors who are using outdated browsers.*/ function checkdom(newlocation){ if (!thedom1){ window.location.replace(newlocation); /* This function changes the cursor. The second argument is optional. */ function setcursor(cursortype,thisobj){ if (UA.indexOf("msie 5")>=0){ if (cursortype == 'pointer') { cursortype='hand'; if (thisobj==null){ document.body.style.cursor = cursortype; else{ getobj(thisobj).style.cursor = cursortype; /*Set the background color of an object*/ function setbackground(thisobj, color){ getobj(thisobj).style.background = color; /*Set the text color of an object*/ function setcolor(thisobj, color){ getobj(thisobj).style.color = color; /*Setting the visibility of an object*/ function setvisibility(obj,vis){ if (vis == true vis=='visible' vis=='y'){ theobj.style.visibility = "visible"; else{ theobj.style.visibility = "hidden"; /*Getting the visibility of an object*/ function isvisible(obj) { return theobj.style.visibility;

6 D-6 Appendix D The Complete codelibrary.js File /*Setting the display of an object*/ function setdisplay(obj,dis){ if (dis==true dis=='block' dis=='y'){ theobj.style.display = "block"; else{ if (dis==false dis=='n'){ theobj.style.display = "none"; else{ theobj.style.display = dis; /*Getting the display of an object*/ function isdisplayed(obj) { return theobj.style.display; /*Set the clip region of an object*/ function setclip(obj,top,right,bottom,left){ var r = 'rect('+top+'px,'+right+'px,'+bottom+'px,'+left+'px)'; theobj.style.clip = r; /*END OF CHAPTER 5 CODE*/ /*CHAPTER 6 CODE BEGINS HERE*/ function showxy(evt){ if (window.event){ evt = window.event; if (evt){ var pos = evt.clientx + ", " + evt.clienty; window.status=pos; function checkmodel(evt){ if (window.event){ alert("this browser uses the IE4+ event model."); else{ if (evt){ alert("this browser uses the W3C/Netscape6 event model.");

7 Appendix D The Complete codelibrary.js File D-7 /*Getting the width of an object*/ function getwidth(obj){ if (theobj.clientwidth){ return parseint(theobj.clientwidth); if (theobj.offsetwidth){ return parseint(theobj.offsetwidth); /*Getting the Height of an object*/ function getheight(obj){ if (theobj.clientheight){ return parseint(theobj.clientheight); if (theobj.offsetheight){ return parseint(theobj.offsetheight); /*Drag and Drop Script for positioned divs and spans*/ /*Place this in your codelibrary.js file for future use.*/ var maxzdrag = document.getelementsbytagname("div").length; maxzdrag += document.getelementsbytagname("span").length; var dragelem=null; var dragging=false; function setdrag(evt,elementid){ dragelem=getobj(elementid); startdrag(); function startdrag() { dragging=true; document.onmousemove=dragobj; document.onmouseup=dropobj; function dragobj(evt) { if (window.event){ evt = window.event; if (evt){ var x = evt.clientx - parseint(getwidth(dragelem)/2); var y = evt.clienty - parseint(getheight(dragelem)/2); var z = maxzdrag++; shiftto(dragelem,x,y,z); var pos = "drag coordinates are: " + x + ", " + y + ", " + z;

8 D-8 Appendix D The Complete codelibrary.js File window.status=pos; return false; function dropobj() { dragging=false; document.onmousemove=null; document.onmouseup=null; window.status=""; /*End Drag and Drop Script*/ /*End of Chapter 6 Code*/ /*Chapter 7 code*/ /*Utility function to convert decimal to hexadecimal*/ function gethex(base10){ if (base10>255){base10=255; var hexset = " abcdef"; var themod = base10 % 16; var theremainder = (base10 - themod)/16; var hexnum = hexset.charat(themod) + ""; hexnum += hexset.charat(theremainder); return hexnum; /*End of Chapter 7 code*/ /* EXTRA FUNCTIONS YOU MAY FIND USEFUL IN YOUR WORK.*/ /* Many of these functions are from The Web Wizard's Guide to JavaScript.*/ /*Setting the width of an object*/ function setwidth(obj,w){ theobj.style.width = w + "px"; /*Setting the height of an object*/ function setheight(obj,h){ theobj.style.height = h + "px"; /* Code to manipulate values from form objects */ function getradiovalue(formname,radioname){ var theradiobuttons = document[formname][radioname]; for (i=0;i<theradiobuttons.length;i++){ if (theradiobuttons[i].checked){ return theradiobuttons[i].value;

9 Appendix D The Complete codelibrary.js File D-9 function showradiovalue(formname,radioname,thevalue){ var theradiobuttons = document[formname][radioname]; for (i=0;i<theradiobuttons.length;i++){ var temp = theradiobuttons[i].value; if (temp == thevalue){ theradiobuttons[i].checked = true; function getselectvalue(formname,selectname){ var themenu = document[formname][selectname]; var selecteditem = themenu.selectedindex; return themenu.options[selecteditem].value; function showselectvalue(formname,selectname,thevalue){ var themenu = document[formname][selectname]; for (i=0;i<themenu.options.length;i++){ var temp = themenu.options[i].value; if (temp == thevalue){ themenu.selectedindex = i; /* End of code to manipulate values from form objects */ /* Essential Arrays for pages with calendars */ var thedays = new Array(); thedays[0]="sunday"; thedays[1]="monday"; thedays[2]="tuesday"; thedays[3]="wednesday"; thedays[4]="thursday"; thedays[5]="friday"; thedays[6]="saturday"; var themonths = new Array(); themonths[0]="january"; themonths[1]="february"; themonths[2]="march"; themonths[3]="april";

10 D-10 Appendix D The Complete codelibrary.js File themonths[4]="may"; themonths[5]="june"; themonths[6]="july"; themonths[7]="august"; themonths[8]="september"; themonths[9]="october"; themonths[10]="november"; themonths[11]="december"; /* End of date code */ /* Beginning of Cookie Code Based on code by Bill Dortch of hidaho designs who has generously placed it in the public domain.*/ function SetCookie(name,value,expires,path,domain,secure){ var temp = name + "=" + escape(value); if (expires){ temp += "; expires=" + expires.togmtstring(); if (path){ temp += "; path=" + path; if (domain){ temp += "; domain=" + domain; if (secure){ temp += "; secure"; document.cookie = temp; function GetCookie(name){ var arg = name + "="; var alen = arg.length; var clen = document.cookie.length; var i = 0; while (i < clen) { var j = i + alen; if (document.cookie.substring(i,j) == arg){ return getcookieval(j); i = document.cookie.indexof(" ", i) + 1; if (i == 0) break; return null; function getcookieval(offset){ var endstr = document.cookie.indexof(";", offset); if (endstr == -1){

11 Appendix D The Complete codelibrary.js File D-11 endstr = document.cookie.length; return unescape(document.cookie.substring(offset,endstr)); function DeleteCookie (name,path,domain) { if (GetCookie(name)) { var temp = name + "="; temp += ((path)? "; path=" + path : ""); temp += ((domain)? "; domain=" + domain : ""); temp += "; expires=thu, 01-Jan-70 00:00:01 GMT"; document.cookie = temp; /* End of Cookie Code */ /* converts days to milliseconds */ function daystoms(days){ return days * 24 * 60 * 60 * 1000; /* converts weeks to milliseconds */ function weekstoms(weeks){ return weeks * 7 * 24 * 60 * 60 * 1000; /* converts years to milliseconds */ function yearstoms(years){ return years * * 24 * 60 * 60 * 1000; /* code to open a new window with various features */ var mywindow = null; function openwin(url,targetname,w,h,l,t,thefeatures) { var params = ""; var nofeatures = "toolbar=0,location=0,directories=0,status=0,"; nofeatures += "menubar=0,scrollbars=0,resizable=0,copyhistory=0"; var basicfeatures = "scrollbars=1,resizable=1,menubar=1 "; var morefeatures = "toolbar=1,location=1,directories=1,"; morefeatures += "status=1,copyhistory=1"; var dimensions = "width=" + W + ",height=" + H; /* The placement variable contains values for left/top and screenx/screeny. Use both to ensure compatibility with all browsers. */ var placement = "left=" + L + ",top=" + T; placement += ",screenx=" + L + ",screeny=" + T;

12 D-12 Appendix D The Complete codelibrary.js File /* The switch control structure makes decisions that depend on the value of a variable. In this case the value of the parameter variable thefeatures determines the value of the variable params. */ switch (thefeatures){ case "none": params += nofeatures; break; case "basic": params += basicfeatures; break; case "full": params += basicfeatures + "," + morefeatures; break; default: params += thefeatures; /* Adds the dimensions and placement info to the params variable. */ params += "," + dimensions + "," + placement; /* The window.open() method creates mywindow. */ mywindow = window.open(url,targetname,params); function closewin(){ if (mywindow!= null){ mywindow.close(); mywindow = null; /* End of openwin() and closewin() functions */ /* End of codelibrary.js */

dhtml2010.pdf February 25,

dhtml2010.pdf February 25, Dynamic HTML INP 2009/2010 - Client Side Scripting: The DOM and JavaScript Lennart Herlaar lennart@cs.uu.nl http://www.cs.uu.nl/people/lennart room A104, telephone 030-2533921 February 25, 2010 The DOM