shadedborder class

Submitted by dmikester1 on Thu, 10/23/2008 - 19:14

Is it possible to round a border on a class? Or is it only possible on ID's?
Thanks
Mike

Trackback URL for this post:

http://www.ruzee.com/trackback/171
‹ Floated img disappears in Opera 10 IE7 problem and solution ›

Use jQuery

Submitted by Steffen on Thu, 10/23/2008 - 21:42.

you may use jquery for that. Include jquery as well and invoke

myBorder.render($('.myclass'));

Fix ...

Submitted by Steffen on Mon, 03/23/2009 - 23:51.

Well of course jQuery needs something else:

$(".myclass").each(function() { myBorder.render(this); });

background color?

Submitted by FH (not verified) on Thu, 11/04/2010 - 23:23.

thanx, it works. but how to set the background color on classes?

i´ve tried something like:

.content_box .sb-inner { background: #ebff9c; }
.content_box .sb-shadow { background: #000000; }
.content_box .sb-border { background: #5d83a6; }

jquery usage

Submitted by jared (not verified) on Mon, 06/15/2009 - 07:40.

Hi Steffan - This is a great tool. Thanks for sharing it! I'm a beginner, though, and I've had a little trouble with two things:

1. Is it possible to give a div a shadow and a split border style at the same time? I tried:

var splitBorderTop = RUZEE.ShadedBorder.create({ corner:10, shadow:16, edges:"tlr" });
var splitBorderBottom = RUZEE.ShadedBorder.create({ corner:10, shadow:16, border:2, edges:"blr" });

and it displayed the shadow, but the top rounded border is slightly clipped. What am I doing wrong?

2. I have everything working with div id's, but I'd like to use classes. Using a jquery fix for classes, if I want to perform two functions on a given class (i.e. splitBorderBottom and splitBorderTop on div.splitBox), how do I properly indicate that? After including jquery (or mootools) and trying to implement your jquery fix (and the mootools suggestion from mclank), I haven't been able to get it to work. This is what I have now:

$('.splitBox').each(function('div') { splitBorderBottom.render(this); });
$('.splitBox').each(function('h3') { splitBordertop.render(this); });
splitBorderBottom.render($('.splitBox'));
splitBorderTop.render($('.splitBox'));

Any suggestions?
Thanks!

Jared

Hi...I tried to doing this

Submitted by mclank on Fri, 10/31/2008 - 17:31.

Hi...I tried to doing this with mootools and a split box (has a header)

splitBorderBottom.render($('.roundedbox').getElementById('div')[0]);
splitBorderTop.render($('.roundedbox').getElementById('h4')[0]);

I also tried using the mootools getElement like this:

splitBorderBottom.render($('.roundedbox').getElement('div'));
splitBorderTop.render($('.roundedbox').getElement('h4'));

But it always tells me that $(".roundedbox") is null. Am I doing something wrong, or will it not work with a split box?

Found the solution, needed $$

Submitted by mclank on Fri, 10/31/2008 - 22:21.

Found the solution, needed $$ not $:

splitBorderBottom.render($$('.roundedbox').getElement('div'));
splitBorderTop.render($$('.roundedbox').getElement('h4'));

works great!