Changing style with javascript = fail :(

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|712\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
Socoder -> Web Development -> Changing style with javascript = fail :(
Sat, 20 Aug 2011, 07:23
spinal	Below you will see a crude attempt at a page for outputting css code for corner radii (with preview). It works fine in chrome, but fails completely in firefox (currently untested in safari), even though, as far as I can tell I am using the correct method for changing the corners from javascript. el.MozBorderRadiusTopleft = TLT + 'px'; el.MozBorderRadiusTopright = TRT + 'px'; el.MozBorderRadiusBottomright = BRT + 'px'; el.MozBorderRadiusBottomleft = BLT + 'px'; --v The above code, appears to do absolutely nothing at all, even though according to many online sources, it is the correct way to accomplish the task. <html> <head> <script type="text/javascript"><!-- function changeElement(id) { var el = document.getElementById(id).style; var TLT = document.getElementById('topLeftTop').value; var TLL = document.getElementById('topLeftLeft').value; var TRT = document.getElementById('topRightTop').value; var TRL = document.getElementById('topRightLeft').value; var BLT = document.getElementById('botLeftTop').value; var BLL = document.getElementById('botLeftLeft').value; var BRT = document.getElementById('botRightTop').value; var BRL = document.getElementById('botRightLeft').value; var moz = document.getElementById('moz').checked; var webkit = document.getElementById('webkit').checked; var css3 = document.getElementById('css3').checked; var shorthand = document.getElementById('shorthand').checked; //css3 -- working fine el.borderTopLeftRadius = TLT + ' px '+ TLL +' px'; el.borderTopRightRadius = TRT + ' px '+ TRL +' px'; el.borderBottomLeftRadius = BLT + ' px '+ BLL +' px'; el.borderBottomRightRadius = BRT + ' px '+ BRL +' px'; //firefox! - NOT WORKING !!!!!!!! el.MozBorderRadiusTopleft = TLT + 'px'; el.MozBorderRadiusTopright = TRT + 'px'; el.MozBorderRadiusBottomright = BRT + 'px'; el.MozBorderRadiusBottomleft = BLT + 'px'; // Safari -- not tested el.WebkitBorderTopLeftRadius = TLT + 'px'; el.WebkitBorderTopRightRadius = TRT + 'px'; el.WebkitBorderBottomRightRadius = BRT + 'px'; el.WebkitBorderBottomLeftRadius = BLT + 'px'; // Output to text box document.myform.txtbx.value = '#box{'+"\n"; if(TLL == TLT && TRT == TLT && TRL == TLT && BLT == TLT && BLL == TLT && BRT == TLT && BRL == TLT){ if(moz==true) document.myform.txtbx.value += ' -moz-border-radius: '+TLT + ' px;'+"\n"; if(webkit==true) document.myform.txtbx.value += ' -webkit-border-radius: '+TLT + ' px;'+"\n"; if(css3==true) document.myform.txtbx.value += ' border-radius: '+TLT + ' px;'+"\n"; }else{ if(shorthand==true){ if(moz==true)document.myform.txtbx.value += ' -moz-border-radius: '+TLT+'px '+TRT+'px '+BLT+'px '+BRT+'px / '+TLL+'px '+TRL+'px '+BLL+'px '+BRL+'px;'+"\n"; if(webkit==true)document.myform.txtbx.value += ' -webkit-border-radius: '+TLT+'px '+TRT+'px '+BLT+'px '+BRT+'px / '+TLL+'px '+TRL+'px '+BLL+'px '+BRL+'px;'+"\n"; if(css3==true)document.myform.txtbx.value += ' border-radius: '+TLT+'px '+TRT+'px '+BLT+'px '+BRT+'px / '+TLL+'px '+TRL+'px '+BLL+'px '+BRL+'px;'+"\n"; }else{ if(moz==true){ document.myform.txtbx.value += ' -moz-border-radius-topleft: '+TLT + ' px'; if(TLT == TLL){document.myform.txtbx.value += ';'+"\n";}else{document.myform.txtbx.value += ' '+TLL +' px;'+"\n";} document.myform.txtbx.value += ' -moz-border-radius-topright: '+TRT + ' px'; if(TRT == TRL){document.myform.txtbx.value += ';'+"\n";}else{document.myform.txtbx.value += ' '+TRL +' px;'+"\n";} document.myform.txtbx.value += ' -moz-border-radius-bottomleft: '+BLT + ' px'; if(BLT == BLL){document.myform.txtbx.value += ';'+"\n";}else{document.myform.txtbx.value += ' '+BLL +' px;'+"\n";} document.myform.txtbx.value += ' -moz-border-radius-bottomright: '+BRT + ' px'; if(BRT == BRL){document.myform.txtbx.value += ';'+"\n";}else{document.myform.txtbx.value += ' '+BRL +' px;'+"\n";} }// moz if(webkit==true){ document.myform.txtbx.value += ' -webkit-border-top-left-radius: '+TLT + ' px'; if(TLT == TLL){document.myform.txtbx.value += ';'+"\n";}else{document.myform.txtbx.value += ' '+TLL +' px;'+"\n";} document.myform.txtbx.value += ' -webkit-border-top-right-radius: '+TRT + ' px'; if(TRT == TRL){document.myform.txtbx.value += ';'+"\n";}else{document.myform.txtbx.value += ' '+TRL +' px;'+"\n";} document.myform.txtbx.value += ' -webkit-border-bottom-left-radius: '+BLT + ' px'; if(BLT == BLL){document.myform.txtbx.value += ';'+"\n";}else{document.myform.txtbx.value += ' '+BLL +' px;'+"\n";} document.myform.txtbx.value += ' -webkit-border-bottom-right-radius: '+BRT + ' px'; if(BRT == BRL){document.myform.txtbx.value += ';'+"\n";}else{document.myform.txtbx.value += ' '+BRL +' px;'+"\n";} }//webkit if(css3==true){ document.myform.txtbx.value += ' border-top-left-radius: '+TLT + ' px'; if(TLT == TLL){document.myform.txtbx.value += ';'+"\n";}else{document.myform.txtbx.value += ' '+TLL +' px;'+"\n";} document.myform.txtbx.value += ' border-top-right-radius: '+TRT + ' px'; if(TRT == TRL){document.myform.txtbx.value += ';'+"\n";}else{document.myform.txtbx.value += ' '+TRL +' px;'+"\n";} document.myform.txtbx.value += ' border-bottom-left-radius: '+BLT + ' px'; if(BLT == BLL){document.myform.txtbx.value += ';'+"\n";}else{document.myform.txtbx.value += ' '+BLL +' px;'+"\n";} document.myform.txtbx.value += ' border-bottom-right-radius: '+BRT + ' px'; if(BRT == BRL){document.myform.txtbx.value += ';'+"\n";}else{document.myform.txtbx.value += ' '+BRL +' px;'+"\n";} }//css3 }//shorthand } document.myform.txtbx.value += '}'; el.backgroundColor = "#000"; // to show that the script ran all the way. } //--></script> <style> #corners { background-color:blue; width: 200px; height: 200px; position: absolute; top: 100px; left: 100px; } #tltbox{ position: absolute; top: -30px; left: 0; } #tllbox{ position: absolute; top: 0px; left: -70px; } #trtbox{ position: absolute; top: -30px; left: 140; } #trlbox{ position: absolute; top: 0px; left: 200px; } #bltbox{ position: absolute; top: 200px; left: 0; } #bllbox{ position: absolute; top: 170px; left: -70px; } #brtbox{ position: absolute; top: 200px; left: 140px; } #brlbox{ position: absolute; top: 170px; left: 200px; } #textbox{ position: absolute; top: 340px; left: 20px; } </style> </head> <body onload="changeElement('corners')"> <div id="corners"> <!-- top left --> <div id="tltbox"><input type="text" size = "4" id="topLeftTop" name="topLeftTop" value="10" onChange="changeElement('corners')"/></div> <div id="tllbox"><input type="text" size = "4" id="topLeftLeft" name="topLeftLeft" value="10" onChange="changeElement('corners')"/></div> <!-- top right --> <div id="trtbox"><input type="text" size = "4" id="topRightTop" name="topRightTop" value="10" onChange="changeElement('corners')"/></div> <div id="trlbox"><input type="text" size = "4" id="topRightLeft" name="topRightLeft" value="10" onChange="changeElement('corners')"/></div> <!-- bottom left --> <div id="bltbox"><input type="text" size = "4" id="botLeftTop" name="botLeftTop" value="10" onChange="changeElement('corners')"/></div> <div id="bllbox"><input type="text" size = "4" id="botLeftLeft" name="botLeftLeft" value="10" onChange="changeElement('corners')"/></div> <!-- bottom right --> <div id="brtbox"><input type="text" size = "4" id="botRightTop" name="botRightTop" value="10" onChange="changeElement('corners')"/></div> <div id="brlbox"><input type="text" size = "4" id="botRightLeft" name="botRightLeft" value="10" onChange="changeElement('corners')"/></div> </div> <div id="textbox"> <form name="myform"> <input type="checkbox" id="moz" name="browser" value="moz" checked onChange="changeElement('corners')"/> moz <input type="checkbox" id="webkit" name="browser" value="webkit" checked onChange="changeElement('corners')"/> webkit <input type="checkbox" id="css3" name="browser" value="css3" checked onChange="changeElement('corners')"/> css3 <input type="checkbox" id="shorthand" name="browser" value="css3" onChange="changeElement('corners')"/> shorthand <br/> <text area name="txtbx" cols="80" rows="16"></text area> </form </div> </body> --v Why can all browsers just stick to the same standard?!! -=-=- Check out my excellent homepage!
Sat, 20 Aug 2011, 10:14
CodersRule	And class, this is why we use jQuery.
Thu, 25 Aug 2011, 17:06
HoboBen	Did you manage to fix this in the end? I had a look but couldn't see anything obviously wrong. From Firefox 4 (Gecko 2.0), you can (see notes) use CSS3 border-radius as normal - does getting rid of the MozBorderRadius code completely work? -=-=- blog \| work \| code \| more code
Thu, 25 Aug 2011, 17:20
JL235	I've just had a quick look. Solution 1 It seems that mozBorderRadius does not work via JavaScript. This is probably because it now supports 'borderRadius', which is the proper way to set this. In FireFox, any valid style appears to return an empty string, "". This means you can test if a style is value by using: typeof( style.borderTopRightRadius === 'string' ); --v ... or better ... typeof( style.borderTopRightRadius !== 'undefined' ); --v So my advise is to try: // HELPER FUNCTION // Test each style given in turn, until one of them is valid. // Then set the value. function setStyles( element, val ) { var style = element.style; for ( var i = 2; i < arguments.length; i++ ) { var css = arguments[i]; if ( typeof( style[css] !== 'undefined' ) ) { style[ css ] = val; return; } } } // USAGE var e = document.getElementById( 'my_element' ); setStyles( e, '20px', 'borderRadius', 'mozBorderRadius', 'webkitBorderRadius', 'oBorderRadius', 'ieBorderRadius' ); --v I've not tested the above, but something similar to that, should work ok in FireFox. I'm testing if each of the arguments given is undefined, and the moment I find one that is not, I set the value and return. However it would not surprise me if WebKit and IE work entirely differently. Solution 2 $('#my_element').css({ borderRadius : '20px' }); --v ^ jQuery, end of.

Solution 1

Solution 2