- engindeniz.net - http://www.engindeniz.net/v3.0 -

Javascript ile Dinamik CSS Değişimi

Bir süredir aklımda yazacağım birkaç konu vardı
Ancak hepsini geçip, 1 saat önce birden aklıma gelen yepyeni bir konuyu buraya aktarmaya karar verdim:)

Web sayfası tasarlayanlara çalışmalarında yeni bir açı kazandırabileceğini düşündüğüm bir konu olması açısından birazdan anlatacağım konunun keyifli olduğunu düşünüyorum.

Aslında bu konu hakkında araştırma yapmayı hep planlıyordum.
Nasıl yapıldığı konusunda aşağı yukarı biraz fikrim vardı.
Ancak pratik bilgim maalesef yoktu, 1 saat öncesine kadar:)

Konumuz başlıktan da anlaşılacağı üzere dinamik olarak css değiştirmektir.
CSS hakkında çok uzun genel bilgiler vermeyip kısaca bahsederek geçeceğim.
Cascading Style Sheets – CSS ya da Türkçesiyle Stil şablonları sayfalarımızın biçimini oluşturur.
Yani font büyüklüğü, rengini, sitemizin arka rengi vb… görselleri etkiler.
Bu biçimlendirmeleri HTML sayfasını oluştururken ayrı ayrı yazabileceğimiz gibi CSS dosyaları oluşturarak toplu olarak belirlemek ve her sayfanın başında bu dosyayı çağırıp genel olarak sayfalarımızı daha kolay etkileyebiliriz.

Ayrıca biçimde bir değişiklik istediğmizde var olan CSS dosyalarımız üzerinde değişiklikler yaparak ayrı ayrı her sayfayı değiştirmekten kurtulmuş oluruz

Bu kısmı özellikle belirtmek istedim. Çünkü bu konu ilginizi çektiyse ve tasarıma yeni başladıysanız CSS dosya oluşturma ve sayfaya ekleme konusunu bilip önemini kavramalısınız.

CSS dosyalarının çağırılmasını mutlaka sayfalarda görmüşünüzdür

<link rel=”stylesheet” type=”text/css” title=”vsvsvs” href=”css dosyası adı.css”>

olarak geçer…
bu “link” tagı “head” tag’ları arasına yazılır ve “body” ‘den hemen öncedir.

Bizim şimdi yapacağımız. Hali hazırda sayfada tanımlı olan CSS dosyasının yerine başka bir CSS dosyasını sayfa yenilenmeden javascript yardımı ile çağırıp sayfanın tasarımını anında değiştirmek olacak.

Önce dinamik olarak değiştireceğimiz CSS dosyalarımızı sayfamıza ekliyoruz. bu örnek için iki CSS dosyası hazırladım

<link rel=”stylesheet” type=”text/css” title=”ilk” href=”main.css”>
<link rel=”alternate stylesheet” type=”text/css” title=”alternatif” href=”diger.css”>

görüldüğü gibi ilk satırda her sayfada olduğu gibi yazdık.
ikinci satırda bir fark var “alternate stylesheet” olarak geçiyor
evet, bu kısım browser tarafından dikkate alınmıyor ve her zaman ilk baştaki dikkate alınıyor.

Şimdi temayı değiştirmek için javascript fonksiyonlarımızı tanımlayalım
bunun için 4 fonksiyon belirledim.
1)temayı tespit edip değiştirme <– tema değiştirme için
2)cookie oluşturma <– değiştirilen temanın hatırlanması için cookieye kayıt
3)cookie çağırma <– kayıtlı tema seçimimizi geri çağırma
4)cookie kontrol <– bir tercih yaptıkmı kontrol, varsa 3. cookie çağırma ve 1. tema değiştirme fonksiyonlarının kullanımı

tüm fonksiyonları aşağıda açıklamalarıyla yazıyorum

/*
css dosyamızın değişmesi için fonksiyonumuza başlıyoruz
*/
function degis(tema)
{
var i, link_tag ;
 /*
link_tag = document.getElementsByTagName("link") ;
Satırı ile sayfamızda bulunan "link" taglarını link_tag değişkenine
atıyoruz, şu anda bunun sonucu 1 dönecektir
Yani 0 ve 1 (toplam 2 ) iki adet css dosyamızı atadık.
  */
for (i = 0, link_tag = document.getElementsByTagName("link") ;
i < link_tag.length ; i++ ) {

/*
bir döngü kurarak css temalarının adlarını sorgulayacağız
önce tüm css dosyalarımızı pasif hale getiriyoruz
içlerinden birinin adı bizim tercihimiz ile uyuşuyorsa onu aktif hale getireceğiz ve değişim gerçekleşecek
*/
if(link_tag[i].rel.indexOf("sty")==0 || link_tag[i].rel.indexOf("alt")==0) {
/*
bu satırla daha önce tespit ettiğimiz kaç tane link varsa eğer bunların "rel" tagında "stylesheet","style" ya da "alternative"
anahtar kelimeleri geçiyorsa kontrolü yapıyoruz ve
css'leri pasif hale getiriyoruz

bu arada bu satır yerine aşağıdaki iki satırı da yazabilirdik
if(link_tag[i].rel.match(/^sty|^alt/i)) {
ya da
if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) && link_tag[i].title) {
*/
//yukarıda bahsi geçen pasif hale getirme
link_tag[i].disabled = true ;

if (link_tag[i].title == tema) {
 /*
eğer seçtiğimiz temanın adı sorguladığımız sıradaki link tag'ı ile uyuşuyorsa onu aktif hale getiriyoruz, bu css'i çağırmaya yarıyor.
döngü bitiyor

diyebilirsiniz ki "-peki 5 ya da 15 css dosyamız varsa ne olacak?"

bu örnekte iki link kullandık biri değilse diğeri olduğundan
işlem hemen bitti gözüküyor.ama eşleşme tespit ettikten
sonra döngümüz durmuyor, evet bir kere temamızla
eşleştiği anda o link aktif oluyor. diğer linkler uyuşmayacağı
için onlar teker teker pasif hale gelmeye devam ediyor
ancak endişelenmeyin bunlar 0.01 saniyede gerçekleşiyor:)
uzun bir işlem değil.
 */
link_tag[i].disabled = false ;
      }
    }
/*
artık temamız değiştiğine göre bunu cookie 'lerimize yazalım
böylece her girişimizde değiştirmek zorunda kalmayız.
aşağıda cookie'lere yazma olayını anlatacağım
burada kullandığım fonksiyonu set_cookie olarak yazıyorum
aşağıda gördüğünüz "stil" cookie adımız, istediğiniz ismi verebilirsiniz
ikincisi "tema" olarak geçen değişkenimiz, yani css dosyası adı olarak geçiyor
bu aynı zamanda cookie değerimiz oluyor...
yanındaki 30 ise cookie'nin kalacağı gün sayısını gösteriyor
yani bir tema seçtiğiniz bu 30 gün boyunca otomatik seçiminiz olarak karşınıza gelecek
sonra otomatik olarak ilk temaya geri dönecek, bu süreyi uzatmak elbette sizin tercihiniz.
*/
set_cookie( "stil", tema, 30 );
  }
}
/*
cookie'leri oluşturmak için fonksiyonumuz
http://www.w3schools.com/JS/js_cookies.asp
adresinden olduğu gibi aldım
çok kullanışlı ve ayrı bir  çaba sarf etmeye gerek yok.
yukarıda anlattığım verileri girdiğimizde yani cookie adı, cookie değeri ve gün sayısı hemen oluşuyor
*/
function set_cookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
/*
oluşturduğumuz cookie'leri çağırmak için fonksiyonumuz
yine http://www.w3schools.com/JS/js_cookies.asp adresinden aldım.
önceden verdiğimiz "stil" adıyla cookie'mizi çağırdığımızda yine önceden verdiğimiz değeri bize veriyor

*/
function get_cookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=");
  if (c_start!=-1)
    {
    c_start=c_start + c_name.length+1;
    c_end=document.cookie.indexOf(";",c_start);
    if (c_end==-1) c_end=document.cookie.length;
    return unescape(document.cookie.substring(c_start,c_end));
    }
  }
return "";
}
/*
tema değişikliği fonksiyomuz
bunu bilgisayarımızın hatırlaması için cookie oluşturma fonksiyonumuz
ve son olarak seçimimizi öğrenmek için birde cookie çağırma fonksiyonumuz var
ancak son olarak tarayıcımızın bu web sayfası için bir tema seçip seçmediğimizi sorgulaması için bir fonksiyona ihtiyacımız var
her sayfaya girdiğimizde bunu kontrol ettirecek bir fonksiyon
bu da hemen aşağıda....
*/
function cookiekontrol()
{
  var tema = get_cookie("stil");
  if (tema.length) {
    degis( tema );
  }
}
/*
önce tema değişkenimize stil cookie'sinin değerini atıyoruz
eğer stil 'in bir değeri varsa yani sıfırdan büyük ise
degis fonksiyonumuz buna göre tetikleniyor
ve temamız değişerek ekrana geliyor.
bunu her sayfaya girişte yapabilmek için body onload kısmına eklememiz gerekiyor
<body onload="cookiekontrol()">
*/

bu javascript kısmıydı
html sayfa örneği için google’dan bir template bulup biraz değiştirdim , içine yukarıdaki konu anlatımını da ekledim

javascript kodlarından sonra geriye temayı değiştirecek arayüzümüz kalıyor
bu kısım aslında tamamen sizin keyfinize kalmış
ben basitçe iki button ekledim, javascript fonksiyonlarımızı onclick ile çağırdım


<input type="submit" onclick="degis('ilk');return false;"
  name="tema" value="ilk tema gri renkli olan" id="gri">
<input type="submit" onclick="degis('alternatif');return false;"
  name="tema" value="ikinci tema pembe olan" id="pembe">

online sonucu görebilmek için buraya basabilirsiniz [1]
başlık fontunun, arka sahne renginin nasıl değiştine dikkat ediniz
aynı zamanda background olarak kullanılan gif dosyasıda değişmektedir.

dosyayı çekmek için buraya basınız. [2]

bunu hangi amaçlarla kullanabiliriz?
Aslında hayal gücümüze kalmış birşey…
Aklıma ilk gelen, kayıtlı kullanıcılarınızın kendi stillerini seçmelerine izin verebilirsiniz. Bunun dışında birden fazla tema belirleyip siteyi dolaşırken tercihe bırakabilirsiniz.

Geçenlerde rastladığım bir sitede 4 mevsim teması işlenmişti. isteğe göre mevsim temasını seçebiliyordunuz  ve buna göre sitenin içeriği karlı yada güneşli bir hal alıyordu. Çok hoşuma gitmişti.

umarım işinize yarar

Yakın bir zamanda ben de bu özelliği kullanarak  sitemin deniz temasına biraz hareket katmayı planlıyorum ;)

sevgiler saygılar

Be Sociable, Share!
  • [3]
  • [4]
  • [5]
  • [6]