Etiket arşivi: script

CSS ile Loading.Gif Yapımı

Herkese yeniden merhabalar,
Artık gelişen Web 2.0 Teknolojisi ile web alemi yeni ve farklı görünümlü web sitelerine ev sahipliği yapmaya başladı.

CSS Teknolojileri de bu yeni akımın vaz geçilmez bir parçası oldu.

Bugün sizlerle artık çoğu sitede karşımıza çıkan Yükleniyor (Loading) imajlarıyla sitelerin açılmasındaki zevksiz bekleyişi bir nebze olsun azaltan yapıyı AJAX kullanmadan nasıl yaparız bunu anlatacağım.

Örneğin web sitemizde bulunan resim galerisinde bulunan resimlerin yüklenmeleri esnasında meydana gelecek beklemeleri daha görsel hale getirebilmek için yazacağımız ufak still kodlarıyla bu işe başlayabiliriz.

.resim{
background-color: #FFFFFF;
background-image: url(loader.gif);
background-repeat: no-repeat;
background-position: center center;
}

şeklinde yazacağımız ufak CSS kodlarını ister bir CSS sayfasının içerisine, istersek de sayfamızın baş tarafında bulunan <head></head> etiketleri arasına oluşturacağımız <style></style> etiketleri arasına yazabiliriz.

Şimdi ise

<img class=”resim” src=”resim.jpg” alt=”Resim1″ width=”400″ height=”300″ />

şeklinde <img> nesnemize resim isimli sitil class’ımızı referans gösteriyoruz.

Daha sonra sayfamızı kaydedip ve test edebiliriz.

Unutmadan sitilimiz içerisinde bulunan background-image: url(loader.gif); satırda loader.gif yerine yükleniyor resmimizin yolunu düzeltmeliyiz.

Zevkimize göre online olarak loader.gif ler oluşturmak için buraya bakabilirsiniz.

Çalışan örnek bir uygulama için ise okulumuzun web sitesinde bulunan Resim Galerisi bölümünü ziyaret edebilirsiniz.

Siteme RSS Okuyucu Nasıl Eklerim?

Malumunuz artık RSS akışları oldukça yaygınlaştı. Bloglar, haber siteleri ve forumlar gibi bir çok site RSS akışları ile kullanıcıları yeni eklenen yazı/haber gibi içeriklerden anında haberdar ediyor.

Bu RSS akışları Outlook’a nasıl ekleyeceğimizi daha evvel burada anlatmıştım.

Şimdi ise basit bir widget sayesinde sitelerimize html olarak nasıl ekleyebileceğimizi anlatacağım.

Örneğin bir blogda yayınlanan yazıları sitemizde yayınlamak istiyoruz.

  • Öncelikle blogumuzun RSS besleme adresini blog içerisinden erişiyoruz. Örnek ( http://feeds.feedburner.com/Rtyucel )
  • Daha sonra bu adresi kopyalıyoruz ve http://www.springwidgets.com/widgets/view/23/false/true linkine gidiyoruz.
  • Burada karşımıza daha önceden hazırlanmış olan RSS Reader Widget isimli widget’ımız karşımıza çıkıyor.
  • Sayfanın sol tarafında Feed URLs (Besleme Adresleri) kısmına biraz evvel kopyaladığımız adresimizi (http://feeds.feedburner.com/Rtyucel) yapıştırıyoruz.
  • Daha sonra sol taraftaki seçeneklerden eklentimizin görünüm ayarlarını kendimize göre değiştiriyoruz.
  • Tüm bu işlemler bittikten sonra CLICK HERE TO GET THE CODE! yazan düğmeye tıklıyoruz.
  • Sağ tarafta eklentinin ön izlemesinin görüldüğü kısımdan (Share This Widget) HTML düğmesine tıklayarak

<!– SpringWidgets | RSS Reader (#23) | HTML
| Generated on 09/09/2008 –><object
type=”application/x-shockwave-flash” allowNetworking=”all”
allowScriptAccess=”always” allowFullScreen=”true” height=”318″
width=”250″ id=”springwidgets_23″ align=”middle”
data=”http://downloads.thespringbox.com/web/wrapper.php?file=RSS
Reader.sbw” classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″
codebase=”http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0″><param
name=”allowNetworking” value=”all” /><param
name=”allowScriptAccess” value=”always” /><param
name=”allowFullScreen” value=”true” /><param name=”movie”
value=”http://downloads.thespringbox.com/web/wrapper.php?file=RSS
Reader.sbw” /><param name=”flashvars”
value=”param_param=http%3A%2F%2Ffeeds.feedburner.com%2Fspringwidgets&param_style_borderColor=0x000000&param_style_brandUrl=&param_compactView=false&param_blurbLength=512″
/><param name=”quality” value=”high” /><param name=”wmode”
value=”transparent” /><param name=”bgColor” value=”0x000000″
/><embed bgColor=”0x000000″ allowNetworking=”all”
allowFullScreen=”true” allowScriptAccess=”always”
src=”http://downloads.thespringbox.com/web/wrapper.php?file=RSS
Reader.sbw”
flashvars=”param_param=http%3A%2F%2Ffeeds.feedburner.com%2Fspringwidgets&param_style_borderColor=0x000000&param_style_brandUrl=&param_compactView=false&param_blurbLength=512″
quality=”high” name=”springwidgets_23″ wmode=”transparent” width=”250″
height=”318″ align=”middle” type=”application/x-shockwave-flash”
pluginspage=”http://www.macromedia.com/go/getflashplayer”></embed></object><div
style=”font:11px/12px arial;width:250px;”><a
href=”http://www.springwidgets.com/widgets/view/23/?param_param=http%3A%2F%2Ffeeds.feedburner.com%2Fspringwidgets&param_style_borderColor=0x000000&param_style_brandUrl=&param_compactView=false&param_blurbLength=512&width=250&height=300″
target=”_blank”>Get this
widget!</a></div><div><div style=”font-family:
arial; font-style: normal; font-variant: normal; font-weight: normal;
font-size: 11px; line-height: 12px; font-size-adjust: none;
font-stretch: normal; -x-system-font: none;”>Visit the <a
href=”http://www.springwidgets.com” target=”_blank”>Widget</a>
<a href=”http://www.springwidgets.com/widgets”
target=”_blank”>Gallery</a></div></div>

şeklinde bize verdiği HTML kodu sitemiz içerisine yerleştirdikten sonra işlemimiz sona eriyor.

Çalışan örnek bir uygulama için http://www.rtyucel.com adresinden BÜYÜTEÇ resmine tıklayınız.

Küfür Filtresi (ASP)

Asp’de hazırlamış olduğum basit bir küfür filtresini burada paylaşmak istedim.

Genellikler ziyaretçi defterlerinde veya iletişim formlarında yaygın bir biçimde kullanılabilecek basit bir küfür filtresi;

Aşağıda vermiş olduğum kod parçasını çalışmalarınıza ekleyerek sizlerde şayet ziyaretçilerinizden gelen küfürlü mesajlardakı küfürleri okumadan görebilirsiniz.

<%
dim kufurler
dim x
dim metin
metin=”At ile eşşekler, sıpaları doğrurur. sıpalar eşeklerin yavrusudur.”
kufurler=Array(“eşşek”, “eşek”, “sıpa”)
For each x in kufurler
metin=replace(metin,x,left(x,1) & string(len(x)-2,”*”) & right(x,1))
Next
response.write “Metin: ” & metin
%>

– Kod parçasında metin isimli değişkenimiz küfürlü kelime taraması yapılacak olan değişkenimiz. Bizler buna formumuz içerisindeki mesaj alanından gelen bilgileri aktarabiliriz.

kufurler isimli dizimi bir diziye sahibiz ve burada küfür içeren kelimeleri tek tek eklemeliyiz. Ne kadar çok küfür içeren kelime eklersek kodumuz o kadar hızlı çalışır.

Eğer kodun çalışmasıyla ilgili herhangi bir sıkıntı yaşarsanız yorum bırakınız.
Küfürsüz günler dileğiyle kolay gelsin 😉

Link üzerine gelince açılan resimler

www.rtyucel.com/calismalarim.html adresindeki gibi linkin üzerine gelince açılan resim scripti hazırlamak için aşağıdaki adımları izliyoruz.
Öncelikle www.rtyucel.com/js.js isimli dosyayı indirdikten sonra,

<script type=”text/javascript” src=”js.js”></script>

şeklinde scripti çalıştıracağımız sayfa içerinden script dosyamızı çağırıyoruz.

Sıra geliyor şimdi linkimizi hazırlamaya

<a href=”http://www.yerkoyeml.k12.tr” target=”_blank” onmouseover=”showtrail(400,247,’images/yeremlis.gif’);” onmouseout=”hidetrail();”>Yerköy Anadolu Teknik, Teknik Lise ve Endüstri Meslek Lisesi</a>

yukarıdaki gibi linkimizi de verdikten sonra işlemimiz tamamlanmış oluyor. burada linkimizin onmouseover özelliğinde çağırdığımız showtrail isimli fonksiyonumuza sırasıyla genişlik(width), yükseklik(height) ve açılacak olan resmimizin konum bilgilerini gönderiyoruz.

umarım işinize yarar. iyi çalışmalar….

Transparan iframe yapmak

Kişisel siteme internet explorer ile girince farkettim ki iframe kullandığım yerlerin arkaları bembeyaz çıkmış. oysa firefox ta böyle bir sıkıntım olmamıştı .

bu da güzel bir vesileymiş ki bu işin internet explorer’da nasıl yapıldığını da öğrenmiş oldum. sizlerle de paylaşayım istedim.

öncelikle

Kod:
<iframe src=”deneme.asp” scrolling=”no” allowTransparency=”true”></iframe>

şeklinde iframe’imizin allowTransparency özelliğini True yapıyoruz.

daha sonra iframe içerisine çekeceğimiz sayfamıza geçiyoruz. (ben burda deneme.asp yazdım işte o sayfaya geçiyoruz.)

bu sayfamızda da

Kod:
<body style=”background-color:transparent”>

kodda da görüldüğü gibi <body> tagımızın stilinden background-color ile rengimizi transparent yapıyoruz ve problemlemimiz IE içinde çözülmüş oluyor.

Linkin üzerine gelince değişen yanda resimler

Son zamanlarda özellikle haber sitelerinde karşımıza çıkan bir yapının kodlarını sizlerle paylaşmak istedim. Örneğin http://www.yerkoyeml.k12.tr/index.asp veya http://www.igdeagaci.com sitelerindeki haberler gibi yazının/resmin üzerine gelince yanda resim değiştiren kodlarını sizler için derledim.
Kodları sayfanıza eklemek için ilk önce resimdegistir isimli script kodumuzu sayfamıza ekliyoruz.

<script>
function resimdegistir(res1){
var yol;
yol=res1;
document.getElementById(“resim1”).src=””+yol;
}
</script>

scriptimizi hazırladıktan sonra değişecek resmimize “resim1” ismini veriyoruz.

<img name=”resim1″ src=”baslangicResmi”/>

gelelim yan tarafında üzerine geldiğimizde resimleri değiştirecek linkleri yazmaya

<a onmouseover=”resimdegistir(‘images/araba.jpg’)”>Araba</a>
<a onmouseover=”resimdegistir(‘images/kedi.jpg’)”>Kedi</a>
<a onmouseover=”resimdegistir(‘images/bocek.jpg’)”>Böcek</a>

linklerimizi de yukarıdaki gibi yazdıktan sonra scriptimiz kullanılabilir duruma gelmiştir.

Script ile ilgili görüşlerinizi yazabilirsiniz. Kolay gelsin

ASP Formlarda E-Posta Adresi Kontrolü

ASP’de hazırladığımız formlarda e-posta adreslerinin düzgün girilip girilmediğini kontrol etmek için aşağıdaki kodu kullanabiliriz.


Fonksiyon :

0 and i first = Left(email, i – 1)
last = Mid(email, i+1, Len(email))
Else
MailKontrol = false
exit Function
End If
i = 0
Do Until i = Len(first)
i = i + 1
char = Mid(first, i, 1)
` If char is not in [.z-aA-Z0-9]
If Asc(char) 46 and Asc(char) 95 and (Asc(46) 57) and _
(Asc(char) 90) and (Asc(char) 122) Then
MailKontrol = false
exit Function
End If
Loop
i = 0
nokta = false
Do Until i = Len(last)
i = i + 1
char = Mid(last, i, 1)
` If char is not in [.z-aA-Z0-9]
If Asc(char) 46 and (Asc(46) 57) and _
(Asc(char) 90) and (Asc(char) 122) Then
MailKontrol = false
exit Function
End If
Loop
nokta = false
If InStr(1, last, “.” , 1) > 0 Then
nokta = true
End If
MailKontrol = nokta
End Function
%>