Search code examples
javascriptcsspositioningclassname

Div / CSS position not updating after javascript manipulation

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 :)

Solution

  • 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.