Archive for February, 2012

Published by Pui-chor on 28 Feb 2012

Editable DIV

To make a DIV editable instead of using <textarea>, here is how:

<div id=’context’ onclick=”this.contentEditable=’true’;this.innerHTML=”;”></div>

Published by Pui-chor on 28 Feb 2012

Moving a DIV box

Here is a script to move a DIV using javascript to change the CSS:

var stateup=0; function DivContentDown(d) { var obj = document.getElementById(d); if(stateup==0){ = "absolute"; = '200px';'50%';'-370px'; stateup=1; } else{ = "relative"; = '10px'; = '0px';'0px'; stateup=0; } }

Published by Pui-chor on 08 Feb 2012

CSS DIV box horizontally centered

My cantonese tableinput version came across the problem of centering the DIV box for the output. I would like to have a button when clicked will move the output DIV from the very bottome to the middle of the screen when the table is shown with the top part. I tried several ways, setting the position to absolute, relative with various top and left setting and did not work. As the screen size varies for different monitor, it is a tough one. I managed to find one here, idea is from one of the site in internet:

function ContentDown(d)
var obj = document.getElementById(d);
if(stateup==’up’){ = “absolute”; = ‘200px’;’50%’;’-370px’;
else{ = “relative”; = ‘10px’; = ‘0px’;’0px’;
So when the event happens to move the Content, the position is changed to absolute and setting the top and left with the marginLeft, the DIV will be centered and the value is calculated for the left 50% and the marginLeft is half of the DIV size which is 740px and setting it to -370px will make the DIV horizonally centered.

You can check it out at: