473,395 Members | 1,978 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,395 software developers and data experts.

move div tag with javascript

130 100+
hello ppl - long time....

i was wondring how i can get the position of a <div> tag,
i want to move it to the left or right on a press of a button

please help
thanks
Sep 3 '08 #1
3 2475
Dormilich
8,658 Expert Mod 8TB
You can accomplish that by changing the CSS properties (good candidates are: position, left, right, top, bottom, padding and margin). An element's CSS property is accessible via [element].style.[cssProperty].

regards
Sep 3 '08 #2
Amzul
130 100+
thanks man for your fast reply and sorry for my late one :(

still thats not working for me
here is what i done:

file.cs:
Expand|Select|Wrap|Line Numbers
  1. div{
  2.     background:#999999;
  3.     width:200px;
  4.     height:100px;
  5. }
  6. div.test{
  7.     left:100px;
  8. }
javascript function:
Expand|Select|Wrap|Line Numbers
  1. function Find(x){
  2.     //alert(document.getElementById(x).style.position);
  3.     pos = document.getElementById(x).style.position;
  4.     document.getElementById(x).style.position = pos + 150;
  5. }
thats my main page:
[HTML]<body>
<div id="mydiv" class="test">
text.text.text.text.text.text.text<br />
<a href="#" onClick="Find('mydiv');">move</a></div>
</body>[/HTML]

what am i doing wornge here :\
thanks
Sep 10 '08 #3
Dormilich
8,658 Expert Mod 8TB
Expand|Select|Wrap|Line Numbers
  1. function Find(x){
  2.     //alert(document.getElementById(x).style.position);
  3.     pos = document.getElementById(x).style.position;
  4.     document.getElementById(x).style.position = pos + 150;
  5. }
what am i doing wornge here :\
thanks
I think you mixed position with (say) left. values for element.style.position are: absolute, relative, static, fixed. you probably meant element.style.left. and you forgot the 'px'.

note: Trying myself (FF 3.01/Mac OS 10.4.11) I had no problems setting the element's style this way, but I could get the settings only through:
Expand|Select|Wrap|Line Numbers
  1. var elem = document.getElementById("_elem_id_");
  2. var cs = window.getComputedStyle(elem, null);
  3. var val = cs.left; // only works for absolute values (i.e. no em, ex, %)
dunno how it is with IE
FF/Opera can also use the methods getPropertyValue() / getPropertyCSSValue() (DOM level 2 - style)

regards
Sep 10 '08 #4

Sign in to post your reply or Sign up for a free account.

Similar topics

1
by: Harald Weiser | last post by:
Good morning everybody. I would like to know if it is possible to move the mousepointer to another location with Javascript? For example Mouse.jumpTo(x,y) THX Harry
8
by: moondaddy | last post by:
Is there a way to make the browser move back to the previous page via code behind on the server? The effect would be the same as the user clicking on the browser's back button. Thanks. --...
10
by: Robert | last post by:
I have an app that was originally 1.1, now migrated to 2.0 and have run into some sporadic viewstate errors...usually saying the viewstate is invalid, eventvalidation failed or mac error. My web...
1
by: Stefan Mueller | last post by:
With the following code I can change the mouse pointer. However, if you click in Mozilla (with IE it works perfect) on 'Show hourglass' the mouse pointer changes only if you move the mouse at least...
1
by: hitsmly | last post by:
Hi All! I used the following code to move a <div> in IE browser to the position of the mouse when I click on a link +div tag is: <div id=fm style="position:absolute; width:100px; height:100px;...
1
by: Ian Davies | last post by:
I am trying to move some text by clicking a button. When clicked the button runs the java script and this will then take the value in the text field and add 10 to it to create a new value, this is...
5
by: David | last post by:
Is there an effecient way to move an array entry up or down in the array? For example. Say you have an array of 5 entries. They are all strings by the way. myArray =...
2
by: Graham Charles | last post by:
I'm trying to move a DIV element to before one of its siblings using a javascript function. This works fine on most browsers: function putdivbefore(divtomove, divtarget) { var mydiv1 =...
5
by: DL | last post by:
Hi, My research on this NG hasn't produced a satisfactory answer. Here's what I want to do: move two div (s) (each has an image tag within) to another location on the same page. // no...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.