Challenges with the Placement of Buttons

Question

Challenges with the Placement of Buttons

I am facing an issue with the code below:

document.addEventListener("DOMContentLoaded", function(event) {
  // Select all the read more buttons and hidden contents
  const readMoreButtons = document.querySelectorAll(".read-more");
  const hiddenContents = document.querySelectorAll(".hidden");
  // Now loop over the read more buttons 
  readMoreButtons.forEach((readMoreButton, index) => {
    // Add onclick event listeners to all of them
    readMoreButton.addEventListener("click", () => {
      // Change content of read more button to read less based on the textContent
      if (readMoreButton.textContent === "Read More") {
        readMoreButton.textContent = "Read Less";
      } else {
        readMoreButton.textContent = "Read More";
      }
      // Toggle class based on index
      hiddenContents[index].classList.toggle("hidden");
      readMoreButton.closest(".snip1311").classList.toggle("reading");
    })
  })
})

/* Projects */
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
.project-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    color: white;
}
figure.snip1311.reading {
  overflow-y: auto;
}

figure.snip1311 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  float: left;
  overflow-y: hidden;
  overflow-x: hidden;
  margin: 10px 1%;
  min-width: 230px;
  max-width: 360px;
  max-height: 256px;
  width: 500rem;
  color: #ffffff;
  text-align: left;
  background-color: #07090c;
  font-size: 16px;
  -webkit-perspective: 50em;
  perspective: 50em;
  border: 5px solid #555;
}
figure.snip1311 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
figure.snip1311 img {
  max-width: 110%;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  backface-visibility: hidden;
  height: 258px;
}
@media all and (max-width: 500px) {
figure.snip1311 img {
  border: none;
  }
}
figure.snip1311 figcaption {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  -webkit-transform: rotateX(90deg) translate(0%, -50%);
  transform: rotateX(90deg) translate(0%, -50%);
  -webkit-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  z-index: 1;
  opacity: 0;
  padding: 0 30px;
}
figure.snip1311 h3,
figure.snip1311 p {
  line-height: 1.5em;
}
figure.snip1311 h3 {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
}
figure.snip1311 p {
  font-size: 0.8em;
  font-weight: 500;
  margin: 0 0 15px;
}
figure.snip1311 .read-more {
  border: 2px solid #ffffff;
  padding: 0.5em 1em;
  font-size: 0.8em;
  text-decoration: none;
  color: #ffffff;
  display: inline-block;
}
figure.snip1311 .read-more:hover {
  background-color: #ffffff;
  color: #000000;
}
figure.snip1311 .read-more1 {
  border: 2px solid #ffffff;
  padding: 0.5em 1em;
  font-size: 0.8em;
  text-decoration: none;
  color: #ffffff;
  display: inline-block;
}
figure.snip1311 .read-more1:hover {
  background-color: #ffffff;
  color: #000000;
}
figure.snip1311:hover img,
figure.snip1311.hover img {
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
  opacity: 0;
  -webkit-transition-delay: 0;
  transition-delay: 0;
}
figure.snip1311:hover figcaption,
figure.snip1311.hover figcaption {
  -webkit-transform: rotateX(0deg) translate(0, -50%);
  transform: rotateX(0deg) translate(0, -50%);
  opacity: 1;
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}
.hidden{
display:none;
}
.read-more{
cursor:pointer;
}

<figure class="snip1311"><img src="https://www.thespruce.com/thmb/tClzdZVdo_baMV7YA_9HjggPk9k=/4169x2778/filters:fill(auto,1)/the-difference-between-trees-and-shrubs-3269804-hero-a4000090f0714f59a8ec6201ad250d90.jpg" alt="sample98"/>
  <figcaption>
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet [...]<br />
  </figcaption>
</figure>

After running the code snippet above, I noticed that when clicking the read more button, it suddenly disappears due to the lengthy text pushing it upwards. How can I ensure that the read-more button remains at the top regardless of the text length?

Desired Output

The main goal is to maintain the same margin between the read more button and the top of the card as shown in the desired output image. The alignment should stay unchanged, only ensuring that the button always appears with a consistent margin-top, irrespective of the text length. Any suggestions on achieving this result would be greatly appreciated.

javascript html jquery css

Answer 1

Answer №1

Your element is undergoing a center flip, causing it to overflow towards the top of the scrollable section and positioning the text at a mid-top location from the center based on the content within the element once it becomes visible.

UPDATE: There are two instances in your CSS where you have applied translate(0%, -50%). The second one affects the Y axis, pushing the content 50% upwards and leading to the issue of the top not being visible.

To determine the clientHeight of the flipped element, first add a class, shown, to the element after removing the hidden class. Then use a timeout of 10 to ensure that the DOM is properly set before fetching the clientHeight of the added class shown. Divide this value by 2, subtract half of the parent element's height, including padding, and locate the top position of your content.

Next, pass this unit as a variable to your CSS using the root element =>

document.documentElement.style.setProperty('--distTrans', 'distance')

. This action will establish a CSS variable for setting the distance to position the top of your flipped content. In the CSS, adjust the transform property of the shown selector to translateY(var(--distTrans)), which will move the text to the top of the content excluding padding.

// JavaScript functions for handling showing and hiding content
function showLess(e) {
  document.querySelectorAll('.showBtn').forEach(btn => {
    if (e.target === btn) {
      btn.closest(".snip1311").classList.toggle("reading");
      btn.parentNode.classList.toggle('shown')
      btn.parentNode.classList.toggle('hidden')
    }
  })
}

// Parse the content upon DOM load
function parseContent(event) {
  // Select all the read more buttons and hidden contents
  const readMoreButtons = document.querySelectorAll(".read-more");
  const hiddenContents = document.querySelectorAll(".hidden");
  // Loop over the read more buttons 
  readMoreButtons.forEach((readMoreButton, index) => {
    // Add onclick event listeners
    readMoreButton.addEventListener("click", function(e) {
      setTimeout(() => {
        // Calculate the distance to translate
        document.documentElement.style.setProperty('--transDist', document.querySelector('.shown').clientHeight / 2 - document.querySelector('.snip1311').clientHeight / 2 + 'px');
      }, 10);
      // Toggle classes
      hiddenContents[index].classList.toggle("hidden");
      hiddenContents[index].classList.toggle("shown");
      
      let shown = document.querySelectorAll('.shown')
      if (shown) {
        shown.forEach(item => {
          item.addEventListener('click', showLess)
        })
      }
      readMoreButton.closest(".snip1311").classList.toggle("reading");
    })
  })
}

// Call the parseContent function upon DOM content load
document.addEventListener("DOMContentLoaded", parseContent)

/* Styling code for projects */

:root {
  --transDist: 100px;
}

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
.project-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  color: white;
}

figure.snip1311.reading {
  overflow-y: auto;
}

/* Rest of the CSS styling rules for figure.snip1311 ... */

<figure class="snip1311"><img src="sample-image.jpg" alt="Sample Image" />
  <figcaption>
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed orci interdum, eleifend nisl suscipit, ornare urna. Curabitur vel maximus lacus.</p>
    <button class="read-more">Read More</button>
    <br>
    <p class="hidden">
        /* Content inside the hidden section */
    </p>
  </figcaption>
</figure>

Answer 2

Your element is undergoing a center flip, causing it to overflow towards the top of the scrollable section and positioning the text at a mid-top location from the center based on the content within the element once it becomes visible.

UPDATE: There are two instances in your CSS where you have applied translate(0%, -50%). The second one affects the Y axis, pushing the content 50% upwards and leading to the issue of the top not being visible.

To determine the clientHeight of the flipped element, first add a class, shown, to the element after removing the hidden class. Then use a timeout of 10 to ensure that the DOM is properly set before fetching the clientHeight of the added class shown. Divide this value by 2, subtract half of the parent element's height, including padding, and locate the top position of your content.

Next, pass this unit as a variable to your CSS using the root element =>

document.documentElement.style.setProperty('--distTrans', 'distance')

. This action will establish a CSS variable for setting the distance to position the top of your flipped content. In the CSS, adjust the transform property of the shown selector to translateY(var(--distTrans)), which will move the text to the top of the content excluding padding.

// JavaScript functions for handling showing and hiding content
function showLess(e) {
  document.querySelectorAll('.showBtn').forEach(btn => {
    if (e.target === btn) {
      btn.closest(".snip1311").classList.toggle("reading");
      btn.parentNode.classList.toggle('shown')
      btn.parentNode.classList.toggle('hidden')
    }
  })
}

// Parse the content upon DOM load
function parseContent(event) {
  // Select all the read more buttons and hidden contents
  const readMoreButtons = document.querySelectorAll(".read-more");
  const hiddenContents = document.querySelectorAll(".hidden");
  // Loop over the read more buttons 
  readMoreButtons.forEach((readMoreButton, index) => {
    // Add onclick event listeners
    readMoreButton.addEventListener("click", function(e) {
      setTimeout(() => {
        // Calculate the distance to translate
        document.documentElement.style.setProperty('--transDist', document.querySelector('.shown').clientHeight / 2 - document.querySelector('.snip1311').clientHeight / 2 + 'px');
      }, 10);
      // Toggle classes
      hiddenContents[index].classList.toggle("hidden");
      hiddenContents[index].classList.toggle("shown");
      
      let shown = document.querySelectorAll('.shown')
      if (shown) {
        shown.forEach(item => {
          item.addEventListener('click', showLess)
        })
      }
      readMoreButton.closest(".snip1311").classList.toggle("reading");
    })
  })
}

// Call the parseContent function upon DOM content load
document.addEventListener("DOMContentLoaded", parseContent)

/* Styling code for projects */

:root {
  --transDist: 100px;
}

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
.project-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  color: white;
}

figure.snip1311.reading {
  overflow-y: auto;
}

/* Rest of the CSS styling rules for figure.snip1311 ... */

<figure class="snip1311"><img src="sample-image.jpg" alt="Sample Image" />
  <figcaption>
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed orci interdum, eleifend nisl suscipit, ornare urna. Curabitur vel maximus lacus.</p>
    <button class="read-more">Read More</button>
    <br>
    <p class="hidden">
        /* Content inside the hidden section */
    </p>
  </figcaption>
</figure>

Challenges with the Placement of Buttons

Desired Output

Answer №1

Similar questions

Unable to reveal hidden text with invisible formatting (font-size: 0)

Tips on updating an HTML page following the receipt of a CURL request by a PHP script

Issues with LocalStrategy not executing in passport authentication

Retrieving Data Entries from a MySQL Database with AJAX, PHP, and JSON

Evaluating CSS Specificity

When clicked, verify whether the div is already open. If it is closed, open it using the .show method. If it is already

Conceal navigation button within react-material-ui-carousel

"Unlocking the Power of jQuery: A Guide to Accessing XML Child

Executing NodeJS custom middleware to show parent function being called

Convert HTML tables from Yahoo Pipes into an array of JSON objects

Guide to finding and saving email addresses from a string output: extracting and storing each one individually in a text file

What is the significance of the "#" character in the URL of a jQuery mobile

Creating a stunning art exhibition using React Native

Updating Rails modal fields via AJAX on the modal index page

What is the best way to transmit a JSON object rather than a JSON string to the browser using Rails?

Angular Material: Enhanced search input with a universal clear button

VueJS not refreshing DOM after AJAX data modification

Using Selenium with C# to find elements within a chart

Changing the information of objects stored in arrays using React Three Fiber

Using JSON in JavaScript to handle the click event of ASP.NET buttons