‘Javascript’ Etiketi Arşivi
jQuery resize Kullanımı
Çalıştığım bir projede 100% lük bir alanın 980px’ e geldiğinde üst kısımdaki bazı öğelerin gizlenmesi gerekiyordu. Yani site normal şartlarda 100% lük bir görünümde olmalı fakat tarayıcı penceresi veya çözünürlük 980 veya 980′ den düşük olursa üst kısımdaki bazı alanlar yok olmalıydı. Nasıl olur diye düşünürken jQuery’ nin resize fonksiyonunun bu iş için biçilmiş kaftan olduğunu öğrendim. Çok basit bir kullanım ile sorunu çözdüm. Ve bunu sizlerle paylaşmak istedim.
Adım – HTML Kodlarını Eklemek
<div id="Main"> <div id="Header"> <div>Logo</div> <div> <ul> <li>Top Menu 1</li> <li>Top Menu 2</li> <li>Top Menu 3</li> <li>Top Menu 4</li> <li>Top Menu 5</li> <li>Top Menu 6</li> </ul> </div> <div id="UserPanel"> <div id="UserAvatar"></div> <div id="UserMenu"> <p>Menu <ul> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> </ul> </p> </div> </div> </div> <div id="Content"> <div id="SolKolon"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum, massa eu porttitor hendrerit, lectus magna fringilla nulla, in volutpat enim est a augue. Donec malesuada consequat tempus. Donec gravida imperdiet molestie. Donec blandit luctus lectus, id consectetur erat tincidunt vel. Proin sagittis eleifend sapien eget suscipit. Nunc sit amet dapibus nisi. Pellentesque at lorem venenatis ante iaculis aliquam sit amet eget nibh. Phasellus velit nisl, consectetur volutpat convallis ac, blandit quis nunc. Nullam dignissim, mi sit amet eleifend posuere, ipsum massa faucibus libero, a pulvinar nisl massa ut urna. Aliquam ut massa at nunc ornare placerat. Nullam eleifend diam non lectus accumsan iaculis. Fusce mattis, sem ac tincidunt suscipit, mauris massa semper metus, non viverra neque libero ac est. Proin ac urna sed sem tincidunt fringilla non sit amet justo. Cras mollis purus eu nibh pretium non rutrum ligula consequat. Cras massa justo, volutpat vel venenatis at, scelerisque a ante. Ut sollicitudin varius libero eu viverra. Vivamus nec quam ac neque iaculis eleifend sit amet in ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. Vestibulum tortor lacus, aliquet in ultricies consequat, aliquam eu nibh. Nulla faucibus odio vel risus molestie eu placerat enim placerat. Maecenas at ligula at neque viverra aliquet venenatis vitae nunc. Curabitur ut nisl a elit varius ullamcorper. Praesent est sem, sollicitudin nec fermentum et, scelerisque non odio. Mauris quis nisl eleifend metus ullamcorper laoreet nec sit amet urna. Etiam ut nunc erat. Nunc sit amet magna diam, sit amet interdum ante. Nulla convallis volutpat dignissim. Praesent auctor leo id ipsum commodo ut scelerisque erat tristique. Etiam nibh dolor, volutpat sed sollicitudin sit amet, elementum ac nisl. Maecenas lorem enim, commodo id accumsan vitae, ultricies at justo. Sed euismod venenatis quam, at eleifend dui rhoncus quis. Sed gravida dictum mauris vitae posuere. Vestibulum pretium sapien in magna ultricies tincidunt ut vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend mi sit amet nisl sodales interdum. Ut varius tincidunt sem, vitae blandit nisl euismod sed. Quisque lobortis venenatis est sed porta. Praesent a tortor ac leo venenatis pharetra sed ut massa. Ut sit amet malesuada sapien. Pellentesque scelerisque pulvinar accumsan. Pellentesque mollis, massa vitae adipiscing euismod, nulla enim egestas sem, vel adipiscing lectus eros eget nunc. Etiam sapien nibh, pretium non viverra eget, porttitor ac sapien. Suspendisse pretium lacinia lobortis. Quisque at imperdiet nisi. Phasellus arcu tellus, auctor id pretium sit amet, bibendum vel tellus. Aliquam mi libero, sollicitudin nec malesuada eu, mollis eu libero. Donec non faucibus massa. Maecenas imperdiet egestas suscipit. Donec id magna vel erat malesuada malesuada. Aenean consectetur porta odio non tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque auctor, erat quis feugiat scelerisque, dolor orci rhoncus metus, et dapibus sapien ante sit amet ligula. In eleifend ante vitae magna bibendum mollis nec in eros. Nulla venenatis neque vitae augue aliquam sed sagittis massa eleifend. Quisque rhoncus lacinia turpis, sollicitudin venenatis lacus feugiat sed. Aenean aliquam congue turpis, sed convallis mauris lobortis at. Aliquam erat volutpat. Vestibulum ac massa eu nisl adipiscing dictum sed a odio. Proin ante lorem, vulputate sed vestibulum ut, elementum id quam. Donec vitae iaculis nibh. Nulla facilisi. In et turpis bibendum nisi commodo pharetra consequat in tortor. Ut dapibus rutrum mauris a varius. Cras ullamcorper sollicitudin neque, quis facilisis mauris eleifend sed. Nullam imperdiet, augue nec euismod fermentum, diam risus vehicula leo, non porttitor tellus ligula convallis enim. Sed id mi est. Duis tincidunt dui nec mi varius et tempus eros elementum. Quisque neque nulla, dictum id pellentesque a, facilisis id metus. Quisque pretium vulputate interdum. Vestibulum fermentum, velit et dictum elementum, libero massa placerat est, ac varius lectus massa quis nisi. Cras elementum dictum posuere. Nulla tempus pharetra turpis, eu consequat odio venenatis quis. Nulla facilisi. Maecenas tempor, magna pellentesque iaculis scelerisque, diam justo volutpat urna, id ultrices velit sapien id lacus. Sed vehicula volutpat tincidunt. Praesent posuere luctus placerat. Nullam placerat condimentum massa, in convallis est pellentesque sed. Mauris imperdiet pharetra justo sed hendrerit. Phasellus at metus nisl, vel sollicitudin diam. Ut elementum velit id odio laoreet tempor. Suspendisse potenti. Pellentesque massa lacus, facilisis vitae ullamcorper a, facilisis ac lectus. </p> </div> <div id="SagKolon"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum, massa eu porttitor hendrerit, lectus magna fringilla nulla, in volutpat enim est a augue. Donec malesuada consequat tempus. Donec gravida imperdiet molestie. Donec blandit luctus lectus, id consectetur erat tincidunt vel. Proin sagittis eleifend sapien eget suscipit. Nunc sit amet dapibus nisi. Pellentesque at lorem venenatis ante iaculis aliquam sit amet eget nibh. Phasellus velit nisl, consectetur volutpat convallis ac, blandit quis nunc. Nullam dignissim, mi sit amet eleifend posuere, ipsum massa faucibus libero, a pulvinar nisl massa ut urna. Aliquam ut massa at nunc ornare placerat. Nullam eleifend diam non lectus accumsan iaculis. Fusce mattis, sem ac tincidunt suscipit, mauris massa semper metus, non viverra neque libero ac est. Proin ac urna sed sem tincidunt fringilla non sit amet justo. Cras mollis purus eu nibh pretium non rutrum ligula consequat. Cras massa justo, volutpat vel venenatis at, scelerisque a ante. Ut sollicitudin varius libero eu viverra. Vivamus nec quam ac neque iaculis eleifend sit amet in ante. </p> </div> </div> </div>
Adım 2 – Css Kodlarını Eklemek
body { background-color:#999999; color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
#Main { width:100%; height:auto; position:relative; min-width:730px;}
* html #Main{
width: expression(document.body.clientWidth < 1032 ? "730px" : "100%" );
}
#Header { height:40px; background-color:#990000; position:relative;}
.Logo { float:left; display:inline; height:30px; background-color:#FFFFFF; font-size:18px; line-height:30px; padding:0px 10px; margin-top:5px; margin-left:20px;}
.TopMenu { float:left; display:inline; height:30px; background-color:#FF3333; margin-top:5px; padding:0px 10px; margin-left:20px;}
.TopMenu ul { margin:0; padding:0; list-style-type:circle; padding:5px 10px;}
.TopMenu ul li { float:left; display:inline; margin-right:10px;}
#UserPanel { float:right; display:inline; height:27px; background-color:#999999; padding:0px 10px; margin-top:5px; padding-top:3px; margin-right:10px;}
#UserAvatar { float:left; display:inline; width:20px; border:2px solid #333333; background-color:#CC6600; height:20px;}
#UserMenu { float:left; display:inline; padding:0px 10px;}
#UserMenu p { margin:0; padding:0; font-weight:bold;}
#UserMenu ul { margin:0; padding:0; list-style-type:none; background-color:#99CC00; padding:10px;}
#UserMenu ul li { margin-bottom:5px;}
#Content { background-color:#FFFFFF;}
#SolKolon { float:left; display:inline; width:78%; background-color:#CCCCCC; padding:1%;}
#SagKolon { float:right; direction:inline; width:18%; background-color:#999999; padding:1%;}
* Reset kullanmadığım ve gruplama yapmadığım için kodlar dağınık ve çok gelebilir kusura bakmayın acilen yazdım 
Adım 3 – jQuery Kodlarını Eklemek
İlk önce penceremizin genişliğini öğrenelim;
$(function() {
var windowW = $(window).width();
alert (windowW);
});
Sonra da penceremizi küçültüp tam olarak hangi boyutta sağ üst kısmın aşağıya indiğini görelim
Gördüğümüz gibi 730px ve altında sağ üst alanımız aşağıya kaydı. Biz istiyoruz ki pencere 730px ve altında olsa bile o alan gözükmesin ve üst üste binme olmasın. Çünkü pencereyi daha da küçülttüğümüzde o alan content alanı üstüne binmeye başlayacak. Bunun için jQuery’ nin resize(); fonksiyonunu kullanacağız.
$(function() {
$(window).resize(function() {
if ($(window).width() < 730) {
$('#UserPanel').css('display', 'none');
} else {
$('#UserPanel').css('display', 'block');
}
});
});
Bu işlemlerden sonra pencerenizi küçültün ve göreceksiniz ki 730px den küçük olduğunda üst kısımdaki alan kaybolacak.
www.gecce.com
www.gecce.com
Türkiye’ nin en büyük magazin portalı olma özelliğine sahip olan Gecce.Com yenilendi. Binlerce ziyaretçisi olan, içerik anlamında zengin bir yapıya sahip olan ve okunurluğu ile göz önünde olan gecce.com 1 Temmuz itibaril ile yeni tasarımı ve yazılımı ile yayın hayatına başladı.
Yeni arayüzün tasarımları ve yazılımı Burak Karababa tarafından yapıldı. Arayüz kodlaması bölümü ise bana ait.
Projede yer aldığım alanlar,
- Xhtml Kodlaması
- Css Kodlaması
- Mootools Javascript Kodlaması
ShadowBox – Tam Teşekküllü Uygulama
Neden tam teşekkülü dedim biliyor musunuz? Kullananlar bilir, kullanmayanlar da yazıyı okuyunca öğrenecekler.
Shadowbox Nedir?
Shadowbox javascript ve css üzerine kurulu ve web standartlarına uygun olarak inşa edilmiş hemen hemen tüm medya formatlarını tanıyan bir uygulama.
Peki Nedir Bu Kadar Önemli Kılan?
Shadowbox’ ın özelliklerine bakınca hadi canım diyebilirsiniz. Kullanımı, kolaylığı, destekledikleri. Bir liste yapalım;
- Standartlar : HTML doğrulamasını kullanır ve sahte html etiketlerine gerek duymaz. Kullanılan tüm etiketler doğrulamadan geçer
- Adaptörler : Hangi javascript kütüphanesini kullanıyorsanız o kütüphaneye kolaylıkla entegre edilebilir.
Desteklediği Kütüphaneler : YUI, EXT, Prototype, jQuery, MooTools (1.2) ve DoJo ToolKit - Tema Desteği : Shadowbox’ ı kendi türündeki uygulamalardan ayıran en büyük özellik ise tema desteği. Kendine ait bir teması var ve siz daha başka temalar da ekleyip kullanabiliyorsunuz.
- Medya : Desteklediği medya formatları ise, İmajlar(Image), Quicktime, FLV, Windows Media Player, Html sayfalar ve dışarıdan çağırılabilen her sayfa.
- Şıklık : Oldukça hafif, şık kullanım ve tam kontrol.
- Evrensel : Hemen hemen tüm dilleri destekliyor. İçinde dil dosyalarının js halleri mevcut.
- Seçenek : İster tüm paket olarak, ister diğer kütüphaneler ile isterseniz de kendi seçenekleriniz ile kullanma seçeneği.
- Modüler : Modülerden kastım şudur arkadaşlar shadowbox ı indirmek istediğiniz zaman kullanacağınız modülleri seçip indirebiliyorsunuz.
İlk önceleri lightbox kullanıyordum fakat daha sonra lightboxta şöyle bir sorun gördüm ki flashların arkasında kalıyor. Derken daha farklı sorunlar çıkmaya başladı. Genelde kullandığım kütüphane hep jQuery oluyor ve bu kütüphaneye ait bu tarz uygulamalar kısıtlı. Shadowboxı bulduktan sonra oldukça rahatladım. İstediğim gibi düzenlemeler ve dosyaları ekliyorum. FLV olsun Quicktime olsun hiçbir sorun çıkarmıyor. Galerilerde ise oldukça kullanışlı. Şu an için en güzel özelliği ise uygulama başladığı anda geri planda olan tüm flashları kapatıyor olması ve çakışmayı önlüyor olması.
Uygulamanın orjinal sitesine buradan ulaşabilirsiniz -> http://mjijackson.com/shadowbox/
Kullandığım bazı projeler;
- www.sutas.com.tr
- www.bestfm.com.tr
jQuery ile Seçici Galeri/Portfolyo Oluşturma
Portfolyo Hepsi Seçili
Adım 1 – jQuery Dosyalarını İndirmek ve HTML Sayfasına Tanıtmak
Her zaman ki gibi yine indirdiğimiz js dosyalarını <head></head> tagları arasına ekliyoruz.
<script type="text/javascript" src="scripts/jquery-1.3.1.min.js"></script>
Bu js dosyası jQuery kütüphanesinin kendisi. Şimdi ekleyeceklerimiz ise sayfa içinde istediğimiz şeyi tanımlamak ve oluşturmak için gerekli;
<script type="text/javascript">
$(document).ready(function() {
$('ul#galeri img').animate ({
"opacity" : .5
});
$('ul#galeri img').hover (function() {
$(this).stop().animate ({ "opacity" : 1 });
//ul#galeri içindeki tüm imajların üzerine gelindiğinde opasiteleri 1 yap fare çekildiğinde eski haline getir.
},//süslü parantezden sonra gelen virgül ikinci bir fonksiyon için yazılır. Burada fare üzerinden çekildiğinde (mouseOut) yapılacak fonksiyonu çağırır.
function (){
$(this).stop().animate ({ "opacity" : .5 });
});
$('ul#menu a').click(function() {
$(this).css('outline','none');
$('ul#menu .aktif').removeClass('aktif');
$(this).parent().addClass('aktif');
var filtre = $(this).text().toLowerCase().replace(' ','-');
if(filtre == 'hepsi') {
$('ul#galeri li.hidden').fadeIn('slow').removeClass('hidden');
} else {
$('ul#galeri li').each(function() {
if(!$(this).hasClass(filtre)) {
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
});
</script>
Kısaca anlatırsak eğer,
sayfa yüklendiğinde tetikleyiciyi çalıştır. Daha sonra galeri id’ sine sahip ul tagı içindeki tüm resimlerin opasitesini 0.5 oranına düşür. Daha sonra fare üzerine gelindiğinde ise opasiteyi 1 yap. Yeniden fare üzerinden giderse 0.5 oranına geri düşür.
menu id’ sine sahip ul elemanlarının herhangi birisine tıklanırsa bir css değeri ata. menu ul .aktif sınıfını almış ise .aktif sınıfını kaldır. Kendi içinde ise aktif sınıfını ekle.
Şimdi buraya dikkat;
Birazdan menüde göreceğiniz menü elemanları şunlar Hepsi, Css/Xhtml, Tasarım, CMS/İYS, Flash işte bu isimlere denk gelen ve bunları küçük harf olarak çevirip sınıf atayan kısım da bu
var filtre = $(this).text().toLowerCase().replace(' ','-');
Buradan sonrasını zaten tahmin ediyorsunuzdur. Galeri içindeki li elemanları içindeki öğeleri hafifçe göster ve her birisi aktif oldukça filtre değişkenini uygula.
Adım 2 – HTML Kodlarını Eklemek
<div id="Main"> <ul id="menu"> <li class="aktif"><a href="#">Hepsi</a></li> <li><a href="#">Css/Xhtml</a></li> <li><a href="#">Tasarım</a></li> <li><a href="#">CMS/İYS</a></li> <li><a href="#">Flash</a></li> </ul> <ul id="galeri"> <li class="css"><a href="http://www.huzurevi.com.tr"><img src="images/huzurevi.png" alt="Huzur Evi" height="115" width="200" />Huzur Evi</a></li> <li class="cms"><a href="http://www.meteorcar.com"><img src="images/meteorcar.png" alt="Meteor Car" height="115" width="200" />Meteor Car</a></li> <li class="cms"><a href="http://www.akdenizjaponoto.com"><img src="images/akdenizjapon.png" alt="Akdeniz Japon Oto" height="115" width="200" />Akdeniz Japon Oto</a></li> <li class="cms"><a href="http://www.titaskofte.com"><img src="images/titas.png" alt="Titas Köfte" height="115" width="200" />Titas Köfte</a></li> <li class="css"><a href="http://www.ayarsizenerji.com"><img src="images/ayarsiz.png" alt="Ayarsız Enerji" height="115" width="200" />Ayarsız Enerji</a></li> <li class="flash"><a href="http://www.lilakagit.com"><img src="images/lila.jpg" alt="Lila Kağıt" height="115" width="200" />Lila Kağıt</a></li> <li class="css"><a href="http://www.maylo.com.tr"><img src="images/maylo.jpg" alt="Maylo" height="115" width="200" />Maylo</a></li> <li class="tasarım"><a href="http://www.zenaresort.com.tr"><img src="images/zena.png" alt="Zena Resort" height="115" width="200" />Zena Resort</a></li> </ul> </div>
Hepsi isimli bölüme aktif sınıfını ekliyoruz ki bu ilk gözükecek kısım. Daha sonra ise galeri içindeki li elemanlarının sınıflarını ayarlıyoruz. Hangi iş hangi bölüme ait Sonrasını zaten yukarıda anlattığım filtre değişkeni kendisi otomatik döndürüyor.
Portfolyo 2 - CMS Seçili
jQuery Top Link – jQuery Yukarı Çık Bağlantısı
Çoğu zaman hazırladığımız web sitelerinde aynı sayfa içinde uzun listeler oluşur. Ve biz bu listelere ait elemanlara bağlantı veririz. Bu bağlantıların kendi isimleri olur ve <a> tagında name parametresini alırlar. Ve biz sayfanın alt kısımlarında kalan yazıların uygun yerlerine “yukarı git, yukarı çık, üste git” v.b şeklinde metinler ekleriz ve kullanıcıları kolayca üst kısıma gitmelerine yardımcı oluruz. İşte birazdan yapacağımız örnek bu sayfanın tepesine çıkma işlemini biraz daha kolaylaştıracaktır.
Adım 1 – Javascript betik kodlarını <head> kısmına eklemek
<script type="text/javascript" src="jquery-1.3.2.js"></script> <script src="jquery.scrollTo-1.4.0-min.js" type="text/javascript"></script>
Daha önceki örneklerimizde jQuery’ e ait 1.2.6 sürüm dosyaları mevcuttu. Fakat geçtiğimiz ay içerisinde jQuery 1.3.x sürümünü yayınladı. Artık yeni eklenen eklentiler 1.3.x sürümüne göre düzenleneceğinden sizin de 1.3.x sürümüne ait js dosyasını indirmenizi ve kullanmanızı tavsiye ediyorum.
Adım 2 – jQuery Kod Bloğunu Eklemek
Yine bir önceki javascript dosyaları gibi bu kod blogunu da <head> bloğu içine ekliyoruz.
<script type="text/javascript">
jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
min: 1,
fadeSpeed: 200,
ieOffset: 50
}, settings);
return this.each(function() {
//listen for scroll
var el = $(this);
el.css('display','none'); //in case the user forgot
$(window).scroll(function() {
if(!jQuery.support.hrefNormalized) {
el.css({
'position': 'absolute',
'top': $(window).scrollTop() + $(window).height() - settings.ieOffset
});
}
if($(window).scrollTop() >= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};
Buraya kadar olan kısmı kısaca geçersek eğer;
topLink isminde bir fonksiyonumuz var ve bu fonksiyona ait ayarlar oluşturuluyor. Daha sonra bu fonksiyona ait olmak üzere pencerenin kaydırma çubuğu, yüksekliği hesaplanıyor ve ona uygulanacak değerler atanıyor.
$(document).ready(function() {
$('#yukari').topLink({
min: 400,
fadeSpeed: 500
});
//smoothscroll
$('#yukari').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});
</script>
Bu bölümde ise yukari id’sine sahip eleman topLink fonksiyonuna atanıyor ve değerleri veriliyor. Daha sonra kaydırma ile ilgili olarak yukari id’ sine sahip elemana tıklandığında atanacak fonksiyon ve değerleri veriliyor.
Adım 3 – Html Kodlarını Eklemek
<a name="yukari" id="yukari">Yukarı Çık</a> <div class="icerik"> adasdasdada </div>
<a> tagına ait name değerine “yukari” id’ sine de yukari dedim. Bir önceki adımda yukari isimli bir id vardı hatırlarsanız, işte bu o id
Adım 4 – Css Kodlarını Eklemek
<style type="text/css">
html { overflow-y:scroll; }
body { height:2000px;}
#yukari { display:none; position:fixed; right:5px; bottom:5px; color:#000; font-weight:bold; text-decoration:none; border:1px solid #000; background:#999999; padding:10px; cursor:crosshair; }
</style>
Boş bir sayfa olduğundan dolayı ben body yüksekliği 2000px yaptım. Fakat siz sayfanızda kullanırken bunu böyle ayarlamayın sayfanızın uzunluğu ne ise onu alsın.
Tüm bu adımları yaptıktan sonra sayfanızı bir tarayıcıda çalıştırın ve yavaşça kaydırma çubuğunu aşağıya doğru çekin. Sayfanızın sağ alt kısmında bir kutucuğun belirdiğini göreceksiniz ve o kutucuğa tıkladığınızda otomatik olarak yukarıya doğru çıkacaktır.
Örnek Uygulamayı Görmek İçin Tıklayın
Örnek Uygulamanın Dosyalarını İndirmek İçin Tıklayın
Not:Uygulamanın orjinal anlatımı için http://davidwalsh.name/jquery-top-link adresine bakabilirsiniz.