Turning gears are the logo of co-scripts

İş sıkıntısı çektiğim bir dönemde Doğa Koruma Derneği'ne ait bir proje için NormWorks aracılığıyla Kubilay Küpeli ile birlikte yazdığımız uygulama. Biyolojik tür verilerinin kareler yöntemi ile basit projeksiyonuna dayanan bir bilgilendirme uygulaması. Bu uygulamanın tüm hakları DKM'ye aittir. Api'nin değiştirilerek uygulanması için NormWorks ve bizimle iletişime geçiniz.

http://eski.dkm.org.tr/anadolu-caprazi/anadolu-caprazi-biyolojik-cesitlilik-haritasi.php

Kubilay KÜPELİ

Çağlar ORHAN

co-scripts tag image
ID:255 | Okunma:2488


 

Bir seri olarak planladığım js kaydırıcıların ilkini kör topal çıkarttım. Hemen söylemeliyim IE'de çalışması için hiç kasmadım. Chrome ve FF ile test edildi. Çok sıkıntı çıkartmadı.

Performans ve özellik olarak çok geride henüz. Ama zamanla yükselteceğim. Öneri ve görüşleriniz için caglaror@gmail.com

Not: Ticari kullanım dışında (kullanılacak gibi değil ama) istediğiniz gibi kullanabilir, modifiye edebilir ve tekrar yayınlayabilirsiniz.

Saygılarımla

 

Kaydıraç'ı İndir (Download Kaydirac)

co-scripts tag image photoslidersliderkaydiracfotografkaydiricislaytjquery olmayan
ID:252 | Okunma:1819


 

 

İnternette Jquery ile yazılmış onlarca "slider" uygulaması var. Bunun Türkçe'si var mı bilmiyorum. "İçerik kaydırıcı" vb. Son zamanlarda özellikle haber sitelerinde popüler bir uygulama. Benim yazdığım uygulamada içerik ve temsil edilen linkler iki ayrı kısım, bir sonraki sürümde fotoğraf ve düğme desteğini arttıracağım. Testleri FF ile yaptım Chrome'da da sorun yok ama IE'de içerik kısmı yan tarafa kaymış görünüyor. Sonraki sürümde IE uyumunu da sağlarım.

Bir önceki yazıda yazamaya başladığım js kütüphanesini uygulamalarda kullanacağımı söylemiştim. Bu uygulamada var. Her yeni uygulama ve uygulama sürümünde kütüphanenin de son sürümünü ekleyeceğim.

Kütüphanenin de "crossbrowser" olmasına gayret ediyorum ama testleri yapmaya zamanım olmayabiliyor. Varsa uyumsuzluk sonraki sürümlere düzeltilebilir.  Uygulamayı aşağıdaki linkten indirebilirsiniz. Hiç bir izin gerekmeden, sadece kaynak belirterek istediğiniz yerde kullanabilirsiniz. İyi çalışmalar dilerim.

Co-Scripts Slider v1

Not: fonksiyonlardan birisinde bir hata tespit ettim. En kısa zamanda düzelmiş halini ekleyeceğim. Hali hazırda düzeltilmiştir bir iki ek özellikle v2 olarak kısa sürede tekrar yayınlayacağım.

IE'de sorun çıkartan kısmı henüz düzeltmedim ama js de bir iki iyileştirme yaptım.

Bir uyarıyı da yapmalıyım bu kodlar al kullan tarzında değildir. Daha çok deneysel denebilecek durumda olduklarından sizin de modifikasyon yapabildiğiniz varsayılır.

cos.slider.2

co-scripts tag image slidercosslidercos librarycos kutuphanesi
ID:232 | Okunma:1829


 

Merhaba,

Sıklıkla kullandığım javascript fonksiyonlarını bir araya getiriyorum. Aralarında fazlaca nesneleştirilmiş olanlar yok ancak yakında oop yaptığım bir iki fonksiyonu da ekleyeceğim. Şimdilik bununla başlayalım. Bir sonraki daha derli toplu olacak ve bir manuel yazısı bölümü de ekleyeceğim. Dosyaya buradan ulaşabilirsiniz.

Sorularınız için twitter.com/coscripts'i kullanabilirsiniz. Kütüphanenin küçük ve az fonksiyonlu olması sizi yanıltmasın, çok hızlı upgrade edeceğim. Bundan sonraki bazi api'lerde buradaki fonksiyonları kullanabilirim bilginize.

İyi çalışmalar dilerim.

co-scripts tag image javascript libraryliblibrarycos librarycos.jsjs kutuphanesicos kutuphanesi
ID:231 | Okunma:1678


 

Bir şekilde web sayfalarında ziyaretçiden ya da kullanıcıdan veri alınır. Bu verilerden bir kısmının düzenli metinler içermesi gerektiğinde js ile yazılmış metin editörleri kullanırız.

Bunların en popülerlerinden olan CKEditor kullanırken karşılaştığım bir sorun internetten biraz araştırınca çözüldü sizinle paylaşmak istedim.

Ben editörü bir form içerisinde değil açıkta kullandım ve tüm veriyi ajax ile sunucuya ilettim.

Ancak işim bittiğinde içindeki verileri boşaltarak yeniden hazır hale getirmem gerekiyordu. Input gibi form elementleri için içerisindeki veriyi temizlemek kolaydır ancak CKEditör gibi karmaşık js teknikleri ile onthe fly iframe yaratarak veriyi orada tutan uygulamalarda bu biraz daha teknik. Dökümantasyonu zayıf kalmış bir api bence CKE!

Bulduğum sonucu veriyi almak ve eklemek olarak iki yönlü yazıyorum.

Mutlaka birilerinin işine yarayacaktır bu CKEditor resetleme.

var editor_data = CKEDITOR.instances.editor1.getData();
// veriyi almamıza yarıyor
CKEDITOR.instances['editor1'].setData('');
// herhangi bir değeri editöre eklememize yarıyor. Eklenen veri html tipinde olduğu düşünülerek set edilir.

iyi çalışmalar dilerim..

Not:  .editor1.   isme (name) atıf ile kullanılan yöntem, ['editor1']. id'ye atıfla kullanılan yöntemdir, id olanı öneririm.

co-scripts tag image ckeditorreset ckeditorgetdatasetdataclear ckeditor
ID:224 | Okunma:2166


 

Sayfamızdaki herhangi bir metnin rengini belirlenen aralıklarla iki renk arasında değiştirerek yanıp sönme etkisi yaratır. .color özelliği taşıyan her elemente uygulanabilir.

Orjinal fonksiyon google closure ile derlenerek (sadeleştirilerek) kullanıma sunulmuştur. GoogleClosure online derleyicisine şu adresten ulaşabilirsiniz.

function yanSon(a,b,c,d){var e=document.getElementById(a);e.style.color=e.style.color==b?c:b;a=window.setTimeout("yanSon('"+a+"','"+b+"','"+c+"',"+d+")",d)};

Fonksiyonun çağırılması body'nin onload olayına yada sayfada en sonda bir yere doğrudan fonksiyon adı eklenerek yapılabilir.

yanSon('bizimElement','white','black',800);
//birinci parametre elementin id'si, ikinci ilk renk, üçüncü ikinci renk, dördüncü parametre
//ise fonksiyonun (renk değişiminin) hangi milisaniyede birkez tekrarlanacağını gösteren değer

Bu mini kodu da istediğiniz gibi kullanabilirsiniz.

co-scripts tag image googleclosureclosuresettimeoutyanson functionstyle.color
ID:210 | Okunma:1779


 

Sitelerde çokça karşılaşılan ve genelde 5 yıldızdan oluşan puanlama yada değerlendirme aracını hepimiz biliriz. Yıldızların üzerine gelindiğinde yada tıklandığında gittikçe dereceleri değişen değerler alırlar. Bunlar kötü-iyi-çok iyi-süper gibi metinler olabileceği gibi 1-5'e kadar olan rakamlı sıralamada olabilmektedir. 

Böyle bir ihtiyaç doğduğunda hızlıca çalışabilen bir şeyler yazdım. Bu uygulama biraz daha geliştirilebilir ve bir api şeklinde kullanıma sunulabilir. 

Öncelikle bu tarz bir uygulamanın üreteceği değeri nerede kullanacağımızı bilmeliyiz. Veriyi veri tabanına mı ulaştıracağız yoksa başka bir sayfada kullanılmak üzere mi göndereceğiz. Ajax ile bir sayfaya gönderebilir veya form onaylama ile sunucu tarafında iş gördürebiliriz. İkinci durumda bir input elementine ihtiyacımız var. Örnekte hidden input kullanılıyor veriyi taşımak için. Ancak bu sayfada olan biteni görebilmek için normal text tipi input kullanacağız. Gereken js dosyasını buradan, görselleri de buradan ve buradan (iki tip yıldız) indirebilirsiniz.

Yıldızlı Oylama (Çalışan Örnek)    Lütfen bu firmayı değerlendiriniz

Şimdi kodlar


         Lütfen bu firmayı değerlendiriniz

Kodlar tabiki biraz daha düzenli ve optimize olabilir. Daha pratik ve parametrik bir fonksiyon grubu yazmaya çalışacağım.

co-scripts tag image ratingstaryildizoylamayildizli oylamayildizli degerlendirmepuanlamayildizli puanlama
ID:128 | Okunma:5425


 

Her zaman olduğu gibi ihtiyaçtan bir tarih seçici yazmam gerekti. Önce vbscript ile yazdım, sonra diğer browserlarda da kullanmak gerekince jscript'e çevirdim. Sonra sürüm uyumsuzlukları için elden geçirdim. Hatlar çıktıkça da düzeltmeye çalışıyorum.

Estetik olarak olmasa da işlevsellik açısından fena sayılmayacak bir api elde ettik. Api içerisindeki sitil  özellikleriyle oynayarak görsel farklılık yaratılabilir. Bazı js ayarları ile de ek özellikler kazandırılabilir veya özellikler kaldırılabilir. Bu api (fonksiyonlar kümesi) amatör bir uğraşın sonucudur. Bu nedenle görülebilecek kodlama hataları ve performans kayıplarını lütfen anlayışla karşılayın. Api'yi istediğiniz gibi kullanabilirsiniz. Çok arzu ederseniz bir teşekküre hayır demem :)

Kalender Kod Dosyası(js)
Kalender2 Google Closure Derlemesi Dosyası(js)
Kalender2 Kod Dosyası(js) (Tek haneli gün ve ay eksiği giderildi. Baş kısımlarında sıfır geliyor!)
Kalender Stil Dosyası(css)

Kalender3 Google Closure Derlemesi (tüm dosyalar)

Örnek Tarih Seçici: (kalender2-compiled.js kullanılıyor)

 
 
Örnek Tarih Seçici: 

Yukarıda görüldüğü gibi css ve js dosyalarını çağırdıktan sonra basit bir tetikleyici ile takvim() fonksiyonunu çağırıyoruz. Fonksiyonun tek parametresi var oda seçilen tarihin yazdırılacağı hedef element ID'si. Ayrıca takvim seçtiricinin pozisyonlanması da hedef elemente göre yapılıyor. Sayfadaki herhangi bir elementin olayına bağladığınızda innerText özelliği alabilen her elemente tarihi yazdırabilirsiniz.

Daha sonra daha gelişmiş bir tarih seçtirici yapabilmeyi umuyorum. Saygılarımla.

co-scripts tag image tarih secicitarih sectiricidatepickerjavascript apiapikalender datepicker
ID:113 | Okunma:2075


 

Pek çok sitede ana sayfada veya ilgili sayfasında haberlerin tamamı verilmez. Özet denebilecek ilk paragrafı verilir ve "devamını oku" düğmesi yada bağlantısı ile devamının okunduğu sayfaya gidilmesi sağlanır. Bu yöntemin sağlıklı olduğunu düşünüyoruz. Ancak bazı portallarda yapılanma farklılığı nedeniyle haberin hemen orada genişleyerek tamamının görülmesi gerekebilir. Bunu sayfada herhangi bir yenilenmeye neden olmadan ajax ile yapabiliyoruz.

XMLHttpRequest veya Microsoft IE için  Microsoft.XMLHttp nesneleri kullanarak yapıyoruz. Bu nesneler tıpkı bir tarayıcı penceresi (nesnesi) gibi bir adresten talepte bulunuyor ve gelen metinsel (veya xml) formatlı cevabı bir değişkene aktarabiliyorlar.

Bir kez oluşturulduklarında aldıkları parametreleriyle kendi metodlarını kullandırarak farklı hizmetleri sunabiliyorlar.  Bu örnekte bahsi geçen bir haber özetinin tamamını verebilen bir sayfaya bir sorgu gönderip karşılığında bir haber metninin tamamını alacağız. Haber metninin içeriğinin html formatlı olduğunu düşünüyoruz. İhtiyaç duyulan tüm kodları inc klasöründe bir js dosyasında, hareketli - yükleniyor- gif uzantılı resmimizi de img klasöründe tutuyoruz.

Ana sayfamızda bir haber özeti içeren div, bir adet devamını oku yazan bağlantı (js fonksiyonu çağırıcı)  mevcut. Bağlantı onclick olayında gereken fonksiyon çağrısı ve üzerinde parametreleri içeriyor.

Devamını oku bağlantısı tıklandığında artık gerek olmayacağından kaldırılıyor. Tıklandığında işlem sürerken yükleniyor animasyonu geliyor (facebook tarzında).

devamı..

Burada görüldüğü gibi yüklenme esnasındaki mesajlar bir span içerisine getiriliyor. Bu farklı bir yere eklenebilir ve devamını oku bağlantısı ile bağımsız da olabilir.Veri çekmeye yarayan vericek() fonksiyonu herşeyi başlatıyor. 4 adet parametre alıyor. Parametreler şunlar:

  1. Birincisi bir url ve sonunda sorgu için gereken id numarası gibi parametreleri taşıyor. 
  2. Yüklenme işlemi süresince bir mesaj yada img göstermeye yarayacak alanın id si.
  3. Özet metnini taşıyan ve yükleme sonucu gelen içeriğin gömüleceği div yada span yada benzer elementin idsi.
  4. Yüklemenin sonucu gelen verinin ilgili alana eklenme metodu. Doğrudan ekleme, yer değiştirme, kırparak ekleme gibi...

vericek.js dosyasını şurada bulabilirsiniz. Tüm uygulamanın sıkıştırılmış halini buradan indirebilirsiniz. Amatör bir uygulama olması nedeniyle olası sıkıntılardan önce şurayı okumanızı rica ederim. Vakit buldukça geliştireceğim bu uygulama için temel bilgileri internetten öğrendiğim her kaynak ve kişiye tekrar teşekkür ederim.

Ayrıca bu uygulama yeni tanıştığım ve benden "bu tarz bir şeyi yapabilir miyiz?" diye sorarak yazmama vesile olan @resulyılmaz sayesinde yazıldı. Kendisine teşekkür ederim. 


co-scripts tag image ajaxyazinin devamidevamini oku
ID:112 | Okunma:2548