Hi, the name's Steffen and I'm writing about the Web, programming
and all those things coming to my mind. Enjoy your stay.Rounding corners with JavaScript has a long history. Everything started on 16th of March 2005 with Nifty Corners and loads of other libs followed.
RUZEE.ShadedBorder itself is the successor of RUZEE.Borders, which was the most feature-rich round corners library out there. But it wasn’t quite easy to use, was slow, had some browser compatibility problems, etc.
ShadedBorders removes most of these limitations and comes with the following features:
- JavaScript-only Photoshop(tm)-like rendering without external images
- Round corners
- Drop shadows
- Glow effects
- Gradient backgrounds
- Graceful degradation - will look ok if JavaScript is turned off
- Borders with different widths and semi-transparency
- Full support for liquid designs
- Anti-Aliasing
- On-hover support
- Disable some of the corners, e.g. bottom-left
- Change borders on-the-fly
- Real transparency - looks perfect on any background
- Cross-Browser: Firefox, Internet Explorer (>=6.0), Safari, Opera (>=9.0)
- Non-obstrusive
- Leight-weight (8.8KB uncompressed)
- Fast (0.5s for the example on a 2.2GHz machine)
- No JavaScript library dependencies
Have a look at the full-featured example, the simple example, or just download the whole library as a ZIP archive (MIT licensed).
Version History
- 2007-12-04 - v0.6.1: Fix transparency on IE7
- 2007-12-02 - v0.6: Semi-transparent fat borders (thanks Ryan) and IE6 hover fixes (thanks NewTrax)
- 2007-10-23 - v0.5: More robust DIV creation, add split borders example for headline/content (for Virsir)
- 2007-10-21 - v0.4: Add graceful degradation, simplify usage, fix IE7(?)
- 2007-10-20 - v0.3: Gradient background support, speed improvements
- 2007-03-27 - v0.2: Fix IE: check boxes inside tables were disappearing
- 2007-03-25 - v0.1: Initial release
How-to
Some steps are required to make your page use ShadedBorder:
Include ShadedBorder to your HTML header section:
<script src="shadedborder.js" type="text/javascript"></script>Next, define an element you want to round. It is important that it does not directly contain text nodes, i.e. text must always be wrapped inside an HTML element (the “p” in this example):
<div id="round_me">
<p>I want to be rounded!</p>
</div>Then, in the header section, create the border object. You can define the radius of the round corners, the radius of the drop shadow and the width of the border.
var border = RUZEE.ShadedBorder.create({ corner:8, shadow:16, border:2 });Note that all parameters are optional, as long as you at least specify one of them. You may also define, which corners/edges should not be rounded. Have a look at the simple example source code for details.
The last thing to do is, to add some JavaScript code directly at the end of the HTML Body which will render the border around the element with the ID “round_me”:
...
<script type="text/javascript">
border.render('round_me');
</script>The radiuses and widths you specified for the border in the header section are one way of customization. The other way is to change colors. You do this in your CSS file:
#round_me, #round_me .sb-inner { background:red; }
#round_me .sb-shadow { background:blue; }
#round_me .sb-border { background:green; }This will give your border a red “inner-style”, a blue shadow and a green border - don’t ever use this color combination - it will look extremely ugly 
The first line is important for graceful degradation (new from v0.4 on): the background for your .sb-inner class must also be set on the element itself - but only for .sb-inner, NOT for .sb-shadow or .sb-border!
Adding some hover effect also happens in your CSS file. The following code snippet will change the “inner-style” of your border to purple, once you hover with your mouse over the #round_me element (hey purple will make this beast look even uglier - yuk!).
#round_me:hover, #round_me:hover .sb-inner { background:purple; }Of course, this will work with “.sb-border” and “.sb-shadow” as well.
Tips
You can use RUZEE.ShadedBorder with the JavaScript library of your choice to get support for CSS-Selectors (e.g. using Prototype, jQuery, etc.). Here’s an example using the $$ function of Prototype to round all child elements of the element with the ID “header” that have the class “tab”:
border.render($$('#header .tab'));Limitations
- Safari 2 seems to get pretty slow when showing ShadedBorder. I’m looking for people with a Mac and some JavaScript knowledge to speed things up. If you feel like you can help, please contact me via my contact form. Thanks!
- Since a ShadedBorder adds DIV elements to the element you round, those elements cannot be UL, OL, TABLE, TR, etc.. Allowed are DIV, LI, TD, TH, i.e. those elements that are allowed to directly contain DIV elements.
March 26th, 2007 at 14:31
[...] Rusitschka is keeping the rounded corner legend alive with his new RUZEE.ShadedBorder JavaScript [...]
March 26th, 2007 at 15:21
[...] mit ein bisschen Javascript und CSS. Noch nicht einmal ein Bild wird benötigt! Daher gesorgt hat Steffen Rusitschka mit seinem ShadedBorder [...]
March 26th, 2007 at 15:54
Not only shaded rounded corners, but background stripes too! Check out a new stripe generation tool here: http://www.stripegenerator.com
March 26th, 2007 at 16:02
I love you !!!!
Thanks.
March 26th, 2007 at 17:08
I have a chance to test out your new shaded borders and have a few issues. First off I’m glad to see the new way of rendering with support of other javascript libraries. I’m using mootools at the present. That said I have an issue with the text being placed on top of the rounded corners. You can see this by going to http://www.mytradex.com and selecting a county. (yellow box contains the shaded borders and there is suppose to be text in the shaded black boxes).
/* JAVASCRIPT */
var border = RUZEE.ShadedBorder.create({corner:8, shadow:24, border:2});
border.render($$(’.subtitle’));
/* CSS */
.subtitle {
position:relative;
height: 40px;
font-family:sans-serif,”Times New Roman”,helvetica,sans-serif,arial;
font-size: 1.1em;
padding: 10px;
text-align:center;
color: #fff;
}
.subtitle .sb-inner {background:#000;}
.subtitle .sb-border {background:#fff;}
.subtitle .sb-shadow {background:#fff;}
/* HTML/PHP */
echo “Builders ({$row['num_bldrs']})”;
One other item is how do we implement the “glow” border? I like the one generated in older ruzee.borders.
March 26th, 2007 at 17:23
Hi mytradex2,
cool that you give the “new RUZEE.Borders” a try
And good to hear that $$ also works with mootools.
Please try to add the class “sb” to your subtitle as well, e.g. <div class=”subtitle sb”> … </div>, this should do the trick.
The glow border can be done, e.g. via
var glowBorder = RUZEE.ShadedBorder.create({ shadow:10 });, i.e. simply don’t specify any border or corner.March 26th, 2007 at 17:24
Your reply software here dropped my HTML tags around my HTML/PHP code. So the class name is there and the text is surrounded by the p tag.
March 26th, 2007 at 17:28
I’ll give that a try and I really do like your updated code. This is by far the best rounded corners I’ve seen. I am lazy and rather a script run the rounded stuff than display pics, or break up pics, or all that other stuff.
Also I will give you an update to how speedy it is when I start to round corners up to 25 elements. That should be the big test.
Thanks
March 26th, 2007 at 17:51
[...] RUZEE.shadedborder es el sustituto del anterior que soluciona unos cuantos problemas (lentitud, incompatibilidad con ciertos navegadores, dificultad…) y trae unas cuantas características más que interesantes: [...]
March 26th, 2007 at 18:02
Cool script, but Safari 2.0.4 can’t handle it. The test page take several minutes to load on a dual Xeon MacPro…
But creat stuff anyway!
Florian
March 26th, 2007 at 18:31
I’m doing my tests with Safari 2.0 (412) - works ok. Can anyone confirm that 2.0.4 has problems?
March 26th, 2007 at 19:03
Steffen: I’ve done testing now with 17 shaded borders elements here are the results:
When no shadow is used works fairly well.
When a shadow is used it’s slower than slow. Locked up IE7 pretty good.
Also noticed that when a shadow value is used less than 15 or so the border and the shadow get messed up. So doing something like this - RUZEE.ShadedBorder.create({corner:8, shadow:8, border:1}); Will not display correctly.
Now the rueez.border script worked faily well with a shadow.
March 26th, 2007 at 19:14
corner and shadow are different in ShadedBorder - I think I need to do a tutorial for that - both start at the center so if you set both to 8 they’ll be “the same” - maybe this causes the problem. I need to check that. Try to set the shadow to about twice the radius of the corner and see if this fixes things. Oh and I’ve seen that my previous hint did the trick, right?
March 26th, 2007 at 19:29
This is a *fantastic* script and I applaud your efforts. Thank you! Would it be possible to build future versions to degrade gracefully in the event that the browser doesn’t support javascript or the user doesn’t have javascript enabled? I have pre-defined DIV styles that I’d like to retain if javascript isn’t available. Thanks again!
March 26th, 2007 at 19:42
@Chris: Yep, that’s on the roadmap. I’m right now searching for a simple solution for the site designer. Everything I have in mind right now is a bit … too much “writing efforts”.
March 26th, 2007 at 19:53
LOL…understood! I look forward to the future versions as you have the time.
March 26th, 2007 at 20:31
Yes your previous hint did fix my problem.
Your explanation of border, and shadow makes sense now. I did have to double the shadow number to get it to work. So it’s not a bug….. It’s a feature!
Also the glow border looks better than the old script. If there was a way to speed up the drawing on multiple elements that would be great, but I know there are a lot of s created in doing so.
Anyhow, very stratified with what you have done and it works so far in IE 7 and Firefox.
March 26th, 2007 at 21:24
[...] Example | Download | More info…. [...]
March 26th, 2007 at 22:26
[...] Javascript ile yuvarlak kenarlı kutuların yapımını anlatan İngilizce bir makale. Link [...]
March 27th, 2007 at 0:41
Great Job. Couple questions: Is it possible to apply a single RUZEE.ShadedBorder var with an entire CSS class? Basically I want to use CSS selectors the way we could with RUZEE.Borders. Sounded like you were implying that if you used prototype as well you could use the CSS selectors? Is there some other alternative that might be a little lighter?
I also wanted to say that I would really like to see the on hover functionality get worked out for IE6. I was trying to use csshover.htc to get the same hover affect but it is really slow to render.
March 27th, 2007 at 4:17
[...] 100% JavaScript rounded corners (tags: ajax) [...]
March 27th, 2007 at 8:18
[...] JavaScript Round Corners with Drop Shadow (tags: javascript) [...]
March 27th, 2007 at 9:53
[...] ci sono stati molti tentativi di migliorare il prodotto originario. Uno che sembra degno di nota è ShadedBorder che aggiunge la possibilità di applicare un ombra (scegliendone anche il colore) ad un lato del [...]
March 27th, 2007 at 14:50
Steffen:
Have you thought of, or is there an onComlpete/onFinish function that could be used when the border rendering is done?
I think this would be a good addition to your script if you do not already have one.
Also, I was thinking of how you could speed up the rendering/drawing of the borders and I came up with this. Using (Cache) outside the browser, in a folder on the server. On some of my pages the borders will not be dynamic. So they are drawn the same way each and every time. If you could write out the border to the cache folder then maybe a read to cache would be less than a construction of the border. - JUST A THOUGHT-
March 27th, 2007 at 15:12
It doesn’t work on Safari: it makes it freeze.
MacBookPro 2,3 Ghz..
i wouln’t call it ‘fast’
Works fine on FF
March 27th, 2007 at 15:40
Very useful.
Thank you very much.
March 27th, 2007 at 16:01
@mytradex2: the render() method is synchronous. You don’t need a callback.
@Valerio Schiavoni: There are obviously issues with Safari…
March 27th, 2007 at 16:04
[...] ajaxian Steffen Rusitschka is keeping the rounded corner legend alive with his new RUZEE.ShadedBorder JavaScript [...]
March 27th, 2007 at 16:42
Steffen: The thought that I had for the onComplete function is this: When using the borders with ajax, the elements are not created till the ajax calls are complete. So borders cannot be ran till after ajax is finished. So what you get is that the ajax items will be displayed first and then the borders will be displayed.
It would be nice to know when the borders are complete then all elements could be displayed at once. In the mean time you could be displaying a animated gif to the user until everything is loaded.
March 27th, 2007 at 16:52
[...] redondeadas, que se han convertido en una constante del diseño “a lo web 2.0″. Se trata de RUZEE.shadedborder una buena solución que trae unas cuantas características [...]
March 27th, 2007 at 17:26
Please Help me,
Hy I am the Marcio of Brazil
I am using shadedborder.js
I place a checkbox inside of div
He does not appear checkbox in Internet Explorer
This example demonstrate this
http://www.cerebrum.com.br/shadedborder-0.1/1test.html
Not Appear checkbox 3º and 4º
http://www.cerebrum.com.br/shadedborder-0.1/2test.html
This Based in your modelo
Not Appear checkbox 3º
How to resolve this ?
Please Help me,
Thanks
MArcio Amorim
suporte@cerebrum.com
March 27th, 2007 at 18:00
@MArcio Amorim: Version 0.2 should fix that problem.
March 27th, 2007 at 19:06
Stephen thanks a lot already I brought up to date and is functioning
I am thankful for its attention
Desire much success for you and all its team
March 28th, 2007 at 7:02
Great script, Steffen, thanks for your hard work. LIke Marxes above, I am hoping it will be possible to apply a single RUZEE.ShadedBorder var to an entire CSS class, kind of like you could with Ruzee. I use Joomla, which mostly wraps it’s sections in classes.
March 28th, 2007 at 7:12
hey, I just added your js to my website, it is working perfectly.
and it is nice !
thanks a lot.
how ever, I am having a strange issue, the div I am add shadow to is quite big and long
and for some reasons, the shadow does not make it to the end.
see http://www.cleyet-marrel.net/
on the other hand, short page is displaying fine .
any idea ?
cheers
Ben
March 28th, 2007 at 10:03
[...] Rundung betrifft und welche Farbe das Objekt hat. Aber eigentlich gehts nicht um Rico, sondern um ShadedBorder - eine kleine Javascript Bibliothek von Steffen [...]
March 29th, 2007 at 8:12
hi,
well, thats a great script, offcourse with some exceptions. The border fails to display properly with some setting as mentioned by some other users.
the strange problem I’m having is that, all the vertical-alignment in my tables got from ‘middle’ to ‘top’ n thats annonying as I ‘m unable to find a solution for this.
HELP !!!!
March 29th, 2007 at 8:34
the “tables” I’m talking about in the above mail are, inside the v applied the shadedborder
March 29th, 2007 at 14:45
Hi,
This is great, although I did notice a problem using this with Firefox 2.0.0.3 on XP, with Firebug plugin installed.
My code :
function doBorders()
{
var cBorders = RUZEE.ShadedBorder.create({ corner:10, shadow:20 });
cBorders.render($(’mainContent’));
var sBorders = RUZEE.ShadedBorder.create({ corner:5 });
sBorders.render($$(’.smallRounded’));
}
Event.observe(window, ‘load’, function(){doBorders();}, false);
Using Event.observe on page load seems to be a problem here, the page just hangs and then firefox hangs completely, forcing me to use task manager to kill the process.
If I take that bottom line out, load the page, and then type javascript:doBorders(); it works fine.
The page also loads fine without modifying the above code if I disable Firebug before loading the page.
Im not sure if this was a problem with ShadedBorder or Firebug, but thought I’d post some feedback here and let you guys know. Anyone else had this problem?
Hey Steffen, great code, great work - how about setting up a google group for support/feedback ?
Cheers,
Ryan
March 29th, 2007 at 17:11
Ryan looks like you are using the scriptaculous javascript Library. I would say that the problem lies with scriptaculous function not shaded borders. You may want to check your syntax or do a different on onload function.
Cheers
March 29th, 2007 at 20:37
Steffen: Here is a issue that I cam across for your borders.
class=”sb-shadow” style=”position: absolute; width: 1px; top: 16px; height: 10000px; left: 0px; opacity: 0.125;”
class=”sb-shadow” style=”position: absolute; width: 1px; top: 16px; height: 10000px; right: 0px; opacity: 0.125;”
class=”sb-border” style=”position: absolute; top: 16px; height: 10000px; left: 0px; width: 1px;”
class=”sb-border” style=”position: absolute; top: 16px; height: 10000px; right: 0px; width: 1px;”
As you can see your script wrote new elements out with a height of 10000px. Is this an issue since my element only has a height of 75px.
Also you can see that 2 new elements are sb-shadow. For this element I only have a simple rounded border with no shadow.
March 30th, 2007 at 2:51
I just confirmed that all borders are writing out this height @ 10000px. Even on your site.
This may be a cause of why the shadow borders are just too much for the browser to handle for more than a couple elements on a page.
My confirmation was done in firefox with firebug.
April 1st, 2007 at 2:24
Ahhh After looking at the issue I see where it is in the code that you set 10000px for a height. Looks like you had did this for a quick hack to get IE 6 to be nice. I notice that when you set the height to 100% IE6 doesn’t draw the side borders at all. However, IE7 seems to work just fine. Also, I will try and remove the shawdow borders div element form the sides when there is no shawdows being used. These items when fixed should give some cycle times back off the script.
One other thing I do not know how these will work in Safari, or Opera once fixed.
Rant: IE 6 should be killed off useless browser!
Cheers!
April 1st, 2007 at 3:30
Just to give you an update. I have removed the shadow border extra elements when no shadow border is drawn. Also gave the left and right a speed increase when both both the left and right borders are being drawn. I will work on top and bottom.
Feel free to grab a copy from my site @ http://www.mytradex.com
I have labeled my updates with /**** MY TRADEX HACK ****/ If Steffen sees fit to include these then maybe we can label it a FIX, but for now it’s just a HACK!
Cheers
April 1st, 2007 at 5:43
In repsonse to message 11: Yes, I can confirm that Safari 2.0.4 has significant problems. I’m running Safari 2.0.4, on Mac OS X 10.4.9, on a dual 2GHz G5 PowerMac tower, with 2.5GB or RAM… and Safari takes forever to render.
For example, if I go to your examples page (http://www.ruzee.com/files/shadedborder/test.html), wait for it to download and display, then simply resize the window: the window area goes white for about 30 seconds before displaying the page. The timers in the footer report about 3.3 seconds to calculate and about .3 seconds to render.
April 1st, 2007 at 5:45
P.S. On the other hand Firefox 2.0.0.2 on the same Mac works fine. About 6 seconds total for your examples page to both download and render.
April 1st, 2007 at 23:42
Thanks all - especially mytradex2 - for your comments. Setting height to 100% will also not work in Safari (comment 43). Your speed improvements are nice - how much performance do you gain?
I did some more investigations with Safari and it looks like it’s a problem with the performance of Safari when rendering sites that contain a lot of opacity (which is the case for pages using ShadedBorder).
This thread sound pretty familiar: http://forums.macnn.com/82/applications/331952/safari-myspace-problem/
And this is the myspace page they took as example: http://www.myspace.com/index.cfm?fuseaction=user.viewprofile&friendID=111675158
April 2nd, 2007 at 2:15
Steffen, with the speed increases I did see better performance in firefox. However, I did not take an actual count by ms. It just seemed to perform better on all borders. Of course with that said you will see improvements no matter what when you eliminate parts that are not needed.
A couple of items that the script could do without is the creation of variable where not needed. ie
var sclass = “sb-shadow”;
var bclass = “sb-border”;
and so-on. Since these are static in code creating memory space doesn’t add much benefit.
Also, not 100% sure how your calculations create the corner borders but there are a lot of elements created to display just a single rounded corner. Say for instance you have a white background and a single lined blue border. There doesn’t seem to be much purpose in creating extra elements to display white dots where the border is not draw. So if you/I/other could come up with a way to figure out how to eliminate these extra elements this will also cut down on time needed to draw. I think I am specifically talking about sb-inner routines.
April 2nd, 2007 at 2:20
To fix the height problem we would have to grab the elements original height and use that value + Xpx to make this play nicer with all browsers. 10000px has got to add some overhead to my dom objects. LOL.
Anyhow, not being critical just glad to help out
Cheers!
April 2nd, 2007 at 4:12
Steffen: Possibly another speed improvement.
Not sure why you have this code placed in the render(fucntion)
while (node) {
var nextNode = node.nextSibling;
if (node.nodeType == 1 && node.className == ’sb-gen’)
el.removeChild(node);
node = nextNode;
}
Looks like you are trying to remove a node that that may have been created by shaded borders? Seems a bit useless.
With it removed my site doesn’t break under firefox or ie7 and give a nice boost in async calls with mootools animation.
Let me know if there is a use to this while loop!
April 2nd, 2007 at 4:21
Steffen: Ah ha, figured it out!
Your while loop is only needed if someone wants to regenerate the shaded borders while not refreshing the page. Like the example in your examples page with pushing a button to redraw or borders with a different color. Well there sure must be a way to get rid of this code when not needed and used when needed.
April 2nd, 2007 at 14:22
Ok made a new option for your script that will allow the speed increase for normal use and also allows for redraws to the borders on the fly.
If the user needs a re-render of the border then the following code would allow him/her to do this.
var border = RUZEE.ShadedBorder.create({corner:8, shadow:24, border:1});
border.render($$(’#map’),”re-render”);
not specifying the second option in .render() allows for the script to skip the while() loop for removing the shaded border elements.
April 2nd, 2007 at 21:28
@mytradex2: Thanks alot for your suggestions! Performance is one issue - usability is another. As for the while loop, that removes the generated elements I think that it shouldn’t cost that much performance. It will just iterate over the direct child elements of the element to round - which are usually 1-20 when there are no borders and 7 more (the generated children), if there are borders already. Hence I don’t recommend your change for usability reasons - so the developer doesn’t have to care about whether she already rounded an element or not.
Btw.: I’m still looking for a way to speed up Safari… and I’m still looking for some hints… help!
April 3rd, 2007 at 4:00
I think you are I are both correct. However, when it comes to doing async calls is where it bogs down. I notice quite a difference in performance increase (skipping the while loop) when doing your async call along with mootools async call. Example: Doing a border on a element and then doing an effect on that element simultaneously.
Also I been working trying to get the 10000px fixed. Here is what I can suggest to you so far. The element that is receiving the borders will need to be know when calling
var border = RUZEE.ShadedBorder.create({corner:8, shadow:24, border:1});
So my suggestion is to do this:
var border = RUZEE.ShadedBorder.create({corner:8, shadow:24, border:1}, $(’main_content’));
That last option holds the element name. Then you can get rid of this call
border.render($(’main_content’));
ShadedBorder.create would not only create but display as well fixing the problem with 1000px.
Don’t think that I being pushy I just want to throw suggestions out there so that we all benefit!
Cheers
April 3rd, 2007 at 4:04
Everyone: Could someone grab the shadedborders script from my site and test it out on safari. I do not have access to Mac. I am just curious to see if my hacks made any performance increase to safari at all. NOTE: You will have to follow so of my hack updates specified here in order to get it to work. Some of the documentation here doesn’t talk about the options that I am using.
Also if you need help you can always look at my index.html source file to see how I made the calls.
I will also post on mootool forum too.
Cheers
April 3rd, 2007 at 4:08
Everyone: AAAAAH what am I saying just go to http://www.mytradex.com and see if there is any better performance increase at my site instead of this site while using Safari.
*kicking myself for sounding so foolish in last post*
April 3rd, 2007 at 5:42
I got a response from mootools author: Valerio
“Your website freezes my safari for about 30 seconds, while the author’s website freezes safari for a lot more (I got bored and quit after one minute).
I’d say this Ruzee script is not worth the pain. What about the usual images for rounded border?”
He is not infavor of script rounded borders but as you can see I have made some progress with safari and didn’t even know it.
good night!
April 3rd, 2007 at 20:34
Hia, cool script, looks great! I am having a stupid issue with IE7 and zooming though, namely, it breaks! Well, lines appear where the DIVs are, due to IE7’s treatment of the entire page as an image. Am I just doing something stupid, since I don’t see other mentions of it?
April 3rd, 2007 at 22:05
D. Bentley: Do you have a test area where we can see the problem?
April 3rd, 2007 at 22:15
Steffen: Well I finished the fix of the 10000px issue. However, it was a redo to your original work.
My updated script now requires the init. calls setup like this.
var border=RUZZE.ShadedBorder.create({options}, element, {optional: “re-render”});
The border.render(element); call has been dropped.
Seems to work just peachy at my site. however, that doesn’t mean I haven’t broken something
Cheers.
April 4th, 2007 at 2:56
Steffen: I have been thinking about what you said (quote 53) and I believe that the re-render option should stay. Another benefit is where there are more elements on a page than just one. My plan is to send shaded borders an array of 25 elements to place borders on. If I don’t skip the loop it would take longer for completion.
var border=RUZZE.ShadedBorder.create({options}, element, {optional: “re-render”});
I think having it optional would make sense to the user who would want to re-render the border on the fly.
What are your thoughts on this?
April 4th, 2007 at 11:54
[...] Shaded Borders with JavaScript - simple tutorial on JS shades usage. Bookmark to: [...]
April 4th, 2007 at 21:50
Another: Speed increase in the making (maybe).
I do not think there is a need to color in (with 1px elements) the area on the corners inside the rounded edge. As long as the parent background color(of the element that is being rounded) = the .sb-inner backgorund color specified in the css.
The script would have to check the parent backgorund color with the .sb-inner background if they are the same then you could set the corner elements background color to .sb-inner background color.
Right now at my site I have hacked it partially to do just that. However, the rounded border edge needs to be cleaned up, but other than that I have eliminated all the s for sb.inner for the corners. I’m using white on white.
April 10th, 2007 at 3:34
ok after some days of testing I just figure that the user could be given an option to tell the script if the inner color is the same as the parent element background color. The simple option if not specified draws the inner color specified by the sb-inner set in the CSS by the user. If the option is set then there is a speed increase by not drawing the inner color on all 4 corners.
Any number in element 3 will set the speed increase. Don’t add the 3 element option will not set the speed increase, or set it to 0.
var border = RUZEE.ShadedBorder.create({corner:8, border:1}, $(’filters’), 1);
cheers!
April 11th, 2007 at 12:41
Tanx
April 12th, 2007 at 15:09
Steffen: With the my hacks for shaded borders I am able to draw rounded borders (borders only) on many elements (25+) within great time. (no worse than anything I have seen on other sites loading pics).
These items work on ie6-ie7, and firefox. I have not tested in other browsers.
Have you been able to fix the Safari issues?
Also there is another speed increase that I see and will try to implement it. When drawing a shadow along with a border the border draws of the shadow element. So there are overlapping elements and since the border is on top of the shadow there is no need to draw the shadow elements.
Cheers.
April 12th, 2007 at 16:28
Hi:
Very nice piece of code. I am using it on one of out projects at the moment.
Steffen, do you plan to release an update with the speed improvements mentioned here?
Regards:
John
April 12th, 2007 at 22:10
John: Just in case you wanted to test out mine go to http://www.mytradex.com and grab a copy. Only hard part is that you will have to take a look at how to write shaded border calls that I have mentioned here. However, you can take a look at my index.html as well.
Actually curious to see if these improvements are worth while.
Cheers
April 15th, 2007 at 17:26
Hi, great script! Thanks for sharing.
My 2 cents:
- .sb, .sbi, .sb * , .sbi * { position:relative; z-index:1; }
- > this line was making troubles to my site content, as there is other interactive content where z-index is crucial. Since the * seems to apply the z-index:1 to every child element it didn’t work as intended anymore;-) As a workaround I added the names of the divs manually and removed the star.
- I didn’t really find a safe and easy way for fall back (ie: readable fonts with no JavaScrips on) Setting up a background color manually to the div you apply the border to will display the bg color *and* the shadow which of course looks awful… I guess the Script should jump in there and simply remove the background color. When JS is off, the background would be displayed just without border/shadow.
I feel these small things shouldn’t be too hard to implement, however go beyond my knowlodge:(
Nick
April 19th, 2007 at 11:03
Wow, well done, works nice
What I would like to see is the ability to specify the borders that get a shadow
For example bottom and right, as if there is a light from the topleft corner
Again, well done for the great and easy to use javascript
April 20th, 2007 at 7:38
WOW!!!That was a really cool script. I can’t wait to use it in some projects
I have a suggestion. Right now, if there is no javascript support, or if the script fails for some reason, we are left with the div without a background. This makes the text unreadable in that case. It will be really great if we could provide an alternate class while loading, so that even if the script fails to load, we can be assured the user will be able to see the text without difficulty(without the rounded corners and shadows too).
April 21st, 2007 at 23:29
In test.html you have “Text that get hidden”. But if you put it in it would not be hidden! And you said “I can do nothing about it…”
Just kidding, but is it possible to automate it so it would add span around any text without tag?
You did great work!
April 24th, 2007 at 15:41
Hi, I am working on a site wich uses a minimal version of ShadedCorners (only for de back-dropshadow) I noticed that when ShadeCorners is active OffsetHeight returns a different value then when it is disabled. my menu’s get mixed up in such a case. Does anybody has any idea how to correct this problem.?
Thanx and keep up the good work!!
May 3rd, 2007 at 21:30
Your earlier version had a very straightforward method of including a background image. In the test.html example of this version, there wasn;t an instance of a background image. Could you provide one for this version? Thanks.
Also, I’ve looked at dozens of rounded corner solutions. Your’s is by far the most complete of anythign out there, kudos!
May 4th, 2007 at 1:17
Has the issue with IE leaving a horizontal gap been resolved?
Any pointers on what it could be?
May 6th, 2007 at 15:42
[...] Rundung betrifft und welche Farbe das Objekt hat. Aber eigentlich gehts nicht um Rico, sondern um ShadedBorder - eine kleine Javascript Bibliothek von Steffen [...]
May 16th, 2007 at 0:26
in response to Ian.. I was having the horizontal gap problem as well in IE. When I removed the padding:1px; from the css the gap went away. hth
May 16th, 2007 at 7:45
@ mytradex: i’m using mootools for a project and i want to use this script but can’t seem to use it efficiently. can you help me with your *hacks so i can integrate it seemlessly with my proj. thanks a lot!
May 16th, 2007 at 19:09
@infomon - Sure you can check out my site and pull down a copy of the script from there. Then take a look at index.html page. If you need some more help send me your email address through the contact form @ mytradex.com.
-I’ve pulled back some changes I previously made in the script and it’s running fine. I haven’t heard from the author in awhile so I am not sure if he has fixed the problem in Safari yet.
May 24th, 2007 at 11:42
Hi Great job on shadedborders. I was wondering if you were able to give a reference page for all the different options of shadedborders as the example page doesn’t show too many. The previous example page for ruzee corners was very useful as it showed the different ways to configure it such as with background images, glow border, fade border, etc. A reference page with the an example of each would be great.
Thanks
Daniel
June 5th, 2007 at 16:21
Thanks for this. However, it seems to have some problems with IE6. I know most of the shadow border demos look like they work fine across the supported browsers, but sometimes I think some special handling is required. For example, I found that I had to use HTML 4.01 transitional doctype instead of the XHTML 1.0 transitional in order to work. Maybe it was just some bad html on my part, but that was the easiest fix for me. Hope that helps others.
best
Hugh
June 8th, 2007 at 22:18
Thanks for all the work you did with this, has helped get rid a big headache for me.
June 12th, 2007 at 22:42
First, thanks for sharing your script, I think it is a great job!!!
I am trying to add a rounded box around a portion of a form which includes a couple of labels and textboxes. However the controls overflow the box, how can I workaround this issue?
thanks!
June 13th, 2007 at 17:55
Great job!
I am using RuzeeBorder and I want to migrate to ShadedBorder but I see there is no “glow” effect… What happened to that? Using shadow isn’t the same because it doesn’t affect every edge in the same way. Am I clear?
Thanks for this great script =)
June 15th, 2007 at 11:22
Is there a way to add multiple id names to the render function?
eg. instead of
roundedBorder.render(’portal-header’);
roundedBorder.render(’activ-footer’);
roundedBorder.render(’activ-home-news’);
Thanks
June 20th, 2007 at 14:15
Hi.
I’m trying with ShadedBorder script.
But i have problems with IE. Please see this:
http://www.preciolocus.com/deairis/product_info.php?products_id=9
With Firefox and Opera we haven’t problems
Any solution?
Thanks.
June 25th, 2007 at 16:01
I have a div that has a background image. When I apply a rounded border to it, the original background image shows through outside the corners. Is there a way to get that to stop?
Thanks
June 26th, 2007 at 21:22
Another question. In IE 6.0 on my machine, the left and right border don’t always get rendered. Is anybody else seeing that? it is actually like they aren’t getting rendered.
June 29th, 2007 at 1:00
Nice work, the shadows look good (save a few stray pixels).
To answer your question Irv, the original div can’t have a background color or image. You need to set the background on the generated inner div like:
div#original .sb-inner {background:_____}
Note some specification must precede the .sb-inner, because the javascript overwrites the top level .sb-inner.
I would guess the slowness on some browsers is due to the hundreds of generated one-pixel divs. Not sure if that is a viable implementation on those browsers.
July 5th, 2007 at 12:54
first i like to say great work you’ve done with this script.
but i’ve got the following problem.
when i do a
#testborder2 .sb-inner { background:#fff; background-image:url(bgr.jpg);background-repeat:repeat-x;background-position:top;}
the background gets repeated in the top and bottom part of the element with the size of the corner radius.
Any workaround?
thx in advance
July 11th, 2007 at 23:11
Hi, I found that your script can’t be compressed. JSmin gives an error and Packer Compression too.
Maybe a missing ; end of line? I’l try to find it
July 12th, 2007 at 4:06
ShadedBorder works great. But I want to have several of the same boxes on a page (with different content), and can’t get that to work at the moment without a separate set of classes for each box. Can a more experienced user give some advice?
Thanks,
::Leigh
July 13th, 2007 at 17:38
Hey, great work! I was using RuzeeBorders in the past, but now I’ve decided to migrate to ShadedBorder. I switch every RuzeeBorder into ShadedBorder and the implementation is very easy. Although I’ve noticed that ShadedBorder is definitely slower than RuzeeBorders… my browser freezees while executing the roundind scripts…
Have you notice that? May be could work in a fix?
July 15th, 2007 at 23:19
I have found ShadedBorder and like it quite a bit. It’s very simple to use.
I try to use it in an eBay auction. Internet Explorer draws the corner elements, but not the horizontal or vertical elements of the borders.
Firefox on Windows is ok. Camino and Safari (3beta) on Mac Os are ok as well.
The html code for ebay is in a table cell. I have made a test page and put the stuff in a table cell, same effect; corners but no lines.
Do you have an idea?
July 20th, 2007 at 6:32
This is great! Starting to implement easily enough. Main question: Is there a “glow” option as there was in the RUZEE.borders implementation? Would love it if there was, but I can’t find it. Thanks for the work you’ve done and continue to do!
August 20th, 2007 at 17:58
Great work.
But did you see, shadow does not appear in IE 7 of window Vista. Try this page with IE of Vista, you will see two vertical black bars in the both side of the rounded box and without shadow.
August 21st, 2007 at 2:28
I am facing the exact same problem(Reply 96) as stated by Simon in Vista. Could someone help?
August 21st, 2007 at 5:42
I changed the height of the div in function mid from 10000px to 4096px and it seems to be working fine in Vista. I do not know however whether that is going to break anything somewhere else. Need to check. Anything above 4096 px and that black border is reappearing.
Nevertheless, I must congratulate Steffen for the great work that he has done. Thanks a lot for your code!!
August 21st, 2007 at 21:04
is there a posibility to call the funtion externally as it clutters the entire page…… first script include for .js file then css inclusion for color change and followed by function call for round corner in script then specify cs for class to have round corner finally at end script for rendering… well not sayin that i dont like but nifty corner is much neater and pretty but if possible could work on that for border inclusion as it will take lots of loads off…
it can make use of onLoad in body as well for yours, i think not possible…
thanks
Aqeel
August 23rd, 2007 at 13:57
I recall a 4096px limit/problem for Safari when using margin-top > 0
August 24th, 2007 at 10:49
I don’t understand how to call multiple div’s with the same classname using Prototype’s $$ function. Can anybody provide a clear example?
September 1st, 2007 at 0:53
I would also like to know how to apply a shadedborder definition to all div elements of a certain class. My design uses an auto-generated series of divs and I simply cannot render each of them separately.
3 or 4 people have asked the same question… is there an answer??
September 1st, 2007 at 3:08
Update: I found the following Javascript function helpful:
http://javascript.about.com/library/bldom08.htm
…along with shadowedBorder.render( document.getElementsByClassName(’sb’) );
…to render all cases of “sb” divs in one fell swoop. I also used:
div .sb { cursor: pointer; }
div .sb-inner { background:#ffffff; }
div .sb-border { background:#999999; }
div .sb-shadow { background: #999999; }
div:hover .sb-inner { background: #B8BFD3; }
div:active .sb-inner { background:#8390B3; }
Of course you can only have one type of border on your page using this method. Luckily for me this was all I needed. Whatever happened to being able to assign borders by class?
At any rate, the visual quality is excellent, but it turns out to be a little slow for what I need, which is too bad because it really would have looked great.
September 5th, 2007 at 18:02
Steffen,
Should transparent drop shadows work for dragable popups? I’m observing opaque drop shadows (they fade from grey to white).
Thank you.
September 7th, 2007 at 17:21
One suggestion:
Include in the download package a basic page with the least necessary code.
September 8th, 2007 at 20:24
I want to use it for a sidebar menu however in IE7 if i have more than 1 on top of each other it make the second one look uguly
September 10th, 2007 at 9:07
Thank you very much. This is just superb and convenient. Atleast i dont have to create images for every colour i need.
September 10th, 2007 at 10:57
Hi,
We found a bug on IE when using shaded border on div that contains a table with multiple rowspan. The first rowspan TD is ok but not following (there is shift of the foolowings rowspan TD to the bottom).
XX
a
b
XX
a
b
XX
a
b
If you use the folowing CSS rules it will fix it :
.sb tr {position: fixed;}
html>body .sb tr {position: relative;}
js used :
Event.observe(window, ‘load’, new Function(”\
var border = RUZEE.ShadedBorder.create({ corner:10, border:3});\
border.render(document.getElementsByClassName(’bloc_bleu’));”));
September 13th, 2007 at 22:59
I loaded this on a DNN page and not its fubar. Is this a conflict with the other javascripts?
September 19th, 2007 at 13:30
Dear Author,
The shaded border tables really look very beautiful. I wanted to place more such tables in a single web page but it just does not show the other tables. How should I proceed or which portion of the code should be edited for this? Please help me. Please note it that I don’t have any knowledge about javascripts but use some free scripts after editing in a couple of sites I have webmastered.
Please help.
Regards,
mpksingh
September 20th, 2007 at 2:10
Hey! I did it. This is great! Thanks so much for this cool and easy to implement library!
@mpksingh:if you mean tables like I think you mean tables–you’ll be far better off using divs in HTML and ids and classes in CSS.I think I have it right when I say that tables layouts have a lot of inline style and it might not mesh too well.
September 22nd, 2007 at 22:36
Your shadedborder script adds just the touch I’ve been looking for on one of the pages on the 8th Air Force Museum site I am rebuilding. The only problem I’m having is that although the shaded borders display properly when viewed locally, they do no when viewed after FTPing to the host server - and I have FTPed the shadedBorder.js file.
Could you look at the page in question (http://www.8afmuseum.net/security.htm) and see what I’m missing - I’ve been looking at it for about two hours with no success.
Thanks,
Dave Jampole
September 23rd, 2007 at 2:41
The site I’m working on, has black background in the body, with white background divs and black text. Since in your setup the white background is defined in a div implemented by the script, but if I javascript isn’t on, I don’t see anything. Or worse, I might have problems with the search sites for having black text on black background.
Is there a workaround?
September 26th, 2007 at 21:47
I solved my ‘problem’ regarding the shaded border not displaying. I forgot that the file name is case sensitive (in the page code I used ’shadedborder’, but the .js file was entitled shadedBorder. Once I fixed that problem, everything works as advertised.
Now I have another question: I want to change the background color of the shaded border element from the dull gray to something else. Any idea where I do that?
Thanks again,
Dave Jampole
October 1st, 2007 at 6:47
Hi there,
Fairly new to java and all this but I am just trying out your script on a test page so I can get to grips with it. I am finding that the shadowed box appears perfectly unless I hit the refresh button. When I hit the refresh button the shadow breaks out of the div element and looks pretty bad. I wondered if the variable I set for border at the beginning was adding up the values of corner, shadow etc causing them to double like this. Sure enough if I set var border=0 at the end of the page the problem resolves. Am I doing something wrong? Here is the test code I have been trying.
#roundme {
back-ground-color: #ccc;
padding:20px;
width:80%;
margin:20px auto;
}
var Border = RUZEE.ShadedBorder.create({ corner:8, shadow:16, border:2 });
I want to be rounded please!
Border.render(’roundme’);
var Border = 0;
I am also finding that I can the edges of a lign behind the div alement near the bottom. Any ideas?
Thanks,
Matthew
October 1st, 2007 at 6:49
ok so the post took out all my html head style script and body tags!
October 4th, 2007 at 21:48
Took me a while to work this out, but thought others may be interested. I have a .Net 2.0 site and wanted to use your script to wrap around my asp: elements. Since they are rendered at run time and given ID’s based on whatever logic MS decided to use, finding them with your .render method is a little tricky. Also, MS loves to use SPANS so, getting the styling to work so the elements are layered properly is a bit tricky. In the end I found that if I wrap what I want to present (an asp:label) for instance in a asp:panel, then things are pretty clean. Also, having the inner span element position:Absolute is required because without it, the thing just doesn’t show up!
.facbox
{
Position: absolute;
left: 10px;
top: 44px;
font-size: 12px;
color: black;
height: 24px;
z-index: 10;
padding: 6px 20px 2px 20px;
}
.abs {position: absolute;}
var sborder = RUZEE.ShadedBorder.create({ corner:8, shadow:16, border:2 });
sborder.render(”);
October 4th, 2007 at 21:51
hmmm…some of my tags got stripped, let’s try again.
Took me a while to work this out, but thought others may be interested. I have a .Net 2.0 site and wanted to use your script to wrap around my asp: elements. Since they are rendered at run time and given ID’s based on whatever logic MS decided to use, finding them with your .render method is a little tricky. Also, MS loves to use SPANS so, getting the styling to work so the elements are layered properly is a bit tricky. In the end I found that if I wrap what I want to present (an asp:label) for instance in a asp:panel, then things are pretty clean. Also, having the inner span element position:Absolute is required because without it, the thing just doesn’t show up!
>style>
.facbox
{
Position: absolute;
left: 10px;
top: 44px;
font-size: 12px;
color: black;
height: 24px;
z-index: 10;
padding: 6px 20px 2px 20px;
}
.abs {position: absolute;}
</style>
<script language=”javascript” type=”text/javascript”>
var sborder = RUZEE.ShadedBorder.create({ corner:8, shadow:16, border:2 });
</script>
<asp:Panel runat=”server” ID=”fbox” CssClass=”facbox” style=”position:absolute;” >
<asp:Label runat=”server” ID=”FacilityBox” CssClass=”asb sb” />
</asp:Panel>
<script language=”javascript” type=”text/javascript”>
sborder.render(’<%=fbox.ClientID%>’);
</script>
October 7th, 2007 at 6:45
Has anyone noticed the black bars on each side of a div using a shadow in ie7? It appears in Steffen’s introduction demo box on this page. It works fine in firefox though. I’d like to use this library, but ie 7 support is very important to me.
Thanks,
Reid Maker
October 9th, 2007 at 11:55
I added the ability to round opposite corners. I`ll send a mail where you can get it, if you are interested.
October 10th, 2007 at 4:39
Seems to be an issue with IE6 and rendering borders on a div of set height. In my instance, I was rounding the top and bottom right corners of a div with border - this would cause the right rendered border (”.sb-border”) to float left of the left rendered border. It would seem the right border had disappeared. The workaround is to remove the css height from the rounded container, and set the height of another div nested inside.
October 10th, 2007 at 13:27
Don`t know if you`re talking to me, but i meant to round top left and bottom right corner.
October 12th, 2007 at 20:13
I’m using ShadedBorder with Joomla! It works pretty well except with Safari2 (Safari3 has no such problem).
Every page may have several different boxes with rounded corners and shadows, but I don’t know of which type they are and how much different boxes a page contains. In the end-of-the-page script it looks like this:
shadowedBox1.render(’shadowed-box1′);
shadowedBox2.render(’shadowed-box2′);
shadowedBox3.render(’shadowed-box3′);
shadowedBox4.render(’shadowed-box4′);
videoBox.render(’video-box’);
If for example “shadowedBox3″ is missing because the auther doesn’t need it for that page, the following boxes “shadowedBox4″ and “videoBox” aren’t rendered.
I don’t know JavaScript, but I’m sure there is a simple solution for this problem.
October 14th, 2007 at 22:36
With regards to Reid Maker’s question in Post no 119.
Indeed there are vertical bars drawn on the sides in IE7 when using shadows. The bars have the color of the shadow.
In post 96 /98 there was some talk about changing the height of the div in the script’s function ‘mid’ from 10000px to 4096px. But this didn’t do the trick for me…
Anyone came up with a solution on this one?
Piotr
October 18th, 2007 at 22:40
Does anyone know if it’s possible to add a background-image to the .sb-inner CSS definition? I’d like to add a gradient image to my box if possible.
.categories .sb-inner {
background: #600 url(/images/bg_categories.jpg) repeat-x;
}
The doesn’t work, instead it shows the gradient image gets used at the top, middle and bottom of the rounded corners box.
October 19th, 2007 at 5:55
I am trying to implement this using JQuery, but, as I am not yet very proficient with coding Javascript I am unclear how to make the call. I am calling the shadedborder.js in the header as well as an external javascript file that contains the var and .render statements. I have a div called “content” with class “sb” that I am trying to round. I believe the issue is that I am not calling the javascript properly from my external file and therefore jquery is not being activated. Can anyone tell me how my external file should read in order to implement the shadedborder.js functions?
Header:
External Javascript file borders.js:
var border = RUZEE.ShadedBorder.create({corner:8, shadow:24, border:2});
border.render($$(’content’));
HTML:
CSS:
#content { position: absolute; top: 226px; left: 300px; height: 425px; width: 380px; }
#content .sb-inner {background:#000;}
#content .sb-border {background:#fff;}
#content .sb-shadow {background:#fff;}
Any help on how to set that external file straight would be greatly appreciated.
October 19th, 2007 at 5:59
OKay, I got stripped in the last post. The header is calling jQuery.min.js and shadedborder.js as well as the external javascript file, and html is just a div with id content class sb.
October 19th, 2007 at 15:42
Adam,
With regards to the gradient image. It’s possible, but you’ll have change some source code and add two css style classes which define the top and bottom colors of your gradient. In the javascript you’ll have to set those style classes when the top and bottom corners are drawn. Bit of a workaround I suppose, but looks pretty cool.
With regards to my question (post 124). I found out that setting (changing) the element height in the script from 10000 to 2000 works for IE7. Only problem is that the element can not exceed the 2000px.
Piotr
October 19th, 2007 at 15:48
Angie,
I’m not sure what you mean, not familiar with JQuery.
But you are using an id tag #content. Then you are calling: border.render($$(’content’));
I assume that’s a call via prototype.js (the $$ function). Did you try just calling border.render(’content’);?
Piotr
October 19th, 2007 at 23:35
Piotr. Thanks for the great script! I am trying to do just what Adam is (or was) trying to. I placed a gradient under .sb-inner. The image is aligned towards the top and its repeated horizontally (on x axis). The problem I am having is that, the top 8 pixels of this background image is being showed on the bottom. Could you please show us how to fix this?
Regards,
– Naif
October 20th, 2007 at 0:39
I tried this with J!. It works fine except allows one box only at one side (either left or right at 3-colom layout). All the left boxes were combined into one big box rounded by this shadowed border. Tried with prototype.js and border.render($$(’shadowed-border’)); didn’t help either (besides the prototype.js file is just too huge, 120kb, which just make my site slow). Wish there were another faster way to achieve this multiple shadowed rounded corner boxes issue. Thank you anyway.
October 20th, 2007 at 0:50
Naif,
Having a style class .myclass, I did (hope it all fits in one post):
.myclass .sb-inner { background: #fff url(images/my_gradient.gif) repeat-x;}
Then I also set:
.myclass .sb-inner-top { background: #d9e468;} /* The top color of the gradient image */
.myclass .sb-inner-bottom { background: #fff;} /* The bottom color of the gradient image */
Changing the javascript:
/* Initialize variables for bottom and top style classes for gradient support */
var iclassTop = “sb-inner-top”;
var iclassBottom = “sb-inner-bottom”;
In function ‘corner’ where you’ll find two dsi.push(… iclass …); calls, change them both to:
dsi.push(dd + ‘” class=”‘ + (t ? iclassTop : iclassBottom) + ‘”>’); /* Piotr: Changed from iclass */
In function ‘tb’ where you’ll find one ds.push(… iclass …); call, change it to:
ds.push(dd + (t ? ‘top:’ : ‘bottom:’) + y + ‘px;’ +
‘ height:’ + (r+cy+s) + ‘px;” class=”‘ + (t ? iclassTop : iclassBottom) + ‘”>’); /* Piotr: Changed from iclass */
Basically you change the background colors for the top and bottom corners depending on your gradient colors.
Piotr
}
October 20th, 2007 at 10:11
Your a star Piotr! It has fixed the problem. Although.
dsi.push(dd + ‘” class=”‘ + (t ? iclassTop : iclassBottom) + ‘”>’);
needs to be:
dsi.push(dd + ‘” class=”‘ + (t ? iclassTop : iclassBottom) + ‘”>’);
Thanks. I appreciate your help
Regards,
– Naif
October 20th, 2007 at 10:13
Sorry about that. I meant to write, there needs to be a closing div just before the final quote.
Forgot div’s are removed by wordpress. I guess you must have typed that in also but WP had removed it from the comment.
October 20th, 2007 at 11:23
Naif,
That’s correct.
You could extend the gradient support by introducing an extra option in the create function’s options array, like gradient:’true’ or gradient:’false’. Depending on this flag you could initialize the iclassTop and iclassBottom variables to the sb-inner-top/bottom or sb-inner class. This way you would only have to add sb-inner-top/bottom style classes for elements that truely use gradient. For non gradient elements you would simply set the flag to false.
Piotr
October 20th, 2007 at 23:21
I’ve just released version 0.3 which now “officially” supports background gradients - get it while it’s hot
October 21st, 2007 at 8:43
Thanks for the response. I was under the impression that this code was written to work with jQuery libraries? That’s why I asked how to make the call to it. I need to convert this:
var border = RUZEE.ShadedBorder.create({corner:8, shadow:24, border:2});
border.render($$(’content’));
into something like this (this is my call to a different jQuery plugin):
jQuery(function($) {
$(”.lavaLamp”).lavaLamp({
fx: “backout”,
speed: 700,
click: function() {return true;}
});
});
October 21st, 2007 at 11:42
Steffen,
Have you seen your example page in IE7?
In Mozilla FF all renders nicely, but in IE7 it does not.
Or is it just my IE7?
Piotr
October 21st, 2007 at 11:59
Hmmm,
But the example page that comes with the download looks good in IE7.
So guess it’s my IE7 setup(?). Anyway, thanks for the update Steffen.
Piotr
October 21st, 2007 at 13:13
Hello Steffen,
Great work with Shaded Corners. Its awesome.
I can’t seem to get the gradients working at the bottom of a div though.
(say you have a div with a white background and want to have a white-to-grey gradient at the bottom)
I’ve tried to no avail with:
#links .sb-inner { background:#FFF url(gradient.gif) left bottom repeat-x; }
How do I make this work?
Please help.
Any chance you could put an example together for us CSS-non-JS coders.
Thank you kindly.
October 21st, 2007 at 13:27
Hi Nick - right, the gradient is not supported on the bottom and they’re only supported top to bottom… in any case make sure the gradient ends before the bottom and work with the background color (white in your case).
October 23rd, 2007 at 0:58
Hello Steffen,
OK thanks for that. Unfortunately I can’t use it for the project I was hoping to as the background graident is at the bottom of a div. I may be able to work around it sitting a couple of divs on top of each other with different border settings.
Anyway, if you have a suggestions / improvements list, I would love to see the option for gradients also supported at the bottom of a div - and allowing gradients to run the color bottom to top. Thanks again.
Keep up the great work - you are an absolute superstar!
October 23rd, 2007 at 6:45
Hello Steffen,
I like your shaded borders script. It looks very nice, oh I love it very much. But how can I apply it to more than one box/element? So far I’m managed to shade border one box/element only. Please help. Thank you a million for your help.
October 23rd, 2007 at 9:24
Hello Steffen,
This is without doubt the best anti-aliased rounded corners solution I have seen. The more I play with it though the more I think it works best with text - it would be amazing to trick it up for images also.
a. Say you have a photo that you want to display with rounded corners. How do we use Shaded Borders without getting the forced “red space” at the bottom? I know you can position a photo absolutely within a rounded corner box but that’s not as sexy when you’re looking for a round solution - and the photo then has square edges within the round border. ( see example link: http://www.gocreate.com.au/ruzee01.htm )
b. Further, any chance of enabling a background image to be displayed with CSS positioning such as “center center no-repeat” or “bottom left repeat-x” in whatever manner the user wants - I think that is related to a. above and my previous post (142).
Thank you so much Steffen.
October 24th, 2007 at 7:32
-forgive my English-
can you put inside the html generated by a php script (that parses a rss feed?)
It seems great!
October 24th, 2007 at 8:54
Hello!
I move my comment in ruzee.borders to here, because I notice that is here where it must be:
We have rebuilding our site and we consider to use your fabulous ShadedBorders, but we found a bug in IE6: our new pages have fixed header and footer with CSS, and when we put ShadedBorders to the elements (DIVs) that “floats” between it , the scroll bar or IE moves but the content no. In IE7 and Firefox it works well. Anyone knows what is the solution? Thanks a lot!
Xavier
October 24th, 2007 at 19:29
Anyone figure out the render problem in Comment #123? I’m having the same issue.
At the end of my page, I call a .js file to render all my boxes.. here is the contents of shadedborder-render.js
sideboxBorder.render(’sidebox-quicklinks’);
sideboxBorder.render(’sidebox-categories’);
sideboxBorder.render(’sidebox-related’);
sideboxBorder.render(’sidebox-friends’);
However, if I don’t use on a particular page, then “sidebox-related” and “sidebox-friends” will not render on that page.
October 24th, 2007 at 19:31
Oops - worpress stripped my last comment, it should be:
However, if I don’t use id=”sidebox-categories” div on a particular page, then “sidebox-related” and “sidebox-friends” divs will not render on that page.
October 24th, 2007 at 21:41
Hy my name is Marcio, i’m from Brasil
I’m using ShadedBorder script in this project
http://www.cerebrum.com.br/_somar_cabos/
But link CEREBRUM in Internet Explorer show Up
How to resolve this
October 26th, 2007 at 0:01
For 123 and 147, it’s probably throwing a js error because the element doesn’t exist. Try test