Same settings, two divs?
silurius - April 8, 2008 - 01:04
| Project: | curvyCorners |
| Version: | 5.x-1.x-dev |
| Component: | Code |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Jump to:
Description
Something that isn't well-explained on the curvycorners.net notes site is how to apply exactly the same curvycorners settings to two divs. For example in my case, I am using a zen-based theme and want to apply the same corners to sidebar-left and sidebar-right. There is a discussion thread going on that site about it, but no resolution yet.
While I'm at it, I will also mention that I found the curvycorners.net notes about how to use two different divs differently to be a little confusing for a beginner. I was going to go with this approach and simply have the settings be identical, but I still haven't puzzled it out and could use a little help.
Anyone have any thoughts or helpful suggestions?
#1
Trial and error have paid off:
window.onload = function()
{
settings = {
tl: { radius: 11 },
tr: { radius: 11 },
bl: { radius: 11 },
br: { radius: 11 },
antiAlias: false,
autoPad: false
}
settings2 = {
tl: { radius: 11 },
tr: { radius: 11 },
bl: { radius: 11 },
br: { radius: 11 },
antiAlias: false,
autoPad: false
}
var divObj = document.getElementById("sidebar-left");
var divObj2 = document.getElementById("sidebar-right")
var cornersObj = new curvyCorners(settings, divObj);
cornersObj.applyCornersToAll();
var cornersObj2 = new curvyCorners(settings2, divObj2);
cornersObj2.applyCornersToAll();
}
#2
(Drupal 5.7, PHP 5.2.4, MySQL 5.0.45)
After more testing, it appears that the above code sample may not be the best. My testing was very positive, but this feature breaks my sidebars when using IE7.
To summarize my setup, my sidebar-left contains a group of blockbars and within each blockbar there is a DHTML menu.
When I click to open a blockbar item on the left sidebar, the right sidebar jumps over to overlap with the left sidebar.
I have no idea if this is the fault of curvyCorners or not, but it seems logical. I have no workaround, except to remove curvyCorners entirely.
Anyone?
#3
For what it's worth, this issue appears to be more related to the Drupal theme I am using (Zen). I should probably have tested a pure-CSS solution before posting issues, but of course had not because I had hoped that JS would make the job easier. Anyway, I finally got around to it and repeated the issue in CSS. So I'm now skeptical that curvyCorners is actually at fault here.
#4
Your method of applying rounded corners is the wrong one to use for Zen then. I've implemented rounded corners in a Zen theme without any issues using faux columns: http://www.alistapart.com/articles/fauxcolumns/
With the js solution, why not apply the rounded corners to the blocks rather than to the sidebar itself? Or do you want rounded corners on the sidebars as well? If you want rounded corners on the sidebar, and don't mind having the sidebars be different heights than the content div (a problem the faux columns method fixes), then you should try applying the js to sidebar-left-inner and sidebar-right-inner.
#5
Whoops! The last comment I made was not supposed to be for this issue, but on this one: #248002: Rounded corners break sidebars (IE)
Sorry about that. :-)