No, I won't be using canvas or svg techniques.
Anything that uses one of those techniques should be handled in another
plugin. I'm working with compatibility support for .css({borderRadius:
10}); because I am working with .css I have a single important
underlying rule to any modification. Any compatibility trick placed
inside .css MUST NOT modify the underlying dom or destroy unrelated css
properties. Destroying non-standard filter and behavior properties is
ok, but destroying the background image of an element is not acceptable
for adding compatibility within .css;
~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://nadir-seen-fire.com]
-Nadir-Point & Wiki-Tools (http://nadir-point.com) (http://wiki-tools.com)
-MonkeyScript (http://monkeyscript.org)
-Animepedia (http://anime.wikia.com)
-Narutopedia (http://naruto.wikia.com)
-Soul Eater Wiki (http://souleater.wikia.com)
weepy wrote:
> You could probably use canvas with opera -- that's what I use here :
> http://labs.parkerfox.co.uk/cornerz/ which works in opera
>
>
>
> On 11 Mar, 16:28, Daniel Friesen <[email protected]> wrote:
>
>> Hmm, nice.
>>
>> Once John is done his $.attr and $.curCSS refactor I intend to write
>> extensibility of .css() into jQuery, and setup an extension which will
>> add browser support for obscure CSS properties, border-radius being the
>> primary focus (^_^ Maybe I'll even do transform and make it
>> animate-able; mmmmm... animated node rotation).
>> Perhaps when I get into that we can work together and support IE as well
>> as Gekko and WebKit.
>>
>> Someone did note svgs could be used for Opera, but I don't think that is
>> flexible enough to be considered something worth bothering with
>> borderRadius. Especially since it means overriding the background image.
>>
>> ~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://nadir-seen-fire.com]
>> -Nadir-Point & Wiki-Tools (http://nadir-point.com) (http://wiki-tools.com)
>> -MonkeyScript (http://monkeyscript.org)
>> -Animepedia (http://anime.wikia.com)
>> -Narutopedia (http://naruto.wikia.com)
>> -Soul Eater Wiki (http://souleater.wikia.com)
>>
>> weepy wrote:
>>
>>> Helping IE support Border Radius :
>>>
>>> http://gist.github.com/77516
>>>
>>> On 11 Mar, 14:27, Sam Dutton <[email protected]> wrote:
>>>
>>>> yes please
>>>>
>>>> On Tue, Mar 10, 2009 at 9:27 PM, weepy <[email protected]> wrote:
>>>>
>>>>> I have a simple jquery plugin that provides an implementation for
>>>>> border radius for ie and just uses native rendering for firefox/
>>>>> webkit.
>>>>>
>>>>> no luck with opera, but personally I don't care that much about that
>>>>> since it's so low penetration.
>>>>>
>>>>> Let me know if your interested in it.
>>>>>
>>>>> On 10 Mar, 17:42, WildStrawberry <[email protected]> wrote:
>>>>>
>>>>>> Have you tried DD_roundies fromhttp://
>>>>>>
>>>>> www.dillerdesign.com/experiment/DD_roundies/?
>>>>> > It helps in IE, but Opera is still the problem.
>>>>>
>>>>>> Grzegorz G. (www.wild-strawberry.eu)
>>>>>>
>>>>>> On 26 Lut, 00:05, Daniel Friesen <[email protected]> wrote:
>>>>>>
>>>>>>> It might be a personal taste, but I prefer (for future compatibility):
>>>>>>>
>>>>>>> border-radius: 20px;
>>>>>>> -moz-border-radius: 20px;
>>>>>>> -webkit-border-radius: 20px;
>>>>>>>
>>>>>>> border-radius is actually a w3 draft already.
>>>>>>>
>>>>>>> But yes, redefining what you said a little, only Gekko and WebKit
>>>>>>> support borderRadius, Presto and Trident don't.
>>>>>>> SoIEand Opera won't support it. But Firefox, Safari, Chrome, and the
>>>>>>> long list of Gekko and WebKit based browsers as well as things like AIR
>>>>>>> will.
>>>>>>>
>>>>>>> When it comes to roundedcornersyou have options including
>>>>>>>
>>>>> nativecorners, images, or a collection of divs.
>>>>>
>>>>>>> I suggest comparing your options and deciding on what option fits your
>>>>>>> case best.
>>>>>>>
>>>>>>> Native radius:
>>>>>>> Pro: Most flexible
>>>>>>> Pro: Cleaner to implement
>>>>>>> Pro: Most easy to use
>>>>>>> Con: Doesn't work inIEor Opera (however it does degrade since all you
>>>>>>> lose are roundedcorners)
>>>>>>>
>>>>>>> Images:
>>>>>>> Pro: Works in all browsers (though you may have to deal with
>>>>>>> transparency issues in IE6 depending on your image)
>>>>>>> Pro: You still get the style of curve you want
>>>>>>> Pro: You can do something fancy beyond a normal curve (though, that's
>>>>>>> getting off track from the purpose here)
>>>>>>> Con: Least flexibility in dynamic stuff (you're using static images so
>>>>>>> you lose the ability to change colors and anything else right from css)
>>>>>>>
>>>>>>> Injected elements:
>>>>>>> Pro: Works in all browsers
>>>>>>> Pro: A little more flexible than images
>>>>>>> Con: Clutters your DOM with unnecessary nodes (this can sometimes
>>>>>>> conflict with your style rules; potential for things getting slower if
>>>>>>> you use it to often?)
>>>>>>> Con: No anti-aliasing or any type of effect, so your curves can look
>>>>>>> fairly ugly sometimes.
>>>>>>>
>>>>>>> Personally most of the time I usecornersin a situation where it's just
>>>>>>> an extra fancy part of the style, but not essential. So I use native
>>>>>>> radius and let the people on other browsers suffer with squarecorners.
>>>>>>>
>>>>>>> ~Daniel Friesen (Dantman, Nadir-Seen-Fire)
>>>>>>>
>>>>>>> Sam Dutton wrote:
>>>>>>>
>>>>>>>> Sounds like you're not looking for a CSS solution, but the example
>>>>>>>> below works in Safari and Firefox (at least) though not, of course,
>>>>>>>>
>>>>> inIE.
>>>>>
>>>>>>>> Sam
>>>>>>>>
>>>>>>>> ................................................
>>>>>>>>
>>>>>>>> <html>
>>>>>>>> <head>
>>>>>>>> <title>Roundedcorners</title>
>>>>>>>> <style type="text/css">
>>>>>>>> div.roundedCorners {
>>>>>>>> background: gray;
>>>>>>>> border: 20px solid #FFCC00;
>>>>>>>> border-radius: 100px;
>>>>>>>> height: 100px;
>>>>>>>> margin: 100px auto 0 auto;
>>>>>>>> -moz-border-radius: 100px;
>>>>>>>> -webkit-border-radius: 20px;
>>>>>>>> width: 200px;
>>>>>>>> }
>>>>>>>> </style>
>>>>>>>> </head>
>>>>>>>> <body>
>>>>>>>> <div class="roundedCorners"></div>
>>>>>>>> </body>
>>>>>>>> </html>
>>>>>>>>
>>>>>>>> On Wed, Feb 25, 2009 at 6:57 PM, weepy <[email protected]> wrote:
>>>>>>>>
>>>>>>>>> Try this :
>>>>>>>>>
>>>>>>>>> http://labs.parkerfox.co.uk/cornerz/
>>>>>>>>>
>>>>>>>>> On 25 Feb, 04:57, vikram <[email protected]> wrote:
>>>>>>>>>
>>>>>>>>>> hi
>>>>>>>>>>
>>>>>>>>>> I am new to JQuery, i am trying to get a rounded corner for div, i
>>>>>>>>>>
>>>>> had
>>>>>
>>>>>>>>>> used the canvas rounded corner, but i find some issues with it.
>>>>>>>>>>
>>>>>>>>>> Is there any other js file which can give a rounded corner and also
>>>>>>>>>> which take the stylesi.e.background, border color, radius, etc
>>>>>>>>>>
>>>>>>>>>> for example:
>>>>>>>>>>
>>>>>>>>>> $("#testDiv").corners( radius: 5, border-color: red,
>>>>>>>>>>
>>>>> background-color:
>>>>>
>>>>>>>>>> blue, border size: 1 )
>>>>>>>>>>
>>>>>>>>>> Appreciate ur help in advance.
>>>>>>>>>>
>>>>>>>>>> Regards
>>>>>>>>>> Vikram.
>>>>>>>>>>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery Development" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-dev?hl=en
-~----------~----~----~----~------~----~------~--~---
