DHTML Library - lib_bwcheck

This the default browsercheck function.

This function is needed to get the library to work.

Function code

//Browsercheck (needed) ***************
function lib_bwcheck(){ 
  this.ver=navigator.appVersion
  this.agent=navigator.userAgent
  this.dom=document.getElementById?1:0
  this.opera5=this.agent.indexOf("Opera 5")>-1
  this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; 
  this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
  this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
  this.ie=this.ie4||this.ie5||this.ie6
  this.mac=this.agent.indexOf("Mac")>-1
  this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
  this.ns4=(document.layers && !this.dom)?1:0;
  this.bw=(this.ie6||this.ie5||this.ie4||this.ns4||this.ns6||this.opera5)
  return this
}bw=new lib_bwcheck() //Browsercheck object

DHTML Library - lib_message

This is a just a small function that the rest of the functions use to return debug information to the user.

This function is needed to get the library to work.

Function code

//Debug function ******************

function lib_message(txt){alert(txt); return false}

Arguments to the function
txt - The error text from the other functions that will be alerted.

DHTML Library - lib_obj

This is the main function that makes the cross-browser objects and set/get all variables for the objects.

This function is needed to get the library to work.

Function code

//Lib objects  ********************
function lib_obj(obj,nest){ 
  if(!bw.bw) return lib_message('Old browser')
  nest=(!nest) ? "":'document.'+nest+'.'
  this.evnt=bw.dom? document.getElementById(obj):
    bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;	
  if(!this.evnt) return lib_message('The layer does not exist ('+obj+')' 
    +'- \nIf your using Netscape please check the nesting of your tags!')
  this.css=bw.dom||bw.ie4?this.evnt.style:this.evnt; 
  this.ref=bw.dom||bw.ie4?document:this.css.document;
  this.x=parseInt(this.css.left)||this.css.pixelLeft||this.evnt.offsetLeft||0;
  this.y=parseInt(this.css.top)||this.css.pixelTop||this.evnt.offsetTop||0
  this.w=this.evnt.offsetWidth||this.css.clip.width||
    this.ref.width||this.css.pixelWidth||0; 
  this.h=this.evnt.offsetHeight||this.css.clip.height||
    this.ref.height||this.css.pixelHeight||0
  this.c=0 //Clip values
  if((bw.dom || bw.ie4) && this.css.clip) {
  this.c=this.css.clip; this.c=this.c.slice(5,this.c.length-1); 
  this.c=this.c.split(' ');
  for(var i=0;i<4;i++){this.c[i]=parseInt(this.c[i])}
  }
  this.ct=this.css.clip.top||this.c[0]||0; 
  this.cr=this.css.clip.right||this.c[1]||this.w||0
  this.cb=this.css.clip.bottom||this.c[2]||this.h||0; 
  this.cl=this.css.clip.left||this.c[3]||0
  this.obj = obj + "Object"; eval(this.obj + "=this")
  return this
}

DHTML Library - lib_moveIt

This function moves  the object to the spesified position.

Function code

//Moving object to **************
lib_obj.prototype.moveIt = function(x,y){
  this.x=x;this.y=y; this.css.left=x;this.css.top=y

}

Arguments to the function
x - The left position to move to
y - The top position to move to

Properties made or changed by the function
this.x - Variable that holds the left position is updated
this.y - Variable that holds the top position is updated

DHTML Library - lib_moveBy

This function moved the object by the spesified number of pixels.

Function code

//Moving object by ***************
lib_obj.prototype.moveBy = function(x,y){
  this.css.left=this.x+=x; this.css.top=this.y+=y
}

DHTML Library - lib_showIt

Shows the object.

Function code

//Showing object ************
lib_obj.prototype.showIt = function(){this.css.visibility="visible"}

DHTML Library - lib_hideIt

Hides the object

Function code

//Hiding object ********** lib_obj.prototype.hideIt = function(){this.css.visibility="hidden"}

DHTML Library - lib_bg

Changes the background color of the object.

Function code

//Changing backgroundcolor ***************
lib_obj.prototype.bg = function(color){ 
	if(bw.opera) this.css.background=color
	else if(bw.dom || bw.ie4) this.css.backgroundColor=color
	else if(bw.ns4) this.css.bgColor=color  
}

DHTML Library - lib_writeIt

This function replaces the content inside the object with the new content you spesify. You can use regular text or HTML.

Function code

//Writing content to object ***
lib_obj.prototype.writeIt = function(text,startHTML,endHTML){
	if(bw.ns4){
    if(!startHTML){startHTML=""; endHTML=""}
	  this.ref.open("text/html"); 
    this.ref.write(startHTML+text+endHTML); 
    this.ref.close()
	}else this.evnt.innerHTML=text

}

DHTML Library - lib_clipTo

Clips the object to the spesified coords.

Function code

//Clipping object to ******
lib_obj.prototype.clipTo = function(t,r,b,l,setwidth){ 
  this.ct=t; this.cr=r; this.cb=b; this.cl=l
  if(bw.ns4){
    this.css.clip.top=t;this.css.clip.right=r
    this.css.clip.bottom=b;this.css.clip.left=l
  }else{
    if(t<0)t=0;if(r<0)r=0;if(b<0)b=0;if(b<0)b=0
    this.css.clip="rect("+t+","+r+","+b+","+l+")";
    if(setwidth){this.css.pixelWidth=this.css.width=r; 
    this.css.pixelHeight=this.css.height=b}
  }
}

Arguments to the function
t - Clip top
r - Clip right (width)
b - Clip bottom (height)
l - Clip left
setwidth - This sets the width of the object to the same as the clip. With IE and NS6 this should be used in most cases.

Properties made or changed by the function
this.ct - Variable for clip top is updated
this.cr - Variable for clip right is updated
this.cb - Variable for clip bottom is updated
this.cl - Variable for clip left is updated

DHTML Library - lib_clipBy

This function clips the object by as many pixels as spesified. It uses the clipTo to do the actual clipping so you have to have that function as well for this one to work.

Function code

//Clipping object by ******
lib_obj.prototype.clipBy = function(t,r,b,l,setwidth){ 
  this.clipTo(this.ct+t,this.cr+r,this.cb+b,this.cl+l,setwidth)
}

Arguments to the function
t - Clip top
r - Clip right (width)
b - Clip bottom (height)
l - Clip left
setwidth - This sets the width of the object to the same as the clip. With IE and NS6 this should be used in most cases

DHTML Library - lib_clipIt

This function makes a clip animation to the spesified coords.

It's really 2 functions, but you will only be using the clipIt function. The clip function is only used by the clipIt function.

This function uses the lib_clipTo functin to do the actual clipping so you need that as well.

Function code

//Clip animation ************
lib_obj.prototype.clipIt = function(t,r,b,l,step,fn,wh){
  tstep=Math.max(Math.max(Math.abs((t-this.ct)/step),Math.abs((r-this.cr)/step)),
    Math.max(Math.abs((b-this.cb)/step),Math.abs((l-this.cl)/step)))
  if(!this.clipactive){
    this.clipactive=true; if(!wh) wh=0; if(!fn) fn=0
    this.clip(t,r,b,l,(t-this.ct)/tstep,(r-this.cr)/tstep,
      (b-this.cb)/tstep,(l-this.cl)/tstep,tstep,0, fn,wh)
  }
}
lib_obj.prototype.clip = function(t,r,b,l,ts,rs,bs,ls,tstep,astep,fn,wh){
  if(astep

DHTML Library - lib_slideIt

This makes a sliding animation to the spesified coords.

It's really 2 functions, but you will only be using the slideIt function. The slide function is only used by the slideIt function.

This function uses the lib_moveBy and lib_moveIt functions so you need to have those as well.

Function code

//Slide animation ***********
lib_obj.prototype.slideIt = function(endx,endy,inc,speed,fn,wh){
  if(!this.slideactive){
    var distx = endx - this.x;
    var disty = endy - this.y
    var num = Math.sqrt(Math.pow(distx,2)+Math.pow(disty,2))/inc
    var dx = distx/num; var dy = disty/num
    this.slideactive = 1; 
    if(!wh) wh=0; if(!fn) fn=0
    this.slide(dx,dy,endx,endy,speed,fn,wh)
    }
}
lib_obj.prototype.slide = function(dx,dy,endx,endy,speed,fn,wh) {
  if(this.slideactive&&
  (Math.floor(Math.abs(dx))

DHTML Library - lib_circleIt

I've added this function mostly for fun. It makes the object go in a circle. You can make some funny effects by clicking both example links several times :}

This uses the lib_moveIt function so you need that one as well.

Function code

//Circle animation ****************
lib_obj.prototype.circleIt = function(rad,ainc,a,enda,xc,yc,speed,fn) {
  if((Math.abs(ainc)

DHTML Library - lib_doc_size

This is an extra function used to get the availble document size and height.

Function code

//Document size object ********
function lib_doc_size(){ 
  this.x=0;this.x2=bw.ie && document.body.offsetWidth-20||innerWidth||0;
  this.y=0;this.y2=bw.ie && document.body.offsetHeight-5||innerHeight||0;
  if(!this.x2||!this.y2) return message('Document has no width or height') 
  this.x50=this.x2/2;this.y50=this.y2/2;
  return this;
}

DHTML Library - lib_dragdrop

This code adds simple drag and drop functionality to your objects. I will make this one more advanced later.

Function code