SoulTip v1.1, Basit Javascript Tabanlı tooltip Sistemi {Türkçe}

22-11-2003

  1. SoulTip Nedir ?
  2. Pratik Kurulum
  3. Platform, Browser Bağımlılıkları
  4. Yeni Sürümde Neler Var ? (Changelog)
  5. Örnekler & Örnek Kodlar
  6. Kaynak Kodunu Download Et
  7. Kod Dokümantasyonu
  8. Bilinen Sorunlar & Hata Bildirimi (bug report)
  9. Eklenilmesi Düşünülenler (to do)
  10. Lisans / Kullanım şartları
  11. Kullanan Siteler
  12. Benzer Javascriptler
  13. FAQ
  14. İletişim - Destek

 

SoulTip Nedir ?;

SoulTip JS & DHTML teknolojileri kullanılarak yazılmış küçük bir skripttir. Sayfanızda bunun gibi sayfadaki objelerin üzerine gelince bir açıklama veya herhangi başka bir şey çıkarmanıza izin verecektir. Kullanımı diğer bu tip çalışmalardan çok daha basittir. İstediğiniz taga help="gösterilecek metin" özelliğini eklemeniz yeterlidir. <a href="http://google.com" help="Google gider"> gibi.

Pratik Kurulum;

  1. soultipv11.zip (veya soultipv11_compact.zip, bkz:compact ? ) dosyasını download edin.
  2. Zip dosyasından çıkacak soultip.js ve soultip.css dosyalarını sayfanız ile aynı klasöre yerleştirin.
  3. Sayfanıza <script language="javascript" src="soultip.js" type="text/javascript"></script> kodunu ekleyin. (<head></head> tagları arasına ekleyebilirsiniz.)
  4. Bundan sonra sayfada help="soultip mesajı" özelliğini kullandığınız tüm objelerde açıklamalarınız SoulTip ile görünecektir. <a href="#" help="test mesajı">Test Linki</a> gibi.

Platform, Browser Bağımlılıkları;

SoulTip Internet Explorer 5 ve üzerinde sorunsuz şekilde çalışacaktır. Diğer browserlar basit şekilde onu kaale almayacaktır ve hata göstermeyeceklerdir. Mac üzerinde test edilmemişti ancak sorun çıkarması beklenmemektedir.

Yeni Sürümde Neler Var ?;

Yeni Sürümde Gelenler, geliştirilenler;

  1. Macormedia Extension Eklenilmesi tamamlandı, beta testlerinden sonra kısa sürede bu sayfadan downloada açılacaktır. (23.Kasım.2003)
  2. Compact Mod Eklendi, Bunun sayesinde SoulTip de özelleştirme istemeyen kullanıcılar çok kısa bir koda ulaşabilecek. Sadece 3kb.
  3. v1.1, fm_findObj() getElementById() ile değiştirildi (17.Kasım.2003)
  4. Yeni düzeltmeler ile performans yükseldi
  5. Kod Dokümantasyonu Eklendi
    Kodun detaylı açıklaması eklendi.
  6. GNU Lisansı altında dağıtılmaya başlandı
  7. SelectBox' larda gösterim sorunu giderildi (Yusuf Uğur Soysal / @hayalet ' e teşekkürler)
  8. Ekrandan taşma sorunları giderildi
  9. Fixed Mod Eklendi ve Stabil bir hale getirildi
    Bu mod sayesinde isterseniz soultip objenin üzerinde çıktıktan sonra, objenin konumuna göre otomatik bir yerde sabit şekilde kalıyor.
  10. HTML & CSS Kodları entegre edildi
    Bu sayede kod daha kolay entegre edilebilir oldu, SoulTip i sayfanız eklemek için atık tek yapmanız gereken .js dosyasını sayfanıza yerşleştirmek.
  11. Yorumlar Genişletildi
    Kodun içerisindeki yorumları daha fazlalaştırarak programcılara biraz olsun kolaylık sağlandı
  12. İngilizce Dokümantasyon
  13. Belli Başlı Skript sitelerinde dağıtımı ve listekenmesini sağlamak

Örnekler;

Link örnekleri : Yep de ! , Yahoo, Ferruh.Mavituna, None Link

<a href="http://www.yahoo.com" help="Go to <strong>Yahoo</strong>">Yahoo</a>

Form Elementleri :

<input type="text" name="test" help="Describe your position, Max <span style='color:#F00'>255</span> character">

<input type="checkbox" name="" help="I love checkboxes !">

<br /><textarea help="More bla bla......."></textarea>

Yükle (download);

  1. SoulTip v1.1 (6kb. - 17.11.2003)
    Son Stabil Versiyonu (Eski versiyonlar için e-mail atmanız gereklidir)

    MD5 Sum:
    7a6161f13323f11102a74e5aad3f95c6
  2. SoulTip v1.1 Compact Mod (4kb. 17.11.2003)
    Son Stabil versiyon sıkıştırılmış kodludur. Özelleştirme yapmayacaksanız aynı sizin için aynı görevi görecektir.

    MD5 Sum:
    399d6ab1254a0a97c6946db85cfa6f9f

Kod Dokümantasyonu;

Bu kısımda kod hakkında teknik detaylar açıklanmaya çalışacaktır. Eğer ki işin teknik kısmı ile ilgilenmiyorsanız yada başlangıç seviyesinde bile Javascript bilginiz yoksa bu bölümü geçebilirsiniz.

Kodun ilk kısmında soultip için kullanılacak divlerin isimlerini tanımlıyoruz. divname ekranda görülen layerın id'si (ismi) divInnername ise yazının gözükeceği bölgenin ismi.

// Customizations;
var divname="soultip";
var divInnername="soultipinner";

Bu özellik aktif olursa (var fixed=true;) sayesinde mouse objenin üzerine geldiğinde SoulTip üzerine gelinen objeye göre otomatik bir konum alır ve bu objenin mouse bu objenin üzerinden gidene kadar da o konumu değiştirmez. Bunu true veya false olarak set edebilirsiniz.

//If this is true tooltips will not move and shown in fixed mode
var fixed=false;

Kodun kilit noktalarından biri bu kısım. Yeni versiyonda daha kolay kullanım için SoulTip HTML kodu Javascript içerisine gömüldü. Dolayısıyla artık SoulTip layerının HTML kodu JS dosyasının içinde yer alıyor. Aşağıdaki HTML kodunu istediğiniz şekilde değiştirerek kendi özel SoulTip inize sahip olabilirsiniz.

var soultip="<div id='soultip'><div id='soultipinner'></div></div>"

Örnek olarak aşağıdaki kod her SoulTip kutucuğunun başına "Detaylar" kelimesini eklemiş olacaktır.

var soultip="<div id='soultip'><strong>Detaylar</strong><hr><div id='soultipinner'></div></div>"

SoulTip Koordinatları sayesinde çıkacak tooltip kutularının CoordLeft ile soldan kaç pixel, CoordRight ile de sağdan kaç pixel uzakta olacağını belirtebilirsiniz. Kod içerisinde bu veriler ile otomatik oynansa dahi burada girilenler baz alınacaktır.

// Fix SoulTip Coordinates
var CoordLeft=10;
var CoordRight=-15;

Checkboxları gizleme işleminde kullanılan global bir Array.

// For Storing hidden selects
var hiddenTags = new Array();

fm_MXY() fonksiyonu size mouse' un sayfadaki X ve Y konumunu verir.
Fonksiyon : fm_MXY()
Değişkenler : XorY ("x" veya "y" olarak belirtmeniz gerekir)
Döndürdüğü Değer : Numerik olarak verilen değişkene göre mouse' un sayfadaki X veya Y konumunu verir.

function fm_MXY(XorY){ // Mouse Coords
  var coord = 0;
  XorY=="x"?coord = event.clientX + document.body.scrollLeft:coord = 
  event.clientY + document.body.scrollTop;
  if(coord<0)coord=0;
  return coord;
}

fm_help() fonksiyonu esas genel işlemlerin hepsini yapan temel fonksiyondur.
Fonksiyon : fm_help()
Döndürdüğü : SoulTip layerının konumunu değiştirir, üzerindeki objenin help özelliğinin değerini alır ve yazdırma fonksiyonunu (fm_writehelp()) çağırır.

function fm_help(){ // Show-Hide 
var NewCoordLeft=0,NewCoordRight=0; // Yeni Koordinatları tanımlayıp sıfıra eşitliyoruz
var thisObj = getElementbyId(divname); // getElementbyId() aracılığı ile SoulTip' i ana divini alıyoruz
SoulTip'in browser kenarıdan görünürken taşmaması amacı ile bazı değişkenleri tanımlamamız gerekiyor. Önce aktif pencerenin boyutlarını almamız gerekiyor. Genişliği basit şekilde document.body.clientWidth ile alıyoruz.Uzunluğu ise document.body.clientHeight ile almamız yetmiyor. Çünkü sayfa boyutu scrollar dahil olmadan bize gelecektir. Bu yüzden mevcut boyut ile Scroollar' ın boyunu topluyoruz. Buna ek olarak ekstra kısımlar için bir default 25 pixel ekliyoruz. Son olarak bize gerekli uzunluk boyutunu document.body.clientHeight+document.body.scrollTop+25 ile elde etmiş oluyoruz.
   var browserwidth=document.body.clientWidth; // Browser' ın genişliğini alıyoruz
var browserheight=document.body.clientHeight+document.body.scrollTop+25; // Browser' ın uzunluğunu alıyoruz
SoulTip özelleştirmeye açık bir sistem olduğundan dolayı kendi kutucuklarımızın boyutlarını bilemeyiz. Dolayısıyla kendi kutucuğumuzun boyutlarını tekrar offsetWidth (genişlik) ve offsetHeight (uzunluk) özellikleri ile alıyoruz. Hatırlarsanız getElementbyId() ile thisObj' yi SoulTip ana layerı için obje olarak tanımlamıştık. Dolayısıyla artık ona ulaşmak istediğimizde thisObj objesini kullanıcağız. 10 pixel lik oynamalar için aldığımız değerleri 10 pixel arttırıyoruz.
   var soulwidth=thisObj.offsetWidth+10, soulheight=thisObj.offsetHeight+10; // Soultip sizes
Mouse' un üzerinde bulunuğu objeyi activeObj olarak alıyoruz.
	var activeObj=window.event.srcElement; // Active Object
activeObj objesi aracılığı ile aktif objenin help tagını alıyoruz. Dolayısıyla eğer buradaki .help 'i değiştirirseniz objelerinizde kendi tagınızı kullanabilirsiniz. Mesela aşağıdaki kodda activeObj.help' i activeObj.soultip yaparsanız bundan sonra objelerinizde help özelliği yerine soultip özelliğini kullanabilirsiniz. <a href="#" soultip="soultip yardımı !">soultip özelliğini kullanarak</a>
	var desc=activeObj.help; //help tag
Eğer bulunduğumuz objenin help tagı varsa yani desc boş değilse SoulTip için gerekli hazırlıklara başlayabiliriz.
	if(desc!=null){	//Eğer desc boş değilse bu işlemleri yap
var x = fm_MXY("x"), y = fm_MXY("y");
if(document.alldesc==desc){ //If fixed
NewCoordLeft=activeObj.offsetLeft+activeObj.offsetWidth-x; // Aktif objenin genişlik ve uzunluğunu alalım
NewCoordRight=activeObj.offsetTop-y; // Uzunluğunu Alalım
}

Bundan sonra Yeni sol (NewCoordLeft) ve Üst (NewCoordRight) koordinatlarını oluşturuyoruz.Burada üsr koordinat değişken isminin NewCoordRight olduğuna bakılmamalıdır. O benim bir hatamdır ve bir daha da değiştirmey eüşendim, bir sonraki versiyona inşallah.

Koordinatları oluşturma mantığı;
Pseudo Kod (simülasyon kodu);

(Ana Layer Genişliği + Mouse' un pencerenin solundan olan uzaklığı) büyükse Pencerenin Genişliği Yeni koordinattan Ana Layer genişliği kadar çıkart. Aksi takdirde Yeni koordinat varsayılan uzaklık olsun.

Gerçek Kod (Formülasyon);
NewCoordLeft+=(x+soulwidth>browserwidth)?-soulwidth:CoordLeft;

aynı işlemi uzunluk içinde uygularız.

NewCoordLeft+=(x+soulwidth>browserwidth)?-soulwidth:CoordLeft; //fikir Yusuf Uğur Soysal - @hayalet
NewCoordRight+=(y+soulheight>browserheight)?-soulheight:CoordRight;
Ana Layer' ı (thisObj) bulduğumuz yeni koordinatlara taşırız.
thisObj.style.left=x+NewCoordLeft+"px"; //Move X 
thisObj.style.top=y+NewCoordRight+"px"; //Move Y
fm_writehelp(desc); //tagın içerisindeki açıklamayı fm_writehelp yardımı ile yazdırırız.
hy_collusion(thisObj); //Layerın alrındaki selectnboxları sorun çıkarmaması amacı ile gizleriz
Eğer fixed mode aktifse (if(fixed)) açıklamayı cachemize alırız. Bir sonraki seferde hala aynı açıklama varsa SoulTip konumunu değiştirmeyecektir. Aynı açıklama içeren iki link arasında geçişte sorun çıkartma ihtimali olabilir. Ne kadar çok küçük bir ihtimal olsa da henüz bu tip bir soruna rastlanılmadı.
if(fixed)document.alldesc=desc; //cache for fixed
Eğer tanım boşsa aşağıdaki kod çalışır. Tanımın boş olmasının anlamı şu an SoulTip in ekranda görünmüyor olması anlamına gelir.
 }else{
hy_collusionRecover(); //Gizlenmiş olan thisObj.style.display="none"; // Ana Layer' ı gizle }

Fonksiyon : fm_writehelp()
Döndürdüğü : Ana Layer' ı alır (thisObj) ve gösterir (thisObj.style.display="block";) ve altlayerın (innerObj) içerisine innerHTML ile verilen değişkenin (val) değerini yazar (innerObj.innerHTML=val;)

function fm_writehelp(val){ // Write Tip
var thisObj = getElementById(divname); // Get Main Div Object
var innerObj = getElementById(divInnername); // Get innerObject
innerObj.innerHTML=val;
thisObj.style.display="block";
}
hy_collusion() verilen objenin (obj) altında kalan bölgedeki selectboxların gözükmemesini sağlar. hy_collusionRecover() ise bu gizlenilen selectboxların işlem bitince tekrar görünmesi için kullanılır. Bu iki fonksiyon için tekrar Yusuf Uğur Soysal' a teşekkürler.
function hy_collusion(obj)
function hy_collusionRecover()
Mutlu Son !, Son olarak sayfaya önceden tanımladığımız HTML kodunu yazıyoruz (document.write(soultip)) ve onmousemove actionına fm_help() fonksiyonunu bağlıyoruz (document.onmousemove=fm_help;) . Bu işlem için sayfanın yüklenmesini beklememize gerek yok.
// ACTION | Grab mousemove and Write Soultip
document.write(soultip);
document.onmousemove=fm_help;

Bilinen Sorunlar;

  1. Henüz Yok !

Yeni hata bildirin

Eklenilmesi Düşünülenler;

  1. Internet Explorer Filter Desteği
  2. Yardımı aç/kapa özelliği (Cookie Destekli)
  3. Mozilla ile çalıştırma denemeleri
  4. Skin Desteği

Yeni İstek

 

SSS (FAQ);

  1. Compact Mod Nedir ?
    Compact kısaca SouTip' de özelleştirme yapmak istemeyen kullanıcılar için SoulTip' in kodlarının sıkıştırılmış versiyonudur.Normal kodlar toplamda 8kb. iken bu versiyon sadece 3kb.' dir ancak okunması Ancak kod okunamaycak şekildedir. (Compact Mod' u download et)
  2. Hangi Browserlarda çalışır ?
    IE 5.5 ve yukarısı Internet Exploerlarda çalışır. Mozilla ve diğer tarayıcılarda çalışmaz ancak hata da vermez. Kullanıcı normal şekilde sayfada dolaşabilir.
  3. Görünümünü Nasıl Özelleştirebilirim ?
    Font, Renk gibi ayarları basit şekilde soultip.css isimli CSS dosyasını değiştirerek yapabilirsiniz. Biraz CSS bilgisine ihtiyaç duyabilirsiniz.

    Eğer HTML kodunda bir değişilklik istiyorsanız koddaki
    var soultip="<div id='soultip'><div id='soultipinner'></div></div>"

    kısmı isteğinize göre değiştirmeniz gereklidir. Bunun için en azından temel Javascript bilgisine sahip olmalısınız.

Lisans;

Her şekilde, her konumda kişisel amaçla kullanılabilir. Kodları tekrar değiştirilerek (geliştirici isimleri kalmak suretiyle) tekrar kullanılabilir ve her sitede yayınlanabilir.

   SoulTip v1.1 Javascript based easy tooltip System 
   Copyright (C) {2003} {Ferruh Mavituna} http://ferruh.mavituna.com
This program is free software; you can redistribute it and/or
   modify it under the terms of the GNU General Public License
   as published by the Free Software Foundation; either version 2
   of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
   GNU General Public License for more details.
You should have received a copy of the GNU General Public License
   along with this program; if not, write to the Free Software
   Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.

Ek Lisans Bilgisi (http://www.gnu.org/licenses/gpl.txt)

GNU Lisansı programın her şekilde ücretsiz kullanılabileceği anlamına gelmez, Free Software' daki Free kelimesi ücretsiz değil Özgür anlamında kullanılmaktadır. Ticari kullanımlar için iletişim kurun lütfen.

 

Eğer sitenizden http://ferruh.mavituna.com ' a herhangi bir şekilde link verirseniz hoş olur.
Geliştirici isimleri olmadan tekrar yayınlanamaz.

Tooltip Konusunda Benzer Javascriptler;

  1. OverLib
    Pek pratik olmayan ancak çok iyi özellikleri bulunan, eski bir javascript.

Kullanan Siteler;

Sitenizde kullanıyorsanız sizde gönderin, siteler liste halinde yayınlancaktır.

 

İletişim - Destek;


İletişim Sayfası ve Bilgileri için tıklayınız

Recent Blog Posts

See all of the blog posts