Kadir GÜNAY’ ın Css, Xhtml, jQuery ve Wordpress Günlüğü

‘javascript’ Etiketi Arşivi

jQuery ile Kayan Panel

Yorum Yap | Bu yazı 27 Ara 2008 tarihinde yazılmıştır

Yazı başlığında olduğu gibi jQuery ile oluşturulmuş kayan panel yapıp içine ufak bir iletişim formu ekleyeceğiz.

jQuery Kayan Panel

Adım 1 - XHTML Oluşturmak


<div class="GenelAlan">
<div id="FormAlan">
<div id="IletisimForm">
<fieldset>
<label for="Name">İsim *</label>
<input id="name" type="text" />
<label for="Email">E-Posta Adresi*</label>
<input id="Email" type="text" />
<label for="Message">Mesajınız *</label>
<textarea id="Message" rows="3" cols="20"></textarea>
<input id="sendMail" type="submit" name="submit" onClick="closeForm()" value="Gönder" />
<span id="MesajGonderildi">Mesajınız başarıyla gönderildi!</span>
</fieldset>
</div>
<div id="IletisimBtn"></div>
</div>
<div class="header">
<h1>
<img src="logo.png" style="margin-top: -20px;" /></h1>
</div>

.....

Adım 2 - CSS Hazırlamak

.GenelAlan
{
margin: 0px auto;
width:960px;
background-color:#ffffff;
text-align:left;
position: relative;
}

#FormAlan
{
position:absolute;
left:600px;
float:right;
}
#IletisimForm
{
height:277px;
width:351px;
background-image:url('bkg.jpg');
display:none;
}
#IletisimForm fieldset
{
padding:30px;
border:none;
}
#IletisimForm label
{
display:block;
color:#ffc400;
}
#IletisimForm input[type=text]
{
display:block;
border:solid 1px #4d3a24;
width:100%;
margin-bottom:10px;
height:24px;
}
#IletisimForm textarea
{
display:block;
border:solid 1px #4d3a24;
width:100%;
margin-bottom:10px;
}
#IletisimForm input[type=submit]
{
background-color:#4d3a24;
border:solid 1px #23150c;
color:#fecd28;
padding:5px;
}
#IletisimBtn
{
height:40px;
width:351px;
background-image:url('iletisim_form_btn.png');
display:block;
cursor:pointer;
}
#MesajGonderildi
{
color:#ff9933;
display:none;
}

Adım 3 - jQuery Dosyalarını İndirmek ve HTML Dosyasına Tanıtmak

Bildiğiniz gibi jQuery bir javascript kütüphanesi. jQuery ile çalışmak istiyorsanız bu kütüphaneye ait js dosyasını indirmek zorundasınız. İndirmek için jQuery resmi sitesini ziyaret edip son versiyonu indirebilirsiniz. İndirdiğiniz js dosyasını şu şekilde HTML dosyanıza ekleyin;

<script src="dizin/jquery-1.2.6.min.js" type="text/javascript"></script>

Siz direk ana klasöre de ekleyebilirsiniz.

Adım 4 - jQuery Kodlarını HTML Dosyasına Eklemek

Daha önceki konularda da söylediğim gibi jQuery ile ilgili işlemleri gerçekleştirebilmek için sadece js dosyasını eklemek yeterli olmuyor. Gerekli alanlar için tetikleyici bir kod bloğu eklemeniz gerekir.

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

$("#IletisimBtn").click(function(){
if ($("#IletisimForm").is(":hidden")){
$("#IletisimForm").slideDown("slow");
}
else{
$("#IletisimForm").slideUp("slow");
}
});

});

function closeForm(){
$("#MesajGonderildi").show("slow");
setTimeout('$("#MesajGonderildi").hide();$("#IletisimForm").slideUp("slow")', 2000);
}
</script>

Bu kod’u kısaca anlatmamız gerekirse;

$(document).ready(function(){

Tetikleyiciyi çalıştır

$("#IletisimBtn").click(function(){
if ($("#IletisimForm").is(":hidden")){
$("#IletisimForm").slideDown("slow");
}
else{
$("#IletisimForm").slideUp("slow");
}
});

#IletisimBtn isimli dive bir tıklama fonksiyonu oluştur ve eğer bu div gizli ise yavaş biçimde (.slideDown(”slow”)) aşağıya kaydır. Gizli değilse yine yavaş biçimde yukarı kaydır (.slideUp(”slow”))

;function closeForm(){
$("#MesajGonderildi").show("slow");
setTimeout('$("#MesajGonderildi").hide();$("#IletisimForm").slideUp("slow")', 2000);
}

closeForm isminde bir fonksiyon oluştur ve #MesajGonderildi isimli div’i yavaşca göster. setTimeout komutu ise MesajGonderildi divi içindeki mesajın yok olma zamanını belirtiyor. Bu mesaj yok olduktan sonra da IletisimForm isimli divi yani aşağıya kayan divimizi yavaşca yukarı doğru ilerlet ve kapat komutunu gerçekleştiriyor.

Örnek Uygulama

Örnek Dosyaları İndir

Not: Orjinal makale adresi http://designshack.co.uk/tutorials/creating-a-slide-in-jquery-contact-form ben jQuery kod bloğunu, css ve xhtml dosyalarını Türkçe anlattığım ve herkesin anlaması için bir bölümünü değiştirdim.

CSS, div, html, javascript, jQuery, jquery kayan div, jquery slide div, jquery slider, kütüphane, library, XHTML

CSS, XHTML, jQuery

sIFR

2 Yorum | Bu yazı 19 Ara 2008 tarihinde yazılmıştır

Merhaba arkadaşlar. Bu yazımda size jQuery’ nin sayısız nimetlerinden birisi olan sIFR tekniği hakkında bilgi vereceğim.

Öncelikle sIFR nedir ona bakalım?

sIFR jQuery eklentilerinden birisi ve özelliği web sitelerinizdeki metinleri flash tabanlı olarak istediğiniz yazı tipine çevirmenize yarıyor.

Peki jQuery nedir?

jQuery bir Javascript kütüphanesi. Bu kütüphane aracılı ile çok basit şekilde web sitelerinizde çok güzel uygulamalar yapabilirsiniz. Yazımı kolay ve kısadır.

sIFR’ i kullanabilmemiz için gerekli dosyalar nelerdir?

jQuery kütüphanesi - jquery-1.2.1.pack.js
jQuery Flash eklentisi - jquery.flash.js
jQuery sIFR eklentisi - jquery.sifr.js
Embed (sanırım Türkçesi içine gömmek oluyor) edeceğimiz yazı tipini hazırlayacağımız fla dosyamız - sifr.fla
fonts dizini

Tüm bu dosyaları ve örnek dosyayı buradan indirebilirsiniz.

Adım 1 - Yazı Tipini Embed Etme (Flash içine gömme)

zipli dosyamız içinden çıkan sifr.fla isimli dosyamızı flash programı ile açın. İç içe gömülü movieclipler göreceksiniz. Metin kutusunu görünceye kadar moviecliplerin içine girin. Karşınıza örnek bir metin gelecek. Orada bulunan metni seçin ve değiştirmek istediğiniz yazı tipini seçerek metnin yazı tipini değiştirin. Değişikliği yaptıktan sonra metin ayarlarının bulunduğu yerde “Embed” isimli bir düğme göreceksiniz işte o düğmeye tıklayın. Karşınıza gelen pencerede “Basic Latin (95glyphs)” seçin ve aşağısında bulunan “Include these characters” isimli kutucuğa şunları ekleyin; “ŞşİiÖöÇçÜüIıĞğ” (tırnaklar olmadan ekleyin). Bu yaptığımız işlem şunun içindir; seçtiğimiz yazı tipi Türkçe karakterleri desteklemiyor ise buraua girdiğimiz karakterleri de almasını sağlayacağız.

Bu işlemleri yaptıysanız eğer son olarak ctrl+enter tuşları yardımı ile swf dosyanızı oluşturun. Bu dosyayı kendi belirleyeceğiniz bir dizin içine atın. Ben fonts olarak ayarladım ve fonts dizini içine attım.

Adım 2 - Javascript dosyalarını tanıtmak

zip dizini içinden çıkan

jquery-1.2.1.pack.js
jquery.flash.js
jquery.sifr.js

dosyalarımızın yolunu <head></head> etiketleri arasında göstererek tanıtın.

Adım 3 - jQuery tetikleyicisini eklemek

Bildiğiniz gibi javascript kodları bir tetikleyici kod satırı ile çalışmaktadır işte jQuery’ de tetikliyici kod bloğu da şu şekilde olmaktadır;

 $(document).ready(function(){

// Your code here

});

Şimdi de sIFR için kullanacağımız kodu yazalım

$(function(){

$.sifr({path:'fonts'});

$('h3.KadirGunay, p.KadirGunay').sifr({font:'NeoSans'});

});

Burada dikkat etmemiz gereken şu; $(’.KadirGunay’).sifr({font:’NeoSans’}); bu kısımda .KadirGunay olarak geçen kısım CSS dosyamızda KadirGunay sınıfına atadığımız özellikleri alacaktır ve yine aynı şekilde KadirGunay sınıfındaki değişkenleri sIFR eklentisi ile belirlediğimiz yazı tipine değiştirecektir.

Hepsi bu kadar arkadaşlar

CSS, embed, flash, javascript, jQuery, sifr

CSS, XHTML, jQuery

WP Code Box - WP Kod Kutusu

6 Yorum | Bu yazı 16 Eyl 2008 tarihinde yazılmıştır

CMSTurk.Net WP bölümünde denk geldiğim bu eklenti gerçekten çok kullanışlı ve işe yarıyor. Öncelikle adından anlayacağınız gibi Wordpress sisteminizdeki yazılarınızda kullandığınız xhtml, css, javascript, php ve daha nice kodu kod şeklinde göstermek için kullanılıyor. Nasıl mı? Öncelikle eklentiyi buradan indirin. Daha sonra rarlı dosya içinden çıkan dizini wp-content/plugins dizini içine kopyalayın. Yönetim panelinize gidip eklentiler kısmından eklentiyi bulup aktif edin. Eklenti ayarlarını yapmak için yönetim panelinde Ayarlar kısmına gidin.

Gelelim eklentinin kullanımına;
Örnek verecek olursam bir xhtml kodu yazacaksanız ve bunu normal yazı ile değil farklı bir şekilde kod kutusu içinde göstermek istiyorsunuz. İlk olarak normal bir şekilde yazalım;

<div id="icerik">
   <div id="kayanAlan">
      <div class="bolum">
         Bölüm1
      </div>
      <div class="bolum">
         Bölüm2
      </div>
      <div class="bolum">
         Bölüm 3
      </div>
      <div class="bolum">
         Bölüm 4
      </div>
      <div class="bolum">
         Bölüm 5
      </div>
   </div>
</div>

Bu normal yazım şekliydi. Şimdi bunu bir de kod kutusu içinde yazdıralım;



Bölüm1
Bölüm2
Bölüm 3
Bölüm 4
Bölüm 5

işte bu da kutu şekliydi.
Hangi dilde kod örneği ekleyecekseniz o dilin ismini

 kısmına ekliyorsunuz. Hepsi bu

code, code box, CSS, eklenti, javascript, jQuery, plugin, worspress, wp

CSS, Wordpress, XHTML, jQuery

CSS + Mootools ile Kayan DIV’ ler

1 Yorum | Bu yazı 18 Ağu 2008 tarihinde yazılmıştır

CSS’ in güzelliği ile Mootools’ un kullanılabilirliği birleştiği zaman ortaya çok güzel işler çıkıyor. İşte onlardan birisi de farenizin konumuna göre kayan divler Aynı flashda paralax mantığı ile hareket eden bir sistem.

css ve mootools ile yapılmış kayan div örneği

Bu sistemi yapmak çok basit arkadaşlar. Bunun için öncelikle mootools.svn isimli javascript dosyasına ihtiyacımız var. Buradan indirebilirsiniz. Daha sonra ise normal bir html sayfası açıp şu kodları giriyoruz;


<div id="icerik">
   <div id="kayanAlan">
      <div class="bolum">
         Bölüm1
      </div>
      <div class="bolum">
         Bölüm2
      </div>
      <div class="bolum">
         Bölüm 3
      </div>
      <div class="bolum">
         Bölüm 4
      </div>
      <div class="bolum">
         Bölüm 5
      </div>
   </div>
</div>

icerik ID’ sine sahip alan genel alanımız, kayanAlan ID’ si içeriğimiz olduğu ve faremizin hareketi ile kayan alan, geri kalan alanlarımız ise bolum sınıfı ile tanımlanmış içerik alanlarımız.

Şimdi bu alanlarımızın CSS kodlarını yazalım;
Devamını Oku »

CSS, div, flash, javascript, kayma efekti, mootools, mouse effect, paralax, XHTML

CSS, XHTML