Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem Toggling content of div tags

    I'm building a translation website and need to be able to toggle the content of div tags to show how a paragraph looks in each language.

    I have used the following code, which works fine:

    Code:
    <script type="text/javascript">
    function makeTxt(id,txt){
    var obj = document.getElementById(id);
    obj.firstChild?obj.firstChild.data=txt:obj.appendChild(document.createTextNode(txt))
    }
    </script> 
    
    <a onclick="makeTxt('id1','text 1 text 1 text 1 text 1 text 1 text 1 text 1 text 1 text 1')"><img src="image.jpg">
    <div id="id1">text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2 </div>
    What i'd like to do is to have a "restore" button which restores the content to what it was originally.

    Any ideas?
    Last edited by dannyvince; 07-04-2007 at 10:28 PM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function zxcCngTxt(zxcid,zxctxt){
     zxcp=document.getElementById(zxcid);
     zxcdivs=zxcp.getElementsByTagName('DIV')
     if (zxcdivs.length==0){
      zxcES(zxcp.cloneNode(true),{position:'absolute',zIndex:'2',left:'0px',top:'0px',border:'solid black 0px'},zxcp);
      zxcES(zxcp.cloneNode(false),{position:'absolute',left:'0px',top:'0px',border:'solid black 0px'},zxcp);
     }
     zxcNoTxtNodes(zxcdivs[1]);
     zxcES(zxcdivs[1],{zIndex:(zxctxt)?'3':'1'},null,zxctxt||'');
    }
    
    function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
     if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
     for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
     if (zxcp){ zxcp.appendChild(zxcele); }
     if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
     return zxcele;
    }
    
    function zxcNoTxtNodes(zxcp){
     var zxcclds=zxcp.childNodes,zxcary=[];
     for (var zxca=0;zxca<zxcclds.length;zxca++){ if (zxcclds[zxca].nodeType!=1) zxcary.push(zxcclds[zxca]); }
     for (var zxcb=0;zxcb<zxcary.length;zxcb++){ zxcp.removeChild(zxcary[zxcb]); }
     return zxcclds;
    }
    /*]]>*/
    </script></head>
    
    <body>
    <input type="button" value="Cng Text 1" onclick="zxcCngTxt('m1','More Text');"/>
    <input type="button" value="Cng Text 2" onclick="zxcCngTxt('m1','Even More Text');"/>
    <input type="button" value="Original" onclick="zxcCngTxt('m1');"/>
    <div id="m1" style="position:relative;width:100px;height:100px;background-Color:#FFFFCC;border:solid black 1px;" >
    some Text</div>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is there a function to simply restore the original conents? That works when an image is clicked?


  •  

    Posting Permissions

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