This project is archived and is in readonly mode.

#1135 ✓invalid
[rb]

Problems looping through elements changing styles

Reported by [rb] | January 11th, 2011 @ 01:48 AM

Hello,

I am unable to do something that I have been able to do in the past and am not sure why it doesn't work.
The scenario:

I am looping through items which are floated left in a parent to make a grid (floated for no js fallback) then for enhancement I want to make the items positioned absolute to the parent and am doing this:

Array.each(items,function(item){
var pos = item.getPosition(parent); // IF I LOG AT THIS POINT EACH pos IS UNIQUE item.setPosition(pos); // IF I CHECK VIA FIREBUG THE STYLES ARE CORRECT

// IF I ADD THIS - the parent is position:relative item.setStyles({

float: 'none'
, position: 'absolute'

}); // RESULT: // the positions are now incorrect all being {x:0,y:0} }

I've tried various combinations including separating each bit into different functions in case the pos var gets messed up somehow but always get this when I set position:absoulte (same behavior if i exclude the float:none)

Am I going about this the wrong way? Its as if the var pos is always the one set at the first iteration or something but only if i try setting the elements style?
I thought that since each iteration runs the function and pos is declaired with var therefore being in that functions scope that it would be a ne pos var for each? Is this not the case?

Can anyone advise how I can achieve this goal:
get the elements position relative to parent (well I know how) set the element to no longer be floated and position: absolute

Comments and changes to this ticket

  • [rb]

    [rb] January 11th, 2011 @ 01:54 AM

    Oh...

    After posting I thought of one more thing to try and now it makes perfect sense.

    For each iteration I was removing float and setting absolute but that would mean the next item would shift over to where the previous element was floated there fore each would meanure pos as 0,0.

    This did the trick:

    Array.each(items,function(item){
      var pos = item.getPosition(parent);
      item.setPosition(pos);
    });
    items.setStyles({
      float: 'none'
      , position: 'absolute'
    });
    
  • Arian

    Arian January 11th, 2011 @ 02:05 AM

    • State changed from “new” to “invalid”

    Nice you already solved the problem!

  • [rb]

    [rb] January 11th, 2011 @ 02:23 AM

    Yeah but thanks :)
    p.s. I have no idea what "meanure" in my post was meant to be lol

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Shared Ticket Bins

People watching this ticket

Pages