Scalable rounded corner w/ variable color and blocked header

Hey,

I like the way this page has scalable content boxes, http://home.tiscali.nl/developerscorner/liquidcorners/more-rounded-corners_step2.htm   But would like to make it more attractive by using variable colors on the boxes and adding block headers for each box like on http://www.csstemplatesforfree.com/previewcsstemplate.aspx?csstemplateName=balanced while still keeping the scalability.  The problem with the "Balanced" page is that the tags are fixed widths.

I have limited skills when it comes to <div> layout and CSS so trying to hack through this might be futile, if anyone has a different example I can look at or a fix I would appreciate it.
LVL 18
mgfranzAsked:
Who is Participating?
 
azadisaryevCommented:
you can quiet easily do this with jquery (http://jquery.com) and mike alsup's corner plug-in (http://jquery.malsup.com/corner/) - see attached sample code.

you can style the header and content elements as you wish - backgrounds (even images), borders, etc etc.

the plug-in uses native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). in IE it uses "div strips" method.

change paths to js scripts as necessary.

Azadi
<script src="path/to/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="path/to/jquery.corner.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("div.rounded h1").corner('top 10px');
	$("div.rounded div").corner('bottom 10px');
});
</script>


<div class="rounded" style="width:300px; padding:0;">
	<h1 style="background-color:#000; color:#FFF; margin:0; padding:10px 5px; border:2px solid #0c0; border-bottom:0;">HEADER</h1>
	<div style="margin:0; padding:5px; border:2px solid #0c0; border-top:0;">some text here</div>
</div>

Open in new window

0
 
mgfranzAuthor Commented:
Your example errors on line 8, the call to $(document).ready(function).  I copied the .js scripts from the link you provided and placed them in a root folder along with your example, when I run it, the error, "property does not support this object or method" throws.  
<!DOCTYPE html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML lang="en">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8"></META>
<SCRIPT type="text/javascript" src="jquery.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="jquery.corner.js"></SCRIPT>
<SCRIPT type="text/javascript">
$(document).ready(function(){
	$("div.rounded h1").corner('top 10px');
	$("div.rounded div").corner('bottom 10px');
});
</SCRIPT>
</HEAD>
<BODY>
	<DIV class="rounded" style="width:300px; padding:0;"><H1 style="background-color:#000; color:#FFF; margin:0; padding:10px 5px; border:2px solid #0c0; border-bottom:0;">HEADER</H1>
		<DIV style="margin:0; padding:5px; border:2px solid #0c0; border-top:0;">	some text here
		</DIV>
	</DIV>
</BODY>
</HTML>

Open in new window

0
 
azadisaryevCommented:
hmm... works fine for me...

please double-check the script filenames and paths.

just to test it, change your jquery script tag to point to the one on google apis cdn:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

if your test page is web-accessible, please post its url to help you debug this further.

Azadi

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
mgfranzAuthor Commented:
OK, the error was being thrown by my editor, (browser switch).  Here is the link, the box loads fine but no corners.  http://www.mgfic.com/templates/box.htm
0
 
azadisaryevCommented:
>> <SCRIPT type="text/javascript" src="jquery.corner.js"></SCRIPT>

the location and/or name of jquery.corner.js script is incorrect - your page returns a '404 not found' for this file.

http://www.mgfic.com/templates/jquery.corner.js does not exist
make sure you specify correct path to jquery.corner.js file in your <script> tag.

Azadi
0
 
azadisaryevCommented:
you also have a typo in script tag for jquery script:

<SCRIPT type="text/javascript" src=""http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></SCRIPT>

src=""http...

should be

src="http... (only one " there, not 2 like you have)

this prevents jquery script from loading.

Azadi
0
 
mgfranzAuthor Commented:
OK, with the .js script embedded in the page it runs fine.  With the jquery.corner.js file installed as a link it fails.  This looks like a hosting issue.  But anyway, I got it running with your help.  

Thanks, this is exactly what I was looking for.
0
 
mgfranzAuthor Commented:
The hosting companies servers are not setup to allow extended naming of files, so I had to rename them as old .js files, but the scripts run fine.  Check the source at http://www.mgfic.com/templates/box_linked.htm
0
 
azadisaryevCommented:
cool! happy that you sorted it out.

glad i could help :)

Azadi
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.