so simple!! whats wrong?

**korbbit** · 06-19-2012 12:50 AM

i just need access to a divs css "left" property.. thats all, i just want to dynamically control its horizontal position.. why doesnt this work?:

var moveMe = document.getElementById("divToMove");

function moveDiv()
{
moveMe.style.left = "300px";
}

this is a simplication of my real code.
Ive got it so a rollover correctly triggers the moveDiv function..
im so confused and i have a deadline... i havent used js for css manipulation before, google keeps telling me to use the farken getElementById thing and refer to css properties by object.style.cssporoperty, but it doesnt work!!!!!!

**kromol** · 06-19-2012 01:42 AM

Does it give you any errors?

**Ayşe** · 06-19-2012 03:59 AM

I am trying this. I clicked the div, ....

Code:

  
<html>
<head>
<style type="text/css">
#divToMove { position:absolute; width:100px; height:100px; color:red; background:gold;}
</style>

<script type="text/javascript">

function moveDiv()
{
var moveMe = document.getElementById("divToMove");
moveMe.style.left = "300px";
}

</script>
</head>
<body>
<div id="divToMove" onclick="moveDiv()">hareketli</div>
</body>
</html>

If I don't write
position:absolute;
my code is not working.

If I write
var moveMe = document.getElementById("divToMove");
before
function moveDiv()
{

Error console tell me "moveMe is null"

If I use this code:

Code:

 
<html>
<head>
<style type="text/css">
#divToMove { position:absolute; width:100px; height:100px; color:red; background:gold;}
</style>
</head>
<body>
<div id="divToMove" onclick="moveDiv()">hareketli</div>

<script type="text/javascript">

var moveMe = document.getElementById("divToMove");
function moveDiv()
{

moveMe.style.left = "300px";
}

</script>
</body>
</html>

Error console don't tell me "moveMe is null"

**bsmbahamas** · 06-20-2012 02:07 PM

it's mandatory that you use position:absolute or position:relative before you can move the elements around the page. you can declare it in the css, or you can dynamically change it using javascript, you should also declare your functions at the end of your page above </body> instead of in the head in most cases:

function moveDiv()
{
moveMe.style.position = "absolute";
moveMe.style.left = "300px";
}

**bsmbahamas** · 06-20-2012 02:12 PM

by the way both versions of your code worked for me, this is a 3rd version,
i moved the position absolute/relative from within the css code, and use javascript
to set the position property dynamically from within the function, you can do it dynamically
in case you don't know which elements will be moved in advance, or in case you just
don't want to add it to every element in css, as javascript can apply it only when needed
instead of hardcoding it everywhere to keep the file size down, although you can apply
it to multiple elements at the same time with css too

<html>
<head>
<style type="text/css">
#divToMove { width:100px; height:100px; color:red; background:gold;}
</style>

<script type="text/javascript">

function moveDiv()
{
var moveMe = document.getElementById("divToMove");
moveMe.style.position = "absolute";
moveMe.style.left = "300px";
}

</script>
</head>
<body>
<div id="divToMove" onclick="moveDiv()">hareketli</div>
</body>
</html>

**bsmbahamas** · 06-20-2012 02:20 PM

you can also chain them together like this:

function moveDiv()
{
document.getElementById("divToMove").style.left = "300px";
}

instead of this way:

function moveDiv()
{
var moveMe = document.getElementById("divToMove");
moveMe.style.left = "300px";
}

unless you need to refer to the moveMe variable again in the future

**Ayşe** · 06-20-2012 04:38 PM

bsmbahamas,
Thanks for your time and suggestions

bilgi notu: kod böyle de çalıştı
#divToMove { position:relative;
böyle de
moveMe.style.position = "relative";

Thread: so simple!! whats wrong?

Thread Tools

Display

so simple!! whats wrong?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions