jQuery "Show/Hide" Yapımı

Merhaba arkadaşlar, bugün jQuery'nin velinimetlerinden olan göster/gizle efektinin nasıl ve hangi alanlarda kullanabileceğinizi anlatacağım. Artık ufak ufak bunun gibi gerekli ve önemli jQuery yazılarım ile karşılaşabilirsiniz. Başlıyorum.

<div id="showhide">
    <div><input type="button" value="Göster / Gizle" style="margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Gizle'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Göster'; }">
<div style="background: #f2f2f2; margin: 20px auto;
border: 0px solid #BBB;
padding: 0px;">
<div style="display: none;">
  Bu bölüme yazmak istediklerinizi yazacaksınız.
</div>

DEMO

Hangi Alanlarda Kullanabilirim ?

• Blogunuzda ki kod paylaşımlarınızda.
• Spoiler yorumlar veya içeriklerinizde.
• Yazılarınız da bulunan uzun alıntılarda.

Ve çeşitli yerlerde kullanabilirsiniz. Umarım bu anlatımım işinize yarayacaktır. İyi bloglamalar.

Devamı »

Blogger jQuery Lazy Load Eklentisi

Merhaba arkadaşlar, bugün akşam üzeri bloguma eklemiş olduğum jQuery Lazy Load eklentisini sizlerle paylaşmak istedim.Bu eklenti ile blogunuzda bulunan tüm resimleri, flash ve js dosyalarını sizler web sayfasının aşağısına doğru indikçe yükleniyor ve blogunuzda gözle görülür bir hızlanma oluşuyor.





Ayrıca göze hitap ediş şeklide bir o kadar güzel.Tam olarak ne işe yaradığını şematik bir resim ile göstereyim.

Nasıl ekliyoruz bu eklentimizi ? Hemen anlatayım.

Aşağıdaki kodu bulun

</head>

Daha sonra bulduğumuz kodun hemen üstüne aşağıdaki kodları ekleyin.

<script charset='utf-8' src='http://konfor.enesilhan.net/js/jquery.min.js' type='text/javascript'></script> <script src='http://konfor.enesilhan.net/js/jquery.lazyload.js' type='text/javascript'></script> <script type='text/javascript'> $(function() { $("img").lazyload({ placeholder : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKiwRDLwKwx5XofNor-ewBrvb0uEPva0gPlZAsJpdRHiwcavIBAEYVIqBwmTzuwYJHZhupBVcWnQdkiGeu121NYPLvvcRA6PI_zWfLv8ophzKqhbz4PrsHQzK2YDm2ITl9fPfDkpfpKlo/s1600/grey.gif", effect : "fadeIn" }); }); </script> <script type="text/javascript"> if (window.jstiming) window.jstiming.load.tick('headEnd'); </script>

İşlemlerimiz bu kadar temanızı kaydedebilir ve bloglamaya devam edebilirsiniz.

Devamı »