title: jquery resizable not working after page load
body: <p>I have a page that stores the document's body html in localStorage. When the page reloads it should (and does) put the content the same place it was before the reload. I'm able to drag,sort, and resize until I refresh the page. After that drag and sort continue to work, but resize fails.</p>
  
  <p><strong>I figured it out myself without any help from those negative voters. The problem was with how jquery's resizable was stored.I had to remove the added elements on page reload.</strong></p>
  
  <hr>
  
  <p><strong>EDIT</strong> </p>
  
  <p>There is a functionality problem with the appended tags (created by resizable). The following is what is saved to the localstorage as the body's html:</p>
  
  <pre><code>&lt;header&gt;
    &lt;div id="pgtitle"&gt;How much in a day?&lt;/div&gt;
    &lt;div id="login"&gt;Bob&lt;/div&gt;
    &lt;div id="urname"&gt; 
      &lt;div&gt;What is your name?&lt;/div&gt;
      &lt;input id="name"&gt;
      &lt;button type="button" id="button"&gt;Submit&lt;/button&gt;
    &lt;/div&gt; 
  &lt;/header&gt;
  
  &lt;div id="greeting"&gt;&lt;/div&gt;
  &lt;br&gt;
  &lt;div style="position: relative; left: 162px; top: 28px;" class="drag ui-draggable"&gt;
    &lt;div class="header"&gt;
      &lt;span style="color:white;"&gt;Quicklinks &lt;/span&gt;
      &lt;span style="color:white;width:10px" id="minmin" class="min"&gt;(X)&lt;/span&gt;
    &lt;/div&gt;
  
  &lt;div style="width: 577px; height: 312px;" id="mymenu" class="ui-widget-content ui-resizable"&gt;
    &lt;button id="add"&gt;Add&lt;/button&gt;
    &lt;button id="remove"&gt;Remove&lt;/button&gt;
    &lt;br&gt;&lt;br&gt;
  
    &lt;div id="addmenu" style="position:absolute;"&gt;
      &lt;input id="itemname" placeholder="Enter name here" autocomplete="off"&gt;
      &lt;input id="itemlink" placeholder="Enter hyperlink here" autocomplete="off"&gt;
      &lt;button id="itemsubmit"&gt;Submit&lt;/button&gt;
    &lt;/div&gt;
  
    &lt;div id="rmmenu" style="position:absolute;"&gt;
      &lt;input id="rmitemname" placeholder="Item name" autocomplete="off"&gt;
      &lt;button id="rmitemsubmit"&gt;Submit&lt;/button&gt;
    &lt;/div&gt;
  
    &lt;div class="ui-sortable" id="mylinks"&gt;&lt;/div&gt;
    &lt;div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"&gt;&lt;/div&gt;
    &lt;div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"&gt;&lt;/div&gt;
    &lt;div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"&gt;&lt;/div&gt;
    &lt;div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"&gt;&lt;/div&gt;
    &lt;div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"&gt;&lt;/div&gt;
    &lt;div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"&gt;&lt;/div&gt;
  
  &lt;/div&gt; 
  &lt;/div&gt; 
  &lt;div id="mynextmenu"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>So the problem is the following saved section but I don't know why it breaks things or why it is even there:</p>
  
  <pre><code>&lt;div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"&gt;&lt;/div&gt;
        &lt;div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"&gt;&lt;/div&gt;
        &lt;div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"&gt;&lt;/div&gt;
        &lt;div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"&gt;&lt;/div&gt;
        &lt;div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"&gt;&lt;/div&gt;
        &lt;div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"&gt;&lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>Below is what I originally put when I encountered the problem:</strong></p>
  
  <p>Here is a snippet of the jquery code:</p>
  
  <pre><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);
    });
  </code></pre>
  
  <p>Here is a snippet of the body as well:</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div class="drag"&gt;
    &lt;div class="header"&gt;
      &lt;span style="color:white;"&gt;Quicklinks  &lt;/span&gt;
      &lt;span style="color:white;width:10px" id="minmin" class="min"&gt;(X)&lt;/span&gt;
    &lt;/div&gt;
    &lt;div id="mymenu" class="ui-widget-content"&gt;
      &lt;div id="mylinks"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>Here is the whole thing: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;In a day&lt;/title&gt;
  &lt;script src="http://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;style&gt;
  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; }
  &lt;/style&gt;
  
  &lt;script&gt;
  
  $(function() {
  
    //check if cached page info and load if so
    if ( localStorage.mypage ) { $("body").html(localStorage.mypage); }
    //$("#mylinks").html(localStorage.mylinks);
    //localStorage.removeItem("mypage");
  
    //toggle login name and let change if needed
    $("#login").click(function() { $("#urname").toggle(); });
    var xman = $("#login").text()
    if ( localStorage.myname ) { 
      $("#login").text(localStorage.myname);
    }
    else { $("#login").text("Login"); }
  
    //Greeting for new user
    $("#button").click(function() {
    var truname = $("#name").val()
    $("#greeting").text("Hello " + truname + " Welcome to my 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("&lt;div id='" + itemname + "' class='menuitems'&gt;&lt;a href='" + itemlink + "' target='_blank'&gt;" + itemname + "&lt;/a&gt;&lt;/div&gt;");
    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);
  
  });
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;header&gt;
  &lt;div id="pgtitle"&gt;How much in a day?&lt;/div&gt;
  &lt;div id="login"&gt;&lt;/div&gt;
  
  &lt;div id="urname"&gt;
  &lt;div&gt;What is your name?&lt;/div&gt;
  &lt;input id="name"&gt;
  &lt;button type="button" id="button"&gt;Submit&lt;/button&gt;
  &lt;/div&gt;
  &lt;/header&gt;
  
  &lt;div id="greeting"&gt;&lt;/div&gt;
  &lt;br&gt;
  &lt;div class="drag"&gt;
  &lt;div class="header"&gt;
    &lt;span style="color:white;"&gt;Quicklinks  &lt;/span&gt;
    &lt;span style="color:white;width:10px" id="minmin" class="min"&gt;(X)&lt;/span&gt;
  &lt;/div&gt;
  &lt;div id="mymenu" class="ui-widget-content"&gt;
  &lt;button id="add"&gt;Add&lt;/button&gt;
  &lt;button id="remove"&gt;Remove&lt;/button&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;div id="addmenu" style="position:absolute;"&gt;
  &lt;input id="itemname" placeholder="Enter name here" autocomplete="off"&gt;
  &lt;input id="itemlink" placeholder="Enter hyperlink here" autocomplete="off"&gt;
  &lt;button id="itemsubmit"&gt;Submit&lt;/button&gt;
  &lt;/div&gt;
  &lt;div id="rmmenu" style="position:absolute;"&gt;
  &lt;input id="rmitemname" placeholder="Item name" autocomplete="off"&gt;
  &lt;button id="rmitemsubmit"&gt;Submit&lt;/button&gt;
  &lt;/div&gt;
  &lt;div id="mylinks"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="mynextmenu"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>