Article component Using js

Community feedback

• 

  Rohloffmeister•470

  @Rohloffmeister

  Posted 8 months ago

  Hello, good job so far. To get to your question here is my share button html

  <div id="shareButton" class="share">
              <img
                id="shareImg"
                class="share-button"
                alt="Share icon"
                src="images/icon-share.svg"
              />
              <div id="shareWindow" class="share-hidden">
                <div class="content">
                  <span>SHARE</span>
                  <a href="" target="_blank"><img alt="Facebook Icon" src="images/icon- facebook.svg"/></a>
                  <a href="" target="_blank"><img alt="Twitter Icon" src="images/icon-twitter.svg"/></a>
                  <a href="" target="_blank"><img alt="Pinterst Icon" src="images/icon-pinterest.svg"/></a>
                </div>
              </div>
            </div>
  
  

  This is both for my mobile and desktop view. Instead of using two share button try using one and make it hover over the popup window (z-index). Heres my css code for the popup

  
  /* <-------------------------------------------- Dekstop -------------------------------------> */
  footer .share {
      display: flex;
      position: relative;
      justify-content: center;
      align-items: center;
      width: 0px;
      aspect-ratio: 1/1;
      border-radius: 50%;
      background-color: var(--light-grayish-blue);
      z-index: 3;
    }
    .share > img.active {
      background-color: var(--light-grayish-blue);
    }
  
    footer .share > img {
      width: 27px;
      overflow: visible;
      aspect-ratio: 1/1;
    }
  
    .share-hidden {
      z-index: 15;
      position: absolute;
      bottom: 125%; 
      left: 50%; 
      transform: translateX(-50%); 
      min-width: 200px;
      width: fit-content;
      padding: 0.5rem 1rem;
      border-radius: 10px;
      background-color: var(--very-dark-grayish-blue);
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    .share-hidden::after {
      content: '';
      position: absolute;
      top: 99%;
      left: 50%;
      border: 10px solid transparent;
      border-top-color: var(--very-dark-grayish-blue);
      transform: translateX(-50%);
    }
    .share-hidden .content {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }
  
    .share-hidden img {
      height: clamp(30px, 2vw, 40px);
      aspect-ratio: 1/1;
      position: relative;
      flex-shrink: 0;
      z-index: 11;
      margin: 0 1rem;
      cursor: pointer;
      padding: auto;
    }
  
  /* <------------------------ Mobile -------------------------------------> */
  
  footer .share {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    width: 40px;
    aspect-ratio: 1/1;
    border-radius: 50%;
  }
  
  footer .share > img {
    width: clamp(12px, 4vw, 100px);
    background-color: var(--light-grayish-blue);
    aspect-ratio: 1/1;
    padding: 9px;
    border-radius: 50%;
    z-index: 11;
  }
  
  .share img.active {
    background-color: white;
  }
  .share-hidden {
    position: absolute;
    bottom: 0;
    left: -20px; 
    right: -20px; 
    background-color: var(--very-dark-grayish-blue);
    height: 100%;
    display: none;
    align-items: center;
    justify-content: flex-start;
    padding: 0 1.2rem;
    z-index: 5;
  }
  .share-hidden.active {
    display: flex;
  }
  .share-hidden .content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 65%;
  }
  
  .share-hidden span {
    color: var(--grayish-blue);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    margin-right: 0.5rem;
  }
  .share-hidden img {
    height: clamp(20px, 7vw, 40px);
    aspect-ratio: 1/1;
    margin: 0 0.5rem;
    cursor: pointer;
  }
  
  

  Might be a bit much but it worked for me. I bassicly have the elements from the popup inside the button div (in the html) and made the popup position absolute so i can always have it hover over the middle of the button

      z-index: 15;
      position: absolute;
      bottom: 125%; /* Offset is 125% of the button height starting from the base of the button  so the popup hovers over roughly 25 % of the button height over the button*/
      left: 50%;  /*Offset is 50% of the button width starting from the left side of the button*/
      transform: translateX(-50%) /* adds the -50% of the popup window width to the 
                                                        offset*/
  
  

  And for the javascript i would suggest you to use .classList.toggle("") Sorry if its to hard to understand i dont know how to explain stuff. If you want to look at how i did this website, heres the reposetory and live website Github Repo Live Website

  11