Cornerz v0.2 - A Canvas/VML jQuery Plugin

Jonah Fox has released a jQuery Plugin that will add those coveted curvy corners to your site with the use of Canvas/VML.

Usage:
$('.myclass').curve(options)

Options include:
* radius
* borderWidth
* background
* borderColor
* corners ("tl br tr bl"). Specify which borders to draw

Example JavaScript

$('h1').cornerz({radius:40, borderWidth: 0, corners: "tl"})

Example HTML

<h1 style='margin-top: 0px;'>Cornerz v0.2</h1>

Result

The corners are antialiased and load fast, partially do to the script only being 4K - uncompressed. There is a known issue with IE having trouble with odd height values. Jonah's workaround is to use padding-bottom:1px for elements with odd heights.

* Tested on :
- IE6 XP/Vista
- IE7 XP/Vista
- Firefox 2 Ubuntu/Windows
- Safari 3 Windows
- Opera 9 Windows/Linux

Visit the Cornerz homepage to view some demos or click here to see the source.

[...] Cornerz v0.2 - A Canvas/VML jQuery Plugin By Mark Gharibian Tested on : - IE6 XP/Vista - IE7 XP/Vista - Firefox 2 Ubuntu/Windows - Safari 3 Windows - Opera 9 Windows/Linux. Visit the Cornerz homepage to view some demos or click here to see the source. Ajaxonomy - The Study of Ajax… - http://www.ajaxonomy.com [...]

I found out that the following code will allow you to inject the namespace and the behavior into an html document without it. The doctype of the document is

var ss = document.createElement('STYLE');
document.documentElement.firstChild.appendChild(ss);
ss = document.styleSheets[document.styleSheets.length - 1];
ss.addRule('v\\:*','behavior: url(#default#VML);display:inline-block');
document.namespaces.add("v", "urn:schemas-microsoft-com:vml");

Best VML / ajax performance .

Here is the first browser game, that use VML and Ajax to achive real time interactivity
of multiple players and astonishing special effects with large number of true transparency layers.

game play movie on the main page.
www.glory-online.com
try it.

game run on 3 servers.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <div> <blockquote> <object> <embed> <img> <param>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Copy the characters (respecting upper/lower case) from the image.