Forum:RenderTravellerMap bugs

Forums: Index > Watercooler > RenderTravellerMap bugs

IFRAMEs on the wiki weren't being styled correctly in IE. I tracked down the cause: elem.setAttribute('style', cssStyleStr ) does not work in Internet Explorer. A cross-browser way to do it is:

     elem.setAttribute( 'style', cssStyleStr );
     elem.style.cssText = cssStyleStr;

Also, to eliminate the sunken border on the IFRAME in IE it is necessary to set:

     elem.frameBorder = "0"; // NOTE: case sensitive property name

See http://www.w3.org/TR/html401/present/frames.html for more details.

Also... the logic for extracting the style="..." content chops off the last character. And it leaves the style in the ALT and TITLE tags, which is kinda icky.

There's also a missing semicolon in the "var content = ..." line.

Here's a replacement:

 function renderTravellerMap(){
  if (!document.getElementById('bodyContent')) return;
  var as = document.getElementById('bodyContent').getElementsByTagName('a');
  for (var i = as.length-1; i>=0; i--){
   var a = as[i];
   if (a.href.indexOf('http:'+'//www.travellermap.com/iframe.htm?') == 0){
    if ((' '+a.parentNode.className+' ').indexOf(' nochart ') == -1){
     var iframe = document.createElement('iframe');
     iframe.src = a.href;
     var content = a.textContent || a.innerHTML || 'This is a map';
     if (content.indexOf('style="') >=0 ) {
        var start = content.indexOf('style="');
        var end   = content.indexOf('"', start+7 );
        var style = content.substring( start+7, end );
        iframe.setAttribute('style', style);
        iframe.style.cssText = style;
        content = content.substring( 0, start ) + content.substring( end + 1 );
     }
     iframe.alt = content;
     iframe.title = content;
     iframe.frameBorder = "no";
     iframe.scrolling = "no";
     a.parentNode.replaceChild(iframe, a);
    }
   }
  }
 }

NOTE: The the URL is split into two strings to avoid having this code be turned into a hyperlink by mediawiki's processing... and then turned into an IFRAME by having the renderTravellerMap() function style it since the URL matches!

JoshuaBell 05:39, 6 February 2008 (UTC)

Updated

I've updated the common.js with these changes. Please test the wiki version to make sure I didn't screw up the copy and paste. Tjoneslo 13:51, 6 February 2008 (UTC)

Looks good to me! JoshuaBell 05:52, 7 February 2008 (UTC)