// ******************************************************* // mDiv Tools v1.0 - www.marotori.com // This Code is release a GPL // Use it if you like it - we do ;-) // ******************************************************* // ******************************************************* // USAGE // ******************************************************* // create a div /* mCreateDiv('test'); mRemoveDiv('test'); // set the content of the div mDivInnerHTML('test','my content'); // size mDivSize('test',200,200); mDivEnlargeBy('test',100,400); // width & height mDivEnlargeByW('test',200); // width only mDivEnlargeByH('test',200); // height only mDivAnimateEnlargeByW('test','200','5'); mDivAnimateEnlargeByH('test','200','5'); mDivAnimateEnlargeBy('test','200','5'); mDivAnimateShrinkByW('test','200','5'); mDivAnimateShrinkByH('test','200','5'); mDivAnimateShrinkBy('test','200','5'); mDivShrinkBy('test',100,400); mDivShrinkByW('test',200); mDivShrinkByH('test',200); mDivAnimateSizeToW('test','600','2'); mDivAnimateSizeToH('test','10','2'); mDivAnimateSizeTo('test','500','200','5','5'); // position mDivPos('test',100,100,'absolute'); mDivAnimatePosY('test','100','2'); mDivAnimatePosX('test','100','2'); mDivAnimatePos('test',200,200,5,5); // attributes mDivOverflow('test','scroll'); mDivBackgroundColor('test','#CCCCCC'); mDivBorder('test','4','solid','#FF0000'); */ // ******************************************************* var mStepTime = 5; // global animation timers // ******************************************************* // ******************************************************* // create a div of X name // ******************************************************* function mCreateDiv(divIdName) { // create body if not defined if(!document.body){ document.write(''); } if(document.body){ var newdiv = document.createElement('div'); newdiv.setAttribute('id',divIdName); newdiv.setAttribute('name',divIdName); document.body.appendChild(newdiv); } else { alert('[error] unable to create div'); } } function mRemoveDiv(divNum) { //var d = document.getElementById('body'); var olddiv = document.getElementById(divNum); document.body.removeChild(olddiv); } // ******************************************************* // set the inner html code of a div // ******************************************************* function mDivInnerHTML(divIdName,content){ if(document.getElementById(divIdName)){ document.getElementById(divIdName).innerHTML=content; } else { alert('[error] unable to locate div ' . divIdName); } } // ******************************************************* // style the border of a div // ******************************************************* function mDivBorder(divIdName,Width,bStyle,Color){ if(document.getElementById(divIdName)){ document.getElementById(divIdName).style.borderWidth=Width + 'px'; document.getElementById(divIdName).style.borderColor=Color; document.getElementById(divIdName).style.borderStyle=bStyle; } else { alert('[error] unable to locate div ' . divIdName); } } // ******************************************************* // set a divs background colour // ******************************************************* function mDivBackgroundColor(divIdName,Color){ if(document.getElementById(divIdName)){ document.getElementById(divIdName).style.backgroundColor=Color; } else { alert('[error] unable to locate div ' . divIdName); } } // set a divs opacity function mDivOpacity(divIdName,opacity){ if(document.getElementById(divIdName)){ opacity = (opacity == 100)?99.999:opacity; // IE/Win document.getElementById(divIdName).style.filter = "alpha(opacity:"+opacity+")"; // Safari<1.2, Konqueror document.getElementById(divIdName).style.KHTMLOpacity = opacity/100; // Older Mozilla and Firefox document.getElementById(divIdName).style.MozOpacity = opacity/100; // Safari 1.2, newer Firefox and Mozilla, CSS3 document.getElementById(divIdName).style.opacity = opacity/100; } else { alert('[error] unable to locate div ' . divIdName); } } // ******************************************************* // set the size of a div // ******************************************************* function mDivSize(divIdName,Width,Height){ if(document.getElementById(divIdName)){ document.getElementById(divIdName).style.width=parseInt(Width) + 'px'; document.getElementById(divIdName).style.height=parseInt(Height) + 'px'; } else { alert('[error] unable to locate div ' . divIdName); } } // ******************************************************* // set the size of a div in percentages // ******************************************************* function mDivSizePercent(divIdName,Width,Height){ if(document.getElementById(divIdName)){ document.getElementById(divIdName).style.width=parseInt(Width) + '%'; document.getElementById(divIdName).style.height=parseInt(Height) + '%'; } else { alert('[error] unable to locate div ' . divIdName); } } // ******************************************************* // position a div // ******************************************************* function mDivPos(divIdName,x,y,position){ if(document.getElementById(divIdName)){ if(mVarIsDefined(window['timerNameW' + divIdName])){ clearTimeout(window['timerNameW' + divIdName]); } document.getElementById(divIdName).style.position=position; document.getElementById(divIdName).style.top=parseInt(x) + 'px'; document.getElementById(divIdName).style.left=parseInt(y) + 'px'; return true; } else { alert('[error] unable to locate div ' . divIdName); } } // ******************************************************* // turn on overflow // ******************************************************* function mDivOverflow(divIdName,type){ if(document.getElementById(divIdName)){ document.getElementById(divIdName).style.overflow=type; } else { alert('[error] unable to locate div ' . divIdName); } } // ******************************************************* // size a div by width, using animation // ******************************************************* function mDivAnimateSizeToW(divIdName,Width,SpeedW){ if(SpeedW == undefined){ var SpeedW = 5;} if(document.getElementById(divIdName)){ var currentWidth = parseInt(document.getElementById(divIdName).style.width); if(currentWidth <= Width){ var newwidth = (parseInt(currentWidth) + parseInt(SpeedW)); var diff = Width - parseInt(currentWidth); } else { var newwidth = (parseInt(currentWidth) - parseInt(SpeedW)); var diff = parseInt(currentWidth) - Width; } if(newwidth >= 0){ document.getElementById(divIdName).style.width = newwidth + 'px'; if(diff > SpeedW){ var NdivIdName = divIdName; var NWidth = parseInt(Width); var NSpeedW = SpeedW; var NmStepTime = mStepTime; if(mVarIsDefined(window['timerNameW' + divIdName])){ clearTimeout(window['timerNameW' + divIdName]); } window['timerNameW' + divIdName] = setTimeout("mDivAnimateSizeToW('" + NdivIdName + "','" + NWidth + "','" + NSpeedW +"')",NmStepTime); } else { document.getElementById(divIdName).style.width=Width + 'px'; } } } else { alert('[error] unable to locate div ' . divIdName); } } // ******************************************************* // size a div by height, using animation // ******************************************************* function mDivAnimateSizeToH(divIdName,Height,SpeedH){ if(SpeedH == undefined){ var SpeedH = 5;} if(document.getElementById(divIdName)){ var currentHeight = parseInt(document.getElementById(divIdName).style.height); if(currentHeight <= Height){ var newheight = (parseInt(currentHeight) + parseInt(SpeedH)); var diff = Height - parseInt(currentHeight); } else { var newheight = (parseInt(currentHeight) - parseInt(SpeedH)); var diff = parseInt(currentHeight) - Height; } document.getElementById(divIdName).style.height= newheight + 'px'; if(newheight >= 0){ if(diff > SpeedH){ if(mVarIsDefined(window['timerNameH' + divIdName])){ clearTimeout(window['timerNameH' + divIdName]); } window['timerNameH' + divIdName] = setTimeout("mDivAnimateSizeToH('" + divIdName + "','" + Height + "','" + SpeedH +"')",mStepTime); } else { document.getElementById(divIdName).style.height=Height + 'px'; } } } else { alert('[error] unable to locate div ' . divIdName); } } // ******************************************************* // size a div by width and height, using animation // ******************************************************* function mDivAnimateSizeTo(divIdName,W,H,SpeedW,SpeedH){ if(SpeedH == undefined){ var SpeedH = 5;} if(SpeedW == undefined){ var SpeedW = 5;} if(document.getElementById(divIdName)){ mDivAnimateSizeToW(divIdName,W,SpeedW); mDivAnimateSizeToH(divIdName,H,SpeedH); } else { alert('[error] unable to locate div ' . divIdName); } } // ******************************************************* // position a div by X, using animation // ******************************************************* function mDivAnimatePosX(divIdName,X,SpeedX){ if(SpeedX == undefined){ var SpeedX = 5;} if(document.getElementById(divIdName)){ var currentX = parseInt(document.getElementById(divIdName).style.top); if(currentX <= X){ var newX = parseInt(currentX) + parseInt(SpeedX); var diff = X - parseInt(currentX); } else { var newX = parseInt(currentX) - parseInt(SpeedX); var diff = parseInt(currentX) - X; } document.getElementById(divIdName).style.top = newX + 'px'; if(diff > SpeedX){ NdivIdName = divIdName; NX = X; NSpeedX = SpeedX; NmStepTime = mStepTime; if(mVarIsDefined(window['timerNameX' + divIdName])){ clearTimeout(window['timerNameX' + divIdName]); } window['timerNameX' + divIdName] = setTimeout("mDivAnimatePosX('" + NdivIdName + "','" + NX + "','" + NSpeedX + "')",NmStepTime); } else { document.getElementById(divIdName).style.top=X + 'px'; } } else { alert('[error] unable to locate div ' . divIdName); } } // check if var is defined function mVarIsDefined( variable){ return eval('(typeof('+variable+') != "undefined");'); } // ******************************************************* // position a div by Y, using animation // ******************************************************* function mDivAnimatePosY(divIdName,Y,SpeedY){ if(SpeedY == undefined){ var SpeedY = 5;} if(document.getElementById(divIdName)){ var currentY = parseInt(document.getElementById(divIdName).style.left); if(currentY <= Y){ newY = parseInt(currentY) + parseInt(SpeedY); diff = Y - parseInt(currentY); } else { var newY = parseInt(currentY) - parseInt(SpeedY); var diff = parseInt(currentY) - Y; } document.getElementById(divIdName).style.left = newY + 'px'; if(diff > SpeedY){ NdivIdName = divIdName; NY = Y; NSpeedY = SpeedY; NmStepTime = mStepTime; if(mVarIsDefined(window['timerNameY' + divIdName])){ clearTimeout(window['timerNameY' + divIdName]); } window['timerNameY' + divIdName] = setTimeout("mDivAnimatePosY('" + NdivIdName + "','" + NY + "','" + NSpeedY + "')",NmStepTime); } else { document.getElementById(divIdName).style.left=Y + 'px'; } } else { alert('[error] unable to locate div ' . divIdName); } } // ******************************************************* // position a div by X & Y, using animation // ******************************************************* function mDivAnimatePos(divIdName,X,Y,SpeedX,SpeedY){ if(SpeedX == undefined){ var SpeedX = 5;} if(SpeedY == undefined){ var SpeedY = 5;} if(document.getElementById(divIdName)){ mDivAnimatePosY(divIdName,Y,SpeedY); mDivAnimatePosX(divIdName,X,SpeedX); } else { alert('[error] unable to locate div ' . divIdName); } } // ******************************************************* // enlarge a div by width // ******************************************************* function mDivEnlargeByW(divIdName,w){ if(document.getElementById(divIdName)){ var currentWidth = parseInt(document.getElementById(divIdName).style.width); var nw = parseInt(currentWidth + parseInt(w)); document.getElementById(divIdName).style.width=nw + 'px'; } else { alert('[error] unable to locate div ' . divIdName); } } // ******************************************************* // enlarge a div by height // ******************************************************* function mDivEnlargeByH(divIdName,h){ if(document.getElementById(divIdName)){ var currentHeight = parseInt(document.getElementById(divIdName).style.height); var nh = parseInt(currentHeight + parseInt(h)); document.getElementById(divIdName).style.height=nh + 'px'; } else { alert('[error] unable to locate div ' . divIdName); } } // ******************************************************* // enlarge a div by width and height // ******************************************************* function mDivEnlargeBy(divIdName,w,h){ if(document.getElementById(divIdName)){ var nh = parseInt(h); var nw = parseInt(w); mDivEnlargeByH(divIdName,nh); mDivEnlargeByW(divIdName,nw); } else { alert('[error] unable to locate div ' . divIdName); } } // ******************************************************* function mDivShrinkByW(divIdName,w){ if(document.getElementById(divIdName)){ var currentWidth = parseInt(document.getElementById(divIdName).style.width); var nw = parseInt(currentWidth - parseInt(w)); if(nw <=0){ nw = 0;} document.getElementById(divIdName).style.width=nw + 'px'; } else { alert('[error] unable to locate div ' . divIdName); } } // ******************************************************* // shrink a div by height // ******************************************************* function mDivShrinkByH(divIdName,h){ if(document.getElementById(divIdName)){ var currentHeight = parseInt(document.getElementById(divIdName).style.height); var nh = parseInt(currentHeight - parseInt(h)); if(nh <=0){ nh = 0;} document.getElementById(divIdName).style.height=nh + 'px'; } else { alert('[error] unable to locate div ' . divIdName); } } // ******************************************************* // shrink a div by width and height // ******************************************************* function mDivShrinkBy(divIdName,w,h){ if(document.getElementById(divIdName)){ nh = parseInt(h); nw = parseInt(w); mDivShrinkByH(divIdName,nh); mDivShrinkByW(divIdName,nw); } else { alert('[error] unable to locate div ' . divIdName); } } // ******************************************************* // enlarge a div by width using animation // ******************************************************* function mDivAnimateEnlargeByW(divIdName,w,speed){ if(speed == undefined){ var speed = 5;} if(document.getElementById(divIdName)){ var nspeed = parseInt(speed); var currentWidth = parseInt(document.getElementById(divIdName).style.width); var targetWidth = parseInt(w) + currentWidth; mDivAnimateSizeToW(divIdName,targetWidth,nspeed); } else { alert('[error] unable to locate div ' . divIdName); } } // ******************************************************* // enlarge a div by height using animation // ******************************************************* function mDivAnimateEnlargeByH(divIdName,h,speed){ if(speed == undefined){ var speed = 5;} if(document.getElementById(divIdName)){ var nspeed = parseInt(speed); var currentHeight = parseInt(document.getElementById(divIdName).style.height); var targetHeight = parseInt(h) + currentHeight; mDivAnimateSizeToH(divIdName,targetHeight,nspeed); } else { alert('[error] unable to locate div ' . divIdName); } } // ******************************************************* // enlarge a div by height and width using animation // ******************************************************* function mDivAnimateEnlargeBy(divIdName,x,speed){ if(speed == undefined){ var speed = 5;} if(document.getElementById(divIdName)){ var nspeed = parseInt(speed); var currentHeight = parseInt(document.getElementById(divIdName).style.height); var targetHeight = parseInt(x) + currentHeight; var currentWidth = parseInt(document.getElementById(divIdName).style.width); var targetWidth = parseInt(x) + currentWidth; mDivAnimateSizeToW(divIdName,targetWidth,nspeed); mDivAnimateSizeToH(divIdName,targetHeight,nspeed); } else { alert('[error] unable to locate div ' . divIdName); } } // ******************************************************* // shrink a div by width using animation // ******************************************************* function mDivAnimateShrinkByW(divIdName,w,speed){ if(speed == undefined){ var speed = 5;} if(document.getElementById(divIdName)){ var nspeed = parseInt(speed); var currentWidth = parseInt(document.getElementById(divIdName).style.width); var targetWidth = currentWidth - parseInt(w); mDivAnimateSizeToW(divIdName,targetWidth,nspeed); } else { alert('[error] unable to locate div ' . divIdName); } } // ******************************************************* // shrink a div by height using animation // ******************************************************* function mDivAnimateShrinkByH(divIdName,h,speed){ if(speed == undefined){ var speed = 5;} if(document.getElementById(divIdName)){ var nspeed = parseInt(speed); var currentHeight = parseInt(document.getElementById(divIdName).style.height); var targetHeight = currentHeight - parseInt(h); mDivAnimateSizeToH(divIdName,targetHeight,nspeed); } else { alert('[error] unable to locate div ' . divIdName); } } // ******************************************************* // shrink a div by width and height using animation // ******************************************************* function mDivAnimateShrinkBy(divIdName,x,speed){ if(speed == undefined){ speed = 5;} if(document.getElementById(divIdName)){ var nspeed = parseInt(speed); var currentHeight = parseInt(document.getElementById(divIdName).style.height); var targetHeight = currentHeight -parseInt(x); var currentWidth = parseInt(document.getElementById(divIdName).style.width); var targetWidth = currentWidth - parseInt(x); mDivAnimateSizeToW(divIdName,targetWidth,nspeed); mDivAnimateSizeToH(divIdName,targetHeight,nspeed); } else { alert('[error] unable to locate div ' . divIdName); } }