Webmaster Blog

Aramak İstediğiniz Kelimeyi Giriniz

Grafik & Tasarım

JQUERY ile yazının devamını/tamamını görüntüleme

Uzun metinlerde DEVAMI niteliğinde kullandığımız MORE özelliğini WORDPRESS kullananlar bilir. Sayfada fazla kalabalık yapılmaması amacıyla kullanılır, yazı bir bölümünde kesilir ve DEVAMI tıklandığında yazının tamamı görüntülenir.

WordPress değilde kendi sayfalarımızda bu özelliği ajax olarak yani dinamik sayfa üzerinden JQUERY ile kullanmak oldukça kolay. Hem görüntü ve estetik açısından hemde işlev olarak oldukça güzel bir özellik.

Yapmak için :

Öncelikle <head> tagları arasına aşağıdaki scriptlerimizi ekliyoruz.

  • <script type=”text/javascript” src=”js/jquery.js”></script><script type=”text/javascript”>
    $(document).ready(function() {$(“span.devam”).hide();

    $(‘<a>Tamamını görüntüle &gt;&gt;</a> ‘).insertBefore(‘.devam’);

    $(“a.reveal”).click(function(){
    $(this).parents(“p”).children(“span.devam”).fadeIn(2500);
    $(this).parents(“p”).children(“a.reveal”).fadeOut(600);
    });

    });
    </script>

Burada bulunan jquery.js kütüphanesini BURAYA TIKLAYARAK edinebilirsiniz. Ayrıca jquery resmi sayfasındanda indirebilirsiniz.

Yazmış olduğumuz scriptte bir devam adında span classı oluşturduk.Bu sayede <span class=”devam”> GIZLENECEK METIN </span> arasında yazdığımız metin gizlenecek ve tamamını görüntüle’ye basıldığında ise efektli bir şekilde sayfa içerisinde açılacak. Yani şu şekilde :

Bu metin sayfanın ilk açıldığında gözükür.  <span class=”devam”>buradaki metin ise tamamını görüntüye basıldıktan sonra gözükür.</span></p>

şeklinde. Hepsi bu kadar. İlk okuyuşda anlamayabilirsiniz. Ancak alt taraftaki linkten örneğine/demosuna ulaşarak inceleyebilirsiniz.

JQUERY-yazının tamamını görüntüle ÖRNEK / DEMO

Yorum Yap

Leave a Reply

E-posta hesabınız yayımlanmayacak.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

İlginizi Çekebilir

Genel

Vahşi ama güzeller. Ürpertici değil mi ? Vahşilerden sadece bazıları…

Google'dan Haberler

Google Mobil Uyumluluk ile Sitenizin mobil uyumluluk düzeyini test edin. Google yenilikleriyle her zaman ön planda olmaya devam ediyor. Bunun yanı sıra webmasterların işini...

Google'dan Haberler

Google çığır açmaya devam ediyor..   ABD’li internet devi Google bünyesindeki sosyal paylaşım ağı Google+ sitesindeki Project Glass (Cam Projesi) sayfasına dün yerleştirilen bir video...

WordPress

WordPress Temaları arasında dikkat çeken bir tema Scheme Lite temasını incelemek istedik. Scheme Lite, wordpress blog temaları arasında oldukça sade ve şık tasarımı ile...