jquery ui - Google map Splitter layout -
is there layout http://layout.jquery-dev.net/samples/gispaho/layoutintab.htm suport google map contend use above one. got problem, splitter drag fails on google map.
ref https://stackoverflow.com/questions/15795815/jquery-dragable-fails-over-the-google-map
what tried
<div id="layout" class="sun-layout" style="height: 600px;"> <div class="ui-layout-west sun-layout"> <div class="map1"> </div> </div> <div class="ui-layout-center sun-layout"> <div class="map2"> </div> </div>
in dom ready
var $layout = $("#layout"); $layout.layout({ west__size: 400 });
we had same problem in our application. show invisible div on map on start of resize , hide @ end. div temporarily stop mouse events reaching map. imagine same technique work on other question. long there way hook resize start , resize end events, should effective.
so apply situation alter html such:
<div id="layout" class="sun-layout" style="height: 600px;"> <div class="ui-layout-west sun-layout"> <div class="map-mask"></div> <!-- map mask --> <div class="map1"> </div> </div> <div class="ui-layout-center sun-layout"> <div class="map-mask"></div> <!-- map mask --> <div class="map2"> </div> </div>
then add following events jquery ui layout:
.layout({ ... onresize_start: function(){ $(".map-mask").show(); }, onresize_end: function(){ $(".map-mask").hide(); }, ... })
and css. don't know context sizing map, need tailor this. idea div in z-index higher map , cover completely.
.map-mask{ height:100%; width:100%; position: absolute; z-index: 1000; }
Comments
Post a Comment