javascript - Highcharts - custom navigator dragger issue with Safari/IE -
i couldn't find posts on issue, figured i'd ask. i'm working custom scrollbar/navigator highcharts, , i'm having display issues in safari , versions of internet explorer.
here's how custom scrollbar should displayed:
here's how it's showing in safari/ie:
as can see, in safari/ie, there appears default dragger displays behind custom dragger, , can't seem figure out how hide it. has had issue before? here code used create custom handles on scrollbar:
(function (h) { var d = false; h.wrap(h.scroller.prototype, 'init', function (proceed) { proceed.apply(this, array.prototype.slice.call(arguments, 1)); }); h.wrap(h.scroller.prototype, 'addevents', function (proceed) { proceed.apply(this, array.prototype.slice.call(arguments, 1)); }); h.wrap(h.scroller.prototype, 'drawhandle', function (proceed) { proceed.apply(this, array.prototype.slice.call(arguments, 1)); h.each(this.handles, function (handle, index) { var element = handle.element; if (index == 0) { element.innerhtml = ''; element.appendchild(parsesvg('<polygon fill="#464644" points="0,28 6.5,28 6.5,23.6 13,14 6.5,3.8 6.5,0 0,0 " stroke-width="0"></polygon>')); $(element).attr({'transform': "translate(" + (handle.translatex) + ',' + (handle.translatey - 6) + ')'}).addclass('drag_knob'); } else { element.innerhtml = ''; element.appendchild(parsesvg('<polygon fill="#464644" points="13,28 6.5,28 6.5,23.6 0,14 6.5,3.8 6.5,0 13,0 " stroke-width="0"/>')); $(element).attr({'transform': "translate(" + (handle.translatex - 12) + ',' + (handle.translatey - 6) + ')'}).addclass('drag_knob'); } }) }); function parsesvg(s) { var div = document.createelementns('http://www.w3.org/1999/xhtml', 'div'), frag = document.createdocumentfragment(); div.innerhtml = '<svg xmlns="http://www.w3.org/2000/svg">' + s + '</svg>;'; while (div.firstchild.firstchild) { frag.appendchild(div.firstchild.firstchild); } return frag; } }(highcharts));
ah ha, figured out. reason, in ie/safari, when using module, elements added (<rect> , <path>). solution add css hide elements:
.highcharts-navigator-handle-left, .highcharts-navigator-handle-right { path, rect { display: none; } }
Comments
Post a Comment