javascript - How to keep the height and width of a div inside AJAX UpdatePanel -
i'm using library subgurim work google maps. how keep height , width of gmap1 inside ajax updatepanel when partial postback occurs?
default.aspx:
<div id="maincontent" style="width: 100%; height: 90%;"> <div id="content" style="width: 75%; border-left-style: groove; border-width: 1px; overflow: auto; float: left;"> <asp:updatepanel id="updtepnl_map" runat="server" updatemode="conditional"> <contenttemplate> <asp:timer runat="server" id="timer1" ontick="upt_tick" enabled="false"> </asp:timer> <cc1:gmap id="gmap1" runat="server" key="aizasydpnaewjfyzdu1acq_norccj_vnx_nogio" height="100%" width="100%" version="3" language="es" enableserverevents="true" enablerotation="true" onclick="gmap1_click" onmapload="gmap1_mapload" onmoveend="gmap1_moveend" ondragend="gmap1_dragend" /> </contenttemplate> <triggers> <asp:asyncpostbacktrigger controlid="bttn_search" eventname="click" /> <asp:asyncpostbacktrigger controlid="bttn_startrefresh" eventname="click" /> <asp:asyncpostbacktrigger controlid="timer1" eventname="tick" /> <asp:asyncpostbacktrigger controlid="center_map" eventname="click" /> <asp:asyncpostbacktrigger controlid="ckbxlist_adfsa" /> <asp:asyncpostbacktrigger controlid="ckbx_adfsa" /> <asp:asyncpostbacktrigger controlid="ckbx_femsa" /> <asp:asyncpostbacktrigger controlid="ckbxlist_femsa" /> <asp:asyncpostbacktrigger controlid="imgbttn_searchbys" /> <asp:asyncpostbacktrigger controlid="imgbttn_searchbyip" /> </triggers> </asp:updatepanel> </div> <div id="menu" style="width: 25%; border-style:hidden; border-width: 1px; overflow: auto;"> </div> <div id="footer"> adfsa © 2015 </div> </div> this javascript code assign width , height gmap1 in window.onload , window.resize:
var w = window, d = document, e = d.documentelement, g = d.getelementsbytagname('body'), x = w.innerwidth || w.clientwidth || e.clientwidth || g.clientwidth, y = w.innerheight || e.clientheight || g.clientheight; window.onresize = function () { var obj3 = document.getelementbyid('divtop'); var obj1 = document.getelementbyid('general'), footer = document.getelementbyid('footer'), gmap1 = document.getelementbyid('gmap1'), content= document.getelementbyid('content'); y = w.innerheight || e.clientheight || g.clientheight; window.content.style.height = y - (obj3.clientheight + footer.clientheight) + 'px'; window.menu.style.height = y - (obj3.clientheight + footer.clientheight) + 'px'; window.gmap1.style.height = content.clientheight - 20 + 'px'; window.gmap1.style.width = content.clientwidth - 20 + 'px'; window.gmap1.style.margin = 10 + 'px'; } window.onload = function () { var obj3 = document.getelementbyid('divtop'); var obj1 = document.getelementbyid('general'), footer = document.getelementbyid('footer'), gmap1 = document.getelementbyid('gmap1'), content= document.getelementbyid('content'); y = w.innerheight || e.clientheight || g.clientheight; window.content.style.height = y - (obj3.clientheight + footer.clientheight) + 'px'; window.menu.style.height = y - (obj3.clientheight + footer.clientheight) + 'px'; window.gmap1.style.height = content.clientheight - 20 + 'px'; window.gmap1.style.width = content.clientwidth - 20 + 'px'; window.gmap1.style.margin = 10 + 'px'; }
there existing question here talks controls in updatepanels losing subscribed javascript functions on partial postbacks. recommend reading through understand happening here, it's great read several different solutions!
the accepted answer above link shows how rebind events on partial postback in jquery, in case allow set control width , height again. i'm not sure if using jquery though or plain javascript, should @ least provide insight problem.
the easiest way achieve trying start using jquery if aren't already. can use code below bind events initally, re-bind them after partial postback:
$(document).ready(function() { // bind jquery events here }); var prm = sys.webforms.pagerequestmanager.getinstance(); prm.add_endrequest(function() { // re-bind jquery events here }); hope helps!
Comments
Post a Comment