SitePoint.com

ArticleBot · May 28, 2004, 08:51

This is a dedicated thread for discussing the SitePoint article 'Rounded Corners with CSS and JavaScript'

bsluis · May 28, 2004, 08:51

Great write-up. After you launched the idea at ALA I wondered if and when you would publish it. Hereby the answer.

BTW this article is another good example of a concept called Presentational javascript:

[Advisor edit: self-promotional link removed]

cagrET · May 28, 2004, 15:54

Code:

if (/broundedb/.exec(divs[i].className)) {
    rounded_divs[rounded_divs.length] = divs[i];
}

This can be optimized ;-)

Code:

if (/broundedb/.test(divs[i].className)) {
    rounded_divs[rounded_divs.length] = divs[i];
}

bsluis · May 29, 2004, 03:22

Why did you delete the link to the Presentational JavaScript article? It is an article that discusses the wider context of this article. Although I have written it myself, I didn't post it for self promotion. I added it because it is a related read which maybe could be of interest for the readers of this article.

May 29, 2004, 06:21

if (/broundedb/.exec(divs[i].className))

why not:

if (divs[i].className == 'rounded') ?

just wondering of the potential benefits of your regex --Alan

**Skunk** · May 29, 2004, 18:52

The regex is there because HTML allows you to assign multiple classes to an element, like this:

<div class="rounded highlight">

If you just test for className == 'rounded' you'll miss the above. The regular expression \brounded\b means the word "rounded" in between two word boundaries, which are defined as either the start or end of a string or a place where whitespace ends and character data starts.

brothercake · May 29, 2004, 22:55

In Konqueror 3, elements with no defined class name return "null" for the class property, not an empty string. Also, MSN for OSX has a memory leak (or possibly over-zealous error handling) in its regex engine, and will crash if you regex test something which is an empty string.

Therefore you should do something like this:

Code:

if(divs[i].className && /brounded/b.exec(divs[i].className))

Although test will work just as well

Code:

if(divs[i].className && /brounded/.test(divs[i].className))

tomByrer · May 29, 2004, 23:09

This is a great idea, having the html easier to read & edit, while using the latest CSS tricks. Do you think rendering could get slow with large pages on slower machines, esp if you use several different DHTML tricks? In my simple example, Opera 7.5 on my Win98se/PII 550Mhz machine shows a square box at first, then the roundings pop up .4 seconds later. Perhaps this could be overcome with changing the client-side JavaScripting with server-side CGI...

Anyway, I edited the example script to allow different type of corners to be shown while using one JavaScript. Some sites have special icons on one of the corners, to indicate alerts or topics. My example has extra CSS to allow both plain corners and "quoted" corners. If you use my example, you'll need to make 2 extra GIFs: tlQuoted.gif with an open-quote, and brQuoted.gif with an close-quote. I didn't change too much:

replaced all of the "rounded" class names to "cornered" (in case you choose to have square corners)
changed the JavaScript's className pattern matching to match just the the first part of "cornered", so you add multiple unique corner classes by tacking on another word or number at the end of "cornered" in the DIV class names.
added the ability that each DIV would keep the original className, appened by a "2" in the re-writing
added a second example "corneredQuoted" with the respective CSS code (the 2 new GIFs are not on SitePoint at this time; use your imagination for now

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>cornered corners with DOM manipulation</title>
<!-- 
v1: Simon Willison/SitePoint
v2: Tom Byrer
    "rounded" changed to "cornered"
    + div's class can be called "cornered"+YourName, as long as you add the CSS rules
v2.1  used the optimized conditional statement from cagrET & brothercake from SitePoint forum

works in Win IE5.5,Moz1.8a,Opera 7.2 &7.5 (though a bit slow in Opera)
doesn't render as intended in Win NS4.51; only the text boundry is shaded; CSS mostly broken
 -->
<style type="text/css">
div.cornered {
  width: 170px;
  padding: 15px;
  background: #1b5151;
  margin-bottom: 20px;
}
div.cornered2 {
  width: 200px;
  background: #1b5151 url(tr.gif) no-repeat top right;
  margin-bottom: 20px;
}
div.cornered2 div {
  background: transparent url(tl.gif) no-repeat top left;
}
div.cornered2 div div {
  background: transparent url(br.gif) no-repeat bottom right;
}
div.cornered2 div div div {
  background: transparent url(bl.gif) no-repeat bottom left;
  padding: 15px;
}
div.corneredQuoted {
  width: 170px;
  padding: 15px;
  background: #1b5151;
  margin-bottom: 20px;
}
div.corneredQuoted2 {
  width: 200px;
  background: #1b5151 url(tr.gif) no-repeat top right;
  margin-bottom: 20px;
}
div.corneredQuoted2 div {
  background: transparent url(tlQuoted.gif) no-repeat top left;
}
div.corneredQuoted2 div div {
  background: transparent url(brQuoted.gif) no-repeat bottom right;
}
div.corneredQuoted2 div div div {
  background: transparent url(bl.gif) no-repeat bottom left;
  padding: 15px;
}
</style>
<script type="text/javascript">
function corneredCorners() {
  var divs = document.getElementsByTagName('div');
  var cornered_divs = [];
  for (var i = 0; i < divs.length; i++) {
    if(divs[i].className && /\b^cornered/.test(divs[i].className)) {
      cornered_divs[cornered_divs.length] = divs[i];
    }
  }
  for (var i = 0; i < cornered_divs.length; i++) {
    var original = cornered_divs[i];
    /* Make it the inner div of the four */
    classNameHolder = original.className;
    original.className = original.className.replace(/b^cornered/, '');
    /* Now create the outer-most div */
    var tr = document.createElement('div');
    tr.className = classNameHolder+'2';
    /* Swap out the original (we'll put it back later) */
    original.parentNode.replaceChild(tr, original);
    /* Create the two other inner nodes */
    var tl = document.createElement('div');
    var br = document.createElement('div');
    /* Now glue the nodes back in to the document */
    tr.appendChild(tl);
    tl.appendChild(br);
    br.appendChild(original);
  }
}
window.onload = corneredCorners;
</script>
</head>
<body>
<div class="cornered">
Content goes here
</div>
<p>second test follows...</p>
<div class="corneredQuoted">
Quoted upper left and bottom right corners
</div>
</body>
</html>

tomByrer · May 29, 2004, 23:40

Quote:

Originally Posted by bsluis

Why did you delete the link to the Presentational JavaScript article?

You've been linked at Simon's blog! Congrats
http://www.sitepoint.com/blog-post-view.php?id=172116

MikeFoss18 · Jun 2, 2004, 10:16

This is a fascinating article; however, what happens when you want to colorize the divs on a standard background?

I have tried inverting the masking on the gifs so that the meat of them are transparent and the corners have the same color as the page background, and that seems to work, but when I display the page only the bottom-left corners show up. The div colors are being changed via the style attribute on an individual basis within the html.

I'm thinking you have to switch three divs' background colors to transparent and the last one to the real color somewhere in the javascript, but I'm still a little fuzzy on how the divs are getting layered.

Jun 2, 2004, 14:51

A very interesting article, thanks! A couple of months ago I needed to add rounded corners to an existing document but didn't want to have to go through and use ugly css and html hacks and came up with a simple script to apply corners via Javascript. Using Javascript to do simple things like this has been awesome, it keeps the amount of code down(and therefor page loading) and makes it easier to maintain.

I look forward to do more of this in the future.

Jun 10, 2004, 13:24

using that much JS for just some rounded corners does not justify it!

Jun 14, 2004, 04:15

Thanks so much! Been trying to do this for ages

.

Jun 16, 2004, 08:33

Not bad, A few to many divs if you ask me. Ill go for these any day.

http://www.alistapart.com/articles/mountaintop/

plonkman · Jun 22, 2004, 05:07

good article.

does the js code execution or bloat(?) outweigh the extra markup?
if there was loads of "class.rounded" how efficient would this be?

cheers.

gohankid77 · Jul 13, 2004, 22:41

Great article, but way too much JavaScript! What's the point of using all of that JS for 4 rounded corners? There is also the fact that many people have JS disabled in their browser which means that the image will not look right.

Jul 21, 2004, 02:51

a good solution if the rounded box is to be filled in with a solid color... but what do we do when we want a 1px border on either side and have the main area filled with a different color then the border?

Jul 22, 2004, 07:26

It is nice

PKC · Jul 25, 2004, 23:13

It's really interesting.
how can we use this Rounded Corners for a table border?

Aug 4, 2004, 13:17

too bad this messes up horrificly if you already have any <div> tags within the <div class=rounded> tag!

AlexW · Aug 9, 2004, 19:39

Well, um,.. so it should. You can't have 1 class trying to do 2 different things. The class names are entirely incidental. <div class='great_aunt_fanny'> is fine as long as you're consistent.

Smurfs Are Tasty · Aug 10, 2004, 10:28

I Agree.

Aug 11, 2004, 13:17

Wow, all this Javascript is SUCH a more attractive hack for such a relatively unimportant "decoration"

Aug 17, 2004, 08:03

Worked fine for only one DIV.
Is it supposed to work with nested divs?

Thanks,
Zolt

Aug 19, 2004, 05:42

Great workaround. But It does not work with nested divs

May 28, 2004, 08:51	#2
bsluis SitePoint Member Join Date: May 2004 Location: Amsterdam Posts: 1	Great write-up. After you launched the idea at ALA I wondered if and when you would publish it. Hereby the answer. BTW this article is another good example of a concept called Presentational javascript: [Advisor edit: self-promotional link removed] Last edited by redemption; May 28, 2004 at 20:41.

May 28, 2004, 15:54	#3
cagrET SitePoint Enthusiast Join Date: May 2003 Location: Poland Posts: 96	Code: if (/broundedb/.exec(divs[i].className)) { rounded_divs[rounded_divs.length] = divs[i]; } This can be optimized ;-) Code: if (/broundedb/.test(divs[i].className)) { rounded_divs[rounded_divs.length] = divs[i]; }

May 29, 2004, 22:55	#7
brothercake SitePoint Addict Join Date: Mar 2004 Location: Earth Posts: 391	In Konqueror 3, elements with no defined class name return "null" for the class property, not an empty string. Also, MSN for OSX has a memory leak (or possibly over-zealous error handling) in its regex engine, and will crash if you regex test something which is an empty string. Therefore you should do something like this: Code: if(divs[i].className && /brounded/b.exec(divs[i].className)) Although test will work just as well Code: if(divs[i].className && /brounded/.test(divs[i].className))

Aug 10, 2004, 10:28	#22
Smurfs Are Tasty SitePoint Member Join Date: Aug 2004 Location: Nashville Posts: 21	I Agree I Agree.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

May 28, 2004, 08:51	#1
ArticleBot SitePoint Articles Join Date: Apr 2001 Posts: 0	Discussion thread for Rounded Corners with CSS and JavaScript This is a dedicated thread for discussing the SitePoint article 'Rounded Corners with CSS and JavaScript'

May 29, 2004, 03:22	#4
bsluis SitePoint Member Join Date: May 2004 Location: Amsterdam Posts: 1	Why did you delete the link to the Presentational JavaScript article? It is an article that discusses the wider context of this article. Although I have written it myself, I didn't post it for self promotion. I added it because it is a related read which maybe could be of interest for the readers of this article.

May 29, 2004, 06:21	#5
Anonymous SitePoint Community Guest Posts: n/a	if (/broundedb/.exec(divs[i].className)) why not: if (divs[i].className == 'rounded') ? just wondering of the potential benefits of your regex --Alan

May 29, 2004, 18:52	#6
Skunk Grumpy Mole Man Join Date: Jan 2001 Location: Lawrence, Kansas Posts: 2,190	The regex is there because HTML allows you to assign multiple classes to an element, like this: <div class="rounded highlight"> If you just test for className == 'rounded' you'll miss the above. The regular expression \brounded\b means the word "rounded" in between two word boundaries, which are defined as either the start or end of a string or a place where whitespace ends and character data starts.

Jun 2, 2004, 10:16	#10
MikeFoss18 SitePoint Member Join Date: Sep 2003 Location: Milford Posts: 6	This is a fascinating article; however, what happens when you want to colorize the divs on a standard background? I have tried inverting the masking on the gifs so that the meat of them are transparent and the corners have the same color as the page background, and that seems to work, but when I display the page only the bottom-left corners show up. The div colors are being changed via the style attribute on an individual basis within the html. I'm thinking you have to switch three divs' background colors to transparent and the last one to the real color somewhere in the javascript, but I'm still a little fuzzy on how the divs are getting layered.

Jun 2, 2004, 14:51	#11
Anonymous SitePoint Community Guest Posts: n/a	A very interesting article, thanks! A couple of months ago I needed to add rounded corners to an existing document but didn't want to have to go through and use ugly css and html hacks and came up with a simple script to apply corners via Javascript. Using Javascript to do simple things like this has been awesome, it keeps the amount of code down(and therefor page loading) and makes it easier to maintain. I look forward to do more of this in the future.

Jun 10, 2004, 13:24	#12
Anonymous SitePoint Community Guest Posts: n/a	using that much JS for just some rounded corners does not justify it!

Jun 14, 2004, 04:15	#13
Anonymous SitePoint Community Guest Posts: n/a	Thanks so much! Been trying to do this for ages .

Jun 16, 2004, 08:33	#14
Anonymous SitePoint Community Guest Posts: n/a	Not bad, A few to many divs if you ask me. Ill go for these any day. http://www.alistapart.com/articles/mountaintop/

Jun 22, 2004, 05:07	#15
plonkman SitePoint Member Join Date: Jun 2004 Location: Dundee, Scotland Posts: 2	good article. does the js code execution or bloat(?) outweigh the extra markup? if there was loads of "class.rounded" how efficient would this be? cheers.

Jul 13, 2004, 22:41	#16
gohankid77 SitePoint Zealot Join Date: Jun 2004 Location: United States Posts: 114	Great article, but way too much JavaScript! What's the point of using all of that JS for 4 rounded corners? There is also the fact that many people have JS disabled in their browser which means that the image will not look right.

Jul 21, 2004, 02:51	#17
Anonymous SitePoint Community Guest Posts: n/a	a good solution if the rounded box is to be filled in with a solid color... but what do we do when we want a 1px border on either side and have the main area filled with a different color then the border?

Jul 22, 2004, 07:26	#18
Mohana SitePoint Community Guest Posts: n/a	It is nice

Jul 25, 2004, 23:13	#19
PKC SitePoint Member Join Date: Jul 2004 Location: India Posts: 5	It's really interesting. how can we use this Rounded Corners for a table border?

Aug 4, 2004, 13:17	#20
John SitePoint Community Guest Posts: n/a	too bad this messes up horrificly if you already have any <div> tags within the <div class=rounded> tag!

Aug 9, 2004, 19:39	#21
AlexW Team SitePoint Join Date: Apr 2000 Location: Melbourne Posts: 1,004	Well, um,.. so it should. You can't have 1 class trying to do 2 different things. The class names are entirely incidental. <div class='great_aunt_fanny'> is fine as long as you're consistent.

Aug 11, 2004, 13:17	#23
Eric SitePoint Community Guest Posts: n/a	Wow, all this Javascript is SUCH a more attractive hack for such a relatively unimportant "decoration"

Aug 17, 2004, 08:03	#24
Zolt SitePoint Community Guest Posts: n/a	Worked fine for only one DIV. Is it supposed to work with nested divs? Thanks, Zolt

Aug 19, 2004, 05:42	#25
wald SitePoint Community Guest Posts: n/a	Great workaround. But It does not work with nested divs