PDA

View Full Version : Styling the Div Tag..



Zorro_
Apr 10th, 2007, 06:18 PM
Is it possible to have a DIV tag with rounded and color border ?:rolleyes:

jlhaslip
Apr 11th, 2007, 03:45 AM
Check the code in this thread.

http://codingforums.com/showthread.php?t=111461

Zorro_
Apr 11th, 2007, 07:13 AM
That's ok...
but you are using images to round up the corners..
can it be dont without images..?

Zorro_
Apr 16th, 2007, 09:18 AM
This is a code that a friend of mine gave me....
but if works only at a particular position of the div...
please tell me if it will work if i do not specify the positions...
<html>
<head>
<title>Rounded Corners</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.tst {
background-Color:#FFFFCC;border:solid green 6px;color:#CCFFFF;
}
</style>
<script language="JavaScript">

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; }
}
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();
});
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">

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

</body>
</html>

ahallicks
Apr 16th, 2007, 09:32 AM
Please use 'code' tags when inserting code into threads, i.e:




Some code



You can do this in Firefox with the -moz filters:

-moz-border-radius: 5px 5px 0 0;

ArcticFox
Apr 16th, 2007, 09:40 AM
You can do this in Firefox with the -moz filters:

-moz-border-radius: 5px 5px 0 0;



Example: http://arctic.ithium.net/

Zorro_
Apr 22nd, 2007, 12:55 PM
hey are you going to help me ?:mad:

jlhaslip
Apr 22nd, 2007, 03:43 PM
We have already done so.