Jugal | Handling chart container click event | Highchart & Highstock

http://stackoverflow.com/questions/13730027/body-click-issue-with-highchart-library/13730987#13730987 Jugal Thakkar http://jugal.me/

by limd

HTML

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js" ></script>
<script type="text/javascript" src="http://code.jugal.me/js/jugalsLib.js" ></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/highstock.src.js" ></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/modules/exporting.src.js" ></script>
<div class="popup">popup</div>
<div class="popupBox">box</div>
<div id="container"></div>

CSS

#container{
    min-width:500px;
}

.popup{height:20px; width:100px; background:#999; border:1px solid #888; color:#fff;}
.popupBox{border:1px solid #888;position:absolute; top:20px; left:0px; height:100px; width:100px; background:#ddd; display:none; z-index:99; }
body{background:#000;}

JavaScript

var chartingOptions = {};

chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);
var chart = new Highcharts.StockChart(chartingOptions);

$("body").click(function() {
    $(".popupBox").hide();
});
$(".popup").click(function(e) {
    e.stopPropagation();
    $(".popupBox").toggle();
});
$("#container").mousedown(function() {
    $(".popupBox").toggle();
});