1

Objective:

I am working on a website on square space, in which I want to remove a div and want to show it into another div.

My effort so far:

I have tried to find solutions from the below SO links, but it didn't help me

What I want to do is, in the image below:

reference

you can see in the image, as I want to cut the "SOLD OUT" text from the bottom, and want to paste on the top of the image

I am using jQuery for that, my code

var soldList = $('div .grid-meta-status').get();
  var itemsList =  $('div .hentry').get();
  
  for(var i=0; i<soldList.length; i++)
  {
    if( soldList[i].innerText == "SOLD OUT" )
    {
      var item = $('div .grid-meta-status').get(i);

      $("div .grid-meta-status:nth-child(2)").remove();
      $("<div class='grid-meta-status'><div class='product-mark sold-out'>sold out</div></div>").filter(function( index ) {return $( "div .grid-meta-status" ).text() == "SOLD OUT"}).insertBefore(" .grid-image");
        //$("<div class='grid-meta-status'><div class='product-mark sold-out'>soldd out</div></div>").insertBefore(".grid-image");
      
    }
  }

website link https://trumpet-nonagon-ek9j.squarespace.com/originals

shuberman
  • 1,416
  • 6
  • 21
  • 38
user13927150
  • 45
  • 1
  • 6

2 Answers2

1

First of all, you should provide more details to get an answer. Read this link before ask a new question.

I've attached a mock-up example below. It contains two items - the first one is sold out and the second one is not. HTML and CSS codes are copied from your link so you can ignore that. The important part is the JS code. As you mentioned that you're using jQuery, you can easily find and move elements with jQuery query selector. My code tries to find the item element which contains all meta data and from there, it checks whether this item is sold or not. And then, it selects the sold-out meta and moves it to the front. I've added click here! button at the bottom so you can test with this.

I'm not sure this is what you want since the question is ambiguous but I guess you can start from this to get what you want.

$("#test-button").on("click", function() {
    for(const grid_item of $(".grid-item")) {
    if($(grid_item).find("section .grid-meta-status .product-mark.sold-out").length) {
    $(grid_item).prepend($(grid_item).find("section .grid-meta-status"))
  }
  }
});
.grid-item {
  overflow-wrap: break-word;
font-family: Lato;
font-weight: 300;
font-style: normal;
letter-spacing: 0em;
text-transform: none;
line-height: 1.8;
-webkit-font-smoothing: antialiased;
font-size: 1.3rem;
color: #000;
position: relative;
transition: opacity 1s ease,transform 1s ease;
opacity: 1;
transform: translatey(0);
}

.grid-image {
  overflow-wrap: break-word;
font-family: Lato;
font-weight: 300;
font-style: normal;
letter-spacing: 0em;
text-transform: none;
-webkit-font-smoothing: antialiased;
font-size: 1.3rem;
color: #000;
display: block;
width: 100%;
position: relative;
overflow: hidden;
margin: 0;
line-height: 0;
}
.list-quick-view-wrapper {
  overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
color: #000;
line-height: 0;
display: flex;
position: absolute;
top: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
font-family: Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
z-index: auto;
box-sizing: border-box;
-webkit-box-align: end;
align-items: flex-end;
-webkit-box-pack: center;
justify-content: center;
bottom: -1px;
padding-bottom: 50% !important;
}
.sqs-product-quick-viewbutton {
  overflow-wrap: break-word;
font-family: Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
opacity: 0;
display: inline-block;
position: relative;
z-index: 6;
width: auto;
height: auto;
padding: 1.5em;
color: #fff;
background-color: #000;
border-width: 0;
line-height: 1em;
text-align: center;
text-decoration: none;
cursor: pointer;
outline: none;
-webkit-appearance: none;
-webkit-font-smoothing: antialiased;
transition: opacity .3s ease-in;
transform: translatey(50%);
}
.grid-image-wrapper {
  overflow-wrap: break-word;
font-family: Lato;
font-weight: 300;
font-style: normal;
letter-spacing: 0em;
text-transform: none;
-webkit-font-smoothing: antialiased;
font-size: 1.3rem;
color: #000;
line-height: 0;
margin: 0;
height: 0;
overflow: hidden;
position: relative;
display: flex;
padding-bottom: 100%;
}
.grid-image-wrapper img {
  overflow-wrap: break-word;
font-family: Lato;
font-weight: 300;
font-style: normal;
letter-spacing: 0em;
text-transform: none;
-webkit-font-smoothing: antialiased;
font-size: 1.3rem;
color: #000;
line-height: 0;
border: 0;
position: absolute;
top: 0;
left: 0;
opacity: 1;
transition: opacity 1s ease;
width: 100%;
height: 100%;
object-position: 50% 50%;
object-fit: cover;
}
.grid-meta-wrapper {
  overflow-wrap: break-word;
font-family: Lato;
font-weight: 300;
font-style: normal;
letter-spacing: 0em;
text-transform: none;
line-height: 1.8;
-webkit-font-smoothing: antialiased;
font-size: 1.3rem;
color: #000;
display: flex;
width: 100%;
justify-content: space-between;
margin-top: 1vw;
flex-direction: column;
text-align: center;
}
.grid-main-meta {
  overflow-wrap: break-word;
font-family: Lato;
font-weight: 300;
font-style: normal;
letter-spacing: 0em;
text-transform: none;
line-height: 1.8;
-webkit-font-smoothing: antialiased;
font-size: 1.3rem;
color: #000;
text-align: center;
}
.grid-title {
  overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
text-align: center;
font-family: Old Standard TT;
font-weight: 400;
font-style: normal;
letter-spacing: 0em;
text-transform: none;
line-height: 1.4em;
font-size: 1.5rem;
color: #000;
}
.grid-prices {
  overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
text-align: center;
font-family: Lato;
font-weight: 300;
font-style: normal;
letter-spacing: .01em;
text-transform: none;
line-height: 1em;
font-size: 1.1rem;
margin-top: .5rem;
color: #000;
}
.product-price {
  overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
text-align: center;
font-family: Lato;
font-weight: 300;
font-style: normal;
letter-spacing: .01em;
text-transform: none;
line-height: 1em;
font-size: 1.1rem;
color: #000;
}
.sqs-money-native {
  overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
text-align: center;
font-family: Lato;
font-weight: 300;
font-style: normal;
letter-spacing: .01em;
text-transform: none;
line-height: 1em;
font-size: 1.1rem;
color: #000;
}
.grid-meta-status {
  overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
color: #000;
font-family: Lato;
font-weight: 400;
font-style: normal;
letter-spacing: .01em;
text-transform: none;
line-height: 1em;
font-size: 1.1rem;
text-align: left !important;
}
.product-mark.sold-out {
  overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
color: #000;
font-family: Lato;
font-style: normal;
letter-spacing: .01em;
line-height: 1em;
font-size: 1.1rem;
text-align: left !important;
font-weight: bold;
text-transform: uppercase;
}
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
  </head>
  <body>
    <div style="width:200px;text-align:center;">
      <div class="grid-item hentry category-in-the-weeds tag-all author-jessica-cecil post-type-store-item article-index-13 sold-out sqs-product-quick-view-button-hover-area is-loaded" id="thumb-a-day-in-the-weeds" data-item-id="5f07db9ded80fa4741aad1ac" data-controller="ProductListImageLoader" data-controllers-bound="ProductListImageLoader">
        <figure class="grid-image" data-animation-role="image">
          <div class="list-quick-view-wrapper sqs-product-quick-view-button-wrapper">
            <span class="sqs-product-quick-view-button" role="button" tabindex="0" data-id="5f07db9ded80fa4741aad1ac" data-group="5f07356969f7521d85f233ad">Quick View</span>
          </div>
          <div class="grid-image-wrapper has-hover-img">
            <img data-src="https://static1.squarespace.com/static/5f041b669538b147e0e24a89/5f07356969f7521d85f233ad/5f07db9ded80fa4741aad1ac/1594514045774/little+turtle+styled.jpg" data-image="https://static1.squarespace.com/static/5f041b669538b147e0e24a89/5f07356969f7521d85f233ad/5f07db9ded80fa4741aad1ac/1594514045774/little+turtle+styled.jpg" data-image-dimensions="1440x1440" data-image-focal-point="0.5,0.5" alt="&quot;A Day In The Weeds&quot; Original" data-load="false" class="grid-image-cover" data-parent-ratio="1.0" style="width: 100%; height: 100%; object-position: 50% 50%; object-fit: cover;" data-image-resolution="500w" src="https://static1.squarespace.com/static/5f041b669538b147e0e24a89/5f07356969f7521d85f233ad/5f07db9ded80fa4741aad1ac/1594514045774/little+turtle+styled.jpg?format=500w">
            <img data-src="https://images.squarespace-cdn.com/content/v1/5f041b669538b147e0e24a89/1594499833340-MHG0W4TM81GKYWZ9MRXZ/ke17ZwdGBToddI8pDm48kGS78un_bcNZLY1QrfTmegV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QHyNOqBUUEtDDsRWrJLTmmzJBBHkqvGAibxByi2-xi1RoNc7vr9m3ozvkcMF-yMAseWsVVmXrIaQg6-A-MY58/little+turtle+side+2.jpg" data-image="https://images.squarespace-cdn.com/content/v1/5f041b669538b147e0e24a89/1594499833340-MHG0W4TM81GKYWZ9MRXZ/ke17ZwdGBToddI8pDm48kGS78un_bcNZLY1QrfTmegV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QHyNOqBUUEtDDsRWrJLTmmzJBBHkqvGAibxByi2-xi1RoNc7vr9m3ozvkcMF-yMAseWsVVmXrIaQg6-A-MY58/little+turtle+side+2.jpg" data-image-dimensions="1440x1440" data-image-focal-point="0.5,0.5" alt="little turtle side 2.jpg" data-load="false" class="grid-image-hover" data-parent-ratio="1.0" style="width: 100%; height: 100%; object-position: 50% 50%; object-fit: cover;" data-image-resolution="500w" src="https://images.squarespace-cdn.com/content/v1/5f041b669538b147e0e24a89/1594499833340-MHG0W4TM81GKYWZ9MRXZ/ke17ZwdGBToddI8pDm48kGS78un_bcNZLY1QrfTmegV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QHyNOqBUUEtDDsRWrJLTmmzJBBHkqvGAibxByi2-xi1RoNc7vr9m3ozvkcMF-yMAseWsVVmXrIaQg6-A-MY58/little+turtle+side+2.jpg?format=500w">
            </div>
        </figure>
        <section class="grid-meta-wrapper" data-animation-role="content">
          <div class="grid-main-meta">
            <div class="grid-title">"A Day In The Weeds" Original</div>
            <div class="grid-prices">
              <div class="product-price">
                <span class="sqs-money-native">200.00</span>
              </div>
            </div>
          </div>
          <div class="grid-meta-status">
            <div class="product-mark sold-out">sold out</div>
          </div>
        </section>
        <a href="/originals/a-day-in-the-weeds" aria-label="" a="" day="" in="" the="" weeds"="" original"="" class="grid-item-link"></a>
      </div>
      <div class="grid-item hentry category-in-the-weeds tag-all author-jessica-cecil post-type-store-item article-index-13 sold-out sqs-product-quick-view-button-hover-area is-loaded" id="thumb-a-day-in-the-weeds" data-item-id="5f07db9ded80fa4741aad1ac" data-controller="ProductListImageLoader" data-controllers-bound="ProductListImageLoader">
        <figure class="grid-image" data-animation-role="image">
          <div class="list-quick-view-wrapper sqs-product-quick-view-button-wrapper">
            <span class="sqs-product-quick-view-button" role="button" tabindex="0" data-id="5f07db9ded80fa4741aad1ac" data-group="5f07356969f7521d85f233ad">Quick View</span>
          </div>
          <div class="grid-image-wrapper has-hover-img">
            <img data-src="https://static1.squarespace.com/static/5f041b669538b147e0e24a89/5f07356969f7521d85f233ad/5f07db9ded80fa4741aad1ac/1594514045774/little+turtle+styled.jpg" data-image="https://static1.squarespace.com/static/5f041b669538b147e0e24a89/5f07356969f7521d85f233ad/5f07db9ded80fa4741aad1ac/1594514045774/little+turtle+styled.jpg" data-image-dimensions="1440x1440" data-image-focal-point="0.5,0.5" alt="&quot;A Day In The Weeds&quot; Original" data-load="false" class="grid-image-cover" data-parent-ratio="1.0" style="width: 100%; height: 100%; object-position: 50% 50%; object-fit: cover;" data-image-resolution="500w" src="https://static1.squarespace.com/static/5f041b669538b147e0e24a89/5f07356969f7521d85f233ad/5f07db9ded80fa4741aad1ac/1594514045774/little+turtle+styled.jpg?format=500w">
            <img data-src="https://images.squarespace-cdn.com/content/v1/5f041b669538b147e0e24a89/1594499833340-MHG0W4TM81GKYWZ9MRXZ/ke17ZwdGBToddI8pDm48kGS78un_bcNZLY1QrfTmegV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QHyNOqBUUEtDDsRWrJLTmmzJBBHkqvGAibxByi2-xi1RoNc7vr9m3ozvkcMF-yMAseWsVVmXrIaQg6-A-MY58/little+turtle+side+2.jpg" data-image="https://images.squarespace-cdn.com/content/v1/5f041b669538b147e0e24a89/1594499833340-MHG0W4TM81GKYWZ9MRXZ/ke17ZwdGBToddI8pDm48kGS78un_bcNZLY1QrfTmegV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QHyNOqBUUEtDDsRWrJLTmmzJBBHkqvGAibxByi2-xi1RoNc7vr9m3ozvkcMF-yMAseWsVVmXrIaQg6-A-MY58/little+turtle+side+2.jpg" data-image-dimensions="1440x1440" data-image-focal-point="0.5,0.5" alt="little turtle side 2.jpg" data-load="false" class="grid-image-hover" data-parent-ratio="1.0" style="width: 100%; height: 100%; object-position: 50% 50%; object-fit: cover;" data-image-resolution="500w" src="https://images.squarespace-cdn.com/content/v1/5f041b669538b147e0e24a89/1594499833340-MHG0W4TM81GKYWZ9MRXZ/ke17ZwdGBToddI8pDm48kGS78un_bcNZLY1QrfTmegV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QHyNOqBUUEtDDsRWrJLTmmzJBBHkqvGAibxByi2-xi1RoNc7vr9m3ozvkcMF-yMAseWsVVmXrIaQg6-A-MY58/little+turtle+side+2.jpg?format=500w">
            </div>
        </figure>
        <section class="grid-meta-wrapper" data-animation-role="content">
          <div class="grid-main-meta">
            <div class="grid-title">"A Day In The Weeds" Original</div>
            <div class="grid-prices">
              <div class="product-price">
                <span class="sqs-money-native">200.00</span>
              </div>
            </div>
          </div>
          <div class="grid-meta-status"></div>
        </section>
        <a href="/originals/a-day-in-the-weeds" aria-label="" a="" day="" in="" the="" weeds"="" original"="" class="grid-item-link"></a>
      </div>
      <div id='test-button' style="cursor:pointer;margin-top:100px;width:100%;text-align:center;">
        click here!
      </div>
    </div>
  </body>
</html>
Dharman
  • 30,962
  • 25
  • 85
  • 135
msc
  • 489
  • 2
  • 4
1

For simple solution, At initially you can write two elements(I mean the "SOLD OUT" text) at two position at top and bottom of the image. Write a condition to hide the elements based on your need.

For hiding elements, simply add a "hide" class to that element.

Ex :

<p class="top hide">SOLD OUT</p>
// image 
<p class="bottom">SOLD OUT</p>

JQuery :

if(condition)
{
$(".bottom").addClass("hide");
$(".top").removeClass("hide");
}
else{
$(".bottom").removeClass("hide");
$(".top").addClass("hide");
}
Mohanraj Periyannan
  • 309
  • 3
  • 14