Hakan ERSU » Genel http://www.hakanersu.com Karalamalar Mon, 06 Sep 2010 06:53:30 +0000 en hourly 1 http://wordpress.org/?v=3.0 Vimeo Videolarınızı Otomatik Başlatın http://www.hakanersu.com/vimeo-videolarinizi-otomatik-baslatin/ http://www.hakanersu.com/vimeo-videolarinizi-otomatik-baslatin/#comments Fri, 02 Jul 2010 06:01:09 +0000 xuma http://www.hakanersu.com/?p=233 Borders
Vimeo embed videolarınızı otomatik başlatmak için src adresi sonuna &autoplay=1 eklemeniz yeterli.

Örnek;

http://vimeo.com/moogaloop.swf?clip_id=324123423&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00ADEF&fullscreen=1&autoplay=1

]]> http://www.hakanersu.com/vimeo-videolarinizi-otomatik-baslatin/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 Ç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