www.webdeveloper.com
Results 1 to 7 of 7

Thread: div html revert

  1. #1
    Join Date
    Apr 2012
    Posts
    110

    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.
    "It will never rain roses: when we want to have more roses, we must plant more roses." - George Eliot

  3. #3
    Join Date
    Apr 2012
    Posts
    110
    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.
    Jon Wire

    thepointless.com | rounded corner generator

    I agree with Apple. Flash is just terrible.

    Use CODE tags!

  5. #5
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    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>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  6. #6
    Join Date
    Apr 2012
    Posts
    110
    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.
    Jon Wire

    thepointless.com | rounded corner generator

    I agree with Apple. Flash is just terrible.

    Use CODE tags!

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