My Little Scripts - dhtml-layers.js

< div id="dhtml_div" style="position:absolute;" >
< Scripts.com - Get the best scripts NOW!
< HotScripts.com - Over 10 web rings.
< more links...
< /div >
Scripts.com - Get the best scripts NOW!
HotScripts.com - Over 10 web rings.
more links...
Index News Downloads E-Mail me Forum
DHTML_LAYER.JS
Animate your website with the aid of DHTML. After being confounded by the javascript files that I came across on the internet, I decided to write an API that I could live with. Any content that you place within a <div> tag with the position css attribute set to absolute, can be manipulated like a sprite. Just don't forget to set id="unique_name", and pass "unique_name" to the GetLayer() function.
//My Layer manipulating API, works in ns4 and ie5 only, for now.
//I say this because all the functions that involve getting the
//WIDTH or HEIGHT of a layer only work well in ns4 and ie5.
//Shame on you ns6, you're supposed to get better as your
//version number goes up... shame...

//Very important function, returns an object that gets
//used by all the other functions in this API.

function GetLayer(layer)
         {
         var ReturnLayer = null;
         if(navigator.appName == 'Netscape')
           {
           if(parseInt(navigator.appVersion) == 5)
              ReturnLayer = document.getElementById(layer);
           else
              eval('ReturnLayer = document.' + layer + ';');
           }
         else
           {
           eval('ReturnLayer = document.all.' + layer + ';');
           }
         return ReturnLayer; 
         }

function Hide(layer)
         {
         if(navigator.appName == 'Netscape')
           {
           if(parseInt(navigator.appVersion) == 5)
              layer.style.visibility = 'hidden';               
           else
              layer.visibility = 'hide';                          
           }
         else
           {
           layer.style.visibility = 'hidden';           
           }
         }
         
function Show(layer)
         {
         if(navigator.appName == 'Netscape')
           {
           if(parseInt(navigator.appVersion) == 5)
              layer.style.visibility = 'visible';               
           else
              layer.visibility = 'show';                          
           }
         else
           {
           layer.style.visibility = 'visible';           
           }
         }
         
function Visible(layer)         
         {
         var Visible = true
         if(navigator.appName == 'Netscape')
           {
           if(parseInt(navigator.appVersion) == 5)
              if(layer.style.visibility == 'hidden') Visible = false;               
           else
              if(layer.visibility == 'hide') Visible = false;                          
           }
         else
           {
           if(layer.style.visibility == 'hidden') Visible = false;           
           }
         return Visible;
         }

function SetZ(z, layer)
         {
         if(navigator.appName == 'Netscape')
           {
           if(parseInt(navigator.appVersion) == 5)
              layer.style.zIndex = z;
           if(parseInt(navigator.appVersion) == 4)
              layer.zIndex = z;
           }
         else
           {
           layer.style.zIndex = z;
           }
         }

function GetZ(layer)
         {
         if(navigator.appName == 'Netscape')
           {
           if(parseInt(navigator.appVersion) == 5)
              return(parseInt(layer.style.zIndex));
           if(parseInt(navigator.appVersion) == 4)
              return(layer.zIndex);
           }
         else
           {
           return(layer.style.zIndex);
           }
         }         
		 
function GetX(layer)
         {
         if(navigator.appName == 'Netscape')
           {
           if(parseInt(navigator.appVersion) == 5)
              return(parseInt(layer.style.left));
           if(parseInt(navigator.appVersion) == 4)
              return(layer.left);
           }
         else
           {
           return(layer.style.pixelLeft);
           }
         }

function GetW(layer)
         {
         if(navigator.appName == 'Netscape')
           {
           if(parseInt(navigator.appVersion) == 5)             
              return(parseInt(layer.style.width));		     
           if(parseInt(navigator.appVersion) == 4)
              return(layer.clip.width);                      
           }
         else
           {
           if(navigator.appVersion.indexOf('MSIE 4') > 0)
              return(layer.style.pixelWidth);
           else
              return(layer.offsetWidth);
           }
         }

function SetW(x, layer)
         {         
         if(navigator.appName == 'Netscape')
           {
           if(parseInt(navigator.appVersion) == 5)
              layer.style.width = x;  
           if(parseInt(navigator.appVersion) == 4)
              layer.clip.width = x;                    
           }
         else
           {           
           if(navigator.appVersion.indexOf('MSIE 4') > 0)
              layer.style.pixelWidth = x;
           }
         }         
         
function GetY(layer)
         {
         if(navigator.appName == 'Netscape')
           {
           if(parseInt(navigator.appVersion) == 5)
              return(parseInt(layer.style.top));
           if(parseInt(navigator.appVersion) == 4)
              return(layer.top);
           }
         else
           {
           return(layer.style.pixelTop);
           }
         }

function GetH(layer)
         {
         if(navigator.appName == 'Netscape')
           {
           if(parseInt(navigator.appVersion) == 5)             
              return(parseInt(layer.style.height));		     
           if(parseInt(navigator.appVersion) == 4)
              return(layer.clip.height);
           }
         else
           {           
           if(navigator.appVersion.indexOf('MSIE 4') > 0)		  
              return(layer.style.pixelHeight);
           else
              return(layer.offsetHeight);
           }
         }
         
function SetH(y, layer)         
         {
         if(navigator.appName == 'Netscape')
           {
           if(parseInt(navigator.appVersion) == 5)             
              layer.style.height = y;             
           if(parseInt(navigator.appVersion) == 4)
              layer.clip.height = y;
           }
         else
           {           
           if(navigator.appVersion.indexOf('MSIE 4') > 0)		  
              layer.style.pixelHeight = y;
           }
         }
	       	 	
function Move(x, y, layer)
         {
         if(navigator.appName == 'Netscape')
           {
           if(parseInt(navigator.appVersion) == 5)
             {
             layer.style.left = x;
             layer.style.top = y;
             }
           if(parseInt(navigator.appVersion) == 4)
             {
             layer.left = x;
             layer.top = y;
             }
           }
         else
           {
           layer.style.pixelLeft = x;
           layer.style.pixelTop = y;
           }
         }

function MoveBy(x, y, layer)
         {
         if(navigator.appName == 'Netscape')
           {
           if(parseInt(navigator.appVersion) == 5)
             {
             var current_x = parseInt(layer.style.left);
             if(isNaN(current_x)) current_x = 0;
             layer.style.left = current_x + x;
             var current_y = parseInt(layer.style.top);
             if(isNaN(current_y)) current_y = 0;
             layer.style.top = current_y + y;
             }
           else
             {
             layer.left += parseInt(x);
             layer.top += parseInt(y);
             }              
           }
         else
           {
           layer.style.pixelLeft += parseInt(x); 
           layer.style.pixelTop += parseInt(y);                            
           }
         }         
  
//The following functions are an extension to my "basic" API.
//Because of the way setTimeout() works, layer is a string
//instead of an object. Instead of passing ObjectName as a 
//parameter, you would pass 'ObjectName'.
       
function Slide(x, y, dt, layer)
         {                                    
         eval('var current_x = GetX(' + layer + ');');
         eval('var current_y = GetY(' + layer + ');');
         
         var dX = x - current_x;
         var dY = y - current_y;
                           
         if(dX * dX + dY * dY > dt * dt)
           {
           var dx = (dX / Math.sqrt(dX * dX + dY * dY)) * dt;
           var dy = (dY / Math.sqrt(dX * dX + dY * dY)) * dt;
           
           eval('MoveBy(' + dx + ',' + dy + ', ' + layer +');');
           
           var NextSlide = 'Slide(' + x + ',' + y + ', ' +
                                  dt + ', ' +
                                  '\'' + layer + '\')';           
           setTimeout(NextSlide, 30);                                                   
           }           
         else
           {              
           eval('Move(' + x + ', ' + y + ', ' + layer + ');');
           }
         }
         
function Warp(x, y, dt, layer)
         {                                    
         eval('var current_x = GetX(' + layer + ');');
         eval('var current_y = GetY(' + layer + ');');
         
         var dX = x - current_x;
         var dY = y - current_y;
                           
         if(dt > 0)
           {
           var dx = dX / dt;
           var dy = dY / dt;
           
           eval('MoveBy(' + dx + ',' + dy + ', ' + layer +');');
           
           var NextWarp = 'Warp(' + x + ',' + y + ', ' +
                                (dt - 1) + ', ' +
                                '\'' + layer + '\')';           
           setTimeout(NextWarp, 30);                                                   
           }           
         else
           {              
           eval('Move(' + x + ', ' + y + ', ' + layer + ');');
           }
         }
         
function RookOverTo(x, y, dx, dy, layer)
         {
         if(Math.random() < 0.50)
           {
           RookOverToX(x, y, dx, dy, layer);
           }
         else
           {
           RookOverToY(x, y, dx, dy, layer);
           }
         }
         
function RookOverToX(x, y, dt, dy, layer)
         {
         eval('var current_x = GetX(' + layer + ');');
         
         var dX = x - current_x;
         
         if(dt > 0)
           {
           var dx = dX / dt;           
           
           eval('MoveBy(' + dx + ', 0, ' + layer +');');
           
           var NextRook = 'RookOverToX(' + x + ',' + y + ', ' +
                                       (dt - 1) + ', ' + dy + ', ' +
                                       '\'' + layer + '\')';           
           setTimeout(NextRook, 30);                                                   
           }           
         else
           {
           eval('var current_y = GetY(' + layer + ');');
           eval('Move(' + x + ', ' + current_y + ', ' + layer + ');');
           if(current_y != y)
             {             
             RookOverToY(x, y, dt, dy, layer);             
             }
           }
         }
         
function RookOverToY(x, y, dx, dt, layer)         
         {
         eval('var current_y = GetY(' + layer + ');');
         
         var dY = y - current_y;
         
         if(dt > 0)
           {
           var dy = dY / dt;           
           
           eval('MoveBy(0, ' + dy + ', ' + layer +');');
           
           var NextRook = 'RookOverToY(' + x + ',' + y + ', ' +
                                       dx + ', ' + (dt - 1) + ', ' +
                                       '\'' + layer + '\')';           
           setTimeout(NextRook, 30);                                                   
           }           
         else
           {
           eval('var current_x = GetX(' + layer + ');');
           eval('Move(' + current_x + ', ' + y + ', ' + layer + ');');
           if(current_x != x)
             {             
             RookOverToX(x, y, dx, dt, layer);             
             }
           }
         }


//This function is meant to be used with a mouse event handler.
//x and y would be the position of the mouse pointer.
		 		 		 
function Selected(x, y, layer)
         {         
         if(navigator.appName == 'Netscape')
           {
           if(parseInt(navigator.appVersion) == 5)                             
              if(x > parseInt(layer.style.left) && x < parseInt(layer.style.left) + parseInt(layer.style.width) &&
                 y > parseInt(layer.style.top) && y < parseInt(layer.style.top) + parseInt(layer.style.height))
                 return(true);	                  
           if(parseInt(navigator.appVersion) == 4)		     
              if(x > layer.left && x < layer.left + layer.clip.width &&
                 y > layer.top && y < layer.top + layer.clip.height)
              return(true);            
           }
         else
           {		     
           if(navigator.appVersion.indexOf('MSIE 4') > 0)
             {
             if(x > layer.style.pixelLeft && x < layer.style.pixelLeft + layer.offsetWidth &&
                y > layer.style.pixelTop && y < layer.style.pixelTop + layer.offsetHeight)		   
                return(true);
             }
           else
             {
             if(x > layer.style.pixelLeft && x < layer.style.pixelLeft + layer.offsetWidth &&
                y > layer.style.pixelTop && y < layer.style.pixelTop + layer.offsetHeight)		   
                return(true);		     
             }
           }
         return(false);
         }