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

Popular posts from this blog

monitor web browser programmatically in Android? -

Shrink a YouTube video to responsive width -

wpf - PdfWriter.GetInstance throws System.NullReferenceException -