Comments on: ShadedBorder with Gradients http://www.ruzee.com/blog/2007/10/shadedborder-with-gradients/ Fri, 04 Jul 2008 12:47:32 +0000 http://wordpress.org/?v=2.5.1 By: Charles Manske http://www.ruzee.com/blog/2007/10/shadedborder-with-gradients/#comment-74419 Charles Manske Tue, 15 Apr 2008 22:09:00 +0000 http://www.ruzee.com/blog/2007/10/shadedborder-with-gradients/#comment-74419 I use jQuery for most things, but I really like the style and size of this code for corners and gradients. A common pattern for rendering corners for all elements of a particular class is: var border = RUZEE.ShadedBorder.create(...); border.render($('.my_border_class').get()); /* Use get() to return array of DOM elements */ But I'm seeing an ugly problem when a page is resized in IE7 (Windows XP). You can see it on the example page: http://www.ruzee.com/files/shadedborder/test.html Resize the window from the bottom-right corner to make it smaller and watch what happens to the "A headline With Its Own Style" box. Both of the right corners become dislocated and shift to the right or disappear completely. Also, if the window is very narrow, the central div in that box (the one that ends up with 100% height in the final render) is not extended correctly and the background shows through. These obviously stem from the classic IE "box" rendering bugs. Just in case some of you aren't using Firefox, developing in Firefox with the Firebug plugin is by far the best way to debug styles, since you can inspect ALL of the rendered divs. If only that worked in IE! I use jQuery for most things, but I really like the style and size of this code for corners and gradients. A common pattern for rendering corners for all elements of a particular class is:
var border = RUZEE.ShadedBorder.create(…);
border.render($(’.my_border_class’).get()); /* Use get() to return array of DOM elements */

But I’m seeing an ugly problem when a page is resized in IE7 (Windows XP). You can see it on the example page: http://www.ruzee.com/files/shadedborder/test.html
Resize the window from the bottom-right corner to make it smaller and watch what happens to the “A headline With Its Own Style” box. Both of the right corners become dislocated and shift to the right or disappear completely. Also, if the window is very narrow, the central div in that box (the one that ends up with 100% height in the final render) is not extended correctly and the background shows through. These obviously stem from the classic IE “box” rendering bugs.
Just in case some of you aren’t using Firefox, developing in Firefox with the Firebug plugin is by far the best way to debug styles, since you can inspect ALL of the rendered divs. If only that worked in IE!

]]> By: aqeel http://www.ruzee.com/blog/2007/10/shadedborder-with-gradients/#comment-74072 aqeel Wed, 09 Apr 2008 12:55:25 +0000 http://www.ruzee.com/blog/2007/10/shadedborder-with-gradients/#comment-74072 great script but would be more greatful if could use jquery…like this is only rounded but u might add shadow… http://www.malsup.com/jquery/corner/ entire stuff here…. http://docs.jquery.com/Plugins jquery.com great script but would be more greatful if could use jquery…like this is only rounded but u might add shadow…

http://www.malsup.com/jquery/corner/

entire stuff here….

http://docs.jquery.com/Plugins

jquery.com

]]> By: Gary http://www.ruzee.com/blog/2007/10/shadedborder-with-gradients/#comment-73875 Gary Sun, 06 Apr 2008 00:39:50 +0000 http://www.ruzee.com/blog/2007/10/shadedborder-with-gradients/#comment-73875 I'm setting up new look for site and want to try to find way of making rounded corners with drop shadow but also add image inset( crosshatch or similar look to simulate a fabric) following or replacing the border/drop shadow, but around the radius of corners. New page layout is at http://www.solarfabric.com/test2.html Any ideas anyone?I was thinking of possibly div with image beneath but want look to be with image on top where drop shadow would normally be. Thanks Gary I’m setting up new look for site and want to try to find way of making rounded corners with drop shadow but also add image inset( crosshatch or similar look to simulate a fabric) following or replacing the border/drop shadow, but around the radius of corners. New page layout is at http://www.solarfabric.com/test2.html
Any ideas anyone?I was thinking of possibly div with image beneath but want look to be with image on top where drop shadow would normally be.
Thanks Gary

]]> By: aqeel ahmed http://www.ruzee.com/blog/2007/10/shadedborder-with-gradients/#comment-73732 aqeel ahmed Fri, 04 Apr 2008 09:58:10 +0000 http://www.ruzee.com/blog/2007/10/shadedborder-with-gradients/#comment-73732 i liked the code but have some minor issues of coding.....do please use this site for javascript error....http://www.javascriptlint.com/online_lint.php shadedborder.js..i like the stuff but have some issues....anyway thanks for the great work and the effort put into it... i liked the code but have some minor issues of coding…..do please use this site for javascript error….http://www.javascriptlint.com/online_lint.php

shadedborder.js..i like the stuff but have some issues….anyway thanks for the great work and the effort put into it…

]]> By: bodo http://www.ruzee.com/blog/2007/10/shadedborder-with-gradients/#comment-69981 bodo Wed, 20 Feb 2008 15:44:15 +0000 http://www.ruzee.com/blog/2007/10/shadedborder-with-gradients/#comment-69981 Hi Steffen, your library is great, but I have an issue concerning IE 6. I want to have a 1px wide border around a div containing several other divs. I can´t use the div itself, because the background-color has to be white (and not in the color of the border). So I wrap around the div another div with 1px padding. This is the code: [..] #border{ width: 200px; background-color: #000066; xorder: 1px solid red; padding: 3px; } #inner{ background-color: #fff; } window.onload = initIt; function initIt(){ var roundBorder = RUZEE.ShadedBorder.create({corner:3});roundBorder.render('border'); } test Quite simple and it works in every browser except IE 6. There the bottom line gets cut away. I narrowed it down to the element sb-inner inside the sb-gen. It simply isn´t displayed. I see the borders of the two main divs and in between there is a 1px white space, the sb-inner, that isn´t displayed. Do you have a solution for that? Thanks, Bodo Hi Steffen,
your library is great, but I have an issue concerning IE 6. I want to have a 1px wide border around a div containing several other divs. I can´t use the div itself, because the background-color has to be white (and not in the color of the border). So I wrap around the div another div with 1px padding. This is the code:

[..]

#border{
width: 200px;
background-color: #000066;
xorder: 1px solid red;
padding: 3px;
}
#inner{
background-color: #fff;
}

window.onload = initIt;
function initIt(){
var roundBorder = RUZEE.ShadedBorder.create({corner:3});roundBorder.render(’border’);
}

test

Quite simple and it works in every browser except IE 6. There the bottom line gets cut away. I narrowed it down to the element sb-inner inside the sb-gen. It simply isn´t displayed. I see the borders of the two main divs and in between there is a 1px white space, the sb-inner, that isn´t displayed. Do you have a solution for that?

Thanks,
Bodo

]]> By: Francesco http://www.ruzee.com/blog/2007/10/shadedborder-with-gradients/#comment-68205 Francesco Mon, 04 Feb 2008 11:00:51 +0000 http://www.ruzee.com/blog/2007/10/shadedborder-with-gradients/#comment-68205 Hi Steffen, can we work together in order to solve the "full-height" gradient background issue? Thank you very much! Francesco Hi Steffen,
can we work together in order to solve the “full-height” gradient background issue?

Thank you very much!
Francesco

]]> By: Francesco http://www.ruzee.com/blog/2007/10/shadedborder-with-gradients/#comment-67011 Francesco Thu, 24 Jan 2008 17:27:35 +0000 http://www.ruzee.com/blog/2007/10/shadedborder-with-gradients/#comment-67011 Hi, thanks a lot for your code, the script is great! The only is we cannot use gradient for the complete height :-( I've done a little fix to your script but I've some problems to solve. This is my change: ROW 120 // draw inner // FIXME: 100 (the height fo the div) var dd = div + ' z-index:2;' + (t ? 'background-position:0 -' + (r-yc-1) + 'px;' : 'background-position:0 -' + (100 -2*h + r) + 'px;'); ROW 200 // FIXME: 100 (the height fo the div) ds.push(dd + (t ? 'background-position-y:0; top:' : 'background-position:0 -' + (100 -2*h + r) + 'px; bottom:') + y + 'px;' + ' height:' + (r+cy+s) + 'px;" class="' + iclass + '">'); el.innerHTML = ds.join(''); } ======================== Using this path I can rounded all the background image, including the bottom. There are some issues: 1) how can I determinate the height of the rounded div? (I've used a fixed height of 100px) 2) the antialiasing of bottom corners not works. 3) the shadow not work. Please let me know. Thank you!!! Hi,
thanks a lot for your code, the script is great!
The only is we cannot use gradient for the complete height :-(
I’ve done a little fix to your script but I’ve some problems to solve.

This is my change:

ROW 120
// draw inner
// FIXME: 100 (the height fo the div)
var dd = div + ‘ z-index:2;’ + (t ?
‘background-position:0 -’ + (r-yc-1) + ‘px;’ :
‘background-position:0 -’ + (100 -2*h + r) + ‘px;’);

ROW 200

// FIXME: 100 (the height fo the div)
ds.push(dd + (t ? ‘background-position-y:0; top:’ :
‘background-position:0 -’ + (100 -2*h + r) + ‘px; bottom:’) + y + ‘px;’ +
‘ height:’ + (r+cy+s) + ‘px;” class=”‘ + iclass + ‘”>’);
el.innerHTML = ds.join(”);
}

========================

Using this path I can rounded all the background image, including the bottom.

There are some issues:

1) how can I determinate the height of the rounded div? (I’ve used a fixed height of 100px)

2) the antialiasing of bottom corners not works.

3) the shadow not work.

Please let me know.

Thank you!!!

]]> By: Mohiuddin Khan Inamdar http://www.ruzee.com/blog/2007/10/shadedborder-with-gradients/#comment-62873 Mohiuddin Khan Inamdar Tue, 11 Dec 2007 09:16:25 +0000 http://www.ruzee.com/blog/2007/10/shadedborder-with-gradients/#comment-62873 Hi, I think this I should try this out. Nice way to say its free to use... with MIT license style.. I plan to try it on one of my existing intranet project.. Thanks for sharing this .... Signed Mohnkhan http://www.mohitech.com Hi,
I think this I should try this out.
Nice way to say its free to use… with MIT license style..
I plan to try it on one of my existing intranet project..

Thanks for sharing this ….
Signed
Mohnkhan
http://www.mohitech.com

]]> By: Adam http://www.ruzee.com/blog/2007/10/shadedborder-with-gradients/#comment-60328 Adam Mon, 05 Nov 2007 23:20:43 +0000 http://www.ruzee.com/blog/2007/10/shadedborder-with-gradients/#comment-60328 Wow, I just updated to this version and the gradient backgrounds look great, thanks!!!!! Wow, I just updated to this version and the gradient backgrounds look great, thanks!!!!!

]]> By: MArcio http://www.ruzee.com/blog/2007/10/shadedborder-with-gradients/#comment-59443 MArcio Wed, 24 Oct 2007 16:49:55 +0000 http://www.ruzee.com/blog/2007/10/shadedborder-with-gradients/#comment-59443 Hy my name is Marcio, i'm from Brasil I'm using ShadedBorder script in this project www.cerebrum.com.br/_somar_cabos/ But link CEREBRUM in Internet Explorer show Up How to resolve this 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

]]> By: Piotr http://www.ruzee.com/blog/2007/10/shadedborder-with-gradients/#comment-59217 Piotr Sun, 21 Oct 2007 09:55:29 +0000 http://www.ruzee.com/blog/2007/10/shadedborder-with-gradients/#comment-59217 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 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

]]>