asked on

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.

ASKER CERTIFIED SOLUTION

azadisaryev

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Mark Franz

ASKER

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

azadisaryev

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

Mark Franz

ASKER

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

azadisaryev

>> <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

azadisaryev

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

Mark Franz

ASKER

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.

Mark Franz

ASKER

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

azadisaryev

cool! happy that you sorted it out.

glad i could help :)

Azadi