Sibling selectors and reordering elements

Discussion in 'Javascript' started by eefacm@gmail.com, Mar 25, 2008.

  1. Guest

    I'm composing a simple page that consists largely of a series of
    images. Many of the images appear in groups showing the successive
    stages of a particular operation. I thought it might look nice to
    stack up the images, so that clicking on the topmost image sends it to
    the bottom of the stack, showing the image that had been just below
    it. Here's my first crack at it, for the simplest case of just two
    images:

    <style type="text/css">
    .cycle { position: relative }
    .cycle img { position: absolute; z-index: 1 }
    .cycle img + img { top: 2em; left: 2em; z-index: 0 }
    </style>
    <script type="text/javascript">
    function mouseclick(event) {
    var target = event.target;
    var parent = target.parentNode;
    if (target.tagName == "IMG" && parent.className == "cycle") {
    parent.appendChild(target);
    }
    }
    document.addEventListener("click", mouseclick, false);
    </script>
    ....
    <div class="cycle">
    <img src="image1.png">
    <img src="image2.png">
    </div>

    This gives the overlapping visual effect I was after. When I click on
    the top image, it jumps down into the lower position, completely
    obscuring the lower image, but the lower image does NOT move into the
    upper position. I had been expecting that after the appendChild
    operation, with the second child of the div now becoming the first
    child, the third style rule would no longer be applied to it, but
    something about my expectation is clearly incorrect. Anyone have any
    idea what might that be?
     
    , Mar 25, 2008
    #1
    1. Advertising

  2. Tom Cole Guest

    On Mar 25, 2:30 pm, "" <> wrote:
    > I'm composing a simple page that consists largely of a series of
    > images.  Many of the images appear in groups showing the successive
    > stages of a particular operation.  I thought it might look nice to
    > stack up the images, so that clicking on the topmost image sends it to
    > the bottom of the stack, showing the image that had been just below
    > it.  Here's my first crack at it, for the simplest case of just two
    > images:
    >
    > <style type="text/css">
    >   .cycle { position: relative }
    >   .cycle img { position: absolute; z-index: 1 }
    >   .cycle img + img { top: 2em; left: 2em; z-index: 0 }
    > </style>
    > <script type="text/javascript">
    >   function mouseclick(event) {
    >     var target = event.target;
    >     var parent = target.parentNode;
    >     if (target.tagName == "IMG" && parent.className == "cycle") {
    >       parent.appendChild(target);
    >     }
    >   }
    >   document.addEventListener("click", mouseclick, false);
    > </script>
    > ...
    > <div class="cycle">
    >   <img src="image1.png">
    >   <img src="image2.png">
    > </div>
    >
    > This gives the overlapping visual effect I was after.  When I click on
    > the top image, it jumps down into the lower position, completely
    > obscuring the lower image, but the lower image does NOT move into the
    > upper position.  I had been expecting that after the appendChild
    > operation, with the second child of the div now becoming the first
    > child, the third style rule would no longer be applied to it, but
    > something about my expectation is clearly incorrect.  Anyone have any
    > idea what might that be?


    You may find it easier to either keep an array of image paths and
    change the src attribute of the image tag when clicked or (in your
    example above) simply play with the style.display attribute of all the
    img tags within your div, rather than choosing to keep adding nodes to
    the dom. That could get a little excessive as you never seem to remove
    them :)
     
    Tom Cole, Mar 25, 2008
    #2
    1. Advertising

  3. SAM Guest

    Tom Cole a écrit :
    >
    > rather than choosing to keep adding nodes to
    > the dom. That could get a little excessive as you never seem to remove
    > them :)


    used this way appendChild adds nothing
    it only moves the element in DOM hierarchy

    And, Firefox's Dom Inspector shows their order has changed.

    Quite mysterious,

    a little as if CSS definitively attached rules on 2nd image in the html
    flux.

    --
    sm
     
    SAM, Mar 25, 2008
    #3
  4. pr Guest

    wrote:
    [...]
    > <style type="text/css">
    > .cycle { position: relative }
    > .cycle img { position: absolute; z-index: 1 }
    > .cycle img + img { top: 2em; left: 2em; z-index: 0 }
    > </style>
    > <script type="text/javascript">
    > function mouseclick(event) {
    > var target = event.target;
    > var parent = target.parentNode;
    > if (target.tagName == "IMG" && parent.className == "cycle") {
    > parent.appendChild(target);
    > }
    > }
    > document.addEventListener("click", mouseclick, false);
    > </script>
    > ...
    > <div class="cycle">
    > <img src="image1.png">
    > <img src="image2.png">
    > </div>
    >
    > This gives the overlapping visual effect I was after. When I click on
    > the top image, it jumps down into the lower position, completely
    > obscuring the lower image, but the lower image does NOT move into the
    > upper position. I had been expecting that after the appendChild
    > operation, with the second child of the div now becoming the first
    > child, the third style rule would no longer be applied to it, but
    > something about my expectation is clearly incorrect. Anyone have any
    > idea what might that be?


    You haven't said which browser you're using to look at it in. It works
    as you describe in Opera 9.5b and Firefox 3.0b4. If you're using Firefox
    < 3.0, then its failure may be explained by <URL:
    https://bugzilla.mozilla.org/show_bug.cgi?id=73586>.

    You can still do what you want, but it's safest to steer clear of
    adjacent sibling selectors, which are relatively recently implemented.
    You can either swap the image src to achieve the effect or use class
    selectors and swap the className property of the elements, which I
    suspect is the more efficient option.
     
    pr, Mar 26, 2008
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Gerald Aichholzer
    Replies:
    2
    Views:
    2,618
    Gerald Aichholzer
    Jun 27, 2006
  2. Replies:
    11
    Views:
    673
    Fredrik Lundh
    Jan 23, 2006
  3. greenflame

    reordering elements of a list

    greenflame, Jun 4, 2006, in forum: Python
    Replies:
    7
    Views:
    398
    greenflame
    Jun 5, 2006
  4. Nathan Sokalski

    Adjacent Sibling Selectors in CSS

    Nathan Sokalski, Jun 23, 2008, in forum: ASP .Net
    Replies:
    5
    Views:
    650
    Arthur Milfait
    Jun 30, 2008
  5. greenflame

    reordering elements of a list

    greenflame, Jun 3, 2006, in forum: Javascript
    Replies:
    2
    Views:
    102
    greenflame
    Jun 4, 2006
Loading...

Share This Page