Current location: Hot Scripts Forums » General Web Coding » JavaScript » move text

move text

Reply
  #1 (permalink)  
Old 11-13-09, 03:19 AM
hemi hemi is offline
Newbie Coder
 
Join Date: Aug 2009
Posts: 62
Thanks: 3
Thanked 0 Times in 0 Posts
move text

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
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #2 (permalink)  
Old 11-13-09, 06:47 AM
End User's Avatar
End User End User is offline
Level II Curmudgeon
 
Join Date: Dec 2004
Posts: 3,029
Thanks: 14
Thanked 34 Times in 33 Posts
Quote:
Originally Posted by hemi View Post
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.
__________________
I don't live on the edge, but sometimes I go there to visit.
-------------------------------------------------------------------------
Sanitize Your Data (scroll down)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #3 (permalink)  
Old 11-13-09, 10:54 AM
carters-site's Avatar
carters-site carters-site is offline
Newbie Coder
 
Join Date: Sep 2009
Location: Moline, IL
Posts: 99
Thanks: 2
Thanked 1 Time in 1 Post
Use a javascript library most have methods to move elements around a page pretty with out much code.

jQuery and ExtJs come to mind.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #4 (permalink)  
Old 11-14-09, 10:23 PM
wirehopper's Avatar
wirehopper wirehopper is offline
Community Liaison
 
Join Date: Feb 2006
Posts: 2,326
Thanks: 17
Thanked 92 Times in 90 Posts
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
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #5 (permalink)  
Old 11-15-09, 08:46 PM
End User's Avatar
End User End User is offline
Level II Curmudgeon
 
Join Date: Dec 2004
Posts: 3,029
Thanks: 14
Thanked 34 Times in 33 Posts
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 View Post
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
__________________
I don't live on the edge, but sometimes I go there to visit.
-------------------------------------------------------------------------
Sanitize Your Data (scroll down)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #6 (permalink)  
Old 11-15-09, 11:56 PM
hemi hemi is offline
Newbie Coder
 
Join Date: Aug 2009
Posts: 62
Thanks: 3
Thanked 0 Times in 0 Posts
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'
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
Reply

Bookmarks


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
text box with scroll bar silvermane CSS 7 01-16-09 03:03 AM
div css theighost CSS 11 09-14-08 02:30 AM
Draggable Tables Ares JavaScript 10 08-03-06 06:55 AM
Need Your HelP! Loading Multiple External Text into Multiple Dynamic Text Fields Flash_Boi Flash & ActionScript 2 03-30-06 03:27 PM
picking random entries with a filter... Double selection problem dsumpter PHP 7 11-16-03 07:19 PM


All times are GMT -5. The time now is 01:27 PM.
vBulletin® Copyright ©2000 - 2010, Jelsoft Enterprises Ltd.