How to trigger a modal view with Highcharts, when zoom is also enabled?


Tags: javascript,jquery,css,highcharts

Problem :

I have a webpage that displays a Highcharts chart that has zoom type 'x' enabled. The chart div is wrapped in a container div, like:

<div class='chart-container'>
  <div id='chart_0' class='chart'></div>
</div>

There is also an event handler attached to the "mouseup" event on the chart-container that switches the chart to a modal view by toggling the modalChart css class defined as:

.modalChart {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 999999;
}

.chart {
  height: 300px;
}

.modalChart .chart {
  height: 90%;
  width: 90%;
  max-width: none;
  margin: 1em auto;
}

The event handler is defined as:

$("body").on("mouseup", ".chart-container", function(){
    $(this).toggleClass "modalChart"
    $(".chart", this).highcharts().reflow()
});

The problem I'm having is that the mouseup event on the "chart-container" fires before the setExtremes event fires on the x-axis when zoom is occurring. So, the modal view is toggled every time the user uses the zoom functionality. How do I stop this from happening? I want the user to be able to zoom, without toggling the modal view, and be able to click on the chart to toggle the modal view.



Solution :

The problem of course is that the "mouseup" event on the "chart-container" fires first and the modal view is toggled even when the user is zooming. To prevent this, we need to delay the modal toggle and cancel it if necessary. A solution is to delay the modal toggle using setTimeout (associated with a global variable), and then clearTimeout in the appropriate place when using the zoom functionality.

I changed the event handler on the "chart-container" class to:

$("body").on("mouseup", ".chart-container", function(){
chart = this
Application.modalTimeout = setTimeout(function(){
    $(chart).toggleClass "modalChart";
    $(".chart", chart).highcharts().reflow();
}, 100)
});

and then in the setExtremes event for the xAxis on the chart cancel the setTimeout with:

xAxis: {
  events: {
    setExtremes: function(){
      if (Application.modalTimeout)
      {
         return clearTimeout(vm.Analysis.modalTimeout);
      }
    }
  }
}

    CSS Howto..

    How to make a CSS bar go from right to left?

    How to GPU accelerate CSS transform?

    How to convert simple navigation to include drop down menus? (Specific situation - have tried conversion)

    How can I set a “bounding” area for my drag-able object in javascript?

    How to hide the “body” statement in css and javascript

    How to keep image lumpted with last word in a paragraph

    How to prevent the jump during css transition?

    How to make Text inside Div Unselectable/uncopyable? [closed]

    How to stop FOUC when using css loaded by webpack

    how to draw a shape by using canvas or css? [closed]

    How to use a custom image for cursor/thumb in html input type range

    How come one of my columns in bootstrap is not functioning properly?

    How do I align an absolute position child element in the center of its parent div [duplicate]

    How can i make the picture zoom in with css when my picture is 100% width in a bootstrap column?

    HTML & CSS: How to style an HR tag to have a title embedded in it

    How do I specify XPATH or CSS in Nokogiri to scrape a page's table data?

    How to add css to linked rails imge

    How to center part of a navbar

    How to make bootstrap css input add-on button and error span look good

    JSP/HTML / JS / CSS - How to create a cancel button in form

    Need help determining how to position this element with CSS

    How to align the header menu from left? i see a unexpected margin on left. Help please

    How to implement a version of css?

    How do I apply a CSS class to Html.ActionLink in ASP.NET MVC?

    How to prevent the loading of background image in each page?

    How to snap divs together vertically in CSS like Pinterest have

    How to replicate {cursor: hand; cursor: pointer} in jQuery

    Using flexbox how do I prevent a specific element from inheriting flex layout?

    CSS: How to create a background cutout using elements (not images)?

    Slideshow image with buttons