move text

hemi · #1 (**permalink**) 11-13-09, 04:19 AM

hi ,

can anyone tell me how to move a text to center of the page that means when i click on any text it should come to center of the page (the text can be left side top of the page or at the bottom of the page no matter whr it is but when it is clicked it should come to center of the page). is it possible, if it is possible plz help me out

End User · #2 (**permalink**) 11-13-09, 07:47 AM

Quote:

Originally Posted by hemi

hi ,

can anyone tell me how to move a text to center of the page that means when i click on any text it should come to center of the page (the text can be left side top of the page or at the bottom of the page no matter whr it is but when it is clicked it should come to center of the page). is it possible, if it is possible plz help me out

Place the text in a div and use an onclick() event to dynamically center the div.

carters-site · #3 (**permalink**) 11-13-09, 11:54 AM

Use a javascript library most have methods to move elements around a page pretty with out much code.

jQuery and ExtJs come to mind.

wirehopper · #4 (**permalink**) 11-14-09, 11:23 PM

HTML Code:

<body id="bd">
<span id="test" onclick="bork(this)" style="position:absolute">Test</span>
<script type="text/javascript">
r=document.getElementById('bd').getClientRects().item(0);
function bork(e)
{
sw=screen.width;
sh=screen.height;
cr=r.right;
cl=r.left;
cw=cr-cl;
ct=r.top;
cb=r.bottom;
ch=cb-ct;
t.style.left=(cw/2-(sw-cw)/2).toString()+"px";
t.style.top=(ch/2-(sh-ch)/2).toString()+"px";
}
</script>

Tested in FF3, IE7

End User · #5 (**permalink**) 11-15-09, 09:46 PM

Lol, either I'm having tremendously bad luck today, or something.... I couldn't get this to work. Is it possible that "t.style.left....." etc should be "e.style.left...."?

If I change "t" to "e" and then click on the word 'Test', it just disappears.

Quote:

Originally Posted by wirehopper

HTML Code:

<body id="bd">
<span id="test" onclick="bork(this)" style="position:absolute">Test</span>
<script type="text/javascript">
r=document.getElementById('bd').getClientRects().item(0);
function bork(e)
{
sw=screen.width;
sh=screen.height;
cr=r.right;
cl=r.left;
cw=cr-cl;
ct=r.top;
cb=r.bottom;
ch=cb-ct;
t.style.left=(cw/2-(sw-cw)/2).toString()+"px";
t.style.top=(ch/2-(sh-ch)/2).toString()+"px";
}
</script>

Tested in FF3, IE7

hemi · #6 (**permalink**) 11-16-09, 12:56 AM

well Mr.Wirehopper thnks for tht post . I done some similar thing but it is giving a satisfactory output but not the exact required output (bellow is the code) in ur code when i click on the test it just goes to the center of the page but in my code it slowly goes to center (not exactly) of the page. it will be great if u suggest me how to do it . Once check my code and can u tell me if it can exactly goes to center of the page
-----------------------------------------------------------------------
<html>
<head>
<title>Moving an Image</title>

<script language="JavaScript">
Hmove=100;
function moveObjRight(obj)
{
obj.style.left=Hmove;

obj.style.top=Hmove;

Hmove+=5;
if(Hmove<350)
window.setTimeout("moveObjRight(" +obj.id+ ");", 0);
}

</script>
<body>

<table border=0 height=600 width=1024><tr><td>
<p><div id=Jt style="z-index: 0; center: 10px; position: absolute; top:50px"
onclick=moveObjRight(this);> <strong>Sachin Tendulkar </strong></div></p>
</td></tr></table>

<script language="JavaScript">

</script>
</p>
</body>
</html>
-------------------------------------------------------------------------
Mr.End User the code is working for me when i put 'e' instead of 't'