PDA

View Full Version : replacing part of content in same page



fuliopen
06-15-2009, 09:51 PM
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

forum_amnesiac
06-16-2009, 06:33 AM
Try this 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>