[Javascript] Made up CSS tags

[Terry Riegel]

Hello everyone,

I have gotten most of my rounded corner code fixed up and working. For  
anyone interested take a look at the following examples.

http://clearimageonline.com/playground/roundedcorners/sparkplug_2.0.0.html
http://clearimageonline.com/playground/roundedcorners/round.html

I am pleased with the results but am concerned that they would not be  
very resilient when placed into pages that might be using various  
libraries et al. I found the following article vary helpful...

http://kentbrewster.com/case-hardened-javascript/

It seems he has been able to take javascript and make it "Just Work"  
in most any type of environment.

Does anyone have any experience doing this sort of thing? I would be  
willing to pay someone that could take the rounded corner code and  
"Case Harden" it.


Thanks,

Terry




On Nov 29, 2008, at 3:25 PM, Terry Riegel wrote:

> Here is the answer I just found. Unless any of you know of a
> workaround...
>
> http://stackoverflow.com/questions/249991/can-i-fetch-the-value-of-a-non-standard-css-property-via-javascript
>
> It seems it is not possible. Something I hate to say.
>
> Terry
>
> On Nov 29, 2008, at 3:03 PM, Terry Riegel wrote:
>
>> Hello All,
>>
>> I am working on adding rounded corner functionality to IE, and
>> optionally to other browsers. I have the core code working in IE,
>> Safari, Mozilla, Chrome, and Opera.
>>
>> Firefox and Safari already have their own CSS specifiers for rounded
>> corners, namely
>>
>> -webkit-border-radius: 25px;
>> -moz-border-radius: 25px;
>>
>> I would like my javascript solution read the css and apply borders
>> based on the CSS. I would like to add a contrived CSS tag like
>>
>> -cc-border-radius: 25px;
>>
>> Then have the javascript determine if the browser is handling the
>> borders or if it should handle them. For example is the author had
>> this in his CSS...
>>
>> -webkit-border-radius: 25px;
>> -cc-border-radius: 25px;
>>
>> Then it would let Safari draw its own borders, but would draw them  
>> for
>> Firefox and IE.
>>
>>
>>   function styleit()
>>   {
>>    if (isIE)
>>    {
>>     for(var t = 0; t < document.styleSheets.length; t++)
>>     {
>>      for(var i = 0; i < document.styleSheets[t].rules.length; i++)
>>      {
>>       var allR =
>> document.styleSheets[t].rules[i].style.IEborderRadius    || 0;
>>       var tR   =
>> document.styleSheets[t].rules[i].style.IEborderRadiusTR  || allR;
>>       var tL   =
>> document.styleSheets[t].rules[i].style.IEborderRadiusTL  || allR;
>>       var bR   =
>> document.styleSheets[t].rules[i].style.IEborderRadiusBR  || allR;
>>       var bL   =
>> document.styleSheets[t].rules[i].style.IEborderRadiusBL  || allR;
>>       if (allR || tR || tR || bR || bL)
>>       {
>>        var r=document.styleSheets[t].rules[i].style.IEborderRadius;
>>        var s=document.styleSheets[t].rules[i].selectorText;
>>        var settings = {tl: { radius: 45 }, tr: { radius: 45 }, bl:
>> { radius: 45 }, br: { radius: 45 }, antiAlias: true   , autoPad:
>> true     , validTags: ["div"]}
>>        settings.tl.radius=replace(tL,'px','');
>>        settings.tr.radius=replace(tR,'px','');
>>        settings.bl.radius=replace(bL,'px','');
>>        settings.br.radius=replace(bR,'px','');
>>        var myBoxObject = new curvyCorners(settings,
>> replace(s,'.','') );
>>        myBoxObject.applyCornersToAll();
>>       }
>>      }
>>     }
>>    } else if(isMoz) .......
>>
>>
>> Here is my code above. I have two issues I would like help resolving.
>>
>> 1. It seems IE will allow for the made up IEborderRadius, but will  
>> not
>> allow made up ones with hyphens in them.
>>
>> 2. Safari and Firefox throw away the IEborder Radius once they
>> determine it is made up, so it there a way I can "read" the CSS to
>> determine if document.stylesheets.rules.style.IEborderRadius exists?
>>
>> I hope this post isn't overly confusing. Any help will be greatly
>> appreciated
>>
>> Thanks,
>>
>> Terry Riegel
>>
>>
>> _______________________________________________
>> Javascript mailing list
>> Javascript at lists.evolt.org
>> http://lists.evolt.org/mailman/listinfo/javascript
>
> _______________________________________________
> Javascript mailing list
> Javascript at lists.evolt.org
> http://lists.evolt.org/mailman/listinfo/javascript