MyBB Alıntılanan Mesaja Devamını Oku Özelliği Ekleme

  • Konbuyu başlatan Konbuyu başlatan Yondaime
  • Başlangıç tarihi Başlangıç tarihi
  • 💬Cevaplar 💬Cevaplar 0
  • 👁️‍🗨️Görüntüleme 👁️‍🗨️Görüntüleme 130

Yondaime

Yeni üye
📅Katılım
12 Mar 2025
💬Mesajlar
19
🎭Tepki puanı
17
🏆kupalar
3
🌍Website
gidenler.me
🌟Puan
16,126
💵Bakiye
10TL
Bu modifikasyon ile Xenforo sistemindeki gibi alıntılanan mesajlara devamını oku özelliği ekleyeceğiz.

Kullandığınız temanın global.css stilinin en sonuna ekleyin ve kaydedin:

Kod:
.mycode_quote {
    position: relative;
    overflow-y: auto;
    max-height: 200px;
    transition: max-height 500ms ease-in-out;
}

.quote__expand {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to bottom, rgba(249,250,250,0) 0%, #f9fafa 60%);
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    text-align: center;
    height: 75px;
    cursor: pointer;
}

.quote__expand span {
    position: absolute;
    bottom: 10px; left: 0; right: 0;
}

Şimdi ise footer şablonlarının en sonuna aşağıdaki kodları ekleyip kaydediniz.

Kod:
<script>
const bbCodeQuoteExpandHtml = '<div class="quote__expand"><span>Click to expand...</span></div>';

const bbCodeQuotes = $('.mycode_quote');
bbCodeQuotes.each(function() {
    if ($(this).parent('.mycode_quote').length) {
        return $(this).css('max-height', 'initial');
    }

    if (this.scrollHeight > this.clientHeight) {
        return $(this).css('overflow', 'hidden').append(bbCodeQuoteExpandHtml)
    }
})

const bbCodeQuoteExpand = $('.quote__expand');
bbCodeQuoteExpand.on('click', function() {
    const bbCodeQuote = $(this).parent('.mycode_quote');

    $(this).remove();
    bbCodeQuote.css('max-height', bbCodeQuote.prop('scrollHeight'));
})
</script>

Tüm işlemler bu kadar.

Önizleme

 

Benzer konular

💬Cevaplar
0
👁️‍🗨️Görüntüleme
118
💬Cevaplar
0
👁️‍🗨️Görüntüleme
117
💬Cevaplar
0
👁️‍🗨️Görüntüleme
126
💬Cevaplar
0
👁️‍🗨️Görüntüleme
151

Günün trendleri

Geri