Zingocan | jQuery, CSS, Wordpress Dersleri » Javascript

jQuery ScrollTo Plugini Nasıl Kullanılır

admin — Wed, 23 Jun 2010 11:49:49 +0000

Merhabalar.. Bugün sizlere, çoğu yabancı ve birkaç tane de türk blogunda yer alan, sonraki konu ya da yorumlara atla gibi jQuery ScrollTo Pluginini nasıl kullanırız onu göstereceğim.. Zaten şurada mevcut olan jQuery Pluginimizi öncelikle indirmemiz gerekiyor. Ve de jQuery scriptimizi şuradan indirebilirsiniz.

Birazdan sizler için ekleyeceğim demo da bi sonraki , bir önceki, yorumlar ve yorum bırak diye 4 adet link yerleştireceğim. Linkleri dilediğimiz gibi çoğaltabileceğimizi ,kendimize ait bir katman oluşturup artık sizin yaratıcılığınızla farklı şeyler de elde edebiliriz. İlk olarak plugini ve ne anlatmak istediğimi anlamak için demoyu inceleyiniz.

2 jQuery scriptimizin yanında 3 adet bölümden oluşan bir ders anlatacağım. Bunlara artık bildiğiniz gibi HTML ile başalyalım;

HTML Kodları

Arkadaşlar, bu özellik genelde wordpress bloglarında işe yaradığı için sanki worpdress temasına entegre ediyormuş gibi anlatacağım, oysaki dilediğiniz yerde kullanabilirsiniz.. Örneğimizi açıklarken şöyle bir şey daha açıklayayım; düşünelim ki bir wordpress temamız var ve wordpress temasının bütün blog yazılar post sınıfına dahil olsun. Yani her blog başlamadan önce bir post sınıflı katman açılsın. Buna göre uygularsak HTML kodlarımız şu şekilde olacaktır;

&amp;lt;div class=&amp;quot;post&amp;quot;&amp;gt;
	içerik..
&amp;lt;/div&amp;gt;

&amp;lt;div class=&amp;quot;post&amp;quot;&amp;gt;
	içerik...
&amp;lt;/div&amp;gt;

&amp;lt;div class=&amp;quot;post&amp;quot;&amp;gt;
	içerik...
&amp;lt;/div&amp;gt;

CSS Kodları

Arkadaşlar, CSS kodların yapmamız gereken tek değişiklik, yan tarafta duracak olan navigasyon panelimize, CSS derslerinde de bahsettiğim gibi, position:fixed değerini veriyoruz.

#navigasyon-cubuk {
	position: fixed;
	right: 15px;
	top: 35%;
}

Javascript

Zaten hali hazırda var olan plugine javascript kadlarıyla bir açıklık getirmemiz gerekiyor. Bunun için anonim fonksiyonlardan yararlanacağız.Tabi bundan önce her demo da olduğu gib, etiketlerimizin arasına aşağıda verdiğim scriptlerin yollarını göstermemiz gerekiyor;

&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;js/jquery-1.4.2.min.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;js/jquery.scrollTo-min.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;

Yukarıda son satırda bulunan kod birazdan ekleyeceğimiz anonim fonksiyonun başladığını gösteriyor.Scriptin amacı; ilk olarak kullanıcı sonraki butonuna tıkladığında, akordiyon şeklinde diğer yazıya yani diğer post sınıfına göderiyor bizi.

İkinci olarak;seçilen bölümün içeriği, pluginde var olan kodlar sayesinde bize thumb gösterimi ayarlıyor. Bu seçenek aslında sadece bir dahaki yazı gibi görünsede , blog içerisinde sadece sonraki ve önceki yazı olarak gösterilip ,yazı sayfalarında (single.php) yorumlar ve yorum yap diye iki adet daha eklenti kurulabilir. Örnekte hepsi bir arada gösterilmiştir.

$(function() {

 function scroll(direction) {

 var scroll, i,
 positions = [],
 here = $(window).scrollTop(),
 collection = $('.post');

 collection.each(function() {
 positions.push(parseInt($(this).offset()['top'],10));
 });

 for(i = 0; i &amp;lt; positions.length; i++) {
 if (direction == 'ileri' &amp;amp;&amp;amp; positions[i] &amp;gt; here) { scroll = collection.get(i); break; }
 if (direction == 'geri' &amp;amp;&amp;amp; i &amp;gt; 0 &amp;amp;&amp;amp; positions[i] &amp;gt;= here) { scroll = collection.get(i-1); break; }
 }

 if (scroll) {
 $.scrollTo(scroll, {
 duration: 750
 });
 }

 return false;
 }

 $(&amp;quot;#ileri,#geri&amp;quot;).click(function() {
 return scroll($(this).attr('id'));
 });

 $(&amp;quot;.scrolltoanchor&amp;quot;).click(function() {
 $.scrollTo($($(this).attr(&amp;quot;href&amp;quot;)), {
 duration: 750
 });
 return false;
 });

});

jQuery İconDock Plugin

admin — Fri, 28 May 2010 23:25:38 +0000

Merhaba arkadaşlar.. Sonunda eskişehire vardım.. Zingocan’a en azından 1 ay boyunca daha güzel ve yararlı içerikler ekleyecek ve daha fazla ilgileneceğim inşallah.. Bu konuda da Güzel bir jQuery Plugininden bahsedeceğim.

Pluginin adı iconDock olarak geçmektedir.. Plugin Apple tarzı bir İkon gösterim seçeneği sunmaktadır.. Bu seçeneğide aşağıda vereceğim demo sayfasında nasıl kullanabileceğinizi gösteren detaylı açıklama mevcuttur..

[one_third][button link="http://icon.cat/software/iconDock/0.8b/dock.html"]Demo Sayfası[/button][/one_third] [two_third_last][download_button link="http://icon.cat/wiki/IconDock_En#Download_older_versions"]Download[/download_button][/two_third_last] [clear]

Javascript 3D Model Görüntüleyici

admin — Wed, 26 May 2010 16:08:34 +0000

Javascript 3 Boyutlu Hareketlendirme

İnternette gezinirken rastladığım Javascript 3d Model Viewer adıyla, öncelik olarak vektör şablonlarını mouse hareketini izleyerek 3 Boyutlu halde hareketlendirme kazandıran sisteme sahip bir Javascript kontrol elemanı..

Yaratıcılık ve düşünsel kavramı işlevselleştirebilme hareketleri hoşuma gittiği için paylaşmak istedim.

İki kötü yanı mevcut ki İnternet Explorerda çalışmamakta ve 3 boyutlu hareketlendirme biraz yavaşcadır, fakat düşünce süper.

Demoya gitmek için tıklayın..

Bing Bong jQuery Oyun

admin — Thu, 20 May 2010 16:42:06 +0000

Şehir dışında olduğum için fazla blogumla ilgilenemiyorum ama yine de paylaşımda bulunayım dedim..
jQuery ya da javascript te diyebiliriz, bir oyun yapmışlar güzel de olmuş..
Oyuna gitmek için [button text="Taıklayın…" title="Tıka" url="http://www.zentastic.com/temp/bingbong/" align="right"]

jQuery Checkbox – Radyo Butonları

admin — Sat, 08 May 2010 18:06:09 +0000

Bu plugin jQueryui kitaplığında, kullanım alanı geniş olan checkbox ve radyo butonlarını ihtiyacınıza göre değişik şekillerde karşılayan hoş tasarımlı butonlar yapmanızı sağlar..

Bir tanecik blogumun plugin kategorisinde gölgelenmeye layık gördüğüm için, sizinle paylaşmak istedim..Ekran görüntüsü şöyle;

Web sitenizin; dilediğiniz bölgesinde kullanabileceğiniz, hatta birazcık PHP bilginiz var ise wordpress blogunuzda bile kullanabilirsiniz..Resimde gördüğünüzle kalmayan, kişiselleştirilebilir bir yapıya sahip.. Şimdi nasıl kullanacağınız anlatacağım, çünkü yapımcı sadece demo sayfa javascript dosyasını paylaşmış, herhangi bir kaynak koddan bahsetmiyor..

Diğer Scriptleri;
jquery.bind-Script
ui.checkBox-Script
jquery.usermode-Script (optional)

Şimdi birazcık konuya açıklık getirelim.. Aslında demo sayfada yazılanlardan anladıklarımı paylaşacağım, yoksa plugini ne kullandım ne de indirdim..

İlk olarak plugini kullanabilmek için yukarıda verdiğim javascript dosyalarını indirmeniz ve aşağıda belirteceğim şekilde html sayfanızın içerisine bildirimeniz gerekmektedir;

Yukarıda, javascript dosyalarını belirttik, fakat jquery.usermode.js dosyasını belirtmek zorunda değilsiniz, bu isteğe bağlıymış..

Daha sonra ise head etiketi bitmeden önce şöyle bir kaç script kodunun ne işe yaradığını gösterelim.

$('#check-all').click(function(){
 $('#example input[type=checkbox]').checkBox('changeCheckStatus', true);
 return false;
 });
 $('#uncheck-all').click(function(){
 $('#example input[type=checkbox]').checkBox('changeCheckStatus', false);
 return false;
 });
 $('#check-2').click(function(){
 $('#example input[type=radio]:eq(1)').checkBox('changeCheckStatus', true);
 return false;
 });
 $('#native').click(function(){
 //native methods
 $('#example input[type=radio]:eq(0)').attr({checked: true, disabled: true})
 //reflect the current state
 .checkBox('reflectUI');
 return false;
 });
 });

Bu kod ile default bölgesinde bulunan ve demoda en üst satırda gördüğünüz butonları ayarlayabilirsiniz.

yukarıda ki kodda ise,; check-all olarak adlandırılan butona tıklanıldığı zaman bütün kutuların yukarıda belirttiğimiz jquery metodu ile seçili kalmasını,

uncheck-all butonuna tıklanıldığı zaman da bu eylemin tersine dönüşmesi sağlanır.

Bu iki olay üst tarafta checkboxlar için alt tarafta ise radyo butonları için ayrı ayrı yazılmış kodlardan oluşuyor.

Ayrıca demoda gördüğünüz, Check Second Butonu ile de javascript ile hangi kutuyu seçmek isterseniz, video derslerimizde gösterdiğimiz gibi ikinci elemana bir metod atanır ve butona tıklanıldığı vakit ikinci buton seçili olur. Aslında çokta büyütülecek bir plugin olmasada fena görünmüyor..

Bol Güneşli günler dilerim..

Zingo Web Dersleri

admin — Wed, 05 May 2010 16:24:53 +0000

Zingocan Alt domainimiz ders.zingocan.com Blogunda, jQuery, CSS, WordPress Kaynaklarına yer vereceğiz.

Bir süreliğine Zingocan.com da kalacak olan ders, menü ve eklentiler ders.zingocan.com İsmi duyualana dek buradadır. Daha sonra kaldırılacaktır.

İlginiz için teşekkür ederim

Zingo Derse Giriş için Tıkla

jQuery için Güzel bir Başlangıç

admin — Mon, 03 May 2010 17:50:58 +0000

Merhaba arkadaşlar.. Zingocan.com blogumuz bildiğiniz üzere çok çeşitli ve bol kategorili makalelerle kişisel bir blog halini almış durumda.. Bu karışıklık sebebiyle ne aradığını bulamayan ya da bulsa bile tam olarak keşfedemeyen, açık açık soru ve sorunlarını beyan edemeyen bir çok arkadaşımız mevcut. Ben de daha önce söylediğim gibi, sırf jQuery konusuna değineceğim bir blog oluşturacağımı söylemiştim.. Yaklaşık bir haftadır başlamış olan jQuerydesign blogumuzun temel atma işlemi bitmiş bulunuyor.. Hatta jQuery’e yeni başlayacak olan arkadaşlar için, çoğu materyal ve ders anlatımını bloga eklemiş durumdayız..

jQuery Design blogunda yeni başlayanlar için şu konular mevcut (Liklere tıklayarak ilgili makaleye gidebilirsiniz);

jQuery Başlangıç Dersleri

Crystal Galaxy: Javascript Mücevherleri

admin — Sat, 01 May 2010 19:18:34 +0000

Session ayarlamalı, jQuery ve Javascript fabrikasının son haddine kadar kullanılmış JAVAdan uzak tamamen kontrollu web oyunlarını oynamak ister misiniz? 4 ayrı oyunuyla bir zamanlar dünyanın oyunu olan Mario dahi jspleştirilmiş..

Tümünü görebilmek için buraya, özellikle benim seçtiğim oyuna gitmek için ise buraya tıklayınız..

Crystal Galaxy

Crystal Galaxy is an action space shooter developed here at Effect Games. It has a unique, mouse based control scheme that allows you to move and aim your ship in any direction. The object is to get through the levels without dying, shoot enemies, and collect as many power-up crystals as you can

jQuery Dersleri: toggle ve toggleClass Metodları

admin — Mon, 15 Mar 2010 08:25:40 +0000

jQuery Video derslerimizde daha önce görmüş olduğumuz hide / show metodlarına bir alternatif olarak toggle metodu bulunmaktadır. toggle metodu belirlediğimiz nesneyi kaybedip daha sonra tekrar gösterebilme fonksiyonudur.

toggleClass ise; belirlediğimiz nesnelerin CSS sınıf ayarlamarını isteğimiz doğrultusunda değiştirip tekrar aynı haline geri alma fonksiyonudur.Daha kaliteli Görüntü için Videoyu indiriniz

Alternatif Video;

Video içeriğinden özet..

CSS

CSS ayarlarımızda kutu adındaki katmana nitelik kazandırdık ( 300 x 300 boyutlandırma ve orange arkaplan rengi)

kutu katmanında kullanılabilecek bir çerçeve (border) ayarı belirttik.

paragraf (

) larda kullanılabilecek arkaplan renkleri belirttik.

#kutu
    {
        width: 300px;
        height: 300px;
        background: orange;
    }
    .border
    {
    	border: 5px solid green;
    }
    .highlight
    {
    	background: yellow;
    }

[ad]

jQuery

Javascript kodlarımız arasında toggle metodunu kullanarak, kutu olarak atadığımız katmanın kaybolup tekrar görünmesini sağladık:

         $(function() {
                $('a#cerceve').click(function() {
                //$('#kutu').toggle('slow');
                    $('#kutu').toggleClass('border');
       });
                $('a#kutuac').click(function() {
                    $('#kutu').toggle('slow');

                });

                 $('p').click(function() {
                    $(this).toggleClass('highlight');

                 });
      });

toggleClass yöntemi ile kutu olarak atadığımız katmana çerçeve ekledik:


$('a#cerceve').click(function()  {
 $('#kutu').toggleClass('border');

});

Yine toggleClass metodu ile html şablonumuz içerisindeki paragraflarımızın CSS ayarlarına etki ederek bir arkaplan rengi oluşturmasını sağladık.

[code language="lang="]
$('p').click(function() {
$(this).toggleClass('highlight');

});
[/code]

$(‘p’).click(function() { ile
yi çağırıp
tıklandıktan sonra CSS deki highlight ögesini çalışır duruma getirdik.

Diğer Video Dersleri

Ders 1- jQuery Başlangıç

Ders 2 -Fade, Slide hide -show Me todları

Ders 3 -Animate Metodu

Ders 4 – Varyasyon Oluşturma

Ders 5 - toggle ve toggleClass Metodları

Ders 6 - jQuery Slidedown Metodu Kullanımı

Ders 7 - jQuery Dersleri: hover() Metodu

Ders 8 - jQuery hover ve chlidren Metodu

Ders 9 – Chaniable – Animate Metodu ile Nesne Hareketlendirme

Jquery Video Dersleri Rollever Fade Yöntemi

admin — Wed, 10 Mar 2010 16:17:06 +0000

Merhaba arakdaşlar.. Bugün itibariyle video derslere başlamış bulunuyorum.. Çekim esnasında bir kaç hata yaptım fakat bunları çekim dışında düzenledim artık hatalarımı maruz görünüz:)

Ben video içeriği dışında bir kaç bilgi daha vermek istiyorum;

Rollever yapıyı oluşturabilmek için videodada göründüğü gibi bir fonksiyon oluşturduk. Fonksiyonumuzun asıl mantığı ilk başta görünen resmin daha sonra mouse ile üzerine geldiğimiz zaman transparanlık kazanım ve en sonunda opacity ayarlarının 0 ‘ a düşmesini sağlıyor, arka kısımda bulunan background resmimizi ortaya çıkarıyor.. Aslında zaten bir backgorund resmimiz vardı fakat üzerinde bir resim olduğu için görünmüyordu, resmin opacity ayarını düşürdüğümüz için arkaplanımız ortaya çıktı.

Kodlarımız şu şelilde;

HTML

<pre><span class="tag"><img </span><span class="atn">class</span><span class="tag">=</span><span class="atv">"fade"</span><span class="tag">
</span><span class="atn">src</span><span class="tag">=</span><span class="atv">"images/who.jpg"</span><span class="tag">
</span><span class="atn">style</span><span class="tag">=</span><span class="embsrc"><span class="pun">"</span><span class="pln">background</span><span class="pun">:</span><span class="pln"> url</span><span class="pun">(</span><span class="pln">images</span><span class="pun">/</span><span class="pln">who_ro</span><span class="pun">.</span><span class="pln">jpg</span><span class="pun">);</span><span class="str">"</span></span><span class="tag"> </span><span class="atn">/</span><span class="tag">></span></pre>

CSS

CSS sınıflarında backgorund-image olarak adlandırılan ismi kendi isteğinize göre değişebilirsiniz.Resmimizin pozisyounu float: right seçeneğini kullanarak istediğimiz gibi efect verebiliriz. İstersek resmin bir kısmını gösterip diğer kısımları transparan yaparak backgorund resmimizle birlikte çalışmasına izin verebiliriz. Fakat CSS sınıflarında bir değişiklik yaparsak bunlara yeni boyut kazandırıp, HTML kodlarımız arasında ki div komutunu yaptığımız stile göre değiştirmemiz gerekir.

jQuery

1. Span daki wrap resmi (resmin pozisyonunu belirten kod)

2. background-image kodundaki arkaplan resmini ortaya çıkarma

3. Yeni bir resim olarak gösterme

4. Hover efecti ile resme animasyon katma:


(function ($) {
$.fn.cross = function (options) {
return this.each(function (i) {
var $$ = $(this);

var target = $$.css('backgroundImage').replace(/^url|[\(\)'"]/g, '');

$$.wrap('<span style="position: relative;"></span>')
.parent()
.prepend('<img>')
.find(':first-child')
.attr('src', target);

if ($.browser.msie || $.browser.mozilla) {
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : '',
'top' : this.offsetTop
});
} else if ($.browser.opera && $.browser.version < 9.5) {

$$.css({
'position' : 'absolute',
'left' : 0,
'background' : '',
'top' : "0"
});
} else { // Safari
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : ''
});
}

$$.hover(function () {
$$.stop().animate({
opacity: 0
}, 250);
}, function () {
$$.stop().animate({
opacity: 1
}, 250);
});
});
};

})(jQuery);

$(window).bind('load', function () {
$('img.fade').cross();
});

Aklınıza takılan herhangi bir soru olursa ben buradayım.. Bu ilk videolu jquery dersimdi.. kusurlarım varsa madur görünüz. Heycandandır

class="fade"
  src="images/who.jpg"
  style="background: url(images/who_ro.jpg);" />