Creating Rounded Corners with Shadows using JavaScript

Hello people,

I've recently found a very cool tutorial that taught me how to create rounded corners for my DIV's using some JavaScript. The script is called ShadedBorders and I was very excited at first to use it, until I realized the JavaScript could only apply the Rounded Corners to ONE element of my page with the class = bordered.

However, there where 4 other DIV elements on my page that had the class = bordered, but the JavaScript simply ignored them and didn't apply the effect I was expecting.

This is very weird, do you guys know what might have caused this and how I could fix it? If you want I can post the JavaScript code here if you need it.

Thank you in advance. Any help is highly appreciated.

function getElementsByClass(cName) {
 var mEls = [];
 var uEls = document.getElementsByTagName("*");
 var l = uEls.length;
 var pattern = new RegExp("(^Ś\\\\s)"+cName+"(\\\\sŚ$)");
 for (var i = 0; i < l; i++) {
 if ( pattern.test(uEls[i].className) ) {
  mEls.push(uEls[i]);
 }
 }
 return mEls;
}
var border = RUZEE.ShadedBorder.create({/*your options*/});
border.render(getElementsByClass('bordered'));

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="shadedborder.js"></script> <style type="text/css"> /* <![CDATA[ */ html { font-family:Arial, sans-serif; background:#444; color:#ddd; } html, body { margin:0; padding:0; } p { margin:5px 0; } .headfoot { text-align:right; padding:10px; margin:0; position:relative; } .headfoot h1 { font-size:1.3em; padding:0; margin:0; } .headfoot a { color:#fff; } #content { background:url(back.jpg); padding:10px 0; } * html #content { posititon:relative; } /* For the first shadowed border */ #shadowed-border { padding:20px; width:80%; margin:20px auto; color:#fff; } #shadowed-border, #shadowed-border .sb-inner { background:#444 url(grad.png) repeat-x; } /* The split heading/content element */ #split { margin:20px auto; width:33%; } #split h3 { padding:4px; text-align:center; margin:0; color:#fff; } #split h3, #split h3 .sb-inner { background:#222 url(grad2.png) repeat-x; } #split .content { padding:4px 10px; color:#444; } #split .content, #split .content .sb-inner { background:#ddd url(grad3.png) repeat-x; } #trans-border { width:280px; margin:20px auto; padding:14px 20px; background:#444; color:#222; } #trans-border .sb-border { background:#000; } /* Partial stuff */ ul#partial { overflow:hidden; width:490px; margin:20px auto; padding:0; list-style:none; } * html ul#partial { height:1%; } ul#partial li { float:left; width:50px; padding:12px 0; text-align:center; margin:0 5px; color:#4c2; } ul#partial li, ul#partial li .sb-inner { background:#444; } ul#partial li .sb-border { background:#fff; } /* The tabs */ #tabs { overflow:hidden; padding:0; margin:20px auto 0 auto; width:400px; color:#444; } * html #tabs { height:1%; } #tabs li { float:left; color:#000; list-style:none; padding:0; margin:0 0 0 5px; } * html #tabs li { display:inline-block; } #tabs li a { display:block; float:left; text-decoration:none; padding:5px; color:#000; } #tabs li, #tabs li .sb-inner { background:#ccc; } #tabs li:hover, #tabs li:hover .sb-inner { background:#eee; } #tabs li.hover, #tabs li.hover .sb-inner { background:#eee; } /* for ie6 */ #tabs li .sb-border { background:#fff; } #tabs-content { background:#ccc; width:380px; margin:-1px auto 20px auto; padding:10px; border:1px solid #fff; color:#000; } /* The links */ #links { color:#4c2; padding:20px; margin:20px; width:400px; margin:0 auto; } #links, #links .sb-inner { background:#444 url(grad.png) repeat-x; } #links .sb-border { background:#fff; } #links a { color:#9f2; } #links a .sb-shadow { background:transparent; } #links a:hover .sb-shadow { background:#777; } #links a.hover .sb-shadow { background:#777; } /* for ie6 */ #change-border { color:#fff; padding:20px; margin:20px auto; width:300px; } .change-border0, .change-border0 .sb-inner { background:#444; } .change-border1, .change-border1 .sb-inner { background:#888; } /* ]]> */ </style> <script language="javascript" type="text/javascript"> function getElementsByClass(cName) { var mEls = []; var uEls = document.getElementsByTagName("*"); var l = uEls.length; var pattern = new RegExp("(^Ś\\\\s)"+cName+"(\\\\sŚ$)"); for (var i = 0; i < l; i++) { if ( pattern.test(uEls[i].className) ) { mEls.push(uEls[i]); } } return mEls; } var shadowedBorder = RUZEE.ShadedBorder.create({ corner:8, shadow:16 }); shadowedBorder.render(getElementsByClass('bordered')); </script> </head> <body> <div class="headfoot"> <h1><a href="http://www.ruzee.com/blog/shadedborder"> RUZEE.ShadedBorder</a> Examples</h1> </div> <div id="content"> <div id="shadowed-border" class="bordered"> <p>This shadowed border has a width of 80% and scales with the size of your browser window. Try it! ;-) Resize your browser window now, it's fun.</p> </div> <div id="shadowed-border" class="bordered"> <p>This shadowed border has a width of 80% and scales with the size of your browser window. Try it! ;-) Resize your browser window now, it's fun.</p> </div> <div id="shadowed-border" class="bordered"> <p>This shadowed border has a width of 80% and scales with the size of your browser window. Try it! ;-) Resize your browser window now, it's fun.</p> </div> <div id="shadowed-border" class="bordered"> <p>This shadowed border has a width of 80% and scales with the size of your browser window. Try it! ;-) Resize your browser window now, it's fun.</p> </div> </div> <div class="headfoot"> <div id="calcTime"></div> <div id="renderTime"></div> </div> <script language="javascript" type="text/javascript"> if (!window.$) { window.$ = function(id) { return document.getElementById(id); } } var currentChangeBorder=0; function changeBorder() { currentChangeBorder = (currentChangeBorder + 1) % changeBorders.length; $('change-border').className = 'sb change-border' + currentChangeBorder; changeBorders[currentChangeBorder].render('change-border'); } var t = new Date().getTime(); shadowedBorder.render('shadowed-border'); // we have to render the bottom first because we need to exist JUST ONE DIV // for getElementsByTagName and rendering top will insert loads of them ... splitBorderBottom.render($('split').getElementsByTagName('div')[0]); splitBorderTop.render($('split').getElementsByTagName('h3')[0]); transBorder.render('trans-border'); linksBorder.render('links'); linkBorder.render($('links').getElementsByTagName('a')); for (id in partialBorders) { partialBorders[id].render(id); } var tabs = $('tabs').getElementsByTagName("li"); for (var i=0; i < tabs.length; ++i) { tabBorder.render(tabs[i]); } changeBorder(); $('calcTime').innerHTML = calcTime; $('renderTime').innerHTML = "Render time: " + ((new Date().getTime() - t) / 1000.0) + "s"; </script>

</body> </html>

<script language="javascript" type="text/javascript"> if (!window.$) { window.$ = function(id) { return document.getElementById(id); } } var t = new Date().getTime(); shadowedBorder.render('shadowed-border'); $('calcTime').innerHTML = calcTime; $('renderTime').innerHTML = "Render time: " + ((new Date().getTime() - t) / 1000.0) + "s"; </script>

Creating Rounded Corners with Shadows using JavaScript

can't apply rounded corners to more than one DIV element. =(

cosmoyoda

mehh

cosmoyoda

mehh

cosmoyoda

mehh

cosmoyoda

mehh

cosmoyoda

mehh

cosmoyoda

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week