Acid.JS Web 2.0 Components Help Topics

RoundedCornersPanel.JS

RoundedCornersPanel.JS Setup, Installation and Help Topics

Experience the power of CSS with that cool widget!

Create rounded corners without additional images or sophisticated CSS and JavaScript coding. Rounded Corners Panel.JS does all this for you. You may choose between three types of rounded corner radius, you are allowed to specify dither color, so your rounded corners' edges do not look frayed. And more - you may tell which borders to round, and which not.

View online demo of RoundedCornersPanel.JS or download it straight away.

Because the component or parts of it are rendered entirely on the client, and the source is not available via the standard View Source command of the browser, it is recommended that you use IE DevToolBar or FireBug or other troubleshooting and code inspection tool (such as Opera Dragonfly or the development tools of Safari and Google Chrome) in order to inspect the HTML and the CSS classes.

Requirements

  • Standards-compliant (XHTML1.0/1.1, HTML5) or skinny doctype page - the control will not initialize on non-standards-compliant pages.

Supported Browsers

  • 6
  • 7
  • 8
  • 9
  •  
  •  
  •  
  •  

Initialize the Control

To copy a chunk of code from the listings below and keep its indentation, double click to select it, then right click and choose "Copy" from the context menu or use Ctrl + C.

1. Add the runtime of Rounded Corners Panel.JS in the <head>...</head> section of your webpage:

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

Public Methods of Rounded Corners Panel.JS

Create a Rounded Corner Panel on Page Load

The most common way to round the corners of an element is on pageload. You may use the following method to add elements for rounding on page load by uaing the pageload() method of the control:

<script type="text/javascript">
roundedcornerspaneljs.pageload(
{
	rootfolder: "Scripts/",
	element: "Div1",
	size: "large",
	dithercolor: "#cccccc",
	roundedcorners: "true, true, true, true"
});
</script>

The properties of the method are:

  • rootfolder - by default, the control's runtime files directory should be in the root of the website in the RoundedCornersPanel.JS folder, however the entire directory can be copied in another folder, for example where other third party scripts are stored. If you keep your scripts in a special folder, for example Scripts, then the value of rootfolder should be Scripts/, i.e. rootfolder: "Scripts/". Do not forget to add the trailing slash after the name of the folder. If you choose to copy the RoundedCornersPanel.JS folder in the root of your website, then just keep the value of rootfolder blank, i.e. rootfolder: "".
  • element - the id of an existing <div>...</div> element on the page whose corners should be rounded.
  • size - border-radius of the rounded corners that can accept three values - large, medium and small, for example - size: "large".
  • dithercolor - antialiasing rounded corners color, for example - dithercolor: "#ccc".
  • roundedcorners - the property requires four Boolean values (true or false), each one representing a corner - top-left, top-right, bottom-right and bottom-left. If set to false, the respective corner will be skipped from rounding.
Create a Rounded Corrner Panel on Demand

The demand() method of Rounded Corners Panel.JS allows to round an element upon user action, for example on click:

roundedcornerspaneljs.demand({
	rootfolder: "",
	element: "Div2",
	size: "large",
	dithercolor: "#9e9e9e",
	roundedcorners: "true, true, true, true"
});