CODEWITHSUNDEEP
javascriptjqueryhtmlcss
James
James

Reputation: 1706

Using jQuery to reorder a list of items as my CSS method not 100%

I have been trying endlessly to re-order position of items for mobile using CSS but simple does not seem to be cutting the mustard... its working of course but for some reason on 10 items 2 does position right so want to go down the JS road however not really done much JS and hoping someone could lend me a hand.

Basically on desktop on display a list of items side by side, for example

1[L] - 2[L]

3[R] - 4[R]

5[L] - 6[L]

7[R] - 8[R]

9[L] - 10[L]

Each item has a background image showing 2 sections, above i added [L] and [R] to show Left and Right as the backgrounds would show item logo in the same position on that one line however on mobile i need to somehow alternate the position because would be a slight different sequence as 1 per line on full width.

1[L]

3[R]

2[L]

4[R]

5[L]

7[R]

6[L]

8[R]

9[L]

10[L]

of course with an odd amount would work out ok.... or am i wrong in this theory?

Actually writing that out would explain why im getting the issue as the last 2 are left, left so no right to go above it... so doing with JS would have the same result i guess?

example: 15 items (works fine) https://jsfiddle.net/vgrd7oww/13/

example: 10 items (your see 2 items same half way through) https://jsfiddle.net/vgrd7oww/14/

Anyone know of any solution for this? either with my current CSS or some JS?

CSS:

.collection-hover-container {
  display: flex;
  flex-direction: column;
  ul.collection-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    .collection-list-item {
      display: flex;
      width: calc(49%);
      margin-left: 2%;
      box-sizing: border-box;
      &.collection-hover {
        margin-bottom: 10px !important;
        position: relative;
        &:nth-child(4n+1) div:first-child,
        &:nth-child(4n+2) div:first-child {
          order: 1;
          right: 0;
        }
        &:nth-child(4n+3) div:last-child,
        &:nth-child(4n+4) div:last-child {
          right: 0;
        }
        div:first-child {
          width: 66.66%;
        }
        div:last-child {
          width: 33.33%;
        }
        .collection-list-hover-desc {
          display: none;
          position: absolute;
          bottom: 0;
          background-color: rgba(51, 51, 51, 0.4);
          p {
            padding: 10px;
            color: #ffffff;
            font-size: 0.7em;
          }
        }
        .collection-list-hover-button {
          width: 32.2%;
          display: block;
          position: absolute;
          bottom: 10px;
          text-align: center;
          .button {
            font-size: 0.8em;
            border: 2px solid #fff;
            color: #fff;
            text-transform: uppercase;
            background: #f14fa1;
            white-space: nowrap;
            padding: 7px 13px 5px 13px;
            border-radius: 3px;
          }
        }
        a {
          display: inline-block;
          background-size: cover;
          animation: fadeout 1.8s, bp-change 0.1s;
          -moz-animation: fadeout 1.8s, bp-change 0.1s;
          /* Firefox */
          -webkit-animation: fadeout 1.8s, bp-change 0.1s;
          /* Safari and Chrome */
          -o-animation: fadeout 1.8s, bp-change 0.1s;
          background-position: 0 0;
          width: 100%;
          &:hover {
            animation: fadein 1.8s, bp-change 0.1s;
            -moz-animation: fadein 1.8s, bp-change 0.1s;
            /* Firefox */
            -webkit-animation: fadein 1.8s, bp-change 0.1s;
            /* Safari and Chrome */
            -o-animation: fadein 1.8s, bp-change 0.1s;
            background-position: -50% 99%;
          }
        }
      }
    }
  }
}

@-webkit-keyframes fadein {
  from {
    opacity:0.7;
  }
  to {
    opacity:1;
  }
}
@-webkit-keyframes fadeout {
  from {
    opacity:0.7;
  }
  to {
    opacity:1;
  }
}
@-webkit-keyframes bp-change {
  from {
    background-position:0 0;
  }
  to {
    background-position:-50% 100%;
  }
}

/* Tablet */
@media only screen and (max-width: 959px) {
  .collection-list {
    .collection-list-item {
      .collection-list-hover-button {
        .button {
          font-size: 0.6rem;
          border: 1px solid #fff;
          padding: 5px 8px;
        }
      }
    }
  }
}

@media only screen and (max-width: 767px) {
  .collection-hover-container {
    ul.collection-list {
      .collection-list-item {
        width: calc(100% - 10px) !important;

        &.collection-hover {
          margin-left: 0 !important;

          &:nth-child(4n+1) div:first-child,
          &:nth-child(4n+2) div:first-child {
            order: 0;
          }
          &:nth-child(odd) div:first-child {
            order: 1;
          }
          &:nth-child(even) {
            order: 1;
          }

          .collection-list-hover-desc {
            p {
              padding: 5px 10px;
              font-size: 1em;
            }
          }

          .collection-list-hover-button {
            .button {
              font-size: 0.6em;
              padding: 5px 10px;
            }
          }
        }
      }
    }
  }

  .featured-collections {
    .collection-list {
      display: block; 
    }
  }
}

Upvotes: 1

Views: 107

Answers (1)

alfredo
alfredo

Reputation: 845

I simplified your example by using a string for the images ("1-L", "2-L", etc). I think it will make the answer easier to understand. The code below is to show how something like that could be done with JQuery.

Instead of a list, I think it's easier if we use div.

The CSS:

#wrapper div.item {display:inline;}

The JQuery code:

$(document).ready(function(){
    var mobile = true;      // your mobile flag
    var arrayImages = [ "1-L", "2-L", "3-R", "4-R",
                        "5-L", "6-L", "7-R", "8-R",
                        "9-R", "10-R"]; // your images. Arrays start with index 0.
    var totalImages = arrayImages.length;   // total number of images

    // if it's not mobile, then add a line break after the second image
    if (mobile == false){
        var theHtml = "";
        for (let i = 0; i< totalImages;i++){
            var theImageHtml = '<div class="item item-1">' + arrayImages[i] + '</div>';
            // if it's an odd number image (the array starts at 0) add a line break at the end
            if (i%2==1){
                theHtml += theImageHtml + '<br/>';
            }
            else {
                theHtml += theImageHtml + '</div>';
            }
            $('#wrapper').html(theHtml);
        }
    };

    // if it's mobile, take up to 4 images and display them in this order: 1, 3, 2, 4. 
    if (mobile == true){
        var theHtml = "";
        for (let i = 0; i< totalImages;i++){
            var theImageHtml1 = "";
            var theImageHtml2 = "";
            var theImageHtml3 = "";
            var theImageHtml4 = "";

            var theImageHtml1 = '<div class="item item-1">' + arrayImages[i] + '</div><br/>';
            if (i+1 < totalImages){
                i++;
                var theImageHtml2 = '<div class="item item-1">' + arrayImages[i] + '</div><br/>';
            }
            if (i+1 < totalImages){
                i++;
                var theImageHtml3 = '<div class="item item-1">' + arrayImages[i] + '</div><br/>';
            }       
            if (i+1 < totalImages){
                i++;
                var theImageHtml4 = '<div class="item item-1">' + arrayImages[i] + '</div><br/>';
            }
            theHtml += theImageHtml1 + theImageHtml3 + theImageHtml2 + theImageHtml4;
        }
        $('#wrapper').html(theHtml);
    }
});

The HTML:

<div id="wrapper"></div>

Remember to include jQuery library inside the head tag:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>

Upvotes: 2

Related Questions