1. We have moved from vBulletin to XenForo and you are viewing the site in the middle of the move. Though the functional aspect of everything is working fine, we are still working on other changes including the new design on Xenforo.
    Dismiss Notice

Assistance With JSP Code

Discussion in 'JavaScript and AJAX' started by hanleyhansen, Apr 20, 2010.

  1. hanleyhansen

    hanleyhansen New Member

    Joined:
    Jan 24, 2008
    Messages:
    336
    Likes Received:
    8
    Trophy Points:
    0
    Occupation:
    Drupal Developer/LAMP Developer
    Location:
    Clifton
    Home Page:
    I'm using a script from editsite.net to make rounded corners of my rectangles. The script works perfectly but I want to make a modification. The script is designed to get the background color of the site itself and put it as the background under the rounded corner. However, the sheet of my site is different than the background color so I want to change that in the script but can't seem to know how to properly go about it. Here's the entire script:

    Code:
    // Contributors 
    // Ilkka Huotari at http://www.editsite.net
    // Mathieu 'p01' HENRI at http://www.p01.org/
    // http://seky.nahory.net/2005/04/rounded-corners/
    // Steven Wittens at http://www.acko.net/anti-aliased-nifty-corners
    // Original Nifty Corners by Alessandro Fulciniti at http://pro.html.it/esempio/nifty/
    function NiftyCheck() {
      if(!document.getElementById || !document.createElement) {
        return false;
      }
      var b = navigator.userAgent.toLowerCase();
      if (b.indexOf("msie 5") > 0 && b.indexOf("opera") == -1) {
        return false;
      }
      return true;
    }
    
    function Rounded(className, sizex, sizey, sizex_b, sizey_b) {
        var bk;
        if (!NiftyCheck()) return;
        if (typeof(sizex_b) == 'undefined')
            sizex_b = sizex;
        if (typeof(sizey_b) == 'undefined')
            sizey_b = sizey;
        var v = getElements(className);
        var l = v.length;
        for (var i = 0; i < l; i++) {
            color = get_current_style(v[i],"background-color","transparent");
            bk = get_current_style(v[i].parentNode,"background-color","transparent");
            AddRounded(v[i], bk, color, sizex, sizey, true);
            AddRounded(v[i], bk, color, sizex_b, sizey_b, false);
        }
    }
    
    Math.sqr = function (x) {
      return x*x;
    };
    
    function Blend(a, b, alpha) {
    
      var ca = Array(
        parseInt('0x' + a.substring(1, 3)), 
        parseInt('0x' + a.substring(3, 5)), 
        parseInt('0x' + a.substring(5, 7))
      );
      var cb = Array(
        parseInt('0x' + b.substring(1, 3)), 
        parseInt('0x' + b.substring(3, 5)), 
        parseInt('0x' + b.substring(5, 7))
      );
      return '#' + ('0'+Math.round(ca[0] + (cb[0] - ca[0])*alpha).toString(16)).slice(-2).toString(16)
                 + ('0'+Math.round(ca[1] + (cb[1] - ca[1])*alpha).toString(16)).slice(-2).toString(16)
                 + ('0'+Math.round(ca[2] + (cb[2] - ca[2])*alpha).toString(16)).slice(-2).toString(16);
    
      return '#' + ('0'+Math.round(ca[0] + (cb[0] - ca[0])*alpha).toString(16)).slice(-2).toString(16)
                 + ('0'+Math.round(ca[1] + (cb[1] - ca[1])*alpha).toString(16)).slice(-2).toString(16)
                 + ('0'+Math.round(ca[2] + (cb[2] - ca[2])*alpha).toString(16)).slice(-2).toString(16);
    }
    
    function AddRounded(el, bk, color, sizex, sizey, top) {
      if (!sizex && !sizey)
        return;
      var i, j;
      var d = document.createElement("div");
      d.style.backgroundColor = bk;
      var lastarc = 0;
      for (i = 1; i <= sizey; i++) {
        var coverage, arc2, arc3;
        // Find intersection of arc with bottom of pixel row
        arc = Math.sqrt(1.0 - Math.sqr(1.0 - i / sizey)) * sizex;
        // Calculate how many pixels are bg, fg and blended.
        var n_bg = sizex - Math.ceil(arc);
        var n_fg = Math.floor(lastarc);
        var n_aa = sizex - n_bg - n_fg;
        // Create pixel row wrapper
        var x = document.createElement("div");
        var y = d;
        x.style.margin = "0px " + n_bg + "px";
        x.style.height='1px';
        x.style.overflow='hidden';
        // Make a wrapper per anti-aliased pixel (at least one)
        for (j = 1; j <= n_aa; j++) {
          // Calculate coverage per pixel
          // (approximates circle by a line within the pixel)
          if (j == 1) {
            if (j == n_aa) {
              // Single pixel
              coverage = ((arc + lastarc) * .5) - n_fg;
            }
            else {
              // First in a run
              arc2 = Math.sqrt(1.0 - Math.sqr((sizex - n_bg - j + 1) / sizex)) * sizey;
              coverage = (arc2 - (sizey - i)) * (arc - n_fg - n_aa + 1) * .5;
              // Coverage is incorrect. Why?
              coverage = 0;
            }
          }
          else if (j == n_aa) {
            // Last in a run
            arc2 = Math.sqrt(1.0 - Math.sqr((sizex - n_bg - j + 1) / sizex)) * sizey;
            coverage = 1.0 - (1.0 - (arc2 - (sizey - i))) * (1.0 - (lastarc - n_fg)) * .5;
          }
          else {
            // Middle of a run
            arc3 = Math.sqrt(1.0 - Math.sqr((sizex - n_bg - j) / sizex)) * sizey;
            arc2 = Math.sqrt(1.0 - Math.sqr((sizex - n_bg - j + 1) / sizex)) * sizey;
            coverage = ((arc2 + arc3) * .5) - (sizey - i);
          }
          
          x.style.backgroundColor = Blend(bk, color, coverage);
          if (top)
              y.appendChild(x);
          else
              y.insertBefore(x, y.firstChild);
          y = x;
          var x = document.createElement("div");
            x.style.height='1px';
            x.style.overflow='hidden';
          x.style.margin = "0px 1px";
        }
        x.style.backgroundColor = color;
        if (top)
            y.appendChild(x);
        else
            y.insertBefore(x, y.firstChild);
        lastarc = arc;
      }
      if (top)
          el.insertBefore(d, el.firstChild);
      else
          el.appendChild(d);
    }
    
    function getElements(className) {
        var elements = [];
        var el = document.getElementsByTagName('DIV');  
        var regexp=new RegExp("\\b"+className+"\\b");
        for (var i = 0; i < el.length; i++) 
        {
            if (regexp.test(el[i].className)) 
                elements.push(el[i]);
        }
        return elements;
    }
    
    function get_current_style(element,property,not_accepted)
    {
      var ee,i,val,apr;
      try
      {
        var cs=document.defaultView.getComputedStyle(element,'');
        val=cs.getPropertyValue(property);
      }
      catch(ee)
      {
        if(element.currentStyle)
          {
            apr=property.split("-");
            for(i=1;i<apr.length;i++) apr[i]=apr[i].toUpperCase();
            apr=apr.join("");
            val=element.currentStyle.getAttribute(apr);
       }
      }
      if((val.indexOf("rgba") > -1 || val==not_accepted) && element.parentNode)
      {
         if(element.parentNode != document) 
             val=get_current_style(element.parentNode,property,not_accepted);
         else
             val = '#FFFFFF';
      }
      if (val.indexOf("rgb") > -1 && val.indexOf("rgba") == -1)
          val = rgb2hex(val);
      if (val.length == 4)
          val = '#'+val.substring(1,1)+val.substring(1,1)+val.substring(2,1)+val.substring(2,1)+val.substring(3,1)+val.substring(3,1);
      return val;
    }
    
    function rgb2hex(value)
    {
        var x = 255;
        var hex = '';
        var i;
        var regexp=/([0-9]+)[, ]+([0-9]+)[, ]+([0-9]+)/;
        var array=regexp.exec(value);
        for(i=1;i<4;i++) hex += ('0'+parseInt(array[i]).toString(16)).slice(-2);
        return '#'+hex;
    }
    
    Any suggestions? Again what I would like to do is be able to specify the color that the script uses under the rounded corners. I don't want it to pull from the background color of the site. Any help would be appreciated. Thanks.
     
    Last edited: Apr 20, 2010
  2. hanleyhansen

    hanleyhansen New Member

    Joined:
    Jan 24, 2008
    Messages:
    336
    Likes Received:
    8
    Trophy Points:
    0
    Occupation:
    Drupal Developer/LAMP Developer
    Location:
    Clifton
    Home Page:
    Sorry, wrong forum. Can a moderator please move this to the Javascript forum? Thanks.
     
  3. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,276
    Likes Received:
    364
    Trophy Points:
    83
    Done.
     
  4. hanleyhansen

    hanleyhansen New Member

    Joined:
    Jan 24, 2008
    Messages:
    336
    Likes Received:
    8
    Trophy Points:
    0
    Occupation:
    Drupal Developer/LAMP Developer
    Location:
    Clifton
    Home Page:
    Great! Thanks, shabbir! Hopefully now I get some replies.
     
  5. SaswatPadhi

    SaswatPadhi ~ Б0ЯИ Τ0 С0δЭ ~

    Joined:
    May 5, 2009
    Messages:
    1,343
    Likes Received:
    55
    Trophy Points:
    0
    Occupation:
    STUDENT !
    Location:
    Orissa, INDIA
    Home Page:
    Code:
    color = get_current_style(v[i],"background-color","transparent");
    bk = get_current_style(v[i].parentNode,"background-color","transparent");
    
    So, the code detects the background-color of the element v and sets it as fore-color.
    Further it detects the background-color of the parent of v and sets it as background color.

    So, you might try changing those 2 lines.
     
  6. hanleyhansen

    hanleyhansen New Member

    Joined:
    Jan 24, 2008
    Messages:
    336
    Likes Received:
    8
    Trophy Points:
    0
    Occupation:
    Drupal Developer/LAMP Developer
    Location:
    Clifton
    Home Page:
    Thanks. That's what I assumed and that's as far as I got but I don't know what to change it to. What should I do if I want to specify the color instead of having it pulled?
     
  7. SaswatPadhi

    SaswatPadhi ~ Б0ЯИ Τ0 С0δЭ ~

    Joined:
    May 5, 2009
    Messages:
    1,343
    Likes Received:
    55
    Trophy Points:
    0
    Occupation:
    STUDENT !
    Location:
    Orissa, INDIA
    Home Page:
    Sorry, for late reply .. I wasn't online @ G4EF as I was stuck with something else ..
    Anyway .. I guess you can directly specify the colors like #FF0000 for red etc ...
    (Tell me if it doesn't work, I just roughly went through the above code .. may be I am wrong)
     
  8. hanleyhansen

    hanleyhansen New Member

    Joined:
    Jan 24, 2008
    Messages:
    336
    Likes Received:
    8
    Trophy Points:
    0
    Occupation:
    Drupal Developer/LAMP Developer
    Location:
    Clifton
    Home Page:
    I figure it out a few days ago. What I did was reference the color explicitly in the code. So this line:

    Code:
    color = get_current_style(v[i],"background-color","transparent");
    bk = get_current_style(v[i].parentNode,"background-color","transparent");
    Changed to this:

    Code:
    color = get_current_style(v[i],"background-color","transparent");
            bk = '#FFFFFF';
    And that solved my problem.
     
  9. SaswatPadhi

    SaswatPadhi ~ Б0ЯИ Τ0 С0δЭ ~

    Joined:
    May 5, 2009
    Messages:
    1,343
    Likes Received:
    55
    Trophy Points:
    0
    Occupation:
    STUDENT !
    Location:
    Orissa, INDIA
    Home Page:
    So, I was right ! :)
     

Share This Page