Nov 16 2006

JQuery Curvy Corners

Posted by admin under Javascript

Pure Javascript curvy corners sounds like a dream for someone like me - a total idiot when it comes to Photoshop etc. As I have started to use JQuery a lot for my Ajax applications my first stop was:

Rounded Corners

by Dave Methvin. It was working great for a while but with some special CSS constructs I wasn't able to get the rounded corners to appear on the right spots - it might very well be me being a GUI and CSS looser, but when I tried the same with CurvyCorners  it did work. Seems like that code is more forgiving in some way. Please note that I am not trying to offer a replacement for Daves:s code - but rather an alternative if Dave:s doesn't work for you either in special circumstances.

So, while it would be tempting to try to port the whole CurvyCorners code to using "JQuery syntax" that's not what I am gonna give you, but instead all I have done is removed some unneeded functions and added a jquery corner constructor which takes a curvycorners settings option class.



jQuery.fn.corner = function(options) {
    
        
        var settings = {
          tl: { radius: 10 },
          tr: { radius: 10 },
          bl: { radius: 10 },
          br: { radius: 10 },
          antiAlias: true,
          autoPad: true,
          validTags: ["div"] };
        if ( options && typeof(options) != 'string' )
            jQuery.extend(settings, options);


    return this.each(function() {
        new curvyObject(settings,this).applyCorners();
        //new curvyCorners(settings, this ).applyCornersToAll();
	});   
            
};

I.e you can override it if you'd like but just using "corner()" ís also ok, then the default options will be used.

So, in short - there are some shortcomings for this solution:

1. the javascript code in all should be made more "JQuery like".

2. My file is called "jq-corner.js" - the same as Dave used (just because I started using his work in a pretty large project and then when I wanted to replace it with curvycorners code I was so lazy...

So in all, the syntax is "jq-corner" compatible because of me being lazy. Also I want to say, this approach worked for me - in IE and FireFox, and that was good enough for me. Not tested on something else.

Look at these examples (slow loading, since my CMS doesn't allow me to add script includes into the header):

No corner call





corner call


 

Here is the code (don't do view source on this page, cause the GUI editor goes mad and inserts thousands of spans when inserting script and style tags):




<script src="/demos/jquery/jquery102.pack.js" type="text/javascript">
</script>
<script type="text/javascript" src="/demos/jquery/jq-corner.js">

<style type="text/css">
#header0 {
	margin-bottom:1px;
	width:100%;
	color:#000000;
	padding:10px;
	border-bottom:2px solid #7F7F7F;
	border-right:1px solid #7F7F7F;
	height:50px;
	background: #16527D url(http://www.aspcode.net/articles/themes/default/images/bg-header.gif) repeat-x;
	vertical-align:top;
	color:#FFFFFF;
	table-layout:fixed;
	font-size:1.8em;
	font-weight:bold;
	}

#header1 {
	margin-bottom:1px;
	width:100%;
	color:#000000;
	padding:10px;
	border-bottom:2px solid #7F7F7F;
	border-right:1px solid #7F7F7F;
	height:50px;
	background: #16527D url(http://www.aspcode.net/articles/themes/default/images/bg-header.gif) repeat-x;
	vertical-align:top;
	color:#FFFFFF;
	table-layout:fixed;
	font-size:1.8em;
	font-weight:bold;
	}
</style>

<script type="text/javascript">

$(document).ready(function() 
{
	$('#header1').corner();
})

</script>

<div id="header0">
<h1>No corner call</h1>
<br /></div>
<br /><br /><br />
<div id="header1">
<h1>corner call</h1>
<br /></div>

And last - the jq-corner.js code is available as attachment.

 Also, please read my other JQuery articles on using JQuery with ASP.NET and Ajax.

 

Attachments