[RESOLVED] Problem with DOM styling

@konfjuusdJan 30.2008

Hey,

I’ve got to bother yous with another question. This one does’nt make much sense to me.

Trying to style an elements top and left values with DOM. this works in Opera:

[CODE]document.getElementById(dragId).style=”left:”+posx+”px;top:”+posy+”px;” [/CODE]

This works in Firefox(I was told in another thread that this the way to go!?):

[CODE]document.getElementById(dragId).style.top = posy+”px;”; document.getElementById(dragId).style.left = posx+”px;”;[/CODE]

and this does NOT work at all:

[CODE]document.getElementById(dragId).setAttribute(“top”,posy+”px;”); document.getElementById(dragId).setAttribute(“left”,posx+”px;”)[/CODE]

How is the right way to do this??

Thanks

/Konfjuusd

to post a comment

JavaScript

6 Comments(s) _↴

@toicontienJan 30.2008 — #The second code example is the way to go.

@konfjuusdauthorJan 30.2008 — #Yeah, tell that to Opera and IE ? Does it usually works crossbrowserway that way? Could there be something else in my code causing the errors.

Better post it too. Here goes: :o

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Untitled Document</title>
 <style type="text/css">
 #brownDiv{
 width:100px;
 height:100px;
 position:absolute;
 left:100px;
 top:100px;
 background:brown;
 border:1px solid black;
 }
 #orangeDiv{
 width:100px;
 height:100px;
 position:absolute;
 left:300px;
 top:100px;
 background:orange;
 border:1px solid black;
 }
 #greenDiv{
 width:100px;
 height:100px;
 position:absolute;
 left:500px;
 top:100px;
 background:green;
 border:1px solid black;
 }
 </style>
 <script type="text/javascript">
 var dragId = "";
 function action(e){
 // ================================================
 // Kollar vilket element som &#228;r aktuellt. targ.id
 // ger elementets id
 // ================================================
 var targ;
 if (!e) var e = window.event;
 if (e.target) targ = e.target;
 else if (e.srcElement) targ = e.srcElement;
 if (targ.nodeType == 3) // defeat Safari bug
 targ = targ.parentNode;
 // ================================================
 // Kollar om elementet &#228;r dragbart. Om det &#228;r det 
 // s&#229; &#228;ndras den globala variabeln "dragId" till 
 // elementets id och m&#246;jligg&#246;r funktionen doDrag
 // ================================================
 if(document.getElementById(targ.id).className === "dragPart"){ //Kollar om objektet &#228;r dragbart
 dragId = targ.id;
 // ATT G&#214;RA H&#196;R: &#214;ka z-index, ordna offsetkorrigering.
 }
 else {
 alert("Ingen action p&#229; det h&#228;r elementet");
 }
 }
 function doDrag(e) {
 if(dragId != "") {
 var posx = 0;
 var posy = 0;
 if (!e)var e = window.event;
 if (e.pageX || e.pageY) 	{
 posx = e.pageX;
 posy = e.pageY;
 }
 else if (e.clientX || e.clientY) {
 posx = e.clientX + document.body.scrollLeft
 + document.documentElement.scrollLeft;
 posy = e.clientY + document.body.scrollTop
 + document.documentElement.scrollTop;
 }
 //document.getElementById(dragId).setAttribute("top",posy+"px;");
 //document.getElementById(dragId).setAttribute("left",posx+"px;")
 //document.getElementById(dragId).style.top = posy+"px;";
 //document.getElementById(dragId).style.left = posx+"px;";
 document.getElementById(dragId).style="left:"+posx+"px;top:"+posy+"px;"
 }
 }
 function dropElement(){
 dragId = "";
 }
 document.onmousedown = action;
 document.onmousemove = doDrag;
 document.onmouseup = dropElement;
 </script>
 </head>
 
 <body>
 <div id="brownDiv" class="dragPart"></div>
 <div id="orangeDiv" class="dragPart"></div>
 <div id="greenDiv" class="dragPart"></div>
 </body>
 </html>[/CODE]

EDIT: Credit for all the [I]nice[/I] looking code goes to the Quirksmode.com fellow.

@ZeroKilledJan 30.2008 — #the very first thing i have noticed is, why you would get the element by their id when you already have it on the variable [B]targ[/B]?

<i>
 </i>...
 if(document.getElementById(targ.id).className === "dragPart"){
 ...

here, [B]targ[/B] is the element in which the event onmousedown occured, you can do this:

<i>
 </i>if(targ.className === "dragPart"){ //Kollar om objektet är dragbart

now, for the dom styling, each style property is also considered as a property of the style object:

<i>
 </i>	document.getElementById(dragId).style.left = posx+ "px";
 document.getElementById(dragId).style.top = posy + "px;"

that is the correct syntax.

@konfjuusdauthorJan 31.2008 — #[B]targ[/B] is the element in which the event onmousedown occured, you can do this:

<i>
 </i>if(targ.className === "dragPart"){ //Kollar om objektet är dragbart

[/quote]
Very nice.

now, for the dom styling, each style property is also considered as a property of the style object:

<i>
 </i>	document.getElementById(dragId).style.left = posx+ "px";
 document.getElementById(dragId).style.top = posy + "px;"

that is the correct syntax.[/QUOTE]
So, you're telling me semicolons shouldnt be there. I'd never figure that one out. Fantastic!

Thanks

@ZeroKilledJan 31.2008 — #i'm sorry, i didn't noticed the detail about the semicolon. normally, when you set style value on javascript you don't have to include the semicolon as part of the value. so, in this snippet, the first line is correct:

<i>
 </i>document.getElementById(dragId).style.left = posx+ "px";
 document.getElementById(dragId).style.top = posy + "px;"

firefox doesn't care if you include the semicolon, but msie throw an error of invalid property value and don't set the value.

@konfjuusdauthorJan 31.2008 — #Heh, I thought you fixed the first semicolon and left the other one out(To get me to understand perhaps?). But now I see I had it like that when posting the first time.

So I didnt mean to sound rude. I was serious. cheers ?

Also in #JavaScript _↴

Adding A sort Function JavaScript Plugin Problem Form Validation

Success!

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

Tweet This

[RESOLVED] Problem with DOM styling

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] Problem with DOM styling

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴