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

**Hasan** · 11-12-2025, 07:06 PM

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

https://imgur.com/15FzZhp