TIMELINE: syncronization problem in IE with bandinfo and decorator

[GoogleCodeExporter]

Hi,
I only have this problem in IE, firefox works well.

You can check the details here :

http://groups.google.com/group/simile-widgets/browse_thread/thread/8b1b9e4bcc97c
15c/adea44dbe68575b3?lnk=gst&q=highlight#adea44dbe68575b3

You can check this behaviour with jfk example :
Load the example in IE and double click the word "shot" in the last band.
Notice that it will go to another place out of nowhere

Thanks

Original issue reported on code.google.com by tang...@gmail.com on 22 Sep 2008 at 11:02

[GoogleCodeExporter]

Bug verified by LarryK on IE 7. Works correctly on Chrome

Original comment by larryklu...@gmail.com on 25 Sep 2008 at 5:36

• Changed title: TIMELINE: syncronization problem in IE with bandinfo and decorator
• Changed state: Accepted

[GoogleCodeExporter]

I have a hack that makes the double click work correctly (for me anyway) for 
events
in the timeline.

In timeline.js, replace Timeline._Band.prototype._onDblClick() with

Timeline._Band.prototype._onDblClick = function(innerFrame, evt, target) {
    var coords = SimileAjax.DOM.getEventRelativeCoordinates(evt, innerFrame);
    if(SimileAjax.Platform.browser.isIE){
        if(evt.type!="mousewheel"){
            var className = target.className;
            var elemName = target.nodeName;
            if (className == "timeline-event-label" ||
                className == "timeline-small-event-icon" ||
                className == "timeline-event-icon") {
                var xLocation = parseInt(target.offsetLeft);
                var yLocation = parseInt(target.offsetTop);
                coords.x = xLocation;
                coords.y = yLocation;
            }
            else if (elemName == "IMG" && 
                     target.parentNode.className == "timeline-event-icon") {
                var xLocation = parseInt(target.parentNode.offsetLeft);
                var yLocation = parseInt(target.parentNode.offsetTop);
                coords.x = xLocation;
                coords.y = yLocation;
            }
        }
    }
    var distance = coords.x - (this._viewLength / 2 - this._viewOffset);

    this._autoScroll(-distance);
};

Original comment by riddle.a...@gmail.com on 15 Dec 2008 at 11:27

[GoogleCodeExporter]

Here is a better version that works for duration events as well.

if(SimileAjax.Platform.browser.isIE){
        var className = target.className;
        var elemName = target.nodeName;
        if (className == "timeline-event-label" ||
                className == "timeline-small-event-icon" ||
                className == "timeline-event-icon" ||
                className == "timeline-event-tape") {
            var xLocation = parseInt(target.offsetLeft);
            var yLocation = parseInt(target.offsetTop);
            coords.x = xLocation;
            coords.y = yLocation;
        }
        else if (elemName == "IMG" && 
                target.parentNode.className == "timeline-event-icon") {
            var xLocation = parseInt(target.parentNode.offsetLeft);
            var yLocation = parseInt(target.parentNode.offsetTop);
            coords.x = xLocation;
            coords.y = yLocation;
        }
    }

Original comment by riddle.a...@gmail.com on 16 Dec 2008 at 5:18

[GoogleCodeExporter]

Hi,
based on the work from riddle I´ve managed to build a workaround for my issue.
The change suggested from riddle in version 2.3.0 has moved from timeline.js to 
band.js

My html code regardingh highlight is as follow :
....
<div class="timeline-highlight-decorator" style="background-color: rgb(255, 192,
128); opacity: 0.3; left: 900.226px; width: 729.032px;"/>
<table class="timeline-highlight-label timeline-highlight-label-start" 
style="right:
2399.77px; width: 6em;">
  <tbody>
  <tr>
    <td>Startr</td>
  </tr>
  </tbody>
</table>
...

So I had to make a change in the above code make it work for me. I´ve add this 
...
}else if
(target.parentNode.parentNode.parentNode.className.indexOf("timeline-highlight-l
abel")!=-1){

  var xLocation = parseInt(target.parentNode.parentNode.parentNode.offsetLeft);
  var yLocation = parseInt(target.parentNode.parentNode.parentNode.offsetTop);
  coords.x = xLocation;
  coords.y = yLocation;
}
....
the whole code would be like 
Timeline._Band.prototype._onDblClick = function(innerFrame, evt, target) {
    var coords = SimileAjax.DOM.getEventRelativeCoordinates(evt, innerFrame);

    if(SimileAjax.Platform.browser.isIE){
        var className = target.className;       
        var elemName = target.nodeName;       
        if (className == "timeline-event-label" || className == "timeline-small-event-icon"
|| className == "timeline-event-icon" || className == "timeline-event-tape"){
            var xLocation = parseInt(target.offsetLeft);
            var yLocation = parseInt(target.offsetTop);
            coords.x = xLocation;
            coords.y = yLocation;
        }else if
(target.parentNode.parentNode.parentNode.className.indexOf("timeline-highlight-l
abel")!=-1){

            var xLocation = parseInt(target.parentNode.parentNode.parentNode.offsetLeft);
            var yLocation = parseInt(target.parentNode.parentNode.parentNode.offsetTop);
            coords.x = xLocation;
            coords.y = yLocation;
        }
        else if (elemName == "IMG" && target.parentNode.className == "timeline-event-icon") {
            var xLocation = parseInt(target.parentNode.offsetLeft);
            var yLocation = parseInt(target.parentNode.offsetTop);
            coords.x = xLocation;
            coords.y = yLocation;
        }
    }    
    var distance = coords.x - (this._viewLength / 2 - this._viewOffset);
    this._autoScroll(-distance);
};

This problem is definitely on coords.x value and the workaround is to guess the
parentNode.offsetLeft value.

I hope this could help to find a final fix.
Thanks 

Original comment by jorgecor...@gmail.com on 9 Mar 2009 at 1:59

[GoogleCodeExporter]

Original comment by stefano.mazzocchi@gmail.com on 25 Mar 2009 at 7:01

• Added labels: Project-Timeline

[GoogleCodeExporter]

i have fixed this issue by replacing the following code in api/scripts/band.js :

Timeline._Band.prototype._onDblClick = function(innerFrame, evt, target) {
 var coords = SimileAjax.DOM.getEventRelativeCoordinates(evt, innerFrame);
 var distance = coords.x - (this._viewLength / 2 - this._viewOffset);
 this._autoScroll(-distance);
};

with the followin:

Timeline._Band.prototype._onDblClick = function(innerFrame, evt, target) {
 var distance = evt.clientX - 740;
 this._autoScroll(-distance);
};

the static value " 740 " is a value that i mesured manually, i think it is 
something 
related to the timeline width.

Original comment by wes...@gmail.com on 2 Aug 2009 at 1:15