cool_corners.js

Creates Rounded Corners in DIVs without having to use images or obscure HTML code

Added: 2006-07-30 08:45:43

download

/******
* You may use and/or modify this script as long as you:
* 1. Keep my name & webpage mentioned
* 2. Don't use it for commercial purposes
*
* If you want to use this script without complying to the rules above, please contact me first at: marty@excudo.net
* 
* Author: Martijn Korse
* Website: http://devshed.excudo.net
*
* Date:  2006-07-30 08:45:43
***/


/*****
 * Version 0.6
 * Date: 31-07-2007
 * ------------------
 * Changelog:
 * - finished support for background-images
 * - fixed bugs related to external stylesheets
 ***/

function initCoolCorners(klas, r, inv)
{
	if (typeof(inv) == 'undefined')
		var inv = false;
	var divs = document.getElementsByTagName('DIV');
	for (var x=0; x<divs.length; x++)
	{
		if (divs[x].className == klas)
		{
			roundCorners(divs[x], r, inv);
		}
	}
}
function getCSSValue(el, property, int)
{
	if (typeof(int) == 'undefined')
		var int = false;

	if (typeof(window.getComputedStyle) == 'function')
	{
		var styleValue = window.getComputedStyle(el, null)[property];
	}
	else
	{
		var styleValue = el.currentStyle[property];
	}
	if (int)
		return isNaN(parseInt(styleValue)) ? 0 : parseInt(styleValue);
	else
		return typeof(styleValue) != 'undefined' ? styleValue : '';
}
function roundCorners(div, r, inv)
{
	if (typeof(inv) == 'undefined')
		var inv = false;

	// creating an array of 'widths' that need to be deducted from the divs total with, depending on the radius
	var minWidthArr = getRadiusArr(r, inv);

	var offsetWidth		= parseInt(div.offsetWidth);
	var offsetHeight	= parseInt(div.offsetHeight);			// this is the total height, including any padding
	var backgroundColor	= getCSSValue(div, 'backgroundColor');
	var backgroundImage	= getCSSValue(div, 'backgroundImage');
	var backgroundRepeat	= getCSSValue(div, 'backgroundRepeat');
	var backgroundPosition	= getCSSValue(div, 'backgroundPosition');
	if (backgroundPosition != '')
	{
		var backgroundPositions = backgroundPosition.split(' ');
		backgroundPositions[0] = parseInt(backgroundPositions[0]);
		backgroundPositions[1] = parseInt(backgroundPositions[1]);
	}
	else
	{
		var backgroundPositions = [0,0];
	}
	var alignment		= getCSSValue(div, 'textAlign') != '' ? getCSSValue(div, 'textAlign') : 'left';
	var paddingTop		= getCSSValue(div, 'paddingTop', true);
	var paddingRight	= getCSSValue(div, 'paddingRight', true);
	var paddingBottom	= getCSSValue(div, 'paddingBottom', true);
	var paddingLeft		= getCSSValue(div, 'paddingLeft', true);

	boxWidth = offsetWidth - (paddingRight + paddingLeft);

	var newDiv = document.createElement('DIV');
	var newDivContent = document.createElement('DIV');

	newDiv.style.backgroundColor	= backgroundColor;
	if (backgroundImage != '')
	{
		var backgroundImageUrl = backgroundImage.substr(4, (backgroundImage.length - 5));
		if (backgroundImageUrl.substr(0,1) == '"')
		{
			// we're dealing with IE
			backgroundImageUrl = backgroundImageUrl.substr(1, (backgroundImageUrl.length - 2));
		}
		var bgImage = new Image
		bgImage.src = backgroundImageUrl;
		newDiv.style.backgroundImage	= backgroundImage;
		newDiv.style.backgroundRepeat	= backgroundRepeat;
		newDiv.style.backgroundPosition	= backgroundPosition;
	}
	newDiv.style.textAlign			= alignment;
 	newDiv.style.position			= 'relative';
	var bodyHeight				= (offsetHeight - (2*minWidthArr.length));
	newDiv.style.height			= bodyHeight + 'px';

	newDivContent.innerHTML			= div.innerHTML;
 	newDivContent.style.paddingTop		= paddingTop + 'px';
	newDivContent.style.paddingBottom	= paddingBottom + 'px';
	newDivContent.style.paddingRight	= paddingRight + 'px';
	newDivContent.style.paddingLeft		= paddingLeft + 'px';
 	newDivContent.style.position		= 'absolute';
 	newDivContent.style.top			= (-1 * minWidthArr.length) + 'px';
	newDivContent.style.height		= offsetHeight + 'px';

	div.innerHTML			= '';
	div.style.backgroundColor	= '';
	div.style.backgroundImage	= 'url()';
	div.style.backgroundRepeat	= '';
	div.style.backgroundPosition	= '';
	div.style.textAlign		= 'center';
	div.style.paddingTop		= '0px';
	div.style.paddingRight		= '0px';
	div.style.paddingBottom		= '0px';
	div.style.paddingLeft		= '0px';
	div.style.height		= offsetHeight+'px';

	var roundDiv = [];
	var roundDivInv = [];
	for (var i=0; i<minWidthArr.length; i++)
	{
		minWidth = minWidthArr[i];

		roundDiv[i] = document.createElement('DIV');
		roundDiv[i].style.width			= (boxWidth - minWidth) + 'px';
		roundDiv[i].style.margin		= '0 auto';
		roundDiv[i].style.height		= '1px';
		roundDiv[i].style.lineHeight		= '0px';
		roundDiv[i].style.fontSize		= '0px';
		roundDiv[i].style.borderWidth		= '0px';
		roundDiv[i].style.overflow		= 'hidden';
		roundDiv[i].style.backgroundColor	= backgroundColor;
		if (backgroundImage != '')
		{
			var xPos				= backgroundPositions[0] - (minWidth/2);
			var yPos				= backgroundPositions[1] - i;
			roundDiv[i].style.backgroundImage	= backgroundImage;
			roundDiv[i].style.backgroundRepeat	= backgroundRepeat;
			roundDiv[i].style.backgroundPosition	= (xPos)+'px '+(yPos)+'px';
		}

		roundDivInv[i] = document.createElement('DIV');
		roundDivInv[i].style.width		= (boxWidth - minWidth) + 'px';
		roundDivInv[i].style.margin		= '0 auto';
		roundDivInv[i].style.height		= '1px';
		roundDivInv[i].style.lineHeight		= '0px';
		roundDivInv[i].style.fontSize		= '0px';
		roundDivInv[i].style.borderWidth	= '0px';
		roundDivInv[i].style.overflow		= 'hidden';
		roundDivInv[i].style.backgroundColor	= backgroundColor;
		if (backgroundImage != '')
		{
			var xPos				= backgroundPositions[0] - (minWidth/2) -1;		// - 1 to compensate for the .5 that is the result of the division
			var yPos				= backgroundPositions[1] - bodyHeight - minWidthArr.length - (minWidthArr.length - i);
			if ( -(yPos) <= bgImage.height)
			{
				roundDivInv[i].style.backgroundImage	= backgroundImage;
				roundDivInv[i].style.backgroundRepeat	= backgroundRepeat;
				roundDivInv[i].style.backgroundPosition	= (xPos)+'px '+(yPos)+'px';
			}
			else if (backgroundRepeat == 'repeat-y')
			{
				while (-(yPos) <= bgImage.height)
					yPos += bgImage.height;
				roundDivInv[i].style.backgroundImage	= backgroundImage;
				roundDivInv[i].style.backgroundRepeat	= backgroundRepeat;
				roundDivInv[i].style.backgroundPosition	= (xPos)+'px '+(yPos)+'px';
			}
		}
	}
	for (var d=0; d<roundDiv.length; d++)
	{
		div.appendChild(roundDiv[d]);
	}
	if (backgroundImage != '')
	{
		newDiv.style.backgroundPosition = backgroundPositions[0]+'px '+(backgroundPositions[1] - i)+'px';
	}
	newDiv.appendChild(newDivContent);
	div.appendChild(newDiv);
	for (var d=(roundDivInv.length-1); d>=0; d--)
	{
		div.appendChild(roundDivInv[d]);
	}
}

function getRadiusArr(r, inv)
{
	var minWidthArr = []
	var y = r;
	var i = 0;
	while (y > 0)
	{
		if (inv)
			var minWidth = Math.sqrt(Math.pow(r,2) - Math.pow(x,2)) * 2;		// inverse
		else
			var minWidth = (r - Math.sqrt(Math.pow(r,2) - Math.pow(y,2))) * 2;
		minWidth = Math.round(minWidth);
		minWidthArr[i] = minWidth;
		if (minWidth == 0)
		{
			y = 0;
		}
		y--;
		i++;
	}
	return minWidthArr;
}

download