subject:"\[Prototype\-core\] Re\: Border Radius"

[Prototype-core] Re: Border Radius

2010-08-13 Thread joe t.

This is nice as a basic-level script to apply border-radius on
browsers that support it. That said, it's missing a couple things:
Webkit (and/or Opera?) supports two radius arguments for each corner,
which allows the corner to be morphed into a more oval shape. To my
knowledge, Firefox doesn't support that yet.
http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-radius

Since the function doesn't provide a cross-browser solution for IE,
and doesn't fully support what each of the other browsers can do, my
guess is this will have a hard time getting into the Core. But that
doesn't detract from its usefulness as a quick utility function.

Maybe the devs have some ideas for broadening the capabilities for it,
though.
-joe t.


On Aug 12, 8:51 pm, Rafael Raposo orapo...@gmail.com wrote:
 Hello,

 I don't know what you think about border radius right now, but as it is not
 totally cross plataform yet, I managed to create a function to set it almost
 cross plataform, BUT, not in IE htc file hell stuff.

 (function() {
     var borderRadius = {
         _all:        $w(borderRadius MozBorderRadius webkitBorderRadius),
         topLeft:     $w(borderTopLeftRadius MozBorderRadiusTopleft
 webkitBorderTopLeftRadius),
         bottomLeft:  $w(borderBottomLeftRadius MozBorderRadiusBottomleft
 webkitBorderBottomLeftRadius),
         topRight:    $w(borderTopRightRadius MozBorderRadiusTopright
 webkitBorderTopRightRadius),
         bottomRight: $w(borderBottomRightRadius MozBorderRadiusBottomright
 webkitBorderBottomRightRadius)
     };

     function setBorderRadius(element, borders) {
         var realBorders = {};
             if(Object.isString(borders)) {
                 borders = {_all:borders};
             }
             for(var border in borders) {
                 borderRadius[border].each(function(borderTranslate){
                     realBorders[borderTranslate] = borders[border];
                 });
             }
             element.setStyle(realBorders);

             return element;
     }

     Element.addMethods({
         setBorderRadius: setBorderRadius
     });

 })();

 It accepts arguments like:

 $(id_element).setBorderRadius(30px);
 $(id_element).setBorderRadius({topLeft:30px, bottomRight:30px});

 In fact I may not be aware of how to deal with rounded borders for the
 present state, but this function just helped me a little so it may help some
 of you.

 Cheers
 Rafael

-- 
You received this message because you are subscribed to the Google Groups 
Prototype: Core group.
To post to this group, send email to prototype-core@googlegroups.com
To unsubscribe from this group, send email to 
prototype-core-unsubscr...@googlegroups.com
For more options, visit this group at 
http://groups.google.com/group/prototype-core?hl=en

Re: [Prototype-core] Re: Border Radius

2010-08-13 Thread Rafael Raposo

Yes, unfortunately I know it can't go into the core as it does not support
IE.

But, the two value radius is accepted by this function of mine. I just
didn't know it existed =).

If you call $(id_elemente).setBorderRadius(20px 40px) on Chrome, it will
display its oval shape.

Thanks for the info though. At least I know it also works for borders like
that.

It would be great if this could be applied to IE, but don't think it will
ever happen until they accept the border-radius css attribute. At least, for
what I'm doing I can forget about IE users, as the rounded borders are just
a fancy-non-functional looking thing, as almost every rounded border is, I
think, hehe. That's why I posted it here.



On Fri, Aug 13, 2010 at 09:55, joe t. thooke...@gmail.com wrote:

 This is nice as a basic-level script to apply border-radius on
 browsers that support it. That said, it's missing a couple things:
 Webkit (and/or Opera?) supports two radius arguments for each corner,
 which allows the corner to be morphed into a more oval shape. To my
 knowledge, Firefox doesn't support that yet.
 http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-radius

 Since the function doesn't provide a cross-browser solution for IE,
 and doesn't fully support what each of the other browsers can do, my
 guess is this will have a hard time getting into the Core. But that
 doesn't detract from its usefulness as a quick utility function.

 Maybe the devs have some ideas for broadening the capabilities for it,
 though.
 -joe t.


 On Aug 12, 8:51 pm, Rafael Raposo orapo...@gmail.com wrote:
  Hello,
 
  I don't know what you think about border radius right now, but as it is
 not
  totally cross plataform yet, I managed to create a function to set it
 almost
  cross plataform, BUT, not in IE htc file hell stuff.
 
  (function() {
  var borderRadius = {
  _all:$w(borderRadius MozBorderRadius
 webkitBorderRadius),
  topLeft: $w(borderTopLeftRadius MozBorderRadiusTopleft
  webkitBorderTopLeftRadius),
  bottomLeft:  $w(borderBottomLeftRadius MozBorderRadiusBottomleft
  webkitBorderBottomLeftRadius),
  topRight:$w(borderTopRightRadius MozBorderRadiusTopright
  webkitBorderTopRightRadius),
  bottomRight: $w(borderBottomRightRadius
 MozBorderRadiusBottomright
  webkitBorderBottomRightRadius)
  };
 
  function setBorderRadius(element, borders) {
  var realBorders = {};
  if(Object.isString(borders)) {
  borders = {_all:borders};
  }
  for(var border in borders) {
  borderRadius[border].each(function(borderTranslate){
  realBorders[borderTranslate] = borders[border];
  });
  }
  element.setStyle(realBorders);
 
  return element;
  }
 
  Element.addMethods({
  setBorderRadius: setBorderRadius
  });
 
  })();
 
  It accepts arguments like:
 
  $(id_element).setBorderRadius(30px);
  $(id_element).setBorderRadius({topLeft:30px, bottomRight:30px});
 
  In fact I may not be aware of how to deal with rounded borders for the
  present state, but this function just helped me a little so it may help
 some
  of you.
 
  Cheers
  Rafael

 --
 You received this message because you are subscribed to the Google Groups
 Prototype: Core group.
 To post to this group, send email to prototype-core@googlegroups.com
 To unsubscribe from this group, send email to
 prototype-core-unsubscr...@googlegroups.com
 For more options, visit this group at
 http://groups.google.com/group/prototype-core?hl=en


-- 
You received this message because you are subscribed to the Google Groups 
Prototype: Core group.
To post to this group, send email to prototype-core@googlegroups.com
To unsubscribe from this group, send email to 
prototype-core-unsubscr...@googlegroups.com
For more options, visit this group at 
http://groups.google.com/group/prototype-core?hl=en

[Prototype-core] Re: Border Radius

2010-08-13 Thread joe t.

http://ie.microsoft.com/testdrive/HTML5/01BorderRadius/Default.html
Looks like IE9 will at least partially support border-radius. But by
that demo (designed for the IE9 preview), it looks like it'll only
support the single radius dimension per corner. i guess that's
something to look forward to. /shrug
-joe t.


On Aug 13, 1:09 pm, Rafael Raposo orapo...@gmail.com wrote:
 Yes, unfortunately I know it can't go into the core as it does not support
 IE.

 But, the two value radius is accepted by this function of mine. I just
 didn't know it existed =).

 If you call $(id_elemente).setBorderRadius(20px 40px) on Chrome, it will
 display its oval shape.

 Thanks for the info though. At least I know it also works for borders like
 that.

 It would be great if this could be applied to IE, but don't think it will
 ever happen until they accept the border-radius css attribute. At least, for
 what I'm doing I can forget about IE users, as the rounded borders are just
 a fancy-non-functional looking thing, as almost every rounded border is, I
 think, hehe. That's why I posted it here.







 On Fri, Aug 13, 2010 at 09:55, joe t. thooke...@gmail.com wrote:
  This is nice as a basic-level script to apply border-radius on
  browsers that support it. That said, it's missing a couple things:
  Webkit (and/or Opera?) supports two radius arguments for each corner,
  which allows the corner to be morphed into a more oval shape. To my
  knowledge, Firefox doesn't support that yet.
 http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-radius

  Since the function doesn't provide a cross-browser solution for IE,
  and doesn't fully support what each of the other browsers can do, my
  guess is this will have a hard time getting into the Core. But that
  doesn't detract from its usefulness as a quick utility function.

  Maybe the devs have some ideas for broadening the capabilities for it,
  though.
  -joe t.

  On Aug 12, 8:51 pm, Rafael Raposo orapo...@gmail.com wrote:
   Hello,

   I don't know what you think about border radius right now, but as it is
  not
   totally cross plataform yet, I managed to create a function to set it
  almost
   cross plataform, BUT, not in IE htc file hell stuff.

   (function() {
       var borderRadius = {
           _all:        $w(borderRadius MozBorderRadius
  webkitBorderRadius),
           topLeft:     $w(borderTopLeftRadius MozBorderRadiusTopleft
   webkitBorderTopLeftRadius),
           bottomLeft:  $w(borderBottomLeftRadius MozBorderRadiusBottomleft
   webkitBorderBottomLeftRadius),
           topRight:    $w(borderTopRightRadius MozBorderRadiusTopright
   webkitBorderTopRightRadius),
           bottomRight: $w(borderBottomRightRadius
  MozBorderRadiusBottomright
   webkitBorderBottomRightRadius)
       };

       function setBorderRadius(element, borders) {
           var realBorders = {};
               if(Object.isString(borders)) {
                   borders = {_all:borders};
               }
               for(var border in borders) {
                   borderRadius[border].each(function(borderTranslate){
                       realBorders[borderTranslate] = borders[border];
                   });
               }
               element.setStyle(realBorders);

               return element;
       }

       Element.addMethods({
           setBorderRadius: setBorderRadius
       });

   })();

   It accepts arguments like:

   $(id_element).setBorderRadius(30px);
   $(id_element).setBorderRadius({topLeft:30px, bottomRight:30px});

   In fact I may not be aware of how to deal with rounded borders for the
   present state, but this function just helped me a little so it may help
  some
   of you.

   Cheers
   Rafael

  --
  You received this message because you are subscribed to the Google Groups
  Prototype: Core group.
  To post to this group, send email to prototype-core@googlegroups.com
  To unsubscribe from this group, send email to
  prototype-core-unsubscr...@googlegroups.com
  For more options, visit this group at
 http://groups.google.com/group/prototype-core?hl=en

-- 
You received this message because you are subscribed to the Google Groups 
Prototype: Core group.
To post to this group, send email to prototype-core@googlegroups.com
To unsubscribe from this group, send email to 
prototype-core-unsubscr...@googlegroups.com
For more options, visit this group at 
http://groups.google.com/group/prototype-core?hl=en

[Prototype-core] Re: Border Radius

Re: [Prototype-core] Re: Border Radius

[Prototype-core] Re: Border Radius

3 matches

Site Navigation

Mail list logo

Footer information