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. Continue reading
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. Continue reading
Javascript 3 Boyutlu Hareketlendirme
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. Continue reading
Ş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"]
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; Continue reading
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
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.. Continue reading
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.. Continue reading
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. Continue reading
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;
<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 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.
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 
<img class="fade" src="images/who.jpg" style="background: url(images/who_ro.jpg);" />