Forumunuz için genişletilebilir alıntı mesajları yapımı

[Ripbyrustavi]

Global.css'inize ekleyin:

Kod: Tümünü Seç Tümünü Kopyala

.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;
}

Footer şablonuna girin ve en alta ekleyin:

Kod: Tümünü Seç Tümünü Kopyala

<script>
const bbCodeQuoteExpandHtml = '<div class="quote__expand"><span>Devamını görmek için tıklayın...</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>

Şu şekilde görünecektir:

[admin]

Global.css'inize ekleyin:

Kod: Tümünü Seç Tümünü Kopyala

.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;
}

Footer şablonuna girin ve en alta ekleyin:

Kod: Tümünü Seç Tümünü Kopyala

<script>
const bbCodeQuoteExpandHtml = '<div class="quote__expand"><span>Devamını görmek için tıklayın...</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>

Şu şekilde görünecektir:

Alıntı deneme...

destek'te uyguladım, bakalım olacak mı...
Teşekkürler.

[Arch]

Harika

[Novruz]

jQuery ihtiyaç duymadan;

PHP Kod: Tümünü Seç Tümünü Kopyala

    const bbCodeQuoteExpandHtml = '<div class="quote__expand"><span>Devamını görmek için tıklayın...</span></div>';
    const bbCodeQuotes = document.querySelectorAll('.mycode_quote');
    
    bbCodeQuotes.forEach(function(el) {
        if (el.parentElement.classList.contains("mycode_quote")) {
        return el.style.cssText = "max-height:initial";
    }

        if (el.scrollHeight > el.clientHeight) {
        return [el.style.cssText = "overflow:hidden",
            el.insertAdjacentHTML('beforeend', bbCodeQuoteExpandHtml)]
    }
});
    
    const bbCodeQuoteExpand = document.querySelectorAll('.quote__expand');
    bbCodeQuotes.forEach(function(el) {
        el.addEventListener('click', function(a){
            var ele = a.target.closest('.quote__expand');
            ele.parentNode.removeChild(ele);
            const bbCodeQuote = this.closest('.mycode_quote');
            bbCodeQuote.style.cssText += 'max-height:'+ el.scrollHeight + 'px';
        })
        }); 


[#Power]

oh sonunda bütün konuyu alıntılayan aptallara uğraşmıcaz