javascript - jquery resizable not working after page load -
javascript - jquery resizable not working after page load -
i have page stores document's body html in localstorage. when page reloads should (and does) set content same place before reload. i'm able drag,sort, , resize until refresh page. after drag , sort go on work, resize fails.
i figured out myself without help negative voters. problem how jquery's resizable stored.i had remove added elements on page reload.
edit
there functionality problem appended tags (created resizable). next saved localstorage body's html:
<header> <div id="pgtitle">how much in day?</div> <div id="login">bob</div> <div id="urname"> <div>what name?</div> <input id="name"> <button type="button" id="button">submit</button> </div> </header> <div id="greeting"></div> <br> <div style="position: relative; left: 162px; top: 28px;" class="drag ui-draggable"> <div class="header"> <span style="color:white;">quicklinks </span> <span style="color:white;width:10px" id="minmin" class="min">(x)</span> </div> <div style="width: 577px; height: 312px;" id="mymenu" class="ui-widget-content ui-resizable"> <button id="add">add</button> <button id="remove">remove</button> <br><br> <div id="addmenu" style="position:absolute;"> <input id="itemname" placeholder="enter name here" autocomplete="off"> <input id="itemlink" placeholder="enter hyperlink here" autocomplete="off"> <button id="itemsubmit">submit</button> </div> <div id="rmmenu" style="position:absolute;"> <input id="rmitemname" placeholder="item name" autocomplete="off"> <button id="rmitemsubmit">submit</button> </div> <div class="ui-sortable" id="mylinks"></div> <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"></div> <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"></div> <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div> <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"></div> <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"></div> <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div> </div> </div> <div id="mynextmenu"></div> so problem next saved section don't know why breaks things or why there:
<div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"></div> <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"></div> <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div> <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"></div> <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"></div> <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div> below set when encountered problem:
here snippet of jquery code:
$(function() { if ( localstorage.mypage ) { $("body").html(localstorage.mypage); } $(".drag").draggable({ handle:'.header'}) $("#mymenu").resizable(); $( "#mylinks" ).sortable(); $( "#mylinks" ).disableselection(); setinterval(function(){ var mypage = $('body').html(); localstorage.mypage = mypage },1000); }); here snippet of body well:
<body> <div class="drag"> <div class="header"> <span style="color:white;">quicklinks </span> <span style="color:white;width:10px" id="minmin" class="min">(x)</span> </div> <div id="mymenu" class="ui-widget-content"> <div id="mylinks"></div> </div> </div> </body> here whole thing:
<!doctype html> <html> <head> <title>in day</title> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <style> html, body { margin:0px; } header { position:absolute; top:0px; left:0px; background: -moz-linear-gradient(#457995,#1c4961); color:white; height:30px; width:100%; } #pgtitle { position:absolute; top: 3px; left:20px; } #login { position:absolute; top: 3px; right:30px; } #urname { position:absolute; padding:10px; display: none; top: 30px; right:0px; width: 230px; height: 60px; background:#1c4961; color: white; } #greeting { margin:0; margin-top:30px; text-align: center; background: #1c4961; color: white; } #mymenu { padding:10px; width: 250px; background: #457995; min-height: 20px; } #addmenu { display: none; } #rmmenu { display: none; } #mylinks div { margin:3px; } .menuitems { background:lightgray;border:1px outset white; } .header { width:100px;background:#1c4961;height:20px;margin:0px; } </style> <script> $(function() { //check if cached page info , load if if ( localstorage.mypage ) { $("body").html(localstorage.mypage); } //$("#mylinks").html(localstorage.mylinks); //localstorage.removeitem("mypage"); //toggle login name , allow alter if needed $("#login").click(function() { $("#urname").toggle(); }); var xman = $("#login").text() if ( localstorage.myname ) { $("#login").text(localstorage.myname); } else { $("#login").text("login"); } //greeting new user $("#button").click(function() { var truname = $("#name").val() $("#greeting").text("hello " + truname + " welcome site!!"); $("#login").text(truname); $("#name").val("") $("#urname").hide(); localstorage.myname = truname }); //save links info $("#itemsubmit").click(function() { var itemname = $("#itemname").val() var itemlink = $("#itemlink").val() $("#mylinks").append("<div id='" + itemname + "' class='menuitems'><a href='" + itemlink + "' target='_blank'>" + itemname + "</a></div>"); var mylinks = $("#mylinks").html() localstorage.mylinks = mylinks $("#addmenu").hide() }); $("#add").click(function() { $("#addmenu").toggle(); $("#rmmenu").hide() }); $("#remove").click(function() { $("#rmmenu").toggle(); $("#addmenu").hide() }); $("#rmitemsubmit").click(function() { var rmitm = "#" + $("#rmitemname").val() $(rmitm).remove() $("#rmmenu").hide() var mylinks = $("#mylinks").html() localstorage.mylinks = mylinks }); $(".drag").draggable({ handle:'.header'}) // settimeout(function() { $("#mymenu").resizable(); //},2000); $( "#mylinks" ).sortable(); $( "#mylinks" ).disableselection(); $(".min").click(function() { $(this).parents().find('#mymenu').slidetoggle(); }); setinterval(function(){ var mypage = $('body').html(); localstorage.mypage = mypage },1000); }); </script> </head> <body> <header> <div id="pgtitle">how much in day?</div> <div id="login"></div> <div id="urname"> <div>what name?</div> <input id="name"> <button type="button" id="button">submit</button> </div> </header> <div id="greeting"></div> <br> <div class="drag"> <div class="header"> <span style="color:white;">quicklinks </span> <span style="color:white;width:10px" id="minmin" class="min">(x)</span> </div> <div id="mymenu" class="ui-widget-content"> <button id="add">add</button> <button id="remove">remove</button> <br><br> <div id="addmenu" style="position:absolute;"> <input id="itemname" placeholder="enter name here" autocomplete="off"> <input id="itemlink" placeholder="enter hyperlink here" autocomplete="off"> <button id="itemsubmit">submit</button> </div> <div id="rmmenu" style="position:absolute;"> <input id="rmitemname" placeholder="item name" autocomplete="off"> <button id="rmitemsubmit">submit</button> </div> <div id="mylinks"></div> </div> </div> <div id="mynextmenu"></div> </body> </html>
i assume code @ top of snippet within <script> tag?
try moving script downwards bottom of page, after drag div. way, jquery finds them after they're written.
try wrapping follows, wait dom ready:
if ( localstorage.mypage ) { $("body").html(localstorage.mypage); } // outside function wrapper. have inside. $(function () { // wait domready $(".drag").draggable({ handle:'.header'}) $("#mymenu").resizable(); $("#mylinks").sortable().disableselection(); setinterval(function(){ var mypage = $('body').html(); localstorage.mypage = mypage; },1000); }); javascript jquery html html5 jquery-ui
Comments
Post a Comment