• Changing div layer

    From Andrew Poulos@21:1/5 to All on Sun Jun 14 19:00:42 2020
    Say I have a number (tens) of DIV elements. Each has a size and a
    position but no nominated z-index. There are on screen buttons which correspondingly show/hide each DIV.

    If all the DIVs start off hidden is there a way to make the last
    revealed DIV the top most?

    Ideally I'd like stack order of the other revealed DIVs not to change.
    So with these hidden DIVS

    A B C D E F G H I...

    if C is revealed then D is, as the only visible DIV, the highest
    then if A is revealed, A becomes the highest
    and then if H is revealed, E becomes the highest but A will still be
    higher than D.

    I guess it's a bit like shuffling a deck of cards, in that pulling a
    card from the deck and putting it on top doesn't change the relative
    order of the other cards.

    Andrew Poulos

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From James Kirk@21:1/5 to Andrew Poulos on Sun Jun 14 18:25:18 2020
    In Message: <HuWdnX1DGqahenjDnZ2dnUU7-W_NnZ2d@westnet.com.au>
    Andrew Poulos <ap_prog@hotmail.com> wrote:

    Say I have a number (tens) of DIV elements. Each has a size and a
    position but no nominated z-index. There are on screen buttons
    which correspondingly show/hide each DIV.

    If all the DIVs start off hidden is there a way to make the last
    revealed DIV the top most?

    Ideally I'd like stack order of the other revealed DIVs not to
    change. So with these hidden DIVS

    A B C D E F G H I...

    if C is revealed then D is, as the only visible DIV, the highest
    then if A is revealed, A becomes the highest
    and then if H is revealed, E becomes the highest but A will still
    be higher than D.

    I guess it's a bit like shuffling a deck of cards, in that pulling
    a card from the deck and putting it on top doesn't change the
    relative order of the other cards.

    javascript … move element to the end of it's parent.

    https://codepen.io/noneyainvalid/full/MWKeZBY

    --
    James Kirk

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Andrew Poulos@21:1/5 to James Kirk on Mon Jun 15 10:18:58 2020
    On 15/06/2020 8:25 am, James Kirk wrote:
    In Message: <HuWdnX1DGqahenjDnZ2dnUU7-W_NnZ2d@westnet.com.au>
    Andrew Poulos <ap_prog@hotmail.com> wrote:

    Say I have a number (tens) of DIV elements. Each has a size and a
    position but no nominated z-index. There are on screen buttons
    which correspondingly show/hide each DIV.

    If all the DIVs start off hidden is there a way to make the last
    revealed DIV the top most?

    Ideally I'd like stack order of the other revealed DIVs not to
    change. So with these hidden DIVS

    A B C D E F G H I...

    if C is revealed then D is, as the only visible DIV, the highest
    then if A is revealed, A becomes the highest
    and then if H is revealed, E becomes the highest but A will still
    be higher than D.

    I guess it's a bit like shuffling a deck of cards, in that pulling
    a card from the deck and putting it on top doesn't change the
    relative order of the other cards.

    javascript … move element to the end of it's parent.

    https://codepen.io/noneyainvalid/full/MWKeZBY

    Nice!

    I was playing with giving each element a tabindex, outline: none; and
    then setting ...:focus { z-index:1 } but the elements drop back to their original position.

    Andrew Poulos

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)