www.webdeveloper.com
Results 1 to 7 of 7

Thread: div html revert

  1. #1
    Join Date
    Apr 2012
    Posts
    111

    Question div html revert

    I am wondering how to retrieve the orignial source code of a div if I've used

    Code:
    .html(something);
    So let's say I set it to "some code here". and before i changed it, it was a form. is there any way to revert back to the original?

  2. #2
    Join Date
    Feb 2012
    Location
    Bokaro Steel City (Jharkhand), India!
    Posts
    194
    Sorry! But your question is not clear to me!

    Please provide some code to deal with.

  3. #3
    Join Date
    Apr 2012
    Posts
    111
    If I change the html of a div, and then I want to revert it back to the original html in the div, how do I do that?

  4. #4
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    Quote Originally Posted by droidus View Post
    If I change the html of a div, and then I want to revert it back to the original html in the div, how do I do that?
    Store the original before you change it.

  5. #5
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,653
    Quote Originally Posted by svidgen View Post
    Store the original before you change it.
    here's an example:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>...</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <style type="text/css">
    body{text-align:center;font-family:Verdana,Arial;font-size:13px;background-color:#fff;color:#000;padding-top:100px;}
    a:link,a:active,a:visited{color:#000;background-color:transparent;font-weight:bold;letter-spacing:1px;text-decoration:none;}
    a:hover{color:Crimson;background-color:transparent;font-weight:bold;letter-spacing:1px;text-decoration:none;}
    #dyn{margin:30px}
    #content{color:Crimson;font-weight:bold;}
    .inl{display:inline-block;margin-left:10px;margin-right:10px;}
    .inl b{color:#777;font-size:11px;}
    </style>
    <script type="text/javascript">
    var storage=[];
    function showHtml(){
    $('#content').val($('#dyn').html());
    if(storage.length==0){$('#what_is_stored').html('nothing is stored yet');}
    else{
    var str='';
    for(var i=0;i<storage.length;i++){str+='<span style="color:Salmon">'+storage[i]+'</span>&nbsp;&nbsp;&nbsp;<a href="#null" onclick="restoreHtml('+i+')">Restore this</a><br />';}
    $('#what_is_stored').html(str);
    }
    }
    function changeHtml(){
    if($('#newcontent').val()!=''){
    if(storage.length==0){storage.push($('#dyn').html());}
    $('#dyn').html($('#newcontent').val());
    storage.push($('#dyn').html());
    showHtml();
    }
    }
    function restoreHtml(){
    var n=(typeof(restoreHtml.arguments[0])=='undefined')? 0 : restoreHtml.arguments[0];
    $('#dyn').html(storage[n]);
    showHtml();
    }
    $(document).ready(function(){
    showHtml();
    });
    </script>
    </head>
    <body>
    <div id="dyn"><b>this</b> <span>is</span> <i>the target div</i> <u>having <s>various html</s> in it</u></div>
    <div class="inl"><textarea id="content" readonly="readonly" cols="50" rows="5"></textarea><br /><br /><b>Here we can see inner html of the target div</b></div>
    <div class="inl"><textarea id="newcontent" cols="50" rows="5"></textarea><br /><br /><b>Here we can input new html and <a href="#null" onclick="changeHtml()">Change</a> the target div or <a href="#null" onclick="restoreHtml()">Restore</a> it</b></div>
    <br /><br />
    <div><b>Here we can see the stored html's</b><br /><br /><div id="what_is_stored"></div></div>
    </body>
    </html>

  6. #6
    Join Date
    Apr 2012
    Posts
    111
    Is it better to just fade out the div, and then show a new div, instead of overwriting the main div?

  7. #7
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    That works too. When you "store" the old info, it doesn't necessarily have to be the innerHTML. You can store the entire node, which will maintain any dynamically added javascript hooks, and just replace the node in the DOM with a new one.

    Use http://www.w3schools.com/jsref/met_n...placechild.asp ... or some jqueryish fade if you prefer.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles