Jump to content

Zwijanie tekstu opisu pliku


Go to solution Solved by Majster87,

Recommended Posts

Posted

Próbuje zwinac tekst w opisie i edytowałem orginalny fragment na cos takiego

 

<div class='ipsType_richText ipsContained ipsType_break ipsSpacer_bottom'
     data-controller='core.front.core.lightboxedImages core.front.core.truncate'
     data-truncate-size='5'
     data-truncate-type='lines'
     data-truncate-more='[Rozwiń]'
     data-truncate-less='[Zwiń]'>

    {$file->content()|raw}

</div>

{{if $file->editLine()}}
    {$file->editLine()|raw}
{{endif}}

 

ale nie zwija tekstu 😕

 

 

logo.png.519590789bae8db2833a4ecc09316aef.png

Zostaw suba, dużo pomożesz w tworzeniu: https://www.youtube.com/channel/UC8T8FoCAhg64dNIxQfCwhEQ

  • Solution
Posted (edited)

ok poradziłem sobie, uzyskałem to tym kodem:

 

<div id="descContainer">
  <div id="descContent">
    {$file->content()|raw}
  </div>
  <a href="#" id="toggleBtn" style="display:inline-block; margin-top:10px; font-weight:bold;">[Rozwiń]</a>
</div>

{{if $file->editLine()}}
  {$file->editLine()|raw}
{{endif}}

<script>
document.addEventListener("DOMContentLoaded", function () {
  const content = document.getElementById("descContent");
  const toggleBtn = document.getElementById("toggleBtn");
  const maxLines = 5;
  const lineHeight = 24;

  const fullHeight = content.scrollHeight;
  const maxHeight = maxLines * lineHeight;

  if (fullHeight <= maxHeight) {
    toggleBtn.style.display = "none";
    return;
  }

  content.style.maxHeight = maxHeight + "px";
  content.style.overflow = "hidden";

  let expanded = false;

  toggleBtn.addEventListener("click", function (e) {
    e.preventDefault();
    expanded = !expanded;
    content.style.maxHeight = expanded ? fullHeight + "px" : maxHeight + "px";
    toggleBtn.textContent = expanded ? "[Zwiń]" : "[Rozwiń]";
  });
});
</script>

 

Edited by Majster87

logo.png.519590789bae8db2833a4ecc09316aef.png

Zostaw suba, dużo pomożesz w tworzeniu: https://www.youtube.com/channel/UC8T8FoCAhg64dNIxQfCwhEQ

  • Manager
Posted
3 godziny temu, Majster87 napisał(a):
<div class='ipsType_richText ipsContained ipsType_break ipsSpacer_bottom'
     data-controller='core.front.core.lightboxedImages core.front.core.truncate'
     data-truncate-size='5'
     data-truncate-type='lines'
     data-truncate-more='[Rozwiń]'
     data-truncate-less='[Zwiń]'>

    {$file->content()|raw}

</div>

{{if $file->editLine()}}
    {$file->editLine()|raw}
{{endif}}

Jak się to pokazywało?

intermedia - profesjonalne rozwiązania Invision Power Board

---

Chcesz uzyskać szybko i sprawnie pomoc? Uzupełnij wersję i adres w profilu.

  • Manager
Posted

Problem ROZWIĄZANY. Jeśli są jakiekolwiek wątpliwości, pytania proszę o założenie nowego tematu.

Wszelkie uzasadnione reklamacje/pretensje/sugestie/rady przyjmuje ekipa forum.

intermedia - profesjonalne rozwiązania Invision Power Board

---

Chcesz uzyskać szybko i sprawnie pomoc? Uzupełnij wersję i adres w profilu.

Guest
This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.