Results 1 to 2 of 2

Thread: replacing part of content in same page

  1. #1
    Join Date
    Jun 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default replacing part of content in same page

    I need to replace some content in a web page with new content, without leaving the page.

    When opening the following page, there are two rectangles, one being small and the one large:

    http://www.pinyinology.com/listing/quoteHZ.html

    When clicking the small rectangle in above page, the two rectangles will be replaced by the two in following page:

    http://www.pinyinology.com/listing/quotePY.html

    I understand that the two sets of rectangles may need to be coded in one page. I put them in two different ones in order to present my ideas clearly.

    I know little about javascript. But from my limited knowledge, I know this can be accomplished with javascript. Thanks for your help.

    fuliiopen

  2. #2
    Join Date
    Apr 2009
    Location
    Cognac, France
    Posts
    400
    Thanks
    2
    Thanked 57 Times in 57 Posts

    Default

    Try this code:
    HTML Code:
    <html>
    <head>
    
    <title>Ideographs</title>
    
    <style style='text/css'>
    
    body {margin:50px 80px; background:#ffd; font-size:120%;}
    
    .biaoZhun {cursor:default;}
    
    sup {font-size:75%; color:red; font-weight:600;}
    
    .quote {word-spacing:-1px;}
    
    .words {border:4px blue solid; padding-left:10px; padding-right:10px;}
    
    .goTo {position:relative; left:25px; border:2px red solid; width:150px; padding:4px; margin-bottom:25px;}
    
    #convert {text-decoration:none;}
    
    </style>
    <script>
    function ReplaceContentInContainer(id,content) {
    var container = document.getElementById(id);
    container.innerHTML = content;
    }
    
    function convertwords(id){
    john="<p class='quote'><span class='biaoZhun' title='xin¹'>xin<sup>1</sup> </span></span><span class='biaoZhun' title='zhong¹'>zhong<sup>1</sup> </span></span><span class='biaoZhun' title='guo²'>guo<sup>2</sup> </span></span><span class='biaoZhun' title='zhan⁴'>zhan<sup>4</sup> </span></span><span class='biaoZhun' title='zai⁴'>zai<sup>4</sup> </span></span><span class='biaoZhun' title='ge⁴'>g<sup></sup> </span></span><span class='biaoZhun' title='ren²'>ren<sup>2</sup> </span></span><span class='biaoZhun' title='min²'>min<sup>2</sup> </span>de</span><span class='biaoZhun' title='mian⁴'>mian<sup>4</sup> </span></span><span class='biaoZhun' title='qian²'>kian<sup>2</sup>, </span></span><span class='biaoZhun' title='wo³'>wo<sup>3</sup> </span></span><span class='biaoZhun' title='men²'>men<sup>2</sup> </span></span><span class='biaoZhun' title='ying¹'>ying<sup>1</sup> </span></span><span class='biaoZhun' title='gai¹'>gai<sup>1</sup> </span></span><span class='biaoZhun' title='ying²'>ing<sup>2</sup> </span></span><span class='biaoZhun' title='jie¹'>jie<sup>1</sup> </span></span><span class='biaoZhun' title='ta¹'>ta<sup>2</sup> </span></p><p class='quote'></span><span class='biaoZhun' title='xin¹'>xin<sup>1</sup> </span></span><span class='biaoZhun' title='zhong¹'>zhong<sup>1</sup> </span></span><span class='biaoZhun' title='guo²'>guo<sup>2</sup> </span>(de)</span><span class='biaoZhun' title='hang²'>hange<sup>2</sup> </span></span><span class='biaoZhun' title='chuan²'>chuan<sup>2</sup> </span>de</span><span class='biaoZhun' title='wei²'>wi<sup>2</sup> </span></span><span class='biaoZhun' title='ding³'>ding<sup>3</sup> </span></span><span class='biaoZhun' title='yi³'>yee<sup>3</sup> </span></span><span class='biaoZhun' title='jing¹'>ging<sup>1</sup> </span></span><span class='biaoZhun' title='mao⁴'>mao<sup>4</sup> </span></span><span class='biaoZhun' title='chu¹'>chu<sup>1</sup> </span></span><span class='biaoZhun' title='di⁴'>di<sup>4</sup> </span></span><span class='biaoZhun' title='ping²'>ping<sup>2</sup> </span></span><span class='biaoZhun' title='xian⁴'>xian<sup>4</sup> </span>le,</span><span class='biaoZhun' title='wo³'>wo<sup>3</sup> </span></span><span class='biaoZhun' title='men²'>men<sup>2</sup> </span></span><span class='biaoZhun' title='ying¹'>ying<sup>1</sup> </span></span><span class='biaoZhun' title='gai¹'>gai<sup>1</sup> </span></span><span class='biaoZhun' title='pai¹'>pai<sup>1</sup> </span></span><span class='biaoZhun' title='zhang³'>zhange<sup>3</sup> </span></span><span class='biaoZhun' title='huan¹'>huan<sup>1</sup> </span></span><span class='biaoZhun' title='ying²'>ing<sup>2</sup> </span></span><span class='biaoZhun' title='ta¹'>ta<sup>2</sup> </span>.</span><span class='biaoZhun' title='ju³'> jyu<sup>3</sup> </span></span><span class='biaoZhun' title='qi³'>qi<sup>3</sup> </span></span><span class='biaoZhun' title='ni³'>ni<sup>3</sup> </span>de</span><span class='biaoZhun' title='shuang¹'>shuang<sup>1</sup> </span></span><span class='biaoZhun' title='shou³'>shou<sup>3</sup> </span>ba,</span><span class='biaoZhun' title='xin¹'>xin<sup>1</sup> </span></span><span class='biaoZhun' title='zhong¹'>zhong<sup>1</sup> </span></span><span class='biaoZhun' title='guo²'>guo<sup>2</sup> </span></span><span class='biaoZhun' title='shi⁴'>shi<sup>4</sup> </span></span><span class='biaoZhun' title='wo³'>wo<sup>3</sup> </span></span><span class='biaoZhun' title='men²'>men<sup>2</sup> </span>de.</p>";
    
    ReplaceContentInContainer(id,john);
    
    }
    </script>
    </head>
    
    <body>
    <h1>Converting Ideographs to Romanization</h1>
    
    <p>
    &lt;discussion is here. &gt;
    
    </p>
    
    <p>
    <b>Note:</b> When clicking the following 'Convert to PinYin',  ideograhs in the big rectangle are supposed to be replaced by some alphabetic writing. But now it goes to another page.
    </p>
    
    <div class='goTo'>
    <button onclick="convertwords('test')" value="Convert to PinYin">Convert to PinYin</button>
    </div>
    
    <div class='words' id="test">
    <p>
     
      新中国站在每个人民的面前,我们应该迎接它。
    </p>
    
    <p> 
      新中国航船的桅顶已经冒出地平线了,我们应该拍掌欢迎它。 
    举起你的双手吧,新中国是我们的。
    </p>
    </div>
    
    <p>
    &lt;discussion is here. &gt;
    
    </p>
    
    </body>
    </html>

Bookmarks

Posting Permissions

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