Page 2 of 3 The trick is to dynamically add elements, or hooks, within our element to which we can attach our four corners. We are going to add four spans to our link out of which we will create the four corner look.
There are several ways to dynamically add elements to the link with JavaScript.
One way is to create a reusable function to which we pass all the elements we want rounded-corner-fied.
function addRoundedCorners(element) {
if (element.style.position != "absolute") element.style.position = "relative";
var newspan = document.createElement('div');
newspan.innerHTML = '<span class="tl"></span><span class="tr"></span>' +
'<span class="bl"></span><span class="br"></span>';
element.appendChild(newspan);
}
Listing 3: addRoundedCorners reusable function
In the above code, you would pass your links to the addRoundedCorners function. The addRoundedCorners function creates a div, adds four spans to the div, and appends the div (with the four spans) to the element that was passed to the function: in this case, our link. We also ensure that the container link is positioned either relatively or absolutely, so that when we position our newly created four corners, they will be absolutely positioned relative to the link and not some other parent element or the document if no parent is positioned.
When called, this function would create the following code:
<a href="yourlink.html" class="cta">Buy Now
<div><span class="tl"></span><span class="tr"></span>
<span class="bl"></span><span class="br"></span></div>
</a>
Listing 4: Sample code created by the addRoundedCorners function (we'll get to the image and CSS a little later)
Here is a second way of adding four spans that works with the jQuery library.
$(document).ready(function() {
$('.cta').prepend('<span class="tr"></span><span class="tl">
</span><span class="br"></span><span class="bl"></span>');
});
Listing 5: Class specific jQuery code
This version simply prepends the four spans at the beginning of every element
with the class of cta.
<a href="yourlink.html" class="cta"><span class="tr"></span><span class="tl">
</span><span class="br"></span><span class="bl"></span>Buy Now</a>
Listing 6: Code as created by the class specific jQuery code from Listing 5
Creating reusable functions is generally a better, more robust method, but the jQuery example above is simpler, and valid.
That is how simple the JavaScript is. Now it's time to look at the CSS that makes this work for Internet Explorer, and the simple background-image that needs to created.
Page 2 of 3 Previous
1
2
3
Next
Keywords
javascript, internet explorer, rounded corners, border-radius, sliding door
