Dojo Forum

Learn how to use the dojo.lfx.rounded function to create rounded corners. (Warning: the current Dojo build seems to be broken)

Hi all,

I posted this to the forum already but did not get any replies...

I am having problems with dojo.lfx.rounded, even the 0.4.2 test pages do not
work for me at all (Firefox). Of the 4 edges, only br is rendered "nicely
and round", the rest is somewhat distorted.Any hints to what there is wrong?
Maybe someone could take a look at

dojo_trunk/tests/lfx/test_rounded.html

and confirm that there is a problem. Is rounded still experimental... known
issues that I am not aware of?

Besides this I would like to know if rounded is cross-browser compatible.

Thank you!
Sven

--
Sven Haiges
sven.haiges at googlemail.com

Skype: hansamann
Personal Homepage, Wiki & Blog: http://www.svenhaiges.de

Subscribe to the Grails Podcast:
http://hansamann.podspot.de/rss
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://dojotoolkit.org/pipermail/dojo-interest/attachments/20070510/7e5d...

Hi all,

Is it possible to have rounded corners for a FloatingPane ??
I have tried to apply "dojo.lfx.rounded" to a FloatingPane, but didn't
get it working. Any idea what extra needs to be done ?? Thanks in
advance.

Regards,

Ramdas Sawant
--------------------------------------------------------

NOTICE: If received in error, please destroy and notify sender. Sender does not intend to waive confidentiality or privilege. Use of this email is prohibited when received in error.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://dojotoolkit.org/pipermail/dojo-interest/attachments/20070413/f18d...

Hello,

I have a page with three div regions, which for now I'm just applying
lfx.rounded to. What is the simplest way to apply this property to all
three, without having to duplicate the calls to dojo.lfx.rounded?

Here's what I have now, that does work, even though it's ugly:

dojo.addOnLoad(function(){

dojo.lfx.rounded({

tl:{
radius:1 },

bl:{
radius:20 },

tr:{
radius:20 },

br:{
radius:1 }

},

["roundMe1"]

);

dojo.lfx.rounded({

tl:{
radius:1 },

bl:{
radius:20 },

tr:{
radius:20 },

br:{
radius:1 }

},

["roundMe2"]

);

dojo.lfx.rounded({

tl:{
radius:1 },

bl:{
radius:20 },

tr:{
radius:20 },

br:{
radius:1 }

},

["roundMe3"]

);

});

Small bit of CSS:

.roundMe{

margin:20px;

padding:15px;

border:1px solid #ccc;

width:500px;

background-color:#fff;

}

The Divs are all quite similar:

content here

content here

content here

My first try was to use the same id on all three divs. I still don't
understand why that doesn't work.

Could somebody please shed some light on the best way to approach this?

Thanks in advance,

--Jon

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://dojotoolkit.org/pipermail/dojo-interest/attachments/20070306/a8ec...

Hi,

I'm having little problem with magnificent dojo.lfx.rounded. In IE, i
get, invalid property value when dojo.lfx.rounded._fns.draw() is called
with third argument as "#NaNfbNan". I think somewhere in IE, the color
cannot be gathered and passed as NaN which is invalid.

Are there any fixes for this bug? I'm using daily svn.

thanks.
evrim.

Here is the CSS:
.header {
color:#FFFFFF;
font-weight:bold;
background-color:#031C3E;
width: 100%;
height: 60px;
border:1px solid black;
}

Some HTML:

Backtrack:
draw:function(x, y, color, opac, height, corner, image, radius, top, format){
var px=document.createElement("div");
px.style.height=height+"px"
px.style.width="1px";
px.style.position="absolute";
px.style.fontSize="1px";
px.style.overflow="hidden";
if(image==-1 && format.bgImage!=""){
px.style.backgroundImage=format.bgImage;
px.style.backgroundPosition="-"+(format.width-(radius-x)+format.borderWidth) +"px-"+((format.height+top+y)-format.borderWidth)+"px";
} else {
px.style.backgroundColor=color; <--- ***DEBUGGER enters here***
}
if(opac!=100){ dojo.html.setOpacity(px, (opac/100)); }
px.style.top=y+"px";
px.style.left=x+"px";
corner.appendChild(px);
},

Dear dojos,

I like the nice rounded boxes and used this for my infos and notifications:
dojo.require("dojo.lfx.rounded");
dojo.addOnLoad(function(){
if (dojo.byId("infoBox") != null) {
dojo.lfx.rounded({
tl:{ radius:15 },
tr:{ radius:15 },
bl:{ radius:15 },
br:{ radius:15 }
}, ["infoBox"]);
}
if (dojo.byId("errorBox") != null) {
dojo.lfx.rounded({
tl:{ radius:15 },
tr:{ radius:15 },
br:{ radius:15 }
}, ["errorBox"]);
}
if (dojo.byId("warnBox") != null) {
dojo.lfx.rounded({
tl:{ radius:15 },
tr:{ radius:15 },
br:{ radius:15 }
}, ["warnBox"]);
}
});

and this is the stylesheet:
#infoBox {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: black;
margin: 20px;
padding: 15px;
border: 6px solid #00ff00;
width: 480px;
background-color: #b0ffb0;
}

#errorBox {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: black;
margin:20px;
padding:15px;
border:6px solid #ff0000;
width:480px;
background-color:#ffb0b0;
}

#warnBox {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: black;
margin: 20px;
padding: 15px;
border: 6px solid #ffff00;
width: 480px;
background-color: #ffffb0;
}

and here is one of the calls:

Do not upload content that you do not own!!!

It looks GREAT!! on FF2.0, but on IE6 and IE7 the box is broken.
Click around on http://www.maiTube.com/ for examples.

Anyone know what to do???

THANKS and merry XXXmas.

Michael

--

Michael Janich, Hong Kong
http://home.netvigator.com/~mjanich/

The element connected with 'dojo.event.connect' is inside 'panel' (which is
the rounded element). When I do this, the event appears to be disconnected
after the round function. Why is that happening? To make it work, I have to
round first and then connect events, but some times I just can?t do that.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://dojotoolkit.org/pipermail/dojo-interest/attachments/20061212/138e...

even more, those rounded boxes shown here:
http://archive.dojotoolkit.org/nightly/demos/widget/rounded.html

look much nicer !

i know that dojoType="Rounded" is going to be removed later on (that's why I
was told in a previous post), but...

On 10/20/06, Valerio Schiavoni wrote:

--
http://valerioschiavoni.blogspot.com
http://jroller.com/page/vschiavoni
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://dojotoolkit.org/pipermail/dojo-interest/attachments/20061020/d162...

I am trying to do rounded corners on elements that are in a LayoutContainer
(like the demo LayoutContainer) Are there any limitations to the rounded
corners (dojo.lfx) code? It seems to add rounded corners to the top of most
of the elements, but the borders don't get moved properly (so they don't
line up with the rounded corners) and the bottoms of the rounded corners
don't appear. This is how I am applying them:

var settings = new Object();
settings.autoPad = false;
dojo.lfx.rounded( settings, [ "middleButtonArea", "footer",
dojo.widget.byId( "centerArea" ).domNode ] );

middleButtonArea is a standard div put in the top of the layoutContainer,
footer is a standard div at the bottom, and centerArea is the dojo
ContentPane put in with layoutAlign="client"

Thanks for any help or pointers,

Irv
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://dojotoolkit.org/pipermail/dojo-interest/attachments/20061027/e119...

hello,
i'm using the rounded.js function in dojo.lfx.rounded with the following
values:

dojo.lfx.rounded({
tl:{ radius:15 },
tr:{ radius:15 },
bl:{ radius:15 },
br:{ radius:15 },
},
["roundit"]
);
};

and the css for the div id="roundit" looks like:
#roundit {
border:1px solid #ccc;
position:absolute;
}

i get a strange effect where borders and corners have different size. i know
where it came from (looking at sources, for every corner there something
like:
corner.style.marginLeft=options.radii[cc]-(format.borderWidth*2)+"px";

but what if i want to have both corners and borders of width 1px ?

thanks a lot,
valerio
--
http://valerioschiavoni.blogspot.com
http://jroller.com/page/vschiavoni
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://dojotoolkit.org/pipermail/dojo-interest/attachments/20061020/c62a...