3

I want to move a div that is normally floating on the right side to an absolute position (determined by js) and then back to its initial position.

The first part already works and relies on setting the "style. " tags for the object.. something like

mytarget.style.position="absolute";
mytarget.style.top="50px";

To move it back, i would like to just assign the standard class back to the element , which will also contain the positioning info.

Strangely enough, everything but repositioning will work. Here's the relevant code:

var mytarget= document.getElementById(titlebarid);
var newclass=tabstyleclasses[titlebarid][ismaxedtab[titlebarid]];



mytarget.className= newclass ;

Debug:

 alert ("wanting to set : " + newclass  )    ;

This outputs the correct value. ("adfieldtitlesm")

alert ("my target is " +mytarget.id);

Works as well.

alert ("new class is " + mytarget.className );

Gives out the correct value too. ("adfieldtitlesm")

alert ("new position is " + mytarget.style.position );

Gives out "absolute" (as previously set by JS when moving the mytarget) , should be "fixed"

This is the CSS class :

.adfieldtitlesm
 {
  position: fixed;
 top: 200px;
 left: 50px;
 
 font-size: 50px;
 background-color: #000000;
 color: #ffffff;
 
 }

Why won't the object move after its class has been set?

UPDATE: Link

Main test page

The relevant parts to this are lines 270-297(mostly 290-294) within rebuildtabs() for the first move , which works and lines 160-183 within minwidget() Apologies for the slightly messy code :)

Community
  • 1
  • 1
C.J. Parker
  • 33
  • 1
  • 4
  • do you have a live link we could check? it's quite hard to debug words. – bchhun Jan 29 '11 at 01:03
  • Have you debugged with other `position` values to see if the problem is with the `fixed` value specifically, or if it's something else? Have you tried to set the `position` value manually instead of relying on the class definition? – JakeParis Jan 29 '11 at 01:03
  • Yep , i did try with other position values ,to no avail unfortunately.. ill try to upload it somewhere, could take me 10 min tho .. – C.J. Parker Jan 29 '11 at 01:13
  • That's so f*in awesome; on any most other sites you'd wait 3 days for someone to answer, on S.O. you're apologizing for 10 minutes! I love it.' – JakeParis Jan 29 '11 at 01:14

1 Answers1

4

Because the inline properties override class properties, you'll need to remove the inline.

mytarget.style.position="";

Then the fixed position defined in the class will work.

Or perhaps use:

delete mytarget.style.position;

Not sure which is prefered.

user113716
  • 318,772
  • 63
  • 451
  • 440
  • 1
    That's right. Even if you reset the class, the inline styles that JS set are still there in the DOM. – JakeParis Jan 29 '11 at 01:07
  • Hm i tried this using both delete and the empty string solution ; tried it before and after assigning a new class (tho i guess it should be before) . Now alert ("new position is " + mytarget.style.position ); is just returning an empty string. Of course the position changes, but not where i want it to. it now goes into the upper left corner – C.J. Parker Jan 29 '11 at 01:15
  • @C.J. Parker. The positioning you're getting will depend on your CSS. As long as the className is properly set, it should work. Make sure your className is exactly correct. The only thing that `mytarget.style.position` will give you is the DOM style property. It does not give the style from the class itself. To do that you'll need to retrieve its calculated value. There's a `getStyle()` function [on this page](http://www.quirksmode.org/dom/getstyles.html#link7) you can use for that purpose. – user113716 Jan 29 '11 at 01:36
  • Okay, thanks for the answer guys. Patrick DWs code actually works fine, i was fooled because i forgot to reset the top and left attributes too. Is there a way to clear all inline tags as well? like a mytarget.style="" (which doesnt seem to work) ? – C.J. Parker Jan 29 '11 at 01:53
  • @C.J. Parker: If you want to remove *all* style properties set in the DOM, try this: `mytarget.setAttribute('style','');` – user113716 Jan 29 '11 at 02:02