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 -~----------~----~----~----~------~----~------~--~---
