0
Sitelerimizde yer alan açılır menüleri oluşturmak kullanmak kadar kolay ve zevklidir. ul etikeni açıyoruz ve ana menü başlıklarını li etiketi içerisine yazıyoruz.
Devamını okuyun »
Devamını okuyun »
Web sitelerinde fotografların kullanımları ve kullandığımız fotografların kullanıcılara sunum şekli herzaman için önem arz etmiştir. Galerimizde yer alan fotograflar çok ve sitemizdeki kullanım alanımız sınırlı ise fotografı dizerek değildi bir botun, fotograf veya link’e tıklanıldığında galerimizi ekrana getirebilir ve galerimizdeki fotograflarımız kullanıcılara bu şekilde sunabiliriz, ilk olarak html kodlarımızdan başlayalım.
Devamını okuyun »
Web sitelerimizde yer alan butonları mootools ve css ile daha görsel ve kullanışlı hale getirebiliriz. Sayfalarımızda yer alan menü isimleri bazen yeteri kullanıcılara bilgi vermeye bilir. Kullanıcıların butonlara tıklamak için mause ile üzerlerine geldiklerinde açılan bir açıklama bölümü oluşturmaya ögreneceğiz bu uygulamada.
Web sitelerimizdeki menülerin css’ler ve jquery ile daha ilgi çekici ve ilginç özellikler ekleye biliriz. Bu örneğimizde menü üzerine gelindiğinde menü gözüküyor ve alt menüleri de dropdown olarak gösteriyoruz. Devamını okuyun »
Her ne kadar yeni nesil tarayıcılarda CSS ile pratik bir şekilde dilediğimiz ölçülerde yuvarlak köşe oluşturabilsek de, microsoft internet explorer tarayıcıları henüz bu özelliği desteklememektedir.
Mozilla Firefox, Google Chrome, Safari gibi popüler web tarayıcı için aşağıdaki CSS kodları istenilen yuvarlak köşelere uyum gösteriyor.
<style type="text/css">
.round { -moz-border-radius:12px; -webkit-border-radius:12px; }
</style>
<div class="round"></div
Curvy Corners javascript apisi ile birlikte hızlıca bütün tarayıcılarda kusursuz çalışan yuvarlak köşeler yapabilirsiniz.
Öncelikle CurvyCorners.js dosyasını indiriyoruz.
Yeni bir index.html dosyası oluşturup aşağıdaki kodları içine yapıştırın.
Devamını okuyun »
Web sayfalarında normal sayfaların dışında pop-up sayfalarda oluşturmak isteyebiliriz. Bu örnegimizde bir pop-up sayfa yapmayı öğreniyoruz.
İndex.html dosyamızın kodları:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">
var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;}
if(pos=="center"){LeftPosition=(screen.width)?(screen.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
else if((pos!="center" && pos!="random") || pos==null){LeftPosition=0;TopPosition=20}
settings='width='+w+',height='+h+',top='+TopPosition+',
left='+LeftPosition+',scrollbars='+scroll+',location=no,
directories=no,status=no,menubar=no,toolbar=no,resizable=no';
win=window.open(mypage,myname,settings);
if(win.focus){win.focus();}}
function CloseNewWin(){if(win!=null && win.open)win.close()}
// -->
</script>
</head>
<body>
<a href=http://www.serpito.com/ onclick="NewWindow(this.href,'PopUp','600','500','no','center');return false" onfocus="this.blur()">Pop-up Linki</a>
</body>
</html>
Yukarıdaki kodlar ile pop-up bir sayfa oluşturmuş olduk.
Web sitelerin de dropdown menuleri çok sıklıkla kullanabiliyoruz. Bu örneğimizde css ler uyguladığımız ve mause üzerine geldiginde kendiliginden açılan br menu oluşturmayı ögreneceğiz.
Sayfamızda dropdown menu’nun açılır ve kapanır olmasını sağlayan kodu inceleyelim.
<script>
$(document).ready(function(){
$(".dropdownmenu").mouseenter(function () {
$("#menu").slideToggle();
});
$(".dropdownmenu").mouseleave(function () {
$("#menu").slideToggle();
});
});
</script>
Yukarıdaki kodlarda : Devamını okuyun »
Web siteleri kodlarken Html kodlama aşamasında form alanlarında kullanılabilirliği artırmak için label etiketlerini kullanırız; bu etiket belirlenen form nesnesiyle alakalı metin’e tıklandığında ilgili form nesnesine odaklanmayı(focus) sağlar.
Bildiğiniz üzere bir label’e tıklandığında hangi form nesnesine odaklanacağını belirlemek için label etiketine “for” değeri veririz. <label for=’odaklanacak_nesne’>Nesne Tanımı</label><input id=’odaklanacak_nesne’ name=’nesne_adi’/> örnek bir kullanım.
Arayüz kodlarken ne kadar az nesne ve etiket kullanırsak o kadar iyidir. Ancak bunu yaparken kullanılabilirliği düşürmekte mantıklı olamaz çünkü ziyaretçiyi memnun etmedikten sonra ne seo’nun ne de okunabilirliğin bir anlamı olur.
O yüzden çalışmalarımız hem okunabilir,hem az etiketli hem de kullanılabilir olmalı.
Label etiketini odaklanacağımız elemana id değeri vermeden kullanabilmek bi’kaç karakterlik’te olsa kodlama,okunabilirlik ve kullanışlılık için fayda sağlayacaktır.
jquery ile hazırladığım bu ufacık foksiyon; for değerinde belirtilen name değerine sahip eleman’a odaklanmayı sağlıyor.
Örnek uygulama
Fonksiyon Kodları
Uygun zaman bulduğumda saf Javascript halini de hazırlar paylaşırım umarım. 