Anti-aliased Nifty Corners

Do those hurt perfomance noticeably? I think borders be used to do a version with three colors per line (background, blend, foreground) in the same number of tags as the height. Wouldn't be as smooth, but it might make up for the in efficiency.

Nice script, but with Internet Explorer it's all stretch in vertical...
How I can solve the problem? And it's a BIG problem...
Help me!
Best regards, Andrea Paiola.

Any thoughts on integrating this into a drupal theme?

Your anti-aliasing works very nice! Shame I forgot all the math since i left high school, anyway, I have to look at it!

Hello,
module is great.
Would you add border generation to it?
Then it will be most powerfull rounded corners generation script I've ever seen :)

Best regards

You're code is excellent. But, it is not printing well on a laser printer. This is my only suggestion.

just curios if you want to know/check my changes to your code

i made it possible to set each corner individually

you can check an example here
my theme test site

-michael

This is indeed excellent code, it's great to have the ability to set the size of the rounded border.

However, could you add the facility to have a rounded border as well, like the updated Nifty corners code does?

This should be cool to use - the only thing I've noticed is that the rounded div can't have a set height, only an auto height. Not too much of a prob, but it would be nice to have the option. Great though!

someone asked for, so i remade my niftycorner experiment

its possible to set each corner
example site

http://www.langmi.de/files/niftycorners/nifty.html

Adjusting the size is a great flexibility!

Only yhing is that your script assumes that there is only one box in a page. It is very usual that multiple use of boxes is needed.

I'm currently writting a Wiki Photo Album (it's almost finished). I use Nifty Corners in this album on multiple DIVs. The solution is actually very easy.

Rather than calling each DIV from an Java window.ONLOAD event in seperate script file; I add each new DIV much like an array.

First I pack the start of the JavaScript into a string. Then I echo the multiple DIVs to HTML and add the DIVs dynamicaly while in a loop.

This means that the $DIV_ID places a new number into your Javascript String for every time it loops through the code. After you've added your multiple DIVs, close your Java Script function and call it by echoing it to HTML.

Then just use PHP to echo this HTML side...

An there you go... Nifty will now call all DIVS individually, with the appearence of nifty running an array.

It appears your scripts do not take into account transparent colors. The nice thing about the nifty corners solution (at leas the version I have) is that you could specify transparent around the corners so that whatever was "behind" the region would show through. This is a feature that is gravely lacking from this otherwise great script.

Hi,

This looks great, but it is possible to use your script with two boxes on a page?

Regards,

Chris

First of all.. nice script!

I spent a few hours toying with it, and solved the weird bug in the antialiasing as well as another that manifests itself when using colors with R, G or B values < 0x10.

First, the antialiasing:

The problem is the way arc2 is calculated - try this instead:

..and don't forget to comment out "coverage = 0" ;)

Second fix is for the Blend() function. When concatenating the return string, R, B or G values < 0x10 will corrupt the string because of missing characters. The fix is to put a '0' at the beginning of each color and then keep the last two chars of each color:

Anybody implemented borders on the script?
I am trying to use it and this will be a big plus to it
if it was there.

Thanks for that slick nice piece of code.

Hi,

I thought that I would share with you guys a script that I and a friend wrote.

Features:

1) Anti-Aliased Corners
2) Border Support. (Anti-Aliased both sides, any width and colour borders)
3) Object based. (OO JavaScript)
4) User Definded Radius
5) Apply to individual corners.

Roadmap:

1) Optimisation (Speed Speed and more Speed.)
2) Transparent Corner Support
3) Drop Shadows
4) Wiggly borders (just for fun)

Check it out:

www.roundedcorners.net

We still have a lot of work to do, speed is currently an issue but I am going to optimise the code somewhat. The current version is alpha code.

Yeah, the version of the site at the moment, is an early version. We currently have much newer version in development. Anti-Alising will be fixed and should work on all browsers soon.

Speed is a major issue at the moment, it takes about 1 second to render the demo site page on my 64bit 3200Mhz cpu, but I find most of the time it takes about 4 seconds on average pc's.

The current demo script, does render perfectly on IE 6 for PC with anti-aliasing tho.

I need to look at where the bottle neck is in the script. It could be the generation of the anti-aliasing pixels.
On a 20 pixel radius for one corner it currently has to generate 60 pixels, which is quite a lot of work for the browser.

it's perfect, is there any solution to make it work with ie5 and ie5.5?

Check out the RuzeeBorders at http://www.ruzee.com/wordpress/ruzeeborders/. They support shadows, glow effects, borders, and of course rounded corners. Plus: Style auto-detection.

The author released a new version http://webdesign.html.it/articoli/leggi/528/more-nifty-corners/

Do you plan on modifying it? If so, I'd grealty appreciate you letting me know. Thank you!

I can't seem to get the Nifty Corners script to work on this site ( http://www.bestofindianashville.com ) in IE6 and 7. If anyone can point me in the right direction, I'd be grateful. Thanks :-) I so do wish there was a forum for Nifty Corners!

Hi

I have been playing with Nifty corners to create a keyline with round corners around a div and it works really well. What I would like to do is wrap two divs with a single keyline but am stumped. Is it possible?

Regards

Andrew

hi,
very nice effect. i want to have rows of boxes of a certain height and give them rounded corners. how can this be done?

thanks
stephen

Don't forget to use the latest version of Nifty: Nifty Corners Cube (http://www.html.it/articoli/niftycube/index.html). Nifty worked like a charm for my site (http://www.cocktailbuilder.com).

Despite criticism by some (http://www.sproutit.com/articles/bigact/515), I want to share my good experience. Some specific points:

1) Cross-browser compat: I tested on IE6, 7, Firefox 1.5, 2.0, and Safari 2 - all work well. And I do use absolute positioning and lots of client-side JS.

2) About quality of corners: I think noone will notice the difference for small-ish corners between Photoshop-generated corners and JS corners, really. And man, it's painful to generate these things in Photoshop! Plus, it costs money.

3) About size of JS: you need to use a tool like JSMin or Packer (http://dean.edwards.name/packer/) to compress your JS. Besides, if GZip is enabled on the HTTP server, JS is just text that is compressed well; images aren't. Plus, if you have 5+ elements that you want pretty corners for, size advantage becomes obvious.

I don't know why, but this script isn't working properly in my company website. We develop a website on ASP.NET and i'm working for newsletter template using this script to make a rounded corner for those newsletter, and add the script programatically "on the fly" to make the layout preview. I use a ASP.NET literal control to make it happen, but it's doesn't show the right layout in both IE. 6 and mozilla 1.5. Could anyone give my some advice on this???

Thanks
iandra

Hey Steven! I found your nifty corners to be the best given the antialiasing features and so I just wanted to tell you that I used your nifty corners at agent55.com! So what if it takes a little time to calculate? As mentioned earlier a border feature would really be cool. Is that possible? - thanks again!

Hei!

Great stuff. Works like a charm.

Thank you so much!

When adding multiple divs to a page, only the first div is styled.

Seems to me that the javascript should be redesigned so that all divs (eg with the name "div#nifty") should get the rounded corners (not just the first one).

Or maybe there is already a built-in way I didnt see?

I'm calling the function twice, ie:

Nifty("div#niftyABC", "#377CB1", "#9BD1FA", 30, 30);
Nifty("div#niftyDEF", "#377CB1", "#9BD1FA", 30, 30);

(need to change the div names and update the css for each div).

Otherwise, great stuff!

If doing more than 3 rounded tables on a page, the javascript is horribly slow. Even though it is done client side (by the browser), it would be better to use css with background images (unless there is a way to get the js to apply to all tables without separate calls... Steven?).

So this is great for 1 or 2 tables, but not more than that!

Ignore my last comment. That was another error. The error I'm getting in IE7 related to your javascript code is an execution error at line 100 talking about an invalid property value.

I'm no coder but from a designers view this is great - a timesaver and therefore more time away from computer!

thankyou for sharing this

I made a quick hack to the script in order to support transparency on IE7 and since I couldn't find any other script that could dynamically create variable sized rounded corners with transparency that works on FF and IE I thought people might want to know...

All you need to do is comment out 2 lines of code in the AddTop and AddBottom functions
//d.style.backgroundColor = bk;

This will however make a mess of the corners due to the background color of your div's...
So you will have to add another div container for inside your rounded corner div and set the background color of that...

Hope this helps people

The zoom behavior of your demo page is different in IE7 -v- FF3. IE7 looks right while FF3 becomes more squarelike, the more you zoom.

Great modification to this technique! I'm just curious on it hurting performance. Anyone know?

I used your anti-alias math to build a jQuery plugin. You can check it out at the jQuery plugins site: http://plugins.jquery.com/project/corners