Hakan ERSU » Jquery http://www.hakanersu.com Karalamalar Mon, 06 Sep 2010 06:53:30 +0000 en hourly 1 http://wordpress.org/?v=3.0 Jquery Sağ Tıklama http://www.hakanersu.com/jquery-sag-tiklama/ http://www.hakanersu.com/jquery-sag-tiklama/#comments Thu, 13 May 2010 13:06:51 +0000 xuma http://www.hakanersu.com/jquery-sag-tiklama/ Borders
Aslında böyle bir konuyu yazacağım hiç aklıma gelmezdi ama yaptığınız işlerde bazen müşteri isteklerine boyun eğmek zorundasınız.Jquery ile sağ tıklamayı engellemek.

$(this).bind("contextmenu", function(e) {
    e.preventDefault();
 });
]]> http://www.hakanersu.com/jquery-sag-tiklama/feed/ 0 Devinantart Menu http://www.hakanersu.com/devinantart-menu/ http://www.hakanersu.com/devinantart-menu/#comments Mon, 26 Apr 2010 15:58:23 +0000 xuma http://www.hakanersu.com/?p=205 Borders
Bir süredir Deviantart menu sistemi gibi bir sistemi nasıl yapabileceğimi düşünürken yine işin kolayına kaçıp hali hazırda birşeyler varmı diye biraz araştırma yaptım ve işte sonuçlar;

Deviant Menu

Mootools js framework’unu kullanan Deviant Menu gerçekten de oldukça başarılı hernekadar breadcrumbs özelliği bulunmasada bu haliyle de oldukça başarılı ve ücretsiz bir çalışma.

Deviant Menu(CodeCanyon)

Belki aynı kişi belkide yukarda ki projeden esinlenen  bir arkadaş tarafından hazırlanmış yine mootools framework’unu kullanan bir çalışma ve ücretli.

jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready

Başlığı aynen aldım :) Oldukça geniş çaplı bir menu(ler) sistemi ve özelikle iPod Drilldown menu nerdeyse benim bahsettiğim deviantart menu tarzı bir menü.

Projelerimde genelde Jquery kullandığım için yine tercihim jquery’iden yana olacak ama daha basit bir yapı kullanmak isterseniz mootools destekli menüler daha ideal.

]]> http://www.hakanersu.com/devinantart-menu/feed/ 0 Jquery ile Dikey Açılır Menüler http://www.hakanersu.com/jquery-ile-dikey-acilir-menuler/ http://www.hakanersu.com/jquery-ile-dikey-acilir-menuler/#comments Fri, 12 Mar 2010 09:36:34 +0000 xuma http://www.hakanersu.com/?p=178 Borders
Jquery pluginleri sayesinde artık oldukça gelişmiş menu yapılarına sahip olabilmekteyiz.Ancak bazı ufak görsel efektleri hazırlamak ve bunlar için ufak hesaplar yapmak gerçekten düşünüldüğü kadar zor mu ?

[ Demo ]

Çoğu görsel jquery efektinin altında güzel bir xhtml/css yapı yatar.Bunun için basit bir Xhtml/Css yapı oluşturarak menümüzü hazırlamaya başlayalım.İlk olarak menümüzün bulunacağı bir taşıyıcı katman oluşturalım.

<body>
        <div id="tasiyici"></div>
</body>

Katmanımıza ait css kodlarımız.

#tasiyici {
                width:900px;
                height:300px;
                display:block;
                background:#e3e3e3;
                /* Dikey ve Yatay ortalama islemi */
                position:absolute;
                top:50%;
                left:50%;
                margin-top:-150px;
                margin-left:-450px;
}

[ Örnek 1 ]

Dikey ve yatay ortalama için position:absolute olarak tanımlanmış katmanımıza yukardan ve soldan 50% değerini verdikten sonra katmanınızın margin-top değerinini katmanınızın yüksekliğinin negatif yarısı olarak vermeniz , margin-left değerinide yine benzer şekilde katman genişliğinin negatif yarısı olarak vermeniz yeterlidir.

Menülerimizi taşıyıcı katmanımız içerisine konumlandıralım.

<div id="tasiyici">
            <div class="menu"></div>
            <div class="menu"></div>
            <div class="menu"></div>
            <div class="menu"></div>
</div>

CSS kodlarımız 

menu {
                width:200px;
                height:40px;
                display:block;
                background:red;
                float:left;
                margin-left:5px;
                margin-top:120px;
 }

[ Örnek 2 ]

Menü yapımızı biraz daha geliştirip nihayi yapısına ulaştıralım.

<div id="tasiyici">
            <div class="menu">
                <h1>ANASAYFA</h1>
            </div>
            <div class="menu">
                <h1>ÖRNEKLER</h1>
                <ul>
                    <li><a href="#">XHTML</a></li>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">JQUERY</a></li>
                </ul>
            </div>
            <div class="menu genis">
                <h1>SERVER SIDE</h1>
                <ul>
                    <li><a href="#">PHP</a></li>
                    <li><a href="#">ASP</a></li>
                    <li><a href="#">RUBY ON RAILS</a></li>
                    <li><a href="#">CGI/PERL</a></li>
                </ul>
            </div>
            <div class="menu">
                <h1>İLETİŞİM</h1>
            </div>
        </div>


.menu {
                width:200px;
                height:40px;
                display:block;
                background:red;
                float:left;
                margin-left:5px;
                margin-top:120px;
                overflow:hidden;
                text-align:center;

            }
            .menu h1{
                display:block;
                width:200px;
                height:40px;
                font-size:14px;
                line-height:40px;
                cursor:pointer;
            }
            .genis {
                height:150px;
                margin-top:65px;
            }
            .menu ul {

            }
            .menu ul li {
                text-align:left;
                height:20px;
                line-height:20px;
                padding:0 0 0 20px;
                width:180px;
                background:#fff;
                margin-top:1px;
            }
            .menu ul li a {
                color:#111;
                text-decoration:none;
            }

[ Örnek 3 ]

Bu aşamada menümüzün açılma konumuna ait .genis class’ının tanımladık.Görüldüğü gibi birkaç hesapla yükseklik ve margin-top değerini değiştiriyoruz.Bu class şimdilik sadece deneme amacıyla oluşturuldu ve bir katmanımıza daha sonra kaldırılmak şartıyla uygulandı.

Örneğimizi incelediysek artık genis class’ımıza ihtiyacımız yok.Bu class’ı kaldırdıktan sonra jquery kodlarımızı yazmaya başlayabiliriz.

Efektimiz menülerimizin üstüne gelinme durumuna göre başlayacak bu yüzden hover() fonksiyonu bizim için yeterli olacaktır.

<script type="text/javascript" >
             $(document).ready(function() {
                $('.menu').hover(function(){
                   //Menü'nün üstüne gelindiğinde çalışacak animasyon.
                });
            });
</script>

Şimdi katmanımızı hareketlendirme zamanı , katmanımızı hareketli kılmak içinse jquery animate() fonksiyonunu kullanacağız.Bu fonksiyon sayesinde menümüzü şimdiki halinden yukarda tanımlamış olduğumuz genis class’ına ait değere ulaştıracağız.

<script type="text/javascript" >
             $(document).ready(function() {

                $('.menu').hover(function(){
                    $(this).animate({"height":"150px","margin-top":"65px"});
                });
            });
 </script>

[ Örnek 4 ]

Artık menümüz dilediğimiz gibi açılıyor şimdi menümüzü eski değerlerine getirerek kapanma işlemini gerçekleştirelim.

<script type="text/javascript" >
             $(document).ready(function() {
                $('.menu').hover(function(){
                    $(this).animate({"height":"150px","margin-top":"65px"});
                },function(){
                    $(this).animate({"height":"40px","margin-top":"120px"});
                });
            });
</script>

[ Örnek 5 ]

Dikkat etmeniz gereken husus menümüzün üstünden birkaç sefer geçtiğimizde animasyonumuzun sürekli devam etmesi buda oldukça çirkin bir görünüm oluşturmakta.Bunu engellemek için Jquery’nin stop() ifadesini kullanacağız.
Animate fonksiyonlarımızı aşağıdaki gibi değiştirelim.

$(this).stop().animate({"height":"150px","margin-top":"65px"});
$(this).stop().animate({"height":"40px","margin-top":"120px"});

Böylelikle menülerimiz üstünden ayrıldığımızda animasyonu durdurmaktayız.

Son olarak anamanü ve iletişim kısımlarının açılmasını istemiyoruz bunun için anamenü ve iletişim katmanlarımıza birer id verelim.Anamenü için “anamenu” İletişim bölümü içinse “iletisim” id’sini kullandım.Sonrasında seçili katmanımızın id değerini alalım.

var id=$(this).attr("id");

Animasyonu sadece İletişim ve Anasayfa dışında çalıştırmak için id’leri bu katmanların id’lerine eşit olmayan katmanlara animasyonu uygulamamız gerek.Bunu sağlamak için basit bir if fonksiyonu kullanmamız yeterli.

if(id!='anamenu' && id!='iletisim') {
	$(this).stop().animate({"height":"150px","margin-top":"65px"});
}

[ Örnek 6 ]

Böylellikle ana hatlarıyla menümüz oluşturmuş olduk biraz css değişikliğiyle daha görsel menüler elde edebilirsiniz.

[ Örnek 7

]]> http://www.hakanersu.com/jquery-ile-dikey-acilir-menuler/feed/ 0 JQuery ile IE7 z-index problem çözümü http://www.hakanersu.com/jquery-ie7-z-index-problem-cozumu/ http://www.hakanersu.com/jquery-ie7-z-index-problem-cozumu/#comments Wed, 06 Jan 2010 13:52:10 +0000 xuma http://www.hakanersu.com/?p=157 Borders
Internet explorer’ın bilinen sorunlarından biri olan ve kural tanımayan bir browser olduğunu gösteren z-index problemi çoğu tasarımcı için baş ağrıtıcı sorunlardan biridir.Basit birkaç google aramasıyla birçok farklı kaynaktan sorunu inceleyebilirsiniz.Bu kaynaklardan bazılarını sayfa sonuna ekleyeceğim.

Vance Lucas bu konuyla ilgili olarak güzel bir çözüm bulmuş.Çözüm aslında oldukça basit hazırladığı jquery fonksiyonuyla sayfa içerisindeki katmanlara 1000′den başlamak üzere 10′ar azalarak z-index atıyor.Bu işlem çoğu z-index probleminizi internet explorer 7 için çözecektir.Ancak size özel durumlar için aşağıda listelenmiş bağlantınları incelemenizde yarar var.

$(function() {
	var zIndexNumber = 1000;
	$('div').each(function() {
		$(this).css('zIndex', zIndexNumber);
		zIndexNumber -= 10;
	});
});

Hata’nın Anatomisi
http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html
http://brenelz.com/2009/02/03/squish-the-internet-explorer-z-index-bug/
http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/
Z-index nedir?
http://www.fatihhayrioglu.com/z-index/
http://www.muhammetsevim.com/yazi/css-pozisyonlama-ve-z-index/

]]> http://www.hakanersu.com/jquery-ie7-z-index-problem-cozumu/feed/ 1 Jquery load() ve Chrome/Safari http://www.hakanersu.com/jquery-load-ve-chrome-safari-webkit/ http://www.hakanersu.com/jquery-load-ve-chrome-safari-webkit/#comments Fri, 25 Dec 2009 10:39:06 +0000 xuma http://www.hakanersu.com/?p=124 Borders
Jquery load() fonksiyonu sayesinde basit ajax sayfa yükleme işlemlerinize olanak sağlar.Ancak bu noktada birçok kişinin sorun yaşadığı çözümünden de pek bahsedilmeyen konulardan biri Webkit tabanlı browserların (en bilinenleri chrome ve safari ) neden olduğu yüklenen sayfa içerisindeki stil ve jquery kodlarının çalışmaması.

Aslında bu durumdan tam olarak sorun olarak bahsetmek pek mümkün değil.Çünkü bu iki browser da W3C standart kurallarına tam uydukları için böyle bir durum meydana gelmekte.Aksine Internet Explorer ve Firefox ise bu basit kuralı iyiki hiçe saydıkları için problemsiz çalışmakta.

W3C standartlarına göre style elementleri sadece head tagları arasında yer alabilir.Yani yüklenen dosyalarınız içerisindeki style elementleri webkit tarafından yok sayılacaktır.Benzer şekilde Javascript kodlarınızda yüklenen sayfa içerisinde yok sayılacaktır.

Bu durumu düzeltmek için stil kodlarınızı yüklediğiniz sayfa içerisine yerleştirmeniz yeterli.Javascript kodlarınız için ise ;

$(document).ready(function(){});

fonksiyonunuz eğer daha önce tanımlanmışsa bu fonksiyonu yüklenen sayfalardan kaldırmanız yeterli.

]]> http://www.hakanersu.com/jquery-load-ve-chrome-safari-webkit/feed/ 0 Jquery Çakışma Problemi http://www.hakanersu.com/jquery-cakisma-problemi/ http://www.hakanersu.com/jquery-cakisma-problemi/#comments Tue, 15 Dec 2009 15:33:05 +0000 xuma http://www.hakanersu.com/?p=112 Borders
Jquery’nin bilinen en popüler javascript kütüphanelerinden birisi olmasının nedeni sorunlarınıza pratik çözümler üretmesi.İşte bu tip sorunlardan birisi olan çakışmalar can sıkıcı olabilmekte.Ancak jquery’nin buna da ufak ama etkili bir çözümü var.

Çözüme geçmeden önce ilk olarak bu konudaki kişisel deneyimimi oluşturan sorunu paylaşmak istiyorum ; geçen günler içerisinde bir projemde grey box kullanmaya karar verdim.Onca jquery eklentisi varken neden böyle bir script kullandığım tartışılır ancak yine kullanma kararını aldım ve projenin birçok bölümünde kullandım.Sonrasında son görsel değişiklikleri yapmadan önce kullanmak istediğim Jquery efektlerinin çalışmadığını fark ettim.Bu noktadan sonra sorunun çakışma sorunu olduğu birkaç testten sonra aşikardı.

Ufak bir araştırma sonunda Jquery’nin bu gibi çakışma sorunları için ufak ve etkili bir çözüme sahip olduğunu buldum.
Genel olarak çakışmaların nedeni javascript kütüphanerlinin benzer kısayolları tercih etmeleri.Bu yüzden Jquery bizlere seçici kısayolumuzu yani ‘$’ değiştirmemiz sağlayacak kolaylığı sunmuş.Örneğiş $ işaretimizi $x ile şu şekilde değiştirebilmekteyiz.

var $x = jQuery.noConflict();

Bu kodu sayfanız içerisinde herhangi bir scripte eklemeniz yeterli.Ve böyle yeni seçiciniz $x olacaktır.

<script type="text/javascript">
			var $x = jQuery.noConflict();
			$x(document).ready(function() {
				$x('#ekle').click(function(){
					$x('#ozellikler').append("<label for='ozellik[]'>Özellik</label> <input type='text' name='ozellik[]' />Değer: &nbsp;&nbsp;<input type='text' name='deger[]' class='deger'/><hr>");

				});
			});
		</script>
]]> http://www.hakanersu.com/jquery-cakisma-problemi/feed/ 2