Styling Abbr In Ie

liunx

Guest
<!--fonto:Verdana--><span style="font-family:Verdana"><!--/fonto--><!--sizeo:3--><span style="font-size:12pt;line-height:100%"><!--/sizeo--><!--coloro:#333333--><span style="color:#333333"><!--/coloro--><br /><br />As I'm sure many of you already know, IE has a problem with showing <abbr> tags correctly. If ya didn't know, now you know. The abbr tag allows you to have a word like HTML and when the viewer hovers over the word a "tooltip" shows up with what HTML means. The u can use CSS to underline all abbr's and show a "help" cursor when u roll over it.<br /><br /><abbr title="HyperText Markup Language">HTML</abbr><br /><br />Don't even get me started on the whole acronym vs. abbr thing either. Mad!!! <br /><br />Anyways, I found a javascript code that'll check wether a browser is IE and change all the abbr in your html page and rewrite it so IE can render it properly. Here's the article about it <a href="http://www.sovavsiti.cz/css/abbr.html" target="_blank">Styling <abbr> in IE</a><br /><br />So my question is how can I have the JavaScript code in an external file and have the webpage it's linked in run it when the page loads. The code'll only work if it's in the head of the webpage but I don't want it there. <br /><br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->function styleAbbr() {<br />  var oldBodyText, newBodyText, reg<br />  if (isIE) {<br />    oldBodyText = document.body.innerHTML;<br />    reg = /<ABBR([^>]*)>([^<]*)<\/ABBR>/g;<br />    newBodyText = oldBodyText.replace(reg, '<ABBR $1><SPAN class=\"abbr\" $1>$2</SPAN></ABBR>');<br />    document.body.innerHTML = newBodyText;<br />  }<br />}<br /><br />window.onload = function(){<br />  styleAbbr()<br />};<br /><br />isIE = (document.all) ? true:false;<!--c2--></div><!--ec2--><br /><br />I tried adding the function to the body onload tag like so:<br /><br /><body onload="preload('images/window.gif','images/red.png'); styleAbbr();"><br /><br />but that didn't work either. I want to have the above function in an external js file and run when the page is loaded. <br /><br />any ideas?<br /><br />thanks,<br />!!blue<!--sizec--></span><!--/sizec--><!--colorc--></span><!--/colorc--><!--fontc--></span><!--/fontc--><!--content-->
What if you took the code out of the function, and had it 'loose' in the .js file. Would it then be evaluated when the file is loaded?<!--content-->
<!--fonto:Verdana--><span style="font-family:Verdana"><!--/fonto--><!--sizeo:3--><span style="font-size:12pt;line-height:100%"><!--/sizeo--><!--coloro:#333333--><span style="color:#333333"><!--/coloro--><br />nope, that didn't work, now it tells me (the javascript console anyway) that --<br /><b>Error: isIE is not defined.</b> <img src="http://www.totalchoicehosting.com/forums/style_emoticons/default/blink.gif" style="vertical-align:middle" emoid=":blink:" border="0" alt="blink.gif" /> <br /><br />so no good <img src="http://www.totalchoicehosting.com/forums/style_emoticons/default/sad.gif" style="vertical-align:middle" emoid=":(" border="0" alt="sad.gif" /><br /><!--sizec--></span><!--/sizec--><!--colorc--></span><!--/colorc--><!--fontc--></span><!--/fontc--><!--content-->
At least the error is telling you that the script is being executed. Try putting<br /><!--quoteo--><div class='quotetop'>QUOTE</div><div class='quotemain'><!--quotec-->isIE = (document.all) ? true:false;<!--QuoteEnd--></div><!--QuoteEEnd--><br />at the top of the linked file.<br /><br />Or simply change the if() statement to read<br />if(document.all)<!--content-->
<!--fonto:Verdana--><span style="font-family:Verdana"><!--/fonto--><!--sizeo:3--><span style="font-size:12pt;line-height:100%"><!--/sizeo--><!--coloro:#333333--><span style="color:#333333"><!--/coloro--><br />no more error <img src="http://www.totalchoicehosting.com/forums/style_emoticons/default/smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" /><br /><br />but isn't doing what it's supposed to be doing <img src="http://www.totalchoicehosting.com/forums/style_emoticons/default/sad.gif" style="vertical-align:middle" emoid=":(" border="0" alt="sad.gif" /><br /><br />errr....<br /><!--sizec--></span><!--/sizec--><!--colorc--></span><!--/colorc--><!--fontc--></span><!--/fontc--><!--content-->
 
Back
Top