jQuery ile Bağlantılı Geçişli Sayfa – Slick Transition Page with jQuery
Sayfalarınız arasındaki geçişleri direk değil de biraz daha hoş şekilde ayarlayabilirsiniz. http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/ adresindeki makalede okuduklarımı deneyerek bu işelimin çok daha kullanışlı olduğunu söyleyebilirim.
Adım 1 – Html Kodunu Eklemek
Ben örnekte sadece 2 fotoğraf ekleyerek denedim. Sizler farklı linkler ile deneyebilirsiniz.
<a href="index.html" class="trans"><img src="330581.jpg" alt="Resim" /></a>
Burada dikkat etmeniz gereken şey a elemanının sınıfıdır. Ben “trans” isimli bir sınıf kullandım. Birazdan jQuery kod bloğunu yazarken bu sınıfa ihtiyacımız olacak.
Adım 2 – Css Kodunu Eklemek
html { background-color:#000000; color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:14px;}
a { color:#CCCCCC;}
ben genel ve basit bir kullanım yaptım. Projenize göre değiştirebilirsiniz.
Adım 3 – jQuery Çekirdek Dosyasını ve Tetikleyiciyi Eklemek
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('body').css("display", "none");
$('body').fadeIn(2000);
$('a.trans').click(function(event) {
event.preventDefault();
linkLocation = this.href;
$('body').fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
</script>
Body’ e sayfa yüklendiği anda css özelliğini atadık. fadeIn ile 2 saniye içinde yüklettik. Az önce sınıf atadığımız a elemanına bir tıklama işlemi gerçekleşirse eğer işlemi hemen gerçekleştirme dedik. Fakat linkLocation isimli değişkenimize a’ nın href’ ini atadık. Daha sonra ise body elemanına fadeOut işlemini atadık ve 1 saniye içinde kaybolmasını ardından redirectPage fonksiyonunu çalıştırmasını söyledik. redirectPage fonksiyonumuz da linkLocation değişkenine atadığımız hrefi alarak window eylemi ile birleştiriyor. Bu şekilde aynı adres çubuğumuzdaki yol değişiyor ve aynı sayfa içinde işlem yapmamış oluyoruz.
Uygulamaya Ait Örneği Görmek İçin Tıklayınız
Uygulamaya Ait Örneği İndirmek İçin Tıklayınız
Daha detaylı bilgi için -> http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions
Yeni Bir İş
Haziran 2008′ de Ping Digital‘ de Senior Web Developer olarak başladığım görevimden bugün (01.12.2009) itibari ile ayrıldım. Neredeyse 1.5 senedir çalıştığım yerden ayrılmak çok kolay olmadı. Ayrılma sebebim tamamen çıtayı bir adım daha yükseltmek. Çalıştığım süre zarfında tüm çalışma arkadaşlarıma gösterdikleri iyi niyet ve sabırdan dolayı çok teşekkür ederim.
Yeni işim Doğuş Grubu içerisinde NTVMSNBC bölümünde olacak. NtvMsnbc ekibi içinde yine Senior Web Developer olarak çalışacağım.
Bağlantılar Bölümü – Bilgilendirme
Arkadaşlar neden olduğunu anlayamadım bir sorun nedeni ile bağlantılar tablom hasar gördü. Ben de yenilemek durumunda kaldım. Hatırlayabildiğim kişileri ekledim fakat hatırlayamadıklarım kusura bakmasınlar lütfen. Daha önce bağlantı değişimi yaptığım kişilerin isimlerini kontrol etmesini ve listede yoksa lütfen bana iletişim sayfasından veya kadirgunay { at } gmail nokta com adresinden ulaşabileceklerini hatırlatmak isterim.
Not : bu arada yeni bir wp kurdum yerel sunucuma ve oradaki tabloyu sql çıktısı ile alıp var olan tablo üzerine yazdırdım. Eğer siz de böyle bir sorunla karşılaşırsanız belki işinize yarar.
jQuery İle Farklı Açılan Menü – Different Drop Down Menu With jQuery
jQuery İle Farklı Açılan Menü - Differant Drop Down Menu With jQuery
Bildiğiniz gibi açılan menüler genelde listelerin alt menüleri olarak tanımlanır. Fakat geçen gün internette gördüğüm bir örnek jQuery ile çok farklı bir şekilde kullanılmış bir alt menü (drop down) olarak karşıma çıktı. Biraz inceledikten sonra sizler için onu yeniden yazıp Türkçe şekilde örneklendirdim.
Adım 1 – Html Kodlarını Eklemek
<div id="Main"> <h1>jQuery İle Farklı Açılan Menü</h1> Açılan menüler genelde direk menü listelerinin alt bölümleri veya yan bölümleri olarak bilinse de jQuery ile çok farklı şekillere sokulabilir. <a href="http://www.thewebsqueeze.com/samples/mega-menu/demosite/">http://www.thewebsqueeze.com/samples/mega-menu/demosite/</a> isimli sitedeki yapılan örneği Türkçe olarak sizler için yeniden yaptım. <!--Menü Başla--> <div class="MenuDiv"> <ul class="AnaMenu"> <li><a href="#">Menü 1</a></li> <li class="Ok"><a href="#">Menü 2</a></li> <div class="AltMenuAlan"> Bu alana Alt menüye bastığınızda çıkacak menü ile iglili bazı bilgiler yazabilirsiniz. <div class="Sol"> <h3>Menü2' ye ait 1. Alt Menü</h3> <ul class="AltMenuSol"> <li><a href="#">Alt Menü 1-1</a></li> <li><a href="#">Alt Menü 1-2</a></li> <li><a href="#">Alt Menü 1-3</a></li> <li><a href="#">Alt Menü 1-4</a></li> </ul> </div> <div class="Sag"> <h3>Menü2' ye ait 2. alt Menü</h3> <ul class="AltMenuSag"> <li><a href="#">Alt Menü 2-1</a></li> <li><a href="#">Alt Menü 2-2</a></li> <li><a href="#">Alt Menü 2-3</a></li> <li><a href="#">Alt Menü 2-4</a></li> </ul> </div> </div> <li><a href="#">Menü 3</a></li> <li class="Ok2"><a href="#">Menü 4</a></li> <div class="AltMenuAlan2"> Bu alana Alt menüye bastığınızda çıkacak menü ile iglili bazı bilgiler yazabilirsiniz. <div class="Sol"> <h3>Menü2' ye ait 1. Alt Menü</h3> <ul class="AltMenu2Sol"> <li><a href="#">Alt Menü 1-1</a></li> <li><a href="#">Alt Menü 1-2</a></li> <li><a href="#">Alt Menü 1-3</a></li> <li><a href="#">Alt Menü 1-4</a></li> </ul> </div> <div class="Sag"> <h3>Menü2' ye ait 2. alt Menü</h3> <ul class="AltMenu2Sag"> <li><a href="#">Alt Menü 2-1</a></li> <li><a href="#">Alt Menü 2-2</a></li> <li><a href="#">Alt Menü 2-3</a></li> <li><a href="#">Alt Menü 2-4</a></li> </ul> </div> </div> <li><a href="#">Menü 5</a></li> </ul> </div> <div class="GenelIcerik"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor, magna vel feugiat lacinia, dui arcu rutrum purus, eu rhoncus eros quam at urna. In aliquet diam a nisl imperdiet sollicitudin. Sed lacinia laoreet ante at aliquet. Mauris sed felis eu ligula tempor vulputate et id purus. Fusce orci enim, blandit at sodales sit amet, aliquam et neque. Suspendisse non ante sit amet erat egestas viverra. Donec mattis aliquet diam nec dapibus. Proin neque ligula, pharetra ut rutrum a, imperdiet ac ligula. Etiam molestie, massa vitae venenatis aliquet, risus justo accumsan orci, nec facilisis neque metus vitae nulla. Phasellus vehicula purus ut justo fringilla ultrices. Aliquam cursus, tellus interdum lacinia volutpat, felis arcu suscipit ipsum, ac ultricies tortor dolor non urna. Integer a libero sed neque vulputate dictum et sed tortor. Aliquam velit lorem, porttitor vel cursus vel, luctus sed ante. Integer metus arcu, varius ac semper vel, fermentum hendrerit ipsum. Donec eget velit vel eros pretium consequat. Duis molestie ligula eu mauris sollicitudin aliquam ut in massa. Mauris elementum accumsan vestibulum. Nulla consectetur malesuada orci non molestie. Donec porttitor justo venenatis purus mattis auctor. Donec commodo porttitor egestas. Donec venenatis magna lorem, vitae porta est. Integer egestas adipiscing erat sed venenatis. Donec tincidunt dignissim pellentesque. Morbi ut pretium quam. Duis faucibus rutrum augue ac porta. Nulla nunc libero, tempus a mollis quis, egestas quis leo. Donec a erat non orci porta facilisis sit amet eu diam. Pellentesque mauris sapien, dapibus ac tristique vitae, condimentum sit amet enim. Vestibulum vitae magna diam, vel tincidunt erat. Duis varius suscipit congue. In vitae dolor sagittis lorem congue ullamcorper.</div> <div class="GenelIcerik"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor, magna vel feugiat lacinia, dui arcu rutrum purus, eu rhoncus eros quam at urna. In aliquet diam a nisl imperdiet sollicitudin. Sed lacinia laoreet ante at aliquet. Mauris sed felis eu ligula tempor vulputate et id purus. Fusce orci enim, blandit at sodales sit amet, aliquam et neque. Suspendisse non ante sit amet erat egestas viverra. Donec mattis aliquet diam nec dapibus. Proin neque ligula, pharetra ut rutrum a, imperdiet ac ligula. Etiam molestie, massa vitae venenatis aliquet, risus justo accumsan orci, nec facilisis neque metus vitae nulla. Phasellus vehicula purus ut justo fringilla ultrices. Aliquam cursus, tellus interdum lacinia volutpat, felis arcu suscipit ipsum, ac ultricies tortor dolor non urna. Integer a libero sed neque vulputate dictum et sed tortor. Aliquam velit lorem, porttitor vel cursus vel, luctus sed ante. Integer metus arcu, varius ac semper vel, fermentum hendrerit ipsum. Donec eget velit vel eros pretium consequat. Duis molestie ligula eu mauris sollicitudin aliquam ut in massa. Mauris elementum accumsan vestibulum. Nulla consectetur malesuada orci non molestie. Donec porttitor justo venenatis purus mattis auctor. Donec commodo porttitor egestas. Donec venenatis magna lorem, vitae porta est. Integer egestas adipiscing erat sed venenatis. Donec tincidunt dignissim pellentesque. Morbi ut pretium quam. Duis faucibus rutrum augue ac porta. Nulla nunc libero, tempus a mollis quis, egestas quis leo. Donec a erat non orci porta facilisis sit amet eu diam. Pellentesque mauris sapien, dapibus ac tristique vitae, condimentum sit amet enim. Vestibulum vitae magna diam, vel tincidunt erat. Duis varius suscipit congue. In vitae dolor sagittis lorem congue ullamcorper.</div> </div>
Adım 2 – Css Kodlarını Eklemek
body { background-color:#c0c0c0; font-family:Arial, Helvetica, sans-serif; color:#000000; font-size:12px;}
a, a:link, a:visited { color:#ffffff; font-weight:bold; text-decoration:none;}
a:hover { color:#ff0080; text-decoration:underline;}
*.ul { margin:0; padding:0;}
.MarginRight0 { margin-right:0;}
#Main {width:800px; height:auto; margin:0 auto;}
.MenuDiv { width:798px; height:50px; background-color:#ff0080; -moz-border-radius:5px; -webkit-border-radius:5px; color:#ffffff; padding:5px 0px; border:1px solid #800040;}
ul.AnaMenu {width:700px; height:40px; list-style-type:none;}
ul.AnaMenu li { display:inline; font-size:18px; }
ul.AnaMenu li a, ul.AnaMenu li a:visited { color: #ffffff; text-decoration:none; padding:15px;}
ul.AnaMenu li a:hover { text-decoration:underline; color: #000000;}
ul.AnaMenu li.Ok, ul.AnaMenu li.Ok2 { background:url(Ok.png) 80px 10px no-repeat;}
.AltMenuAlan, .AltMenuAlan2 { display:none; position:absolute; background-color:#400080;-moz-border-radius:5px; -webkit-border-radius:5px;margin:10px 0 0 20px;padding:10px 20px; width:620px; color:#ffffff;}
.AltMenuAlan2 { background-color:#0080ff;}
.AltMenuAlan div.Sol, .AltMenuAlan div.Sag, .AltMenuAlan2 div.Sol, .AltMenuAlan2 div.Sag {margin-right:10px; border-left:1px solid #ff0080; border-right:1px solid #ff0080; width:178px; font-size:12px; float:left; padding:10px;}
.AltMenuAlan2 div.Sol {border-left:1px solid #800080;; border-right:1px solid #800080;}
.AltMenuAlan div.Sag, .AltMenuAlan2 div.Sag { border:none!important; margin-right:0!important;}
.AltMenuAlan h3 { font-size:16px; margin:0; padding:0; width:150px;}
.AltMenuAlan p, .AltMenuAlan2 p {float:left; display:inline; width:200px; margin-right:10px;}
ul.AltMenuSol, ul.AltMenuSag, ul.AltMenu2Sol, ul.AltMenu2Sag { width:180px; list-style-type:none;}
ul.AltMenuSol li a, ul.AltMenuSag li a, ul.AltMenu2Sol li a, ul.AltMenu2Sag li a { display:block; color:#ffffff; text-decoration:none; font-size:12px;}
ul.AltMenuSol li a:hover, ul.AltMenuSag a:hover, ul.AltMenu2Sol li a:hover, ul.AltMenu2Sag a:hover { text-decoration:underline; color:#ffcee7;}
.GenelIcerik {width:780px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:10px; background-color:#ffffff; margin-top:20px;}
Adım 3 – Html Dosyasına jQuery ve Css Dosyalarını Tanıtmak + jQuery Tetikleyici Kod Bloğunu Eklemek
<link rel="stylesheet" type="text/css" href="master.css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".Ok").click(function(){
$(".AltMenuAlan").toggle("fast");
});
$(".Ok2").click(function(){
$(".AltMenuAlan2").toggle("fast");
});
});
</script>
Her zaman ki gibi mantık çok basit. Normal bir şekilde bir div içine menu kodlarımızı ekliyoruz. Alt menü eklemek istediğimiz elemanların altına bir div daha açıp o div için diğer menüleri ve yazıları ekliyoruz. Ana menüde hangi elemanların alt menüleri olduğunu belirlemek için onlara iki ayrı sınıf atıyoruz ve css dosyamızda bu elemanların yanına alt menü olduğunu anlatan bir imaj ekliyoruz.
Daha sonra ise jQuery tetikleyici kod bloğunda ise menü elemanlarına atadığımız iki ayrı sınıf için tıklanınca gösterilecek divleri toggle olarak açtırıyoruz. Burada dikkat etmeniz gereken bir şey söz konusudur; daha önce alt menülere sahip olan elemanların altına açtığımız divler css dosyasında display:none olarak tanımlanmalıdır.
Daha detaylı bilgi için lütfen -> http://www.thewebsqueeze.com/samples/mega-menu/demosite bağlantısını ziyaret ediniz.
IE6 PNG Sorununa Daha Basit Bir Çözüm
Her gün yeni bir şeyler öğreniyorum. Bugün de onlardan birisi. Garanti Bankası’ nın hizmetlerinden birisi için bir Landing Page çalışması yapılmıştı. Arayüz kodlamasını ben yaptım. Tasarımın öngördüğü kadar imaj kullanmaktan kaçınmak istedim ama olmadı. Arayüzde kullanabileceğim tek imaj türü PNG idi. Hal böyle olunca daha önce kullandığım bazı PNG betiklerini denedim. Diğer betikler ile çakışma yaşanması durumunda arayışı geçtim ve DD_belatedPNG isimli bir betik buldum.
Öncelikle buradan sıkıştırılmamış ve buradan da sıkıştırılmış hallerini indirin. Daha sonra ise kullanmak istediğiniz html dosyasına şu şekilde ekleyin
<code><!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
/* Örnek */
DD_belatedPNG.fix('.DivClassIsmi');
</script>
<![endif]--> </code>
DD_belatedPNG.js şeklinde kaydedilmiş olduğu için bu isimle okutuldu sayfaya. Siz istediğiniz şekilde kaydedip okutabilirsiniz. DD_belatedPNG.fix(‘.DivClassIsmi’); bölümünde ise kullanmak istediğiniz dive ait sınıfları, idleri atayabilirsiniz. Buraya yazacağınız div sınıfları veya idleri CSS dosyanızda arkaplan imajı almak zorundalar. Eğer ki img etiketi ile bir imaj eklemiş iseniz, DD_belatedPNG.fix(‘img’); sadece img etiketini eklemeniz yeterli olacaktır.
Daha detaylı bilgi için lütfen -> http://www.dillerdesign.com/experiment/DD_belatedPNG/ adresini ziyaret ediniz.
Liste Öğelerinin Tüm Bağlantılarına Stil Atamak
Liste Öğelerinin Tüm Bağlantılarına Stil Atamak
Adım 1 – Html Kodlarını Eklemek
<h1>Liste Bağlantılarının Hepsine Stil Atamak</h1> <div id="Main"> <ul> <li> <a href="#"><h2>1.Liste İçeriğimiz</h2> <span>İçerik için girilecek spot yazımızı buraya yazıyoruz. Haber yazısı olabilir, açıklama yazısı olabilir...</span> <span>19.08.2009</span></a> </li> <li> <a href="#"><h2>2.Liste İçeriğimiz</h2> <span>İçerik için girilecek spot yazımızı buraya yazıyoruz. Haber yazısı olabilir, açıklama yazısı olabilir...</span> <span>19.08.2009</span></a> </li> <li> <a href="#"><h2>3.Liste İçeriğimiz</h2> <span>İçerik için girilecek spot yazımızı buraya yazıyoruz. Haber yazısı olabilir, açıklama yazısı olabilir...</span> <span>19.08.2009</span></a> </li> </ul> </div>
Adım 2 – Css Kodlarını Eklemek
body { font-family:Trebuchet MS; font-size:12px; color:#000000; background-color:#dbdad7;}
#Main { width:800px; height:auto;}
#Main h1 { font-size:24px; color:#fc0000;}
#Main ul { margin:0; padding:0; list-style-type:none; width:300px;}
#Main ul li { display:block; border-top:1px dotted #000000; border-bottom:1px dotted #000000; margin-bottom:5px;}
#Main ul li h2 { font-size:18px; margin:0; padding:0; color:#8D38C9;}
#Main ul li span { color:#800000;}
#Main ul li span.Tarih { color:#0000ff;}
#Main ul li a { text-decoration:none; padding:10px; width:280px; display:block;}
#Main ul li a:hover { background-color:#fcdcab;}
Verilen a etiketlerinin liste boyutları (genişlik) eşit olmasına dikkat etmelisiniz. Aksi halde istediğiniz görüntüyü elde edemeyebilirsiniz. Bir de a etiketinin display:block olarak değer alması gereklidir.