How do I position the button with the thumbtack class to be inside the div card but still have the pinning functionality?

HTML-CSS
1 
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<div class="container flex">
  <article class="card">
     <center>
    <div style="width:70%; box-shadow:0 0 5px #bbb; padding:5px 10px 5px 10px">
    <p class="myclass" style="font-size:0.7em; margin-left:-2px; margin-top:3px; text-align:left; color:#444; font-weight:500">Benjamin Pelletier</p>
    <container class="mySlides AASJ"> <!-- added class as per option name -->
<img src="https://deviceconsole.desinic8.repl.co/aa-offline.png" class="screenimg" preload="none" width="90%" id="myImage">
    <container id="divMsg" style="background-color: transparent; color: #ffffff; height: auto; width: auto; text-align: center">
      <center>
      <div style="display:none; background-color:transparent; padding:5px; margin-bottom:2px">
      </div>
        </center>
  </container>
     </container>
     </div>
     </center>
<button class="thumbtack">Pin</button> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <input type="image" src="eye.png" title="Not yet released" disabled style="display:none; cursor:not-allowed; width:16px" onclick="#">
      <input type="image" src="unlock.png" title="Release" style="width:16px; margin-right:3px" onclick="before();">
      <input type="image" src="lock.png" title="Lock" style="width:16px; margin-right:3px" onclick="afterr();">
      <input type="image" src="heart.png" title="Report self-harm" style="width:16px; margin-right:3px" onclick="reportHarm();">
  </article>
  <article class="card">
    <center>
    <div style="width:70%; box-shadow:0 0 5px #bbb; padding:5px 10px 5px 10px">
    <p class="myclass" style="font-size:0.7em; margin-left:-2px; margin-top:3px; text-align:left; color:#444; font-weight:500">Darryn Hanson
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></p>
    <container class="mySlides AASJ"> <!-- added class as per option name -->
<img src="https://deviceconsole.desinic8.repl.co/aa-offline.png" class="screenimg" preload="none" width="90%" id="myImage1">
    <container id="divMsg" style="background-color: transparent; color: #ffffff; height: auto; width: auto; text-align: center">
      <center>
      <div style="display:none; background-color:transparent; padding:5px; margin-bottom:2px">
      </div>
        </center>
</container>
</container>
</div>
</center>
<button class="thumbtack">Pin</button> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <input type="image" src="eye.png" title="Not yet released" disabled style="display:none; cursor:not-allowed; width:16px" onclick="#">
      <input type="image" src="unlock.png" title="Release" style="width:16px; margin-right:3px" onclick="before1();">
      <input type="image" src="lock.png" title="Lock" style="width:16px; margin-right:3px" onclick="afterr1();">
      <input type="image" src="heart.png" title="Report self-harm" style="width:16px; margin-right:3px" onclick="reportHarm();">
  </article>
  <article class="card">
    <center>
    <div style="width:70%; box-shadow:0 0 5px #bbb; padding:5px 10px 5px 10px">
    <p style="font-size:0.7em; margin-left:-2px; margin-top:3px; text-align:left; color:#444; font-weight:500">
  Nicole Bradley       
    </p>
     <container class="mySlides AASJ"> <!-- added class as per option name -->
 <img src="https://deviceconsole.desinic8.repl.co/profile-student.png" class="screenimg" preload="none" width="90%" id="myImage2">
  <container id="divMsg2" style="background-color: transparent; color: #ffffff; height: auto; width: auto; text-align: center; display:none">
    <center>
      <div style="display:none; background-color:#4d525e; padding:5px; width:70%; border-bottom-left-radius:8px; border-bottom-right-radius:8px">
    </div>
    </center>
  </container>
  </container>
    </div>
    </center>
    <button class="thumbtack">Pin</button>
    <input type="image" src="unlock.png" title="Release" style="width:16px; margin-right:3px" onclick="before2();">
      <input type="image" src="lock.png" title="Lock" style="width:16px; margin-right:3px" onclick="afterr2();">
      <input type="image" src="heart.png" title="Report self-harm" style="width:16px; margin-right:3px" onclick="reportHarm();"> 
  </article>
</div>
<style>
.flex {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.card {
  width: 340px;
}

.order-1 {
  order: -1;
}

.order-1 > .thumbtack {
  color: #1095c1;
}

/* reset some picocss styles */
.thumbtack {
  all: unset;
  color: #666;
  text-align: center;
  padding:2px 4px;
  border-left:1px solid #bbb;
  border-right:1px solid #bbb;
  border-top:1px solid #bbb;
  border-bottom:1px solid #bbb;
  background-color:white;
  cursor: pointer;
}
</style>
<script>
const buttons = document.querySelectorAll(".thumbtack");
const cards = document.querySelectorAll(".card");

buttons.forEach((button) => {
  button.addEventListener("click", ({ target }) => {
    target.parentElement.classList.toggle("order-1");
    target.textContent = target.textContent === "Pin" ? "Pinned" : "Pin";
    target.blur();
  });
});
</script>

I’ve separated the code so it should be pretty easy. I’ve tried just placing the button where I want it and it won’t pin. I would like it to look like this:
Where I'd like the functioning button to be

1 Like
2

I do not know any js, so am unable to help much,

however:
at the time of sending this there have been 38 views to this thread. :frowning:

It may be better to try asking this in the JavaScript channel.

I hope you find the answer if you haven’t already :slight_smile:

3

You’ve posted a lot recently regarding this project. Lots of duplicate posts too. I believe you’re not getting a lot of responses because you’re putting up a lot of jumbled and incomplete code… like why does this code snippit have like four different links to font-awesome in it… and asking how to do this or that.

I saw someone mention to you before about possibly supplying a link to a CodePen or something where you can share an active functional example of the problem you’re having. Usually for something like this, playing around with the code is necessary, and if you don’t supply an environment to do so, someone on this end would have to build it themselves before they could fully help.

I did try to build a test page with the code you supplied, but something is missing, as this was the result of running the code you supplied above.

image

There isn’t much I can do with that to figure out why you’re pin icon isn’t staying where you want it to.

1 Like
4

Ok thank you. I’ll link a codepen or try something else.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.