Timeline not showing up for some IE browsers

I'm having the same problem, blank, with ms ie displaying the timeline. The mit demo works with ie. Any ideas?

Jim

I checked out the mit timeline forums. http://simile.mit.edu/issues/browse/TIMELINE-14 and tried adding this error checking code to timeline.js. I'm really just poking for answers and don't know much about jscript but thought it was worth a try.

Timeline.loadXML = function(url, f) {
var fError = function(statusText, status, xmlhttp) {
alert("Failed to load data xml from " + url + "\n" + statusText);
};
var fDone = function(xmlhttp) {
var result = xmlhttp.responseXML;
if (!result.documentElement && xmlhttp.responseStream) {
result.load(xmlhttp.responseStream);
}
f(result, url);
};
Timeline.XmlHttp.get(url, fError, fDone);
};

Good luck!

Jim

I confirm the same bug, that the timeline does appear in Firefox, but not in IE6.

i'm getting this too

works fine in firefox, but not in IE

when i debug, i get a "invalid argument" error at line: this._highlightDiv.style.height = (band.getViewWidth() - 4) + "px";
when i delve further, it appears that the band object is missing its normal getViewWidth function, like its just *gone*

very odd

also, looking around at the SIMILE timeline site, there are plenty of examples of timelines working fine in IE
the examples there seem to work by hooking body onLoad and onResize, and creating the widget there, as opposed to this drupal module which creates the widget directly inline during page render, as the result of a javascript function call

i'm stumped, has anyone made any progress?

i figured it out

timeline works by inserting a javascript function in to the page like so:

<script type=\"text/javascript\">
   createTimelineWidget( "testTimeline", Timeline.HORIZONTAL, "Wed Nov 22 2006 0:00:00 GMT-0500", 0, "PATH TO JSON FILE", "json");
</script>

this works fine in firefox, but if this runs in IE *anywhere inside of a table*, then it crashes

it seems that the javascript code that generates the widgets, tries to access the table width before IE has "finalized" the table

there are 2 fixes to this problem:
don't use tables or
delay widget creation by atleast 1ms

i opted for the second solution, which looks like:

            <script type="text/javascript">


               var createWidgetFunction = function() {
                  createTimelineWidget( "testTimeline", Timeline.HORIZONTAL, "Wed Nov 22 2006 0:00:00 GMT-0500", 0, "PATH TO JSON FILE", "json");
               }

               setTimeout( createWidgetFunction, 1);

            </script>

this works in IE

here is a modified theme_timeline function that provides this fix:

function theme_timeline($timeline) {
  global $base_url;

  if (strpos(TIMELINE_WIDGET_URL, '://') === FALSE) { // relative URL
    drupal_add_js(TIMELINE_WIDGET_URL);
  }
  else { // absolute URL
    drupal_set_html_head('<script type="text/javascript" src="' . TIMELINE_WIDGET_URL . '"></script>');
  }

  theme_add_style(drupal_get_path('module', 'timeline') . '/timeline.css');
  drupal_add_js(drupal_get_path('module', 'timeline') . '/timeline.js');

  $timeline = (object)$timeline;
  if (empty($timeline->class))       $timeline->class = 'timeline';
  if (empty($timeline->width))       $timeline->width = TIMELINE_WIDTH;
  if (empty($timeline->height))      $timeline->height = TIMELINE_HEIGHT;
  if (empty($timeline->align))       $timeline->align = '';
  if (empty($timeline->id))          $timeline->id = 'timeline';
  if (empty($timeline->orientation)) $timeline->orientation = TIMELINE_ORIENTATION;
  if (empty($timeline->start_date))  $timeline->start_date = date('D M d Y G:i:s') . ' GMT' . date('O');

  // FIXME: timezone fiddling due to bug in the Timeline widget; see timeline_format_date().
  //if (!isset($timeline->timezone)) $timeline->timezone = timeline_get_timezone() / 3600;
  if (!isset($timeline->timezone)) $timeline->timezone = 0;

  $style = array('width' => _timeline_to_dim($timeline->width), 'height' => _timeline_to_dim($timeline->height));
  switch (strtolower($timeline->align)) {
    case 'left':
    case 'right':
      $style['float']  = strtolower($timeline->align);
      break;
    case 'center':
      $style += array('margin-left' => 'auto', 'margin-right' => 'auto');
      break;
  }
  $style = implode('; ', array_map_assoc(create_function('$k, $v', 'return "$k: $v";'), $style));
  $tag = _timeline_content_tag('div', '', array('id' => $timeline->id, 'class' => $timeline->class, 'style' => $style));
  $output .= _timeline_content_tag('div', $tag, array('class' => $timeline->class . '-wrapper'));

  $query = 'view=' . $timeline->view_name . (empty($timeline->view_args) ? '' : '&args=' . urlencode(serialize($timeline->view_args)));
  $url = url('timeline/' . TIMELINE_FEED_TYPE, $query, NULL, FALSE);
  
  $output = "
  
  <div id=\"$timeline->id\" class=\"timeline\" style=\"$style\">
  </div>
  
  <script type=\"text/javascript\">
  
    var createWidgetFunction = function() {
      return createTimelineWidget(\"$timeline->id\", Timeline.$timeline->orientation, \"$timeline->start_date\", 0, \"$url\", \"json\");
    }
    
    setTimeout( createWidgetFunction, 1);
    
  </script>
  
  ";

  return $output;
}

Hi,

Thank you! I tried the fix and it works great so far. I need to do some more testing but things look good.

Thanks again MrTaco!

jim

Thanks for figuring this out, John. I don't have a Windows computer so it would have taken me a while before getting around to debugging this problem... :-)

I will look into integrating your fix as soon as I have a chance to review it. (If it would be possible for you to submit it as a patch file, that'd make it a snap.)

I have tested on a 4.7.4 install and the fix seems to work -- THANK YOU!!!!!!

I've just tested using the latest version, but without the theme function change, and it works in my IE where it previously did not. The version I previsouly used was 1.2, with which it did not work in IE.

Now, with and without the patch above it works in my IE 6.0.28 as well as a 6.0.29.

Ian

I tested in IE v7.0.5730.11 and the Timeline appears just fine there too.

the above fix in patch format, seems to be working here too.

Delayed timeline creation implemented in CVS commit [47591]; this should resolve the IE6 problems and appears to contribute to a more solid user experience on Safari, too.

Hi Arto,

Thanks for all the hard work! I just updated to the latest and everything seems to be working great.

Jim

This is an issue again with the updated version of timeline

i'm getting error on page warnings come up for internet explorer and the timeline wont display on the page - i get the outline of it and the instructions at the bottom but that's it! it says unexpected character occured on line 164 character 48 - this is line 164, i can't work out whats going wrong:

<!-- begin content --><div class='view view-npe-timeline-nodes'><div class='view-content view-content-npe-timeline-nodes'><div class="timeline-wrapper"><div id="npe_timeline_nodes" class="timeline" style="width: 100%; height: 400px"></div></div><div class="timeline-controls" id="npe_timeline_nodes-controls"></div><script type="text/javascript">if (isJsEnabled()) { addLoadEvent(function() { var timeline = createTimelineWidget("npe_timeline_nodes", Timeline.HORIZONTAL, "Wed Mar 14 2007 21:53:04 GMT+0000", 0, [ Timeline.DateTime.DAY, Timeline.DateTime.MONTH ], "/timeline/json?view=npe_timeline_nodes", "json"); setupTimelineControls($('npe_timeline_nodes-controls'), timeline, "Filter:", "Highlight:", "Clear All"); }); }</script></div><div class='view-footer view-footer-npe-timeline-nodes'><p>Drag timeline forward or backward to see more content.</p>

it diplays brilliant in firefox but unfortunately people still use IE even though it is rubbish... :D

I can't see any outward problem in the above snippet and don't experience this with an IE test setup I ran it by (which, admittedly, isn't running the latest IE 6). Note that when reporting IE problems, it would be useful to know the exact IE6/IE7 version.

If someone has the chance to look into this, a more detailed problem report and/or a patch would be most welcome. Fixing this is the last task before we can release version 1.1, so I'm bumping this up to critical.

Non-reproducible on at least two IE setups so far. I'd be inclined to close this unless someone can confirm the problem and report back with new information within the next couple days.

my site is live and has problems with displaying timeline in IE7 (not sure about IE6 i'm afraid) - have a look at this page http://www.interragate.info/notable-past-events/timeline and let me know what other information you want from me

I'm running drupal 4.7.6 and timeline 4.7.x-1.0 from 2006-Dec-09

Thanks for the information, Lucy. The timeline on your site doesn't display with Safari on OS X, either, but looks fine with Firefox.

I think I may have found the source of your problem. It looks like you've customized your timeline.js to add a third timeline band? The additions are causing the problem. Specifically, there is a parse error on line 46 of http://www.interragate.info/modules/timeline/timeline.js, which I've marked with <<< below:

    Timeline.createBandInfo({
      width:          '10%',
      intervalUnit:   Timeline.DateTime.DECADE,
      intervalPixels: 200,
      eventSource:    eventSource,
      date:           initialDate,
      timeZone:       timeZone,
      theme:          theme,
      showEventText:  false, <<<<<<<<<<<<<<<
    })

I'm guessing that the extra comma at the end of that line is throwing IE and Safari off. Please verify whether removing the comma solves the issue.

(Also, when reporting problems, pretty please specify if you've customized any of the files included in the module - it is not "standard" usage so it can be a helpful fact to know for troubleshooting purposes.)

sorry about that - i have some records in the timeline going back quite a way and it was taking forever to scroll! removing that comma has fixed it and its now working in IE

thanks for that!

Lucy: the timeline on your site is a very nice case example of heavy-duty use of this module. May I refer to it in the module's documentation?

Fwiw, I just visited Lucy's site (linked above) using Safari and found the title, black content border, and the footer message. However, there was no actual timeline within the border.

So, in this particular instance, Safari also doesn't show the timeline. As a control, I checked my own site's timeline, and it displays fine via Safari. I have not had problems with the timeline displaying via IE, but then I haven't tested IE.

While setting up the timeline module on my site, I encountered a page result similar to what I viewed on Lucy's site -- title, black content border, footer message, and no actual timeline. I had incorrectly installed the MIT Simile Timeline widget on my site's server. After I re-installed the widget correctly, the content displayed properly within the border. I can't say for certain that this is the issue in Lucy's case (particularly since she is able to view it under some conditions but not others), but this was my solution to the display issue. I offer it for whatever it's worth.

http://www.interragate.info/notable-past-events/timeline is still not displaying properly via Safari. It is, however, displaying properly via Firefox on OSX.

Arto - yes please feel free to put a reference to it in there. As users start to add content to the site it should continue to grow so i'll let you know how it responds

Lucy: glad that fixed it.

Pete: could be a cache issue, now showing up fine for me on Safari.

Arto: Yep. It was the cache; thanks. Displaying properly now.

Lucy: Looks great, impressive work.