|
JavaScript - Using Curvy Corners
I am using curvy corners, and it is working fine, as long as I only want one rounded box...
I want (at least) two, and I am having trouble adding a second <div id> to the script. I'm not able to decipher much of javascript, and the explanation that came with the code isn't clear enough for me. Can anyone help? Here's the code... Code: <script type="text/JavaScript">
window.onload = function() {
var settings = {
tl: { radius: 10 },
tr: { radius: 10 },
bl: { radius: 10 },
br: { radius: 10 },
antiAlias: true
}
var divObj1 = document.getElementById("container");
var divObj2 = document.getElementById("login");
curvyCorners(settings, divObj1, divObj2);
}
</script>
<title>Untitled Document</title>
</head>
<body>
<div id="container">
<div id="login">
<img src="images/fcbdivcmyk_small.png" /><br /><br />
BLAH BLAH BLAH
</div> <!-- This is the end of #login -->
<div id="banner">
This is the text to the right.
</div> <!-- This is the end of #banner -->
</div> <!-- This is the end of #container -->
Similar TutorialsHi everyone, I've downloaded the curvy corners codes from the following address: http://www.curvycorners.net/downloads/ The instructions in the curvycorners.src.js file say that all i need to do is add the following piece of code which I've inserted into the head section: <script type="text/javaScript" src="js/curvycorners.src.js"></script> <style type="text/css"> <!-- p.round { -webkit-border-radius: 25px; -moz-border-radius: 25px; CCborderRadius: 25px; } --> </style> However, it's not rendering in opera and internet explorer. I wondered if someone could tell me where I'm going wrong? The is the xhtml I'm targeting: Code: <div id="content_wrapper">
<div class="accomm">
<h3 id="accomm"><a href="#" title="Quality accommodation"> Quality accommodation</a></h3>
<p class="round">lam et deliciisqui cor resto il eos verciderit ee litate niam eaqui denihicae dolorio rpore, nisinim aut as eum alitior eriaesti atioreiunde erem is sin expelenet, verae dus, conseribus dit odit remqui volestias exceri ullam, con cullatiamet, ut ipite officil igenem non. <a href="about.php">Learn more...</a></p>
<p id="fees"><a href="fees.php">Fee structure</a></p>
</div>
<div class="local">
<h3 id="local_area"><a href="#" title="Our local area"> Our local area</a></h3>
<p class="round">lam et deliciisqui cor resto il eos verciderit ee litate niam eaqui denihicae dolorio rpore, nisinim aut as eum alitior eriaesti atioreiunde erem is sin expelenet, verae dus, conseribus dit odit remqui volestias exceri ullam, con cullatiamet, ut ipite officil igenem non. <a href="local_area.php">Learn more...</a></p>
<p id="directory"><a href="directory.php">Hospital directory</a></p>
</div>
<div class="welcome">
<h3 id="packages"><a href="#" title="Welcome packages">Welcome packages</a></h3>
<p class="round">lam et deliciisqui cor resto il eos verciderit ee litate niam eaqui denihicae dolorio rpore, nisinim aut as eum alitior eriaesti atioreiunde erem is sin expelenet, verae dus, conseribus dit odit remqui volestias exceri ullam, con cullatiamet, ut ipite officil igenem non. <a href="welcome_packs.php">Learn more...</a></p>
<p id="map"><a href="location_map.php">Find us on the map</a></p>
</div>
</div>
</div>
Really appreciate any help. Hey Guys, I'm working on a site and it needed borders with opacity, and since you can do it with CSS I done it With jQuery. But now I would like to round the corners of it, I did try border-radius, but it's only effecting the containing div not the borders(see below). Is there a solution to this? Here's the small snippet of JS: PHP Code: $('.mainContent').border({ width: 6, color: 'white', alpha: .4 }); Surprisingly, this jQuery plugin nearly works in IE6. You can see the error that is produced at the bottom of the article corner. (I'm tackling the other issues... .png later) link: http://www.happydogwebproductions.com/nerdery/ Any clue on how to fix this? |
|||||||