Account Options

  1. Sign in
The old Google Groups will be going away soon, but your browser is incompatible with the new version.
Google Groups Home
« Groups Home
Reading Radius from CSS, and auto bgColor
There are currently too many topics in this group that display first. To make this topic appear first, remove this option from another topic.
There was an error processing your request. Please try again.
flag
  1 message - Collapse all  -  Translate all to Translated (View all originals)
The group you are posting to is a Usenet group. Messages posted to this group will make your email address visible to anyone on the Internet.
Your reply message has not been sent.
Your post was successful
 
From:
To:
Cc:
Followup To:
Add Cc | Add Followup-to | Edit Subject
Subject:
Validation:
For verification purposes please type the characters you see in the picture below or the numbers you hear by clicking the accessibility icon. Listen and type the numbers you hear
 
Kevin Dalman  
View profile  
 More options Apr 27 2009, 12:22 am
From: Kevin Dalman <kevin.dal...@gmail.com>
Date: Sun, 26 Apr 2009 21:22:07 -0700 (PDT)
Local: Mon, Apr 27 2009 12:22 am
Subject: Reading Radius from CSS, and auto bgColor
I am using your plug-in in a project that uses CSS 'themes', so I did
not want to hard-code any radius settings or colors in the cornerz
Javascript. code  I also use 'outset' borders in some themes, so
wanted to handle these corners if possible.

These changes were too extensive to add to the cornerz plug-in, so I
created a function to do the calculations and then pass the data to
cornerz. Here is a quick summary of what this function handles that
cornerz currently does not:

 * finds the background color automatically
 * finds the border-width without a topBorder
 * finds the border-colors without a topBorder
 * handles inset/outset borders (barely adequate)
 * reads moz-border-radius rules from CSS

I'm providing this in case you find some parts of it useful for a
future update to cornerz, like the loop to find the bgColor or the
readRadius subroutine.

/*
 *  roundCorners
 *
 *  Add radiused-corners for browsers that don't support it natively -
primarily IE
 */
function roundCorners (defaultRadius) {
  // TODO: See if there are other browsers we should handle here, like
Opera
  if (!$.browser.msie || !$.fn.cornerz) return;

  var showDebug = false;

  $('.cornerz').each(function() {

    if (showDebug && this.tagName=='TD') {
      alert( 'this.backgroundColor = '+ $(this).css
('backgroundColor') );
      var selector = 'TD';
      if (this.id) selector += '#'+ this.ID;
      else selector += '.'+ this.className.split(' ')[0];
      alert( '$('+ selector +').backgroundColor = '+ $(selector).css
('backgroundColor') );
    }

    var
      $Elem    = $(this)
    ,  h_radius  = readRadius(this, defaultRadius) // returns hash
like: { tl: '8px', tr: '8px' }
    ;
    if (!h_radius) return true; // no radius specified, SKIP/CONTINUE

    var
      options    = { background: '#FFF' } // default
    ,  h_border  = { tl: 'Top', tr: 'Top', bl: 'Bottom', br:
'Bottom' }
    ,  $Parent    = $Elem // init loop var
    ,  bgCol    = ""  // init loop var
    ,  borderStyle      // loop var
    ;
    // find the background color - ascend all the way to BODY if
necessary
    while (!bgCol || bgCol=='transparent') {
      $Parent = $Parent.parents(':first');
      bgCol = $Parent.css('backgroundColor');
      if (!$Parent[0] || $Parent[0].tagName=='BODY') break;
    }
    if (bgCol && bgCol != 'transparent') options.background = bgCol;

    for (corner in h_radius) {
      // only doing 1-corner at a time!
      options.corners = corner;
      // get/set radius for this corner
      options.radius = parseInt(h_radius[corner]);
      if (!options.radius) continue; // SKIP corner - 0-radius

      // read the width for the specific border/edge we are doing
      options.borderWidth  = parseInt($Elem.css('border'+ h_border
[corner] +'Width'));

      // read the style for this border/edge
      borderStyle = $Elem.css('border'+ h_border[corner] +'Style');
      // outset & inset borders require special handling
      if (borderStyle=='outset' || borderStyle=='inset') {
        // TODO: these colors suit IE - but maybe not other browsers?
        // use a darker color for th bottom-right corner
        if (borderStyle=='outset')
          options.borderColor = (corner == 'br') ? '#5F5F5F' :
'#D6D6D6';
        else // inset
          options.borderColor = (corner == 'br') ? '#D6D6D6' :
'#5F5F5F';
      }
      else // NOT outset or inset - use normal borderColor
        options.borderColor  = $Elem.css('border'+ h_border[corner]
+'Color');

      // apply the corner-radius
      $Elem.cornerz( options );

      /* DEBUG
      if (showDebug) alert(
        $Elem[0].tagName + ($Elem[0].id ? '#'+$Elem[0].id : '.class="'+
$Elem[0].className+'"') +
        '\n\ncorners = '+  options.corners +
        '\nradius = '+    options.radius +
        '\nbackground = '+  options.background
      );
      */
    }
  });

  // TODO - handle generic UI corner classes

  function readRadius (elem, defaultRadius) {
    var
      $E    = $(elem)
    ,  radius  = {}
    ,  moz    = '-moz-border-radius'
    ,  r
    ;

    if (r = $E.css(moz))        radius.tl = radius.tr = radius.bl =
radius.br = r;
    if (r = $E.css(moz+'-topleft'))    radius.tl = r;
    if (r = $E.css(moz+'-topright'))  radius.tr = r;
    if (r = $E.css(moz+'-bottomleft'))  radius.bl = r;
    if (r = $E.css(moz+'-bottomright'))  radius.br = r;

    if (!radius.tl && !radius.tr && !radius.bl && !radius.br) {
      // DEBUG - notify if this element has no radius set in CSS
      if (showDebug) alert(
        'Element has no radius (-moz-border-radius[-xx]) specified:\n
\n'+
        elem.tagName + (elem.id ? '#'+elem.id : '.'+elem.className)
      );
      // use the defaultRadius if one was passed
      if (defaultRadius)
        radius.tl = radius.tr = radius.bl = radius.br = defaultRadius;
      else
        return null;
    }

    return radius;
  }


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
End of messages
« Back to Discussions « Newer topic     Older topic »