Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #39144 > unrolled thread

Animate element to position in grid

Back to article view | Back to comp.lang.javascript

Contents

  Animate element to position in grid Andrew Poulos <ap_prog@hotmail.com> - 2020-11-15 20:10 +1100
    Re: Animate element to position in grid "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2020-11-15 15:41 +0100
      Re: Animate element to position in grid Andrew Poulos <ap_prog@hotmail.com> - 2020-11-16 08:15 +1100
    Re: Animate element to position in grid "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-11-15 11:05 -0800
      Re: Animate element to position in grid Andrew Poulos <ap_prog@hotmail.com> - 2020-11-16 08:27 +1100
        Re: Animate element to position in grid "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-11-15 16:51 -0800
          Re: Animate element to position in grid Andrew Poulos <ap_prog@hotmail.com> - 2020-11-16 13:34 +1100

#39144 — Animate element to position in grid

I have a "small" div that appears at a random spot in the page. The page 
is split by a responsive CSS grid into an number grid areas. I need to 
move the div into the centre of one of the areas to a position that 
would match "place-self: center".

Is there a way I get the offsetLeft and Top positions of the "finished" 
location?

One idea was to clone the div, set its visibility to hidden, place it 
with CSS, get its position, and then to remove it.

Andrew Poulos

[toc] | [next] | [standalone]

#39145

Andrew Poulos <ap_prog@hotmail.com> wrote on 15 Nov 2020 in 
comp.lang.javascript:

> I have a "small" div that appears at a random spot in the page. The page 
> is split by a responsive CSS grid into an number grid areas. I need to 
> move the div into the centre of one of the areas to a position that 
> would match "place-self: center".
> 
> Is there a way I get the offsetLeft and Top positions of the "finished" 
> location?
> 
> One idea was to clone the div, set its visibility to hidden, place it 
> with CSS, get its position, and then to remove it.

No need for cloning, you can just change the parent of your little element.

newParent.appendChild(littleElement);

For centering, see:

<https://css-tricks.com/centering-css-complete-guide/>

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#39149

On 16/11/2020 1:41 am, Evertjan. wrote:
> Andrew Poulos <ap_prog@hotmail.com> wrote on 15 Nov 2020 in
> comp.lang.javascript:
> 
>> I have a "small" div that appears at a random spot in the page. The page
>> is split by a responsive CSS grid into an number grid areas. I need to
>> move the div into the centre of one of the areas to a position that
>> would match "place-self: center".
>>
>> Is there a way I get the offsetLeft and Top positions of the "finished"
>> location?
>>
>> One idea was to clone the div, set its visibility to hidden, place it
>> with CSS, get its position, and then to remove it.
> 
> No need for cloning, you can just change the parent of your little element.
> 
> newParent.appendChild(littleElement);

Sorry, I was ambiguous with my words when I wrote "move the div into the 
centre..." I meant that the div needs to translate/animate over, say, 3 
seconds to the new position.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#39147

On Sunday, November 15, 2020 at 3:10:41 AM UTC-6, Andrew Poulos wrote:
> I have a "small" div that appears at a random spot in the page. The page 
> is split by a responsive CSS grid into an number grid areas. I need to 
> move the div into the centre of one of the areas to a position that 
> would match "place-self: center". 

Is the div a child of the grid container? In which case to move to cell (3,4):

```
Object.assign(myDiv.style, {
  placeSelf: "center",
  gridColumn: "3 / span 1",
  gridRow: "4 / span 1"
})
```

> Is there a way I get the offsetLeft and Top positions of the "finished" 
> location? 

In relation to what? The viewport or a particular offsetParent in the document?


> One idea was to clone the div, set its visibility to hidden, place it 
> with CSS, get its position, and then to remove it. 

I think more context is needed here. Not quite sure what the larger goal is.

[toc] | [prev] | [next] | [standalone]

#39150

On 16/11/2020 6:05 am, Michael Haufe (TNO) wrote:
> On Sunday, November 15, 2020 at 3:10:41 AM UTC-6, Andrew Poulos wrote:
>> I have a "small" div that appears at a random spot in the page. The page
>> is split by a responsive CSS grid into an number grid areas. I need to
>> move the div into the centre of one of the areas to a position that
>> would match "place-self: center".
> 
> Is the div a child of the grid container? In which case to move to cell (3,4):
> 
> ```
> Object.assign(myDiv.style, {
>    placeSelf: "center",
>    gridColumn: "3 / span 1",
>    gridRow: "4 / span 1"
> })

Oh, a "new" way (for me at least) to apply lots of styles to an element.

>> Is there a way I get the offsetLeft and Top positions of the "finished"
>> location?
> 
> In relation to what? The viewport or a particular offsetParent in the document?

When I wrote "move the div into the centre..." I meant to 
translate/animate the div into position. So if I know what the finished 
position actually is (in relation to anything I can measure) then I can 
move the div appropriately.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#39151

On Sunday, November 15, 2020 at 3:27:51 PM UTC-6, Andrew Poulos wrote:
> On 16/11/2020 6:05 am, Michael Haufe (TNO) wrote: 
> > On Sunday, November 15, 2020 at 3:10:41 AM UTC-6, Andrew Poulos wrote: 
> >> I have a "small" div that appears at a random spot in the page. The page 
> >> is split by a responsive CSS grid into an number grid areas. I need to 
> >> move the div into the centre of one of the areas to a position that 
> >> would match "place-self: center". 
> > 
> > Is the div a child of the grid container? In which case to move to cell (3,4): 
> > 
> > ``` 
> > Object.assign(myDiv.style, { 
> > placeSelf: "center", 
> > gridColumn: "3 / span 1", 
> > gridRow: "4 / span 1" 
> > })
> Oh, a "new" way (for me at least) to apply lots of styles to an element.
> >> Is there a way I get the offsetLeft and Top positions of the "finished" 
> >> location? 
> > 
> > In relation to what? The viewport or a particular offsetParent in the document?
> When I wrote "move the div into the centre..." I meant to 
> translate/animate the div into position. So if I know what the finished 
> position actually is (in relation to anything I can measure) then I can 
> move the div appropriately. 

While my example will move the item to proper position, it can't be animated AFAICT.
So you have to do it the hard way. The impressionistic (untested) math is:

cellWidth = gridWidth / colCount
cellHeight = gridHeight / rowCount
cellTop = gridHeight * rowIndex
cellLeft = gridWidth * colIndex

itemCenteredTop = cellTop + cellHeight / 2 - itemHeight / 2
itemCenteredLeft = cellLeft + cellWidth /2 - itemWidth / 2

[toc] | [prev] | [next] | [standalone]

#39152

On 16/11/2020 11:51 am, Michael Haufe (TNO) wrote:
> On Sunday, November 15, 2020 at 3:27:51 PM UTC-6, Andrew Poulos wrote:
>> On 16/11/2020 6:05 am, Michael Haufe (TNO) wrote:
>>> On Sunday, November 15, 2020 at 3:10:41 AM UTC-6, Andrew Poulos wrote:
>>>> I have a "small" div that appears at a random spot in the page. The page
>>>> is split by a responsive CSS grid into an number grid areas. I need to
>>>> move the div into the centre of one of the areas to a position that
>>>> would match "place-self: center".
>>>
>>> Is the div a child of the grid container? In which case to move to cell (3,4):
>>>
>>> ```
>>> Object.assign(myDiv.style, {
>>> placeSelf: "center",
>>> gridColumn: "3 / span 1",
>>> gridRow: "4 / span 1"
>>> })
>> Oh, a "new" way (for me at least) to apply lots of styles to an element.
>>>> Is there a way I get the offsetLeft and Top positions of the "finished"
>>>> location?
>>>
>>> In relation to what? The viewport or a particular offsetParent in the document?
>> When I wrote "move the div into the centre..." I meant to
>> translate/animate the div into position. So if I know what the finished
>> position actually is (in relation to anything I can measure) then I can
>> move the div appropriately.
> 
> While my example will move the item to proper position, it can't be animated AFAICT.
> So you have to do it the hard way. The impressionistic (untested) math is:
> 
> cellWidth = gridWidth / colCount
> cellHeight = gridHeight / rowCount
> cellTop = gridHeight * rowIndex
> cellLeft = gridWidth * colIndex
> 
> itemCenteredTop = cellTop + cellHeight / 2 - itemHeight / 2
> itemCenteredLeft = cellLeft + cellWidth /2 - itemWidth / 2

Thanks but its getting all too much effort I (the grid use fr for 
column/row sizing...) so it's been decided to change the opacity to 0, 
move it as you've shown, and then to animate its opacity to 1.

Andrew Poulos

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web