Hakan ERSU http://www.hakanersu.com Tasarım,kodlama ve web aşkı Fri, 12 Mar 2010 09:36:34 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 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 jquery-menu

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 Xampp .htaccess aktifleştirmek http://www.hakanersu.com/xampp-htaccess/ http://www.hakanersu.com/xampp-htaccess/#comments Tue, 23 Feb 2010 06:56:20 +0000 xuma http://www.hakanersu.com/?p=176 Xampp kurulumlarımdan sonra aktifleştirmenizde yarar var.Özellikle htaccess ile denemelerinizi illa gerçek bir serverda yapmanız gerekmiyor.

Xampp\apache\conf dizininde bulunan httpd.conf dosyasını bulun ve basit bir text editöründe açın.

#LoadModule rewrite_module modules/mod_rewrite.so

bu kod satırını bulun ve baştaki # karakterini kaldırın ve kaydedin.

LoadModule rewrite_module modules/mod_rewrite.so

Sonrasında apache serverınızı yeniden başlatın.

]]> http://www.hakanersu.com/xampp-htaccess/feed/ 0 Aller Font http://www.hakanersu.com/aller-font/ http://www.hakanersu.com/aller-font/#comments Mon, 25 Jan 2010 09:58:49 +0000 xuma http://www.hakanersu.com/?p=167 Aller
Dalton Maag Ltd

Download

]]> http://www.hakanersu.com/aller-font/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 jquery
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 jquery
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 jquery
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/ 0 Bobdoo Weather Icons http://www.hakanersu.com/bobdoo-weather-icons/ http://www.hakanersu.com/bobdoo-weather-icons/#comments Tue, 15 Sep 2009 14:52:05 +0000 xuma http://blog.yuruyenagac.com/?p=106 badoo

Hazırlayan [ Author ] : bobdoo

İndirme ve Önizleme [ Download & Preview] : Weather icons

]]> http://www.hakanersu.com/bobdoo-weather-icons/feed/ 0 Veri depolama:Box.net http://www.hakanersu.com/veri-depolama-box-net/ http://www.hakanersu.com/veri-depolama-box-net/#comments Wed, 09 Sep 2009 20:56:02 +0000 xuma http://blog.yuruyenagac.com/?p=73 boxnetUzun süredir yaşadığım veri kaybı problemlerimden sonra , yine uzun süredir tanıdığım ancak aktif olarak kullanmadığım box.net ile daha fazla haşır neşir olmaya karar verdim.

Box.net en basit tanımıyla sizler için bir depolama alanı sunmakta.Bu depolama alanında klasörler oluşturup bu klasörlere dosyalarınızı yükleyebilir,farklı klasörlere dosyalarınızı taşıyabilir veya kopyalabilirsiniz.Kısaca sizlere sanki harici bir taşıma alanı sunulmakta.

Yukarda anlattıklarım bilgisayarınızda basitçe yapabileceğiniz işlemler ancak box.net üzerinde veri depolamanın avantajı ;

  1. Box.net üzerinde depolanan dosyalarınızı paylaşabilimek
  2. Online çalışma alanı.Tamamen görsel ve bilgisayarınızdaki dosya yapısını aratmayacak düzeyde hatta daha da iyi.
  3. Dosyalar üzerinde yorum yapabilme özelliği.
  4. Son güncellemelerinizi takip edebilmek.
  5. Dosyalarınızının dosya geçmişinin tutulması.(Maalesef  ticari sürümünde)

Kısa süre önce keşfettiğim diğer bir özelliğide ortak çalışma klasörleri.Arkadaşlarınızla bir dosyayı paylaşabilir ve bu dosya üzerinde gerekli paylaşımlarınızı yapabilirsiniz.Yine bu dosyalar üzerine yorumlarınızı ekleyebilirsiniz.

Benim için en ilgi çekici özellikleri yukarda sunulan özellikler yanında bu hizmetin oldukça görsel  ve doyurucu bir kısmının ücretsiz olarak sunulması.

Şimdilik ufak bir kısmı Türkçeleştirilmiş olan box.net veri kaybı problemlerime şimdilik çözüm oldu.Yukarda bahsettiğim özelliklerini aktif olarak kullanmaktayım ve 1gb(ücretsiz versiyonunda sizlere sunulan alan boyutu 1gb) alan php/css/xhtml/psd dosyalarım için oldukça yeterli ve hatta fazla.Sizde bu servis hakkında geniş bilgi almak isterseniz burdan box.net'e ulaşabilir hatta ticari sürümlerinede bir göz atabilirsiniz.(Ufak ofisler için pekde yüksek fiyatları bulunmamakta.)

]]> http://www.hakanersu.com/veri-depolama-box-net/feed/ 0 Blog Turları I http://www.hakanersu.com/blog-turlari-i/ http://www.hakanersu.com/blog-turlari-i/#comments Tue, 08 Sep 2009 23:01:33 +0000 xuma http://blog.yuruyenagac.com/?p=86 turlar

Merhaba blog turlarının ilkine hoşgeldiniz ,basitçe blog turumuzda yararlı bulduğumuz yazılar hakkında ufak yorumlarımızla gideceğiniz site hakkında bilgi vermeye çalışacağız.

Html kopya kağıtları

Woork olarak tanıdığımız Antonio Lupetti burdaki yazısında bizlere HTML5 kopya kağıdı çalışmasını sunmuş , oldukça kaliteli bir çalışma olduğu kesin ve kesinlikle elinizin altında bulunmasında yarar var.Aslında bir HTML5 kopya kağıdı çalışmasınıda daha önce smashingmagazinde de görmüştük.Birde thinkvitamin'de gezerken karşımıza nihilogic blogdan  "HTML5 Canvas Cheat Sheet" karşımıza çıktı.

Javascript'siz lightbox

Uzun zamandır etrafımız lightbox'larla çevrildi.Birçok fonksiyonu olan lightboxlardan sıkılanlar için javascript'siz lightbox çalışmaları vardı ancak yerli yerine oturmuş olanı pek görmemiştim.İşte burda yani growldesign'da jenna smith javascript kullanmadan lightbox efekti nasıl oluyormuş göstermiş.Ancak bizi şaşırtan ve sevindiren kısmı bir bayan olarak bu işlere gönül vermiş olması hemde sadece CSS değil XHTML, PHP, MySQL ve jQuery hakkında  bilgi sahibiymiş.Son olarak da huddle'da ui designer olduğunu söyleyip konuyu kısa keselim.

PHP sınıflar

Eğitici,öğretici yazılarını özlediğimiz eburhan formDogrula adlı php sınıfını yakın zamanda tanıttı.Oldukça yararlı bir sınıf olduğunu söylemem gerek.Yazılarını özledik ama şu bir gerçekki bu projelerden yazı yazmaya pek zaman kalmayabilir ne yapalım bizde projelerle idare ederiz artık :)

Php sınıflardan bahsetmişken ceviz.net'ten tanıdığımız Yusuf Koç(Raiden) upload sınıfını bundan yaklaşık 3 ay önce duyurmuştu.Bizde madem bir Türk yapımı sınıfı paylaştık onun bu başarılı çalışmasınıda biraz geçte olsa  ekleyelim dedik.

Bir dahaki blog turumuzda görüşmek üzere...

]]> http://www.hakanersu.com/blog-turlari-i/feed/ 0 Ipapun’dan “Vector icons” http://www.hakanersu.com/ipapundan-vector-icons/ http://www.hakanersu.com/ipapundan-vector-icons/#comments Mon, 07 Sep 2009 23:14:49 +0000 xuma http://blog.yuruyenagac.com/?p=92 Görsel herşeyi seviyoruz.Sitelerimizin görselliğini arttıran ikonlara hayranız bu kategoride ücretli veya ücretsiz yayınlanan ikonların tanıtımlarına yer vermeye çalışacağız.

Ipapun'dan "Vector icons "

ipapun
Hazırlayan [ Author ] : Ipapun

İndirme ve Önizleme [ Download & Preview] : Vector Icons Part -1

]]> http://www.hakanersu.com/ipapundan-vector-icons/feed/ 0