/    Sign up×
Community /Pin to ProfileBookmark

so simple!! whats wrong?

Copy linkTweet thisAlerts:
Jun 19.2012

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!!!!!!

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@kromolJun 19.2012 — Does it give you any errors?
Copy linkTweet thisAlerts:
@Ay__351_eJun 19.2012 — I am trying this. I clicked the div, ....
<br/>
&lt;html&gt;
&lt;head&gt;
&lt;style type="text/css"&gt;
#divToMove { position:absolute; width:100px; height:100px; color:red; background:gold;}
&lt;/style&gt;

&lt;script type="text/javascript"&gt;

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

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="divToMove" onclick="moveDiv()"&gt;hareketli&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;


If I don't write

[COLOR="Red"]position:absolute;[/COLOR]

my code is not working.

If I write

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

before

function moveDiv()

{

Error console tell me "[COLOR="Red"]moveMe is null[/COLOR]"

If I use this code:

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

&lt;script type="text/javascript"&gt;

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

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

&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Error console don't tell me "moveMe is null"
Copy linkTweet thisAlerts:
@bsmbahamasJun 20.2012 — 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";

}
Copy linkTweet thisAlerts:
@bsmbahamasJun 20.2012 — 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>
Copy linkTweet thisAlerts:
@bsmbahamasJun 20.2012 — 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
Copy linkTweet thisAlerts:
@Ay__351_eJun 20.2012 — bsmbahamas,

Thanks for your time and suggestions

bilgi notu: kod b&#246;yle de &#231;al&#305;&#351;t&#305;

#divToMove { position:relative;

b&#246;yle de

moveMe.style.position = "relative";
×

Success!

Help @korbbit spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.1,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...