zafer demir - JAVA-SCRIPT

http://www.ipucu.web.tr/ipucu_goster.php?kodturu=js&id=29

Üst tarafa doğru kayan yazı

Sayfanızda yukarı doğru kayan yazı yerleştirmek istediğinizde kullanabileceğiniz bir kkod örneği.

//   *****************************************************************
            //      <BODY> Bölümleri arasına eklenecek olan bölüm
            //   *****************************************************************
            <script language="JavaScript">
            /**********************************************************************************
            * Copyright 1999 William Goudy
            * http://www.goudy.net - personal
            * http://www.goudy.net/fms - Design Business
            * william@goudy.net - Email (feel free to email me)
            **********************************************************************************/
            var mw=170  /* The width */
            var mh=100  /* The height */
            var sp=1   /* The Speed */
            var text= '<B>Ekim 2005</B><BR>Yeni ipucu siteniz<BR><A HREF="http://www.ipucu.web.tr/">http://www.ipucu.web.tr</A><BR><BR><B>ASP,PHP, Javascript ipuçları<BR></B> <U>Forumlar</U> Dersler...'
            if (document.all)document.write('<marquee direction="up" scrollAmount='+sp+' style="width:'+mw+';height:'+mh+'">'+text+'</marquee>')
            function loop()
            {
            window.location.reload()
            }
            function loop2()
            {
            if (document.layers) { setTimeout("window.onresize=loop",200)
            init()
            }
            }
            function init()
            {
            document.marq.document.marqEx.document.write(text)
            document.marq.document.marqEx.document.close()
            thelength=document.marq.document.marqEx.document.height
            runmarq()
            }
            function runmarq()
            {
            if (document.marq.document.marqEx.top>=thelength*(-1)) {
            document.marq.document.marqEx.top-=sp
            setTimeout("runmarq()",100)
            }
            else
            {
            document.marq.document.marqEx.top=mh
            runmarq()
            }
            }
            window.onload=loop2
            </script>

Kodları BODY tagları arasında istediğiniz yere kopyalamanız yetmektedir. Kayan yazıyı değiştirmek için script içerisindeki "text" değşkenine atamanız gerekmektedir. İyi çalışmalar.

Ekran renginin değiştirilmesi

Hazırladığınız sayfaların ekran renklerini kullanıcının itdediği bir rek ile değiştirmesini istediğiniz zaman kullanabileceğiniz bir kod örneği.

Kodları BODY tagları arasında istediğiniz yere kopyalamanız yetmektedir. Kullanıcı istediği rengin yazısının üzerine geldiği zaman ekranın rengi değişmektedir. İyi çalışmalar.

Kullanıcının Ekran Çözünürlüğü öğrenmek

Bazı durumlarda kullanıcının ekran çözünürlüğüne ihtiyaç duyabilirsiniz. Bu gibi durumlarda kullanabilceğiniz bir uygulama..

Kodları BODY bölümüne kopyalamanız yeterlidir. Document.write ile ekran çözünürlüğüyazdırılmaktadır. screen.width : ekran genişliğini screen.height : ekran yüksekliğini vermektedir. İyi çalışmalar.

Buton Şeklinde Saat

Bir buton üzerinde saat göstermek için kullanabileceğiniz script örneği.

//   *****************************************************************
            //     <BODY> Bölümleri arasına eklenecek olan bölüm
            //   *****************************************************************
            <SCRIPT LANGUAGE="JavaScript">
            
            </SCRIPT>

Kodları BODY bölümüne kopyalamanız yeterlidir. Scriptin ierisinde saati çalıştırmak için clock() fonksiyonu çağrılmıştır. Sizde kullanmak istediğinizde clock() fonksiyonunun kullanmanız yeterlidir. İyi çalışmalar.

E-Posta (email) Adresi Doğrulama

Formda kullanıcı tarafından girilen e-posta adresini kontrol eder.

Formda kullanıcı tarafından girilen e-posta adresini bir eposta adresinde bulunması gereken kriterlere (@ işareti, noktalar) göre "Regular Expressions" kullanarak kontrol eder. Hata bulursa uyarı mesajı gösterir (Alert).

Javascript Menü -- Alt Tarafa Açılan Menü

Javascript ile yapılmış güzel bir menü örneği. Bir çok sitede örneklerini görebilirsiniz.

////  ADIM 1  <HEAD> Bölümleri Arasına Eklenecek Olan Bölüm
            <style>
            BODY { font-family:verdana, arial, helvetica; font-size:70%; }
            H1 { font-size:120%; font-style:italic; }
            DIV#divMenuBar { background-color:#999999; }
            TABLE#tblMenuBar TD { font-size:70%; color:white; padding:0px 5px 0px 5px; cursor:default; }
            TABLE#tblMenuBar TD.MenuMadde { font-weight:bold; cursor:hand; }
            DIV.clsMenu {
            font-size:100%; background-color:#999999;
            position:absolute; visibility:hidden; width:130px;
            padding:5px 5px 5px 8px; border-top:1 white solid;
            }
            DIV.clsMenu A { text-decoration:none; color:white; font-weight:bold; }
            DIV.clsMenu A:hover { color:moccasin; }
            BUTTON { font-family:tahoma; font-size:100%; }
            </style>
            <SCRIPT LANGUAGE="Javascript">
            var eOpenMenu = null;
            function OpenMenu(eSrc,eMenu)
            {
            eMenu.style.left = eSrc.offsetLeft + divMenuBar.offsetLeft;
            eMenu.style.top = divMenuBar.offsetHeight + divMenuBar.offsetTop;
            eMenu.style.visibility = "visible";
            eOpenMenu = eMenu;
            }
            function CloseMenu(eMenu)
            {
            eMenu.style.visibility = "hidden";
            eOpenMenu = null;
            }
            function document.onmouseover()
            {
            var eSrc = window.event.srcElement;
            if ("MenuMadde" == eSrc.className)
            {
            eSrc.style.color = "moccasin";
            var eMenu = document.all[eSrc.id.replace("tdMenuBarItem","divMenu")];
            if (eOpenMenu && eOpenMenu != eMenu)
            {
            CloseMenu(eOpenMenu);
            }
            if (eMenu)
            {
            OpenMenu(eSrc,eMenu);
            }
            }
            else if (eOpenMenu && !eOpenMenu.contains(eSrc) && !divMenuBar.contains(eSrc))
            {
            CloseMenu(eOpenMenu);
            }
            }
            function document.onmouseout()
            {
            var eSrc = window.event.srcElement;
            if ("MenuMadde" == eSrc.className)
            {
            eSrc.style.color = "";
            }
            }
            </SCRIPT>
            //  ADIM 2...  BODY Bölümüne eklenecek olan bölüm
            
            <DIV ID="divMenuBar">
            <TABLE ID="tblMenuBar" BORDER="0">
            <TR>
            <TD CLASS="MenuMadde" ID="tdMenuBarItem01">ANA BAŞLIK 1</TD>
            <TD>|</TD>
            <TD CLASS="MenuMadde" ID="tdMenuBarItem02">ANA BAŞLIK 2</TD>
            <TD>|</TD>
            <TD CLASS="MenuMadde" ID="tdMenuBarItem03">ANA BAŞLIK 3</TD>
            <TD>|</TD>
            <TD CLASS="MenuMadde" ID="tdMenuBarItem04">ANA BAŞLIK 4</TD>
            <TD>|</TD>
            <TD CLASS="MenuMadde" ID="tdMenuBarItem05">ANA BAŞLIK 5</TD>
            </TR>
            </TABLE>
            </DIV>
            
            <DIV CLASS="clsMenu" ID="divMenu01">
            <DIV CLASS="clsMenuAra"></DIV>
            <DIV><A TARGET="_new" HREF="link_1.asp">Alt Başlık 1</A></DIV>
            <DIV><A TARGET="_new" HREF="link_2.asp">Alt Başlık 2</A></DIV>
            <DIV><A TARGET="_new" HREF="link_3.asp">Alt Başlık 3</A></DIV>
            <DIV><A TARGET="_new" HREF="link_4.asp">Alt Başlık 4</A></DIV>
            <DIV><A TARGET="_new" HREF="link_5.asp">Alt Başlık 5</A></DIV>
            </DIV>
            
            <DIV CLASS="clsMenu" ID="divMenu02">
            <DIV CLASS="clsMenuAra"></DIV>
            <DIV><A TARGET="_new" HREF="link_6.asp">Alt Başlık 01</A></DIV>
            <DIV><A TARGET="_new" HREF="link_7.asp">Alt Başlık 02</A></DIV>
            <DIV><A TARGET="_new" HREF="link_8.asp">Alt Başlık 03</A></DIV>
            <DIV><A TARGET="_new" HREF="link_9.asp">Alt Başlık 04</A></DIV>
            </DIV>
            
            <DIV CLASS="clsMenu" ID="divMenu03">
            <DIV CLASS="clsMenuAra"></DIV>
            <DIV><A TARGET="_new" HREF="link_10.asp">Alt Başlık 01</A></DIV>
            <DIV><A TARGET="_new" HREF="link_11.asp">Alt Başlık 02</A></DIV>
            </DIV>
            
            <DIV CLASS="clsMenu" ID="divMenu04">
            <DIV CLASS="clsMenuAra"></DIV>
            <DIV><A TARGET="_new" HREF="link_12.asp">Alt Başlık 01</A></DIV>
            <DIV><A TARGET="_new" HREF="link_13.asp">Alt Başlık 02</A></DIV>
            <DIV><A TARGET="_new" HREF="link_14.asp">Alt Başlık 02</A></DIV>
            </DIV>
            
            <DIV CLASS="clsMenu" ID="divMenu05">
            <DIV CLASS="clsMenuAra"></DIV>
            <DIV><A TARGET="_new" HREF="link_15.asp">Alt Başlık 01</A></DIV>
            <DIV><A TARGET="_new" HREF="link_16.asp">Alt Başlık 02</A></DIV>
            <DIV><A TARGET="_new" HREF="link_17.asp">Alt Başlık 02</A></DIV>
            </DIV>

Menüyü kullanmak için iki adımın takip edilmesi gerekmektedir. Birinci adımda bulunan kodları head tagları arsına yerleştirmeniz gerekmektedir. Bu Bölümdeki kodlar sayfanın renk-yazı tiplerini ayarlanmakta ve menü işlemlerini gerçekleştirmektedir. İkinci adımda bulunan kodların ise body tagları arasına kopyalanması gerekmektedir. Bu bölümde ise menüler ve bu menülerin alt başlıkları ile linkleri ayarlanmaktadır. Sizde bu bölümü inceleyerek kendi sitenize göre linkleri ayarlayabilirsiniz. Kolaylık olması amacıyla anabaşlıklar ve onların alt başlıkları ayrı ayrı belirtilmiştir.

Javascript Menü -Hareketli Menü

Javascript ile yapılmış hareket eden bir menü örneği. Sayfada linklerinizin değişik bir biçimde gözükmesini istiyorsanız deneyebilirsiniz.

///// ADIM 1 <HEAD> Bölümleri arasına eklenecek olan bölüm
            <style type="text/css">
            .menulinks {position:relative;}
            #menucont a{color:#006699; font-weight:bold; text-decoration:none;}
            #menucont a:hover{color:#ff0000; font-weight:bold; text-decoration:underline overline; text-transform: uppercase;}
            </style>
            <SCRIPT LANGUAGE="JavaScript">
            nSpace=7   // how many space maximum between each letter
            nSpeed=200 // Animasyonun Hızı
            timerLSM=null;
            function LetterSpacingMenu() {
            if(document.getElementById){
            lnks = Math.floor(Math.random()*lnk.length);
            letterSpacing = Math.floor(Math.random()*nSpace);
            lnk[lnks].style.letterSpacing = letterSpacing + "px";
            timerLSM = setTimeout("LetterSpacingMenu()", nSpeed);
            }
            }
            function StopMenu() {
            if(document.getElementById) {
            clearTimeout(timerLSM);
            for(i=0;i<lnk.length;i++)
            lnk[i].style.letterSpacing = 0 + "px";
            }
            }
            function LSMenuInit() {
            if(document.getElementById) {
            lnk = document.getElementById("menucont").getElementsByTagName("a");
            cnt = document.getElementById("menucont");
            cnt.style.textAlign= "center";
            cnt.onmouseover=StopMenu;
            cnt.onmouseout=LetterSpacingMenu;
            LetterSpacingMenu();
            }
            }
            onload=LSMenuInit;
            </script>
            //   ***********************************************************
            //// ADIM 2..  BODY tagları arasına eklenecek olan bölüm
            //   ***********************************************************
            <div id="menucont">
            <a href="http://www.ipucu.web.tr" id="a1" class="menulinks" title="Yeni ipucu siteniz">Anasayfa</a><br>
            <a href="http://www.ipucu.web.tr/forums" id="a2" class="menulinks" title="Forumlar bölümü">Forumlar</a><br>
            <a href="http://www.ipucu.web.tr" id="a1" class="menulinks" title="Yeni ipucu siteniz">ASP İpuçları</a><br>
            <a href="http://www.ipucu.web.tr" id="a1" class="menulinks" title="Yeni ipucu siteniz">PHP İpuçları</a><br>
            <a href="http://www.ipucu.web.tr" id="a1" class="menulinks" title="Yeni ipucu siteniz">Javascript İpuçları</a><br>
            <a href="http://www.ipucu.web.tr" id="a1" class="menulinks" title="Yeni ipucu siteniz">Haberler</a><br>
            <a href="http://www.ipucu.web.tr" id="a1" class="menulinks" title="Yeni ipucu siteniz">Yeni Başlayanlar İçin</a><br>
            </div>

Menüyü kullanmak için iki adımın takip edilmesi gerekmektedir. Birinci adımda bulunan kodları head tagları arsına yerleştirmeniz gerekmektedir. İkinci adımda bulunan kodların ise body tagları arasına kopyalanması gerekmektedir. Bu bölümde ise menüler ve linkleri ayarlanmaktadır. Sizde bu bölümü inceleyerek kendi sitenize göre linkleri ayarlayabilirsiniz. İyi Çalışmalar

Giriş sayfası (homepage) yapmak.

Kullanıcının tek tuşla sayfayı giriş sayfası olarak ayarlamasını sağlayan bir script.

Kodu istediğiniz yerde kullanarak sitenizin giriş sayfası yapılmasını sağlayabilirsiniz. Tek yapmanız gereken kendi sayfanızın adresini 'setHomePage' bölümüne girmek. İyi çalışmalar.

Geri dön (back) butonu

Bu kod ile sayfanızda geri dön butonu oluşturabilirsiniz.

Kulllanıcıların geldikleri sayfaya geri dönmelerini sağlayan güzel bir özellik.

Sayfaya giriş ve çıkışta mesaj verme

Kullanıcıların sayfanıza giriş ve çıkışlarında mesaj vermek istiyorsanız bu script kullanmanız gerekmektedir.

// ADIM 2 <body> tagını <body onLoad="giris()" onUnload="cikis()"> olarak değiştirin. İyi çalışmalar

Sayfayı kapatma

Kullanıcının bir butona basarak sayfayı kapatması isteniyorsa, örnekteki kodu kullanabilirsiniz.

Kodları BODY tagları arasına yerleştiriniz. İyi çalışmalar.

Sayfa yüklenirken uyarı mesajı (pop-up) gösterme

İstenilen mesajın sayfa yüklenirken ekrana gelmesini sağlayan basit bir JavaScript örneği.

Kodu <BODY></BODY> tagları arasına yerleştiriniz. Sayfa yüklenirken görüntülenmesi istenilen mesaj yazılarak işlem tamamlanır. Sayfanın her yüklenmesinde mesaj karşınıza çıkacaktır.

Dijital saat oluşturma

Sayfaya dijital bir saat eklemesi yapmak için güzel bir uygulama

Sayfanın istenilen yerine saati eklemek için verilen kodun kopyalanması yeterlidir. Saatin rengini değiştirmek için ilk satırdaki 'BGCOLOR' değerinin değiştirilmesi gerekmektedir.

Güzel bir soru-cevap formu

Ziyaretçinin sorduğu sorunun cevabını anında almasını istiyorsanız, bu scripti deneyin. Sayfa refresh edilmeden soruların cevaplarını görmek mümkün olmaktadır.

// ……………………………………………………………….
            // ..1.. <HEAD></HEAD> Tagları arasına eklenecek bölüm
            // ……………………………………………………………….
            <SCRIPT LANGUAGE="JavaScript">
            function showFAQ(form) {
            form.cevap.value = form.question.options[form.question.selectedIndex].value;
            }
            </SCRIPT>
            // ……………………………………………………………….
            //  ..2.. <BODY></BODY> Tagları arasına eklenecek bölüm
            // ……………………………………………………………….
            <form name=faqform>
            <table border=1 cellspacing=0 cellpadding=5>
            <tr bgcolor="#BEA78B">
            <td align=center><font face="verdana,arial" size="-1" color="#000000">
            <b>Soru Cevap Örnek Form</b></font></td>
            </tr>
            <tr bgcolor="#E8E4D0"><td><font face="verdana,arial" size="-1"><br>
            <center> Soruların üzerine  tıklayarak yanıtlarını görebilirsiniz.</center>
            <p>
            <ul><select size=10 name=question onChange="javascript:showFAQ(this.form);">
            <option value="......CEVAPLARI BURAYI YAZINIZ......">   -->  ......SORULARI BURAYA YAZINIZ......
            <option value="www.ipucu.web.tr">   -->  Şu anda hangi sayfadayız?
            <option value="cevap 2">   -->  Soru 2
            <option value="Cevap 3">   -->  Soru 3
            <option value="Cevap 4">   -->  Soru 4
            </select>
            </ul>
            <p align="center">
            Yanıtlar:
            <p>
            <ul>
            <textarea name="cevap" rows=15 cols=50 wrap=virtual>

// 2 <body> tagları arasına eklediğiniz kodlardan sonra aşağıdaki koları da eklemeniz gerekmektedir. //---------------------------------------- </textarea> </ul> </font> </td> </tr> </table> </form> //--------------------------------------- Sitenizde soru-cevap bölümü bulunuyorsa bu script çok hoşunuza gidecektir. Tıklanan sorunun cevabına anında ulaşmanızı sağlamaktadır. Scripti kopyaladıktan sonra soru ve cevaplarınızı belirtilen yerlere yazmanız yeterli olacaktır.

Sağ tuş menüsü oluşturmak.

Sayfalarınızda kullanıcıların mouse (fare)'un sağ tuş fonksiyonlarına ulaşmasını istemiyorsanız bu scripti rahatlıkla kullanabilirsiniz.

Sağ tuşa tıklandığı zaman kullanıcıların hangi sayfalara girmesini istiyorsanız o sayfaların isimlerini ve adreslerini belirtilen yerlere girmeniz yeterli olacaktır.

Sol tuş menüsü oluşturmak

Sayfalarınızda kullanıcıların mouse (fare)'un sol tuş fonksiyonlarına ulaşmasını istemiyorsanız bu scripti rahatlıkla kullanabilirsiniz.

// --- ADIM 2 <body> tagını <body onload="createPopUpMenu();"> olarak değiştirin. //----------------------------------------- Sol tuşa tıklandığı zaman kullanıcıların hangi sayfalara girmesini istiyorsanız o sayfaların isimlerini ve adreslerini belirtilen yerlere girmeniz yeterli olacaktır.