Rounded Corners 2

Vic Phillips Feb 9, 2007

General

This script permits rounded corners to be applied to DIV elements. The corners and associated edges are added to the initial DIV dimensions. There may be as many applications on a page as needed.

Notes

Created by: Vic Phillips
Web Site: http://www.vicsjavascripts.org.uk
Posted: February 9, 2007

All variable, function names are prefixed with 'zxc' to minimise conflicts with other JavaScripts. This prefix can be safely changed to characters of choice using global find and replace.

The requirement for the rounded corners is defined within the DIV class attribute as a fake rule. Note that more than one rule may be specified in a class attributeso long as the rules are separated by a space.

The 'corner rule' is to be specified as in the example:


  <div id="tst2" class="tst zxc,Rad20,Border2#FFCC66,
    TLTR,Opacity50" style="width:200px;height:100px;
      left:280px;top:100px;">



where 'zxc' allows the script to recognise that rounded corners are to be applied. The balance defines the corner features, each feature separated by a comma:


  Rad = the radius of the corners.
  Border = (optional) the border size and color.
  TLTRBLBR = (optional) the corners to apply the rounded corner, LT = Top Left etc. The default is all corners.
  Opacity =  (optional) the opacity id the DIV including corners.



Note that if the DIV inline border style attribute is defined in the DIV tags, the border will be applied to all four corners unless otherwise specified in the DIV fake class rule.







Source Code

Paste this source code into the designated areas.







External file
Paste this code into an external JavaScript file named: roundedCorners.js


/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Vic Phillips | http://www.vicsjavascripts.org.uk */
// The math and aliase techniques learnt from a script by
// Cameron Cooke and Tim Hutchison - http://www.curvycorners.net

function zxcCorners(){
 var zxcdivs=document.getElementsByTagName('BODY')[0].getElementsByTagName('DIV');
 var zxcary=[];
 for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
  if (zxcdivs[zxc0].className.match('zxc')){ zxcary.push(zxcdivs[zxc0]); }
 }
 for (var zxc1=0;zxc1<zxcary.length;zxc1++){
  zxcCornersMake(zxcary[zxc1]);
 }
}

function zxcCornersMake(zxcobj){
 var zxcstyle=zxcStyleAry(zxcobj);
 zxcOptions(zxcobj);
 var zxcopts=zxcOptions(zxcobj);
 var zxcrary=[zxcopts[0]*1];
 if (zxcopts[1]&&zxcopts[2]){ zxcrary.push(zxcopts[0]+zxcopts[1]); }
 else if (zxcstyle[5]){
  if (zxcstyle[5].match('#')){ zxcrary.push(zxcopts[0]+parseInt(zxcstyle[5].split(' ')[1])); zxcopts[2]='#'+zxcstyle[5].split('#')[1].split(' ')[0]; }
  else { zxcrary.push(zxcopts[0]+parseInt(zxcstyle[5].split('px')[0]));  zxcopts[2]='rgb'+(zxcstyle[5].split('rgb')[1].split(')')[0])+')'; }
 }
 var zxcw=parseInt(zxcstyle[1]);
 var zxch=parseInt(zxcstyle[2])||zxcobj.offsetHeight;
 if (!zxcw){ return; }
 zxcS(zxcobj,{position:(zxcstyle[0]=='static'||!zxcstyle[0])?'relative':zxcstyle[0],borderTop:'0px',borderLeft:'0px', borderRight:'0px', borderBottom:'0px'});
 var zxcbwh=zxcrary[0]+(zxcrary[1])?zxcrary[1]:0;
 if (zxcopts[4]){
  var zxcp=zxcS('DIV',{position:zxcobj.style.position,left:zxcobj.style.left,top:zxcobj.style.top,width:(zxcw+zxcbwh*2)+'px',height:(zxch+zxcbwh*2)+'px'});
  zxcobj.parentNode.replaceChild(zxcp,zxcobj);
  zxcp.appendChild(zxcobj);
  zxcS(zxcobj,{left:zxcbwh+'px',top:zxcbwh+'px'});
 }
 for (var zxc0=0;zxc0<zxcrary.length;zxc0++){
  var zxccary=[];
  var zxcclone=zxcS(zxcobj.cloneNode(false),{position:'absolute',overflow:'hidden',zIndex:1+zxc0+'',width:'0px',height:'0px',left:'0px',top:'0px',backgroundColor:(zxc0==0)?zxcstyle[3]:zxcopts[2]},zxcobj);
  zxccary[0]=zxcS('DIV',{position:'absolute',zIndex:1-zxc0+'',width:zxcrary[zxc0]+'px',height:zxcrary[zxc0]+'px',left:zxcw+'px',top:zxch+'px',border:'solid black 0px'},zxcobj);
  for (var zxc1=0;zxc1<zxcrary[zxc0];zxc1++){
   var zxcht=Math.floor(Math.sqrt(Math.pow(zxcrary[zxc0],2)-Math.pow((zxc1+1),2))-1);
   zxcS(zxcclone.cloneNode(false),{left:zxc1+'px',top:'0px',width:'1px',height:(zxcht+1)+'px'},zxccary[0]);
   for(var zxc1a=(zxcht+1);zxc1a<Math.ceil(Math.sqrt(Math.pow(zxcrary[zxc0],2)-Math.pow(zxc1,2)));zxc1a++){
    zxcS(zxcclone.cloneNode(false),{left:zxc1+'px',top:zxc1a+'px',width:'1px',height:zxcAntiAliase(zxc1,zxc1a,zxcrary)+'px'},zxccary[0]);
   }
  }
  var zxcmary=['BR','BL','TL','TR'];
  for (var zxc2=1;zxc2<4;zxc2++){
   zxccary[zxc2]=zxccary[0].cloneNode(true);
   zxcS(zxccary[zxc2],{left:((zxc2<3)?-zxcrary[zxc0]:zxcw)+'px',top:((zxc2<2)?zxch:-zxcrary[zxc0])+'px'},zxcobj);
   var zxcclds=zxccary[zxc2].childNodes;
   if (zxcopts[3].match(zxcmary[zxc2])){
    for (var zxc2a=0;zxc2a<zxcclds.length;zxc2a++){
     var zxctop=parseInt(zxcclds[zxc2a].style.top);
     var zxclft=parseInt(zxcclds[zxc2a].style.left);
     var zxchte=parseInt(zxcclds[zxc2a].style.height);
     zxcS(zxcclds[zxc2a],{left:((zxc2<3)?(zxcrary[zxc0]-zxclft-1):(zxclft))+'px',top:((zxc2<2)?zxctop:(zxcrary[zxc0]-zxchte-zxctop))+'px'});
    }
   }
  }
  for (var zxc3=0;zxc3<zxcmary.length;zxc3++){
   if (!zxcopts[3].match(zxcmary[zxc3])){ zxcS(zxccary[zxc3].firstChild,{left:'0px',top:'0px',width:zxcrary[zxc0]+'px',height:zxcrary[zxc0]+'px'}); }
  }
  var zxcwh=(zxc0<1)?zxcrary[zxc0]:zxcrary[1]-zxcrary[0];
  for (var zxc4=0;zxc4<4;zxc4++){
   zxcS(zxcclone.cloneNode(false),{left:((zxc4<2)?0:(zxc4<3)?-zxcrary[zxc0]:(zxc0<1)?zxcw:zxcw+zxcrary[0])+'px',top:((zxc4<1)?(zxc0<1)?zxch:zxch+zxcrary[0]:(zxc4>1)?0:-zxcrary[zxc0])+'px',width:((zxc4<2)?zxcw:zxcwh)+'px',height:((zxc4<2)?zxcwh:zxch)+'px'},zxcobj);
  }
 }
 if (zxcopts[4]){ zxcOpacity(zxcp,zxcopts[4]); }
}

function zxcOptions(zxcobj){
 var zxcary=zxcobj.className.split('zxc')[1].split(',');
 var zxcopts=[];
 for (var zxc0=0;zxc0<zxcary.length;zxc0++){
  if (zxcary[zxc0].match('Ra')){ zxcopts[0]=parseInt(zxcary[zxc0].replace(/\D/g,'')); }
  else if (zxcary[zxc0].match('Bo')){ zxcopts[1]=parseInt(zxcary[zxc0].split('#')[0].replace(/\D/g,'')); zxcopts[2]='#'+zxcary[zxc0].split('#')[1]; }
  else if (zxcary[zxc0].match('L')||zxcary[zxc0].match('R')){ zxcopts[3]=zxcary[zxc0]; }
  else if (zxcary[zxc0].match('O')){ zxcopts[4]=parseInt(zxcary[zxc0].replace(/\D/g,''));  }
 }
 zxcopts[3]=zxcopts[3]||'BL,BR,TL,TR';
 return zxcopts;
}

function zxcS(zxcele,zxcstyle,zxcp){
 if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
 for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
 if (zxcp){ zxcp.appendChild(zxcele); }
 return zxcele;
}

function zxcStyleAry(zxcel){
 var zxcsary=['position','width','height','backgroundColor','background-Color','borderTop','borderLeft','borderRight','borderBottom'];
 var zxccary=[];
 for (var zxca=0;zxca<zxcsary.length;zxca++){
  zxccary[zxca]=zxcsary[zxca];
  if (zxcel.style[zxcsary[zxca]]){ zxcsary[zxca]=zxcel.style[zxcsary[zxca]]; }
  else if (zxcel.currentStyle){ zxcsary[zxca]=zxcel.currentStyle[zxcsary[zxca]]; }
  else if (document.getComputedStyle){ zxcsary[zxca]=document.defaultView.getComputedStyle(zxcel,null).getPropertyValue(zxcsary[zxca]); }
 }
 for (var zxcb=0;zxcb<zxcsary.length;zxcb++){ if (zxccary[zxcb]==zxcsary[zxcb]){ zxcsary[zxcb]=null; } }
 zxcsary[3]=zxcsary[3]||zxcsary[4];
 return zxcsary;
}

function zxcAntiAliase(zxcx,zxcy,zxcr){
 var zxcxary=[];
 var zxcyary=[];
 var zxcnu=0;
 var zxcside='';
 var zxccross=Math.sqrt((Math.pow(zxcr,2)-Math.pow(zxcx,2)));
 if (zxccross>=zxcy&&zxccross<zxcy+1){
  zxcside='Left';
  zxcxary[zxcnu]=0;
  zxcyary[zxcnu]=zxccross-zxcy;
  zxcnu=zxcnu+1;
 }
 var zxccross=Math.sqrt((Math.pow(zxcr,2)-Math.pow(zxcy+1,2)));
 if (zxccross>=zxcx&&zxccross<zxcx+1){
  zxcside=zxcside+'Top';
  zxcxary[zxcnu]=zxccross-zxcx;
  zxcyary[zxcnu]=1;
  zxcnu=zxcnu+1;
 }
 var zxccross=Math.sqrt((Math.pow(zxcr,2)-Math.pow(zxcx+1,2)));
 if (zxccross>=zxcy&&zxccross<zxcy+1){
  zxcside=zxcside+'Right';
  zxcxary[zxcnu]=1;
  zxcyary[zxcnu]=zxccross-zxcy;
  zxcnu=zxcnu+1;
 }
 var zxccross=Math.sqrt((Math.pow(zxcr,2)-Math.pow(zxcy,2)));
 if (zxccross>=zxcx&&zxccross<zxcx+1){
  zxcside=zxcside+'Bottom';
  zxcxary[zxcnu]=zxccross-zxcx;
  zxcyary[zxcnu]=0;
 }
 return (zxcside=='LeftRight')?Math.min(zxcyary[0],zxcyary[1])+((Math.max(zxcyary[0],zxcyary[1])-Math.min(zxcyary[0],zxcyary[1]))/2):(zxcside=='TopRight')?(1-(((1-zxcxary[0])*(1-zxcyary[1]))/2)):(zxcside=='TopBottom')?Math.min(zxcxary[0],zxcxary[1])+((Math.max(zxcxary[0],zxcxary[1])-Math.min(zxcxary[0],zxcxary[1]))/2):(zxcside=='LeftBottom')?(zxcyary[0]*zxcxary[1])/2:1;
}

function zxcOpacity(zxcobj,zxcopc) {
 if (zxcopc<0||zxcopc>100){ return; }
 if (zxcobj.style.MozOpacity!=null){ zxcobj.style.MozOpacity=(zxcopc/100)-.001; }
 else if (zxcobj.style.opacity!=null){ zxcobj.style.opacity=(zxcopc/100)-.001; }
 else if (zxcobj.style.filter!=null){ zxcobj.style.filter = 'alpha(opacity='+zxcopc+')';	}
 else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcopc/100)-.001; }
}

// Multiple onload function created by: Simon Willison
// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  zxcCorners();
});






CSS
Paste this code into your external CSS file or in the <style> section within the   HEAD section of your HTML document.


.tst {
 background-Color:#FFFFCC;border:solid green 6px;color:#CCFFFF;
}






Head
Paste this code into the HEAD section of your HTML document.



<script type="text/javascript" src="roundedCorners.js"></script>





Body
Paste this code into the BODY section of your HTML document



<div id="tst1" class="tst zxc,Rad30" id="Tst" style="position:relative;width:200px;height:100px;left:300px;top:100px;border:solid #ff0000 5px;"></div>
<br><br><br>
<div id="tst2" class="tst zxc,Rad20,Border2#FFCC66,TLTR,Opacity50" style="width:200px;height:100px;left:280px;top:100px;"></div>


    
    
            


    
    
        Leave a Response
        
                        (11 comments)
        
        
    
        Name (Required)    
    
        E-mail (Required)    
    
    

        Title (Required)    
        Comment (Required)    
    
        
        

	                
            
            Submitting Your Comment
        

    



Your comment has been submitted successfully.
                
    
        
            
               Hmm.. it doesn't work with widths in percent.            
        
        
            
        
        Steamboat 
        Sep 28, 2008
    
    
        
            
               You need to check your security settings for IE7. It works fine for me.            
        
        
            
        
        Lee 
        May 25, 2007
    
    
        
            
               works perfectly in firefox2, but it generates activeX warning messages in IE7            
        
        
            
        
        blogger tools 
        Apr 17, 2007
    
    
        
            
               bottom corners dont render correctly in IE7........but are perfect in Firefox ( need cross browser update)            
        
        
            
        
        Paul D 
        Mar 6, 2007
    
    
        
            
               What could be causing jagged edges on the bottom left and right? The border is too long. Otherwise its excellent, and if I have to, I could only use the tops            
        
        
            
        
        Phillip Juan McClore 
        Feb 22, 2007

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Rounded Corners 2

General

Notes

Source Code

External file

CSS

Head

Body

Leave a Response

Attention JavaScript Coders

Go Deeper