My user story is this: 1) User wants to access information in the event bubbles of SIMILE Timeline without clicking each event. 2) The event bubble should be closed when the user hovers away with the mouse.
I've been reading how to implement the mouseover instead of the click on the event label, similar to the effect done here: http://people.csail.mit.edu/dfhuynh/misc/timeline-onmouseover/cubism.html And i came up with this code to get it working with simile 2.3.1: var oldPaintEventLabel = Timeline.OriginalEventPainter.prototype._paintEventLabel; Timeline.OriginalEventPainter.prototype._paintEventLabel = function(evt, text, left, top, width, height, theme, labelDivClassName, highlightIndex) { var self = this; var r = oldPaintEventLabel.call(self, evt, text, left, top, width, height, theme, labelDivClassName, highlightIndex); var elmt = r.elmt; SimileAjax.DOM.registerEvent(elmt, "mouseenter", function(elmt, domEvt, target) { if ("pageX" in domEvt) { var x = domEvt.pageX; var y = domEvt.pageY; } else { var c = SimileAjax.DOM.getPageCoordinates(target); var x = domEvt.offsetX + c.left; var y = domEvt.offsetY + c.top; } self._showBubble(x, y, evt); self._fireOnSelect(evt.getID()); domEvt.cancelBubble = true; SimileAjax.DOM.cancelEvent(domEvt); return false; }); return r; }; Now when i want to register the event for mouseout, it would seem logically to do this: var oldPaintEventLabel = Timeline.OriginalEventPainter.prototype._paintEventLabel; Timeline.OriginalEventPainter.prototype._paintEventLabel = function(evt, text, left, top, width, height, theme, labelDivClassName, highlightIndex) { var self = this; var r = oldPaintEventLabel.call(self, evt, text, left, top, width, height, theme, labelDivClassName, highlightIndex); var elmt = r.elmt; SimileAjax.DOM.registerEvent(elmt,"mouseleave",function(elmt,domEvt,target) { self._band.closeBubble(); return false; }); SimileAjax.DOM.registerEvent(elmt, "mouseenter", function(elmt, domEvt, target) { if ("pageX" in domEvt) { var x = domEvt.pageX; var y = domEvt.pageY; } else { var c = SimileAjax.DOM.getPageCoordinates(target); var x = domEvt.offsetX + c.left; var y = domEvt.offsetY + c.top; } self._showBubble(x, y, evt); self._fireOnSelect(evt.getID()); domEvt.cancelBubble = true; SimileAjax.DOM.cancelEvent(domEvt); return false; }); return r; }; However, now it seems that when i hover over the event label, both the mouseenter and mouseleave events are triggered in the same time, (I also tried with mouseover and mouseout), because then the event bubble keeps appearing and disappearing. Then when i hover out, the event bubble stays open. Is there someone who knows what is causing the conflict. I also tried with jquery live functions and had the same problem. -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
