ruzee.com - Steffen Rusitschka

<script src="shadedborder.js" type="text/javascript"></script>

<div id="round_me"> 
   <p>I want to be rounded!</p>
</div>

var border = RUZEE.ShadedBorder.create({ corner:8, shadow:16,  border:2 });

...  
<script type="text/javascript">
  border.render('round_me');
</script>

#round_me, #round_me .sb-inner { background:red; }
#round_me .sb-shadow { background:blue; }
#round_me .sb-border { background:green; }

#round_me:hover, #round_me:hover .sb-inner { background:purple; }

border.render($$('#header .tab'));

307 Responses to “ShadedBorder - JavaScript Round Corners with Drop Shadow”

< Prev 1 … 28 29 30 … 31 Next > Show All

• 281
  Mike V Says:
  May 9th, 2008 at 3:56

  My site has a div called “div_stage” that is populated by an AJAX call via the onLoad event of the page. Typically, the div is filled with a Login box. This login box has an id=”div_loginBox”.

  What is the proper way to apply the rounded corners Javascript to an element that has been loaded into a div way AFTER the original page has loaded? In my example, I would like to apply it to ‘div_loginBox’ which is loaded into ‘div_stage’ via an AJAX request.

  Thanks for sharing your creation with us and thanks in advance for any help you might be able to resolve my ignorance!
  (sorry, still a bit of a Javascript newbie…)

• 282
  ebarra Says:
  May 20th, 2008 at 13:50

  I am using scriptaculous drag and drop and when I added ruzee the drag and drop stopped working.
  I have seen you had the same problem with ruzee.border but solved it, may be it is the same problem
  in the other hand your library is very good
  thank you

• 283
  Adam Says:
  May 20th, 2008 at 19:35

  So, I’ve used this script for various small page sidebars and it’s worked great when i have only a few components like that on a page.

  Recently, however, I tried to put my entire page’s content area within a rounded corner DIV, and it is very slow loading and causes “flickering” in IE6 (especially when you hover over a link that changes color via CSS).

  So, I don’t think the script will work well if you want to put your entire page in a content area with rounded corners, namely for the reason in Post #228:

  “The div covers the entire content area and Firefox is obviously considering this div being made of hardened glass or something…”

  Basically, we’re creating a HUGE div and using up a lot of browser resources.

• 284
  John Bruso Says:
  May 23rd, 2008 at 0:41

  Hi All,

  I hope this hasn’t been asked a hundred times already, but I’m trying to figure out a way to use multiple boxes with shaddows on the same page. Can you tell me if this is possible? Sorry if it’s been covered already and I’m just overlooking it in the history.

  Thanks,

  John

• 285
  Piotr Says:
  May 28th, 2008 at 22:10

  @John Bruso

  Look at the full featured example page’s source. It has multiple boxes…
  You can also use the $$ function of Prototype to create boxes having the same css class selectors. (See howto from Steffen on top of this page).

  Piotr

• 286
  Piotr Says:
  May 29th, 2008 at 16:28

  For those (above) who have problems aligning elements vertically inside tables, that are somewhere deeper within the rendered element: Setting the element that is within the table cell explicitly to ‘position: static’ works for me.

  Piotr

• 287
  Dannii Says:
  June 1st, 2008 at 20:33

  Hi all, well there so many comments here… can you believe I read through the whole lot to try and find a solution to my problem? And no one else had this problem. I have emailed Steffen but after reading all these comments and seeing that he wasn’t replying to alot of problems and others were that didn’t actually create the script I felt that it was probably best to ask here.

  On my website I want to use tabbed navigation. I tried Nifty Corners Cube and it wouldn’t allow me to have my own background. If I wanted a solid color background it may have worked. BUT my problem with this script (which I do love by the way!) is that I cannot find a way to have each tab on hover to have a different image to the last. (Did that sound right?)

  Basically you have the tabs - plain white in color (rounded obviously), on hover I want a different image for each tab.

  Now I believe it has something to do with the CSS and the ul id for the tabs.

  I have tried so many alternatives and still haven’t found a solution.
  here is the test url: http://deliciouz.org/blogtest.html

  It has a background image rounded for each tab but it hasn’t defined each image to each tab and plus there is a problem with the hover images on the tabs - theres a triangle in the right corners of a darker color…. please take a look.

  I hope someone can help me! Thank you in advanced.

  Dannii

• 288
  Dannii Says:
  June 1st, 2008 at 20:40

  I forgot I uploaded a different file… the tabs are defined properly with rounded corners but the hove is rounded at all BUT has the different backgrounds that I would like rounded. Can anyone help?

• 289
  Dannii Says:
  June 1st, 2008 at 20:41

  correction
  *But the hover isn’t rounded at all….

• 290
  Dave Says:
  June 2nd, 2008 at 17:25

  First of all, excellent bit of coding. I love the transparency (compared to NiftyCube, for example). I am having one problem (of course) with the tabs. I would like to apply the :hover style to a.active as well, so the the current page link can be displayed with the same background color as the hover link. The result, instead, is that the corners disappear (leaving a rectangular tab instead of a rounded one). I can set the font color, text decoration, etc, but setting background-color seems to switch the corners off. Any ideas (and thanks, either way)?

< Prev 1 … 28 29 30 … 31 Next > Show All

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website