1. Get rid of all advertisements and get unlimited access to documents by upgrading to Premium Membership. Upgrade to Premium Now and also get a Premium Badge!

JavaScript codes for Web DEV

Discussion in 'External Resources / Market Place' started by JavaScriptBank, Sep 30, 2009.

Thread Status:
Not open for further replies.
  1. JavaScriptBank

    JavaScriptBank Active Member

    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    80
    Varying Destination Button


    Useful if you don't have much space to play with. This script almost works in Netscape 2.x: the button appears and the destination cycles properly, so clicking on the button will take you to the curre... detail

    [​IMG]
    Demo: Varying Destination Button​

    How to setup

    Step 1: Place JavaScript below in your HEAD section
    JavaScript
    Code (Text):
    <SCRIPT language=JavaScript>
    <!--
    //author: Jan_P@dds.nl  
    var timerID = null
    var timerRunning = false
    var charNo = 0
    var charMax = 0
    var lineNo = 0
    var lineMax = 3
    var lineArr = new Array(lineMax)
    var urlArr = new Array(lineMax)
    lineArr[1] = "Home Page"                  
    urlArr[1] = "hxxp ://javascriptbank. com"
    lineArr[2] = "Site # 1"                  
    urlArr[2] = "hxxp ://javascriptbank. com"
    lineArr[3] = "Site # 2"                  
    urlArr[3] = "hxxp ://javascriptbank. com"
     
    var lineText = lineArr[1]
     
    function StartShow() {
        StopShow()
        ShowLine()
        timerRunning = true
    }
     
    function FillSpaces() {
        for (var i = 1; i <= lineWidth; i++) {
            spaces += " "
        }
    }
     
    function StopShow() {
        if (timerRunning) {
            clearTimeout(timerID)
            timerRunning = false
        }
    }
     
    function ShowLine() {
        if (charNo == 0) { // Next line  
            if (lineNo < lineMax)   {
                lineNo++
            }
            else {
                lineNo = 1
            }
            lineText = lineArr[lineNo]
            charMax = lineText.length
        }
        if (charNo <= charMax) { // Next char  
            document.formDisplay.buttonFace.value = lineText.substring(0, charNo)
            charNo++
            timerID = setTimeout("ShowLine()", 100)
        }
        else {
            charNo = 0
            timerID = setTimeout("ShowLine()", 3000)
        }
    }
     
    function GotoUrl(url)
    {
        top.location.href = url
    }
    //-->  
    </SCRIPT>
        <!--
            This script downloaded from w w w.JavaScriptBank. com
            Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
        -->
     
    Step 2: Copy & Paste HTML code below in your BODY section
    HTML
    Code (Text):
    <SCRIPT language=JavaScript>
    <!--
    document.write("<form name='formDisplay'>");
    document.write("<input type='button' name='buttonFace' value='&{lineText}' size=18 onClick='GotoUrl(urlArr[lineNo])'>");
    document.write("</form>");
    StartShow();
    //-->  
    </SCRIPT>
        <!--
            This script downloaded from w w w.JavaScriptBank. com
            Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
        -->
     
     
  2. JavaScriptBank

    JavaScriptBank Active Member

    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    80
    TextBox Expander

    I get annoyed when I'm trying to fill in a form and I have to scroll left or right to see what I've typed. This little script puts an end to that. The amazing expanding text box!... detail

    [​IMG]
    Demo: TextBox Expander​

    How to setup

    Step 1: Place JavaScript below in your HEAD section
    JavaScript
    Code (Text):
    <script>
    // Michael P. Hemmes (trueluck3@hotmail. com)

    function boxexpand()

    {

    // Code to make the script easier to use //

    boxValue=document.all.thebox.value.length

    boxSize=document.all.thebox.size

    minNum=20 // Set this to the MINIMUM size you want your box to be.

    maxNum=100 // Set this to the MAXIMUM size you want your box to be.



    // Starts the main portion of the script //

    if (boxValue > maxNum)

      {

      }

    else

    {



      if (boxValue > minNum)

        {

          document.all.thebox.size = boxValue

        }

      else if (boxValue < minNum || boxValue != minNum)

        {

          document.all.thebox.size = minNum

        }

    }

    }

    // End of script //

    </script>
        <!--
            This script downloaded from w w w.JavaScriptBank. com
            Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
        -->
     
    Step 2: Place HTML below in your BODY section
    HTML
    Code (Text):
    <form method="POST" action="--WEBBOT-SELF--">
        <input type="text" onKeypress="boxexpand()" name="thebox" size=20><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2">
    </form>
        <!--
            This script downloaded from w w w.JavaScriptBank. com
            Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
        -->
     





    Javascript floating message - Javascript multi level drop down menu - JavaScript in_array()​
     
  3. JavaScriptBank

    JavaScriptBank Active Member

    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    80
    JavaScript Countdown Timer

    This JavaScript displays a countdown timer and alerts the user when the timer reaches zero. It then redirects to another Web ... detail

    [​IMG]
    Demo: JavaScript Countdown Timer​

    How to setup

    Step 1: Place CSS below in your HEAD section
    CSS
    Code (Text):
    <style type="text/css">
    #txt {
      border:none;
      font-family:verdana;
      font-size:16pt;
      font-weight:bold;
      border-right-color:#FFFFFF
    }

    </style>
        <!--
            This script downloaded from w w w.JavaScriptBank. com
            Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
        -->
     
    Step 2: Use JavaScript code below to setup the script
    JavaScript
    Code (Text):
    <script language="javascript">
    // Created by: Neill Broderick :: hxxp ://w w w.bespoke-software-solutions.co.uk/downloads/downjs.php

    var mins
    var secs;

    function cd() {
        mins = 1 * m("10"); // change minutes here
        secs = 0 + s(":01"); // change seconds here (always add an additional second to your total)
        redo();
    }

    function m(obj) {
        for(var i = 0; i < obj.length; i++) {
            if(obj.substring(i, i + 1) == ":")
            break;
        }
        return(obj.substring(0, i));
    }

    function s(obj) {
        for(var i = 0; i < obj.length; i++) {
            if(obj.substring(i, i + 1) == ":")
            break;
        }
        return(obj.substring(i + 1, obj.length));
    }

    function dis(mins,secs) {
        var disp;
        if(mins <= 9) {
            disp = " 0";
        } else {
            disp = " ";
        }
        disp += mins + ":";
        if(secs <= 9) {
            disp += "0" + secs;
        } else {
            disp += secs;
        }
        return(disp);
    }

    function redo() {
        secs--;
        if(secs == -1) {
            secs = 59;
            mins--;
        }
        document.cd.disp.value = dis(mins,secs); // setup additional displays here.
        if((mins == 0) && (secs == 0)) {
            window.alert("Time is up. Press OK to continue."); // change timeout message as required
            // window.location = "yourpage.htm" // redirects to specified page once timer ends and ok button is pressed
        } else {
            cd = setTimeout("redo()",1000);
        }
    }

    function init() {
      cd();
    }
    window.onload = init;
    </script>
        <!--
            This script downloaded from w w w.JavaScriptBank. com
            Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
        -->
     
    Step 3: Place HTML below in your BODY section
    HTML
    Code (Text):
    <form name="cd">
    <input id="txt" readonly="true" type="text" value="10:00" border="0" name="disp">
    </form>
        <!--
            This script downloaded from w w w.JavaScriptBank. com
            Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
        -->
     





    JavaScript Line Graph script - JavaScript Virtual Keyboard - JavaScript Horizontal Slider​
     
  4. JavaScriptBank

    JavaScriptBank Active Member

    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    80
    Image slideshow transition

    This JavaScript creates slideshow effect with one of transitions.... detail

    [​IMG]
    Demo: Image slideshow transition

    How to setup

    Step 1: Use JavaScript code below to setup the script
    JavaScript
    Code (Text):
    <script LANGUAGE="JavaScript1.1">
    <!-- Beginning of JavaScript -

    messages = new Array()
    //anh dung de tao hieu ung
    messages[0] = "<img src=logojs.gif>"
    messages[1] = "<img src=photo1.jpg>"
    messages[2] = "<img src=photo2.jpg>"
    messages[3] = "<img src=photo3.jpg>"
    messages[4] = "<img src=photo4.jpg>"

    var i_messages = 0
    var timer

    function dotransition() {
        if (document.all) {
            content.filters[0].apply()
            content.innerHTML = messages[i_messages]
            content.filters[0].play()
            if (i_messages >= messages.length-1) {
                i_messages = 0
            }
            else {
                i_messages++
            }
        }
       
        if (document.layers) {
           document.nn.document.write("<table cellspacing=2 cellpadding=2 border=0><tr><td align=left>"+messages[i_messages]+"</td></tr></table>")
            document.close()
            if (i_messages >= messages.length-1) {
                i_messages = 0
            }
            else {
                i_messages++
            }
        }
        timer = setTimeout("dotransition()",5000)  
    }
    // - End of JavaScript - -->
    </script>
        <!--
            This script downloaded from w w w.JavaScriptBank. com
            Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
        -->
     
    Step 2: Copy & Paste HTML code below in your BODY section
    HTML
    Code (Text):
    <BODY onload="dotransition()">
    <DIV id=content style="position: relative; width:160px; height:240px; text-align:center; filter: revealTrans(Transition=12, Duration=3)"></DIV>
    </BODY>
        <!--
            This script downloaded from w w w.JavaScriptBank. com
            Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
        -->
     





    JavaScript Bookmark Page script - JavaScript Color Wheel - JavaScript Image slideshow​
     
  5. JavaScriptBank

    JavaScriptBank Active Member

    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    80
    Web based Music Player

    Bring the sound of life - music to your visitors by this JavaScript. It is an advanced web based midi player that actually enables you to jump, pause, and manipulate the play list like never before.... detail

    [​IMG]
    Demo: Web based Music Player

    How to setup

    Step 1: Copy & Paste JavaScript code below in your HEAD section
    JavaScript
    Code (Text):
    <SCRIPT language=JavaScript>
    <!-- Begin
    counter = 0;
    html = true;
    songs = new Array();
    function addsong() {
    file = document.forms[0].file.value;
    if(file == "") {
    alert("Entra un nombre de archivo o da click en Examinar..");
    }
    else {
    fn = file;
    while(fn.indexOf() != -1) {
    pos = fn.indexOf();
    fn = fn.substring(fn.lenght);
    }
    if(fn.indexOf(".gif") == 1) {
    alert("Sólo sonidos o música");
    }
    else {
    songs[counter] = file;
    document.forms[0].selMusica[counter] = new Option(fn, file, false, true);
    counter++;
    }
    document.forms[0].file.value = "";
    }
    }
    function musica() {
    document.all.sound.src=document.clock.selMusica.options[document.clock.selMusica.selectedIndex].text;
    }
    function stop() {
    document.all.sound.src="";
    }
    function count() {
    document.clock.songs.value=document.clock.selMusica.options.length;
    }
    function deletethis() {
    if(counter > 0) {
    counter--;
    document.forms[0].selMusica[counter] = null;
    songs[counter] = "";
    }
    else {
    alert("No hay nada en la lista!");
       }
    }
    function bajar() {
    document.clock.selMusica.options[document.clock.selMusica.selectedIndex++];
    saber2();
    saber();
    }
    function subir() {
    document.clock.selMusica.options[document.clock.selMusica.selectedIndex--];
    saber2();
    saber();
    }
    function saber() {
    document.clock.url.value=document.clock.selMusica.options[document.clock.selMusica.selectedIndex].text;
    }
    function saber2() {
    fn = document.clock.selMusica.options[document.clock.selMusica.selectedIndex].text;
    char = unescape("%5C");
    while(fn.indexOf(char) != -1) {
    pos = fn.indexOf(char);
    fn = fn.substring(pos + 1, fn.length);
    document.clock.nombre.value=fn;
    }
    }
    // End-->
    </SCRIPT>
    Step 2: Place HTML below in your BODY section
    HTML
    Code (Text):
    <BODY onclick=count() onload=count()>
    <BGSOUND id=sound src="">
    <FORM name=clock><INPUT type=file name=file size="20"> <INPUT onclick=addsong() type=button value=Add><INPUT onclick=deletethis() type=button value=Delete><BR><INPUT onclick=musica() type=button value=Listen name=empezar>
    <INPUT onclick=stop() type=button value=Stop name=detener> You have:<INPUT
    readOnly size=2 name=songs>song(s) in the list.<BR>Name of the song:<INPUT
    size=25 name=nombre><INPUT onclick="saber2(); saber()" type=button value="Know Name & Url">Url
        of the song:<INPUT size=19 name=url> <BR><INPUT onclick=bajar() type=button value=MoveDown><INPUT onclick=subir() type=button value=MoveUp><BR><BR><SELECT
    multiple size=20 name=selMusica></SELECT> </FORM>
    </BODY>





    Javascript Music Player - Random Text Generator - Floating Image Script​
     
  6. JavaScriptBank

    JavaScriptBank Active Member

    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    80
    Make link open in new tab/window

    Use this simple JavaScript to make all links on your web pages open in new tab/window. Script is easy to setup, you should save them into a f... detail

    [​IMG]
    Demo: Make link open in new tab/window

    How to setup

    Step 1: Copy & Paste JavaScript code below in your HEAD section
    JavaScript
    Code (Text):
    <script language=javascript>
    /*
        Kevin Yank
        hxxp ://w w w.sitepoint. com/authorcontact/48
    */
    function externalLinks()
    {
      if (!document.getElementsByTagName) return;
      var anchors = document.getElementsByTagName("a");
      for (var i=0; i<anchors.length; i++)
      {
          var anchor = anchors[i];
          if(anchor.getAttribute("href"))
            anchor.target = "_blank";
      }
    }
    window.onload = externalLinks;

    </script>
        <!--
            This script downloaded from w w w.JavaScriptBank. com
            Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
        -->
     
    Step 2: Place HTML below in your BODY section
    HTML
    Code (Text):
    <a href="hxxp ://javascriptbank. com/">Home</a> |
        <a href="hxxp ://javascriptbank. com/4rum/">Forum</a> |
        <a href="hxxp ://javascriptbank. com/javascript/">JavaScript</a> |
        <a href="hxxp ://javascriptbank. com/service/">Services</a> |
        <a href="hxxp ://javascriptbank. com/javascript/submit-javascript-bank.html">Submit script</a> |
        <a href="hxxp ://javascriptbank. com/thietkeweb/javascriptmall/">Documentary</a> |
        <a href="hxxp ://javascriptbank. com/javascript/contact-javascript-bank.html">Contact us</a> |
        <a href="hxxp ://javascriptbank. com/javascript/aboutus-javascript-bank.html">About us</a>
        <!--
            This script downloaded from w w w.JavaScriptBank. com
            Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
        -->
     





    Command to print web page in javascript - Javascript Time Picker - JavaScript Go To URL Box​
     
  7. JavaScriptBank

    JavaScriptBank Active Member

    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    80
    AJAX Page Content Loader

    AJAX - a very great web development technology nowaday. Use this AJAX in order to load XML and HTML files on the same website with XMLHttpRequest. And in the body... detail at JavaScriptBank. com - 2.000+ free JavaScript codes

    [​IMG]
    Demo: AJAX Page Content Loader

    How to setup

    Step 1: Use CSS code below for styling the script
    CSS
    Code (Text):
    <style type="text/css">
    <!--
    #contentLYR {
      position:relative;/*
      width:200px;
      height:115px;
      left: 200px;
      top: 200px;*/
      z-index:1;
    }
    -->
    </style>
    Step 2: Copy & Paste JavaScript code below in your HEAD section
    JavaScript
    Code (Text):
    <script type="text/javascript">
    <!-- Begin
    /*
         This script downloaded from w w w.JavaScriptBank. com
         Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
    */

    // Created by: Eddie Traversa (2005) :: hxxp ://dhtmlnirvana. com/
    function ajaxLoader(url,id) {
      if (document.getElementById) {
        var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
      }
      if (x) {
        x.onreadystatechange = function() {
          if (x.readyState == 4 && x.status == 200) {
            el = document.getElementById(id);
            el.innerHTML = '<JavaScriptBank>This is content of demo.xml file</JavaScriptBank>';//x.responseText;
          }
        }
        x.open("GET", url, true);
        x.send(null);
      }
    }
    //-->
    </script>
    Step 3: Copy & Paste HTML code below in your BODY section
    HTML
    Code (Text):
    <div id="contentLYR"></div>
        <script>window.onload = function(){ajaxLoader('demo.xml','contentLYR');}</script>
    Step 4: must download files below
    Files
    demo.xml






    Command to print web page in javascript - Javascript Time Picker - JavaScript Go To URL Box​
     
  8. JavaScriptBank

    JavaScriptBank Active Member

    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    80
    Time Picker with child window

    This JavaScript code - date picker helps you choose a time through a popup window. Perhaps this feature is not new on J... detail at JavaScriptBank. com - 2.000+ free JavaScript codes

    [​IMG]
    Demo: Time Picker with child window

    How to setup

    Step 1: Use JavaScript code below to setup the script
    JavaScript
    Code (Text):
    <script language="JavaScript" type="text/javascript" src="timePicker.js">
    /*
        Bassem R. Zohdy | bassem.zohdy@gmail. com
    */
    </script>
    Step 2: Place HTML below in your BODY section
    HTML
    Code (Text):
    <form name="form1">
        <input id="field" onkeydown="time(this.id)"/>
    </form>
    Step 3: must download files below
    Files
    down.jpg
    time.html
    timePicker.js
    up.jpg






    JavaScript Line Graph script - JavaScript Virtual Keyboard - JavaScript Horizontal Slider​
     
  9. JavaScriptBank

    JavaScriptBank Active Member

    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    80
    Fading Slide Show

    Displays images continuously in a slideshow presentation format, with a fade effect on image transitions. (Fade in Internet Explorer 4+ only).... detail at JavaScriptBank. com - 2.000+ free JavaScript codes

    [​IMG]
    Demo: Fading Slide Show

    How to setup

    Step 1: Use JavaScript code below to setup the script
    JavaScript
    Code (Text):
    <script>
    /*
        Original:  CodeLifter. com (support@codelifter. com)
        Web Site:  hxxp ://w w w.codelifter. com
    */

    // set the following variables
    // Set slideShowSpeed (milliseconds)
    var slideShowSpeed = 5000

    // Duration of crossfade (seconds)
    var crossFadeDuration = 3

    // Specify the image files
    var Pic = new Array() // don't touch this
    // to add more images, just continue
    // the pattern, adding to the array below
    Pic[0] = 'logojs.gif'
    Pic[1] = 'photo3.jpg'
    Pic[2] = 'logojs.gif'
    Pic[3] = 'photo5.jpg'
    Pic[4] = 'photo2.jpg'

    // do not edit anything below this line

    var t
    var j = 0
    var p = Pic.length
    var preLoad = new Array()
    for (i = 0; i < p; i++){
       preLoad[i] = new Image()
       preLoad[i].src = Pic[i]
    }

    function runSlideShow(){
       if (document.all){
          document.images.SlideShow.style.filter="blendTrans(duration=2)"
          document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
          document.images.SlideShow.filters.blendTrans.Apply()      
       }
       document.images.SlideShow.src = preLoad[j].src
       if (document.all){
          document.images.SlideShow.filters.blendTrans.Play()
       }
       j = j + 1
       if (j > (p-1)) j=0
       t = setTimeout('runSlideShow()', slideShowSpeed)
    }
    </script>
        <!--
            This script downloaded from w w w.JavaScriptBank. com
            Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
        -->
     
    Step 2: Place HTML below in your BODY section
    HTML
    Code (Text):
    <body onLoad="runSlideShow()">
    <img id="VU" src="logojs.gif" name='SlideShow'>
    </body>
        <!--
            This script downloaded from w w w.JavaScriptBank. com
            Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
        -->
     





    Javascript floating message - Javascript multi level drop down menu - JavaScript in_array()​
     
  10. JavaScriptBank

    JavaScriptBank Active Member

    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    80
    Virtual Keyboard

    This JavaScript integrates complete virtual keyboard solution to the any web page. It does support mouse input, as well as keyboard input translation. Plain text and rich te... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

    [​IMG]
    Demo: Virtual Keyboard

    How to setup

    Step 1: Use JavaScript code below to setup the script
    JavaScript
    Code (Text):
    <script type="text/javascript" src="vk_loader.js" ></script>
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->
     
    Step 2: Place HTML below in your BODY section
    HTML
    Code (Text):
    <form action="no.cgi" method="get">
          <div>
           Subject:<br />

           <input name="testa" id="testa" type="text" onfocus="VirtualKeyboard.attachInput(this)" /><br />
           Password (has keyboard animation disabled):<br />
           <input name="test_pwd" id="test_pwd" type="password" class="VK_no_animate" onfocus="VirtualKeyboard.attachInput(this)" /><br />
           Text:<br />
           <textarea name="testb" id="testb" type="text" cols="55" rows="10" wrap="soft" onfocus="VirtualKeyboard.attachInput(this)"></textarea>
           <br />
           <br />

           <div id="td"></div>
           <br />
           <input id="showkb" type="button" value="Keyboard" onclick="VirtualKeyboard.toggle('testb','td'); return false;" />
          </div>
          <div id="dbg">
          </div>
         </form>
         <script type="text/javascript">
             EM.addEventListener(window,'domload',function(){
                 /*
                 *  open the keyboard
                 */
                 VirtualKeyboard.toggle('testb','td');
                 var el = document.getElementById('sul')
                    ,lt = VirtualKeyboard.getLayouts()
                    ,dl = window.location.href.replace(/[?#].+/,"")
                 for (var i=0,lL=lt.length; i<lL; i++) {
                     var cl = lt[i];
                     cl = cl[0]+" "+cl[1];
                     lt[i] = "<a href=\""+dl+"?vk_layout="+cl+"\" onclick=\"VirtualKeyboard.switchLayout(this.title);return false;\" title=\""+cl+"\" alt=\""+cl+"\" >"+cl+"</a>"
                 }
                 el.innerHTML += "<li>"+lt.join("</li><li>")+"</li>";
             });
         </script>
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->
     
    Step 3: must download files below
    Files
    Virtual_Keyboard.zip






     
  11. JavaScriptBank

    JavaScriptBank Active Member

    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    80
    Refresh Page - Automatic

    Keep your content fresh. Use this JavaScript to automatically reload a fresh copy of your Web page from the server. You determine the time de... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


    How to setup

    Step 1: Use JavaScript code below to setup the script
    JavaScript
    Code (Text):
    <script type="text/javascript">
    <!-- Begin
    // Created by: Lee Underwood
    function reFresh() {
      window.open(location.reload(true))
    }
    /* Set the number below to the amount of delay, in milliseconds,
    you want between page reloads: 1 minute = 60000 milliseconds. */
    window.setInterval("reFresh()",300000);
    // End -->
    </script>
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->
     





     
  12. JavaScriptBank

    JavaScriptBank Active Member

    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    80
    Validate E-Mail

    This JavaScript verifies that a string looks like a real e-mail address.... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


    How to setup

    Step 1: Use JavaScript code below to setup the script
    JavaScript
    Code (Text):
    <script language="javascript">
    // Created by: Francis Cocharrua :: http://scripts.franciscocharrua.com/

    function Validate_String(string, return_invalid_chars) {
      valid_chars = '1234567890-_.^~abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
      invalid_chars = '';
      if(string == null || string == '')
         return(true);

      //For every character on the string.  
      for(index = 0; index < string.length; index++) {
        char = string.substr(index, 1);                        
         
        //Is it a valid character?
        if(valid_chars.indexOf(char) == -1) {
          //If not, is it already on the list of invalid characters?
          if(invalid_chars.indexOf(char) == -1) {
            //If it's not, add it.
            if(invalid_chars == '')
              invalid_chars += char;
            else
              invalid_chars += ', ' + char;
          }
        }
      }
               
      //If the string does not contain invalid characters, the function will return true.
      //If it does, it will either return false or a list of the invalid characters used
      //in the string, depending on the value of the second parameter.
      if(return_invalid_chars == true && invalid_chars != '') {
        last_comma = invalid_chars.lastIndexOf(',');
        if(last_comma != -1)
          invalid_chars = invalid_chars.substr(0, $last_comma) +
          ' and ' + invalid_chars.substr(last_comma + 1, invalid_chars.length);
        return(invalid_chars);
        }
      else
        return(invalid_chars == '');
    }


    function Validate_Email_Address(email_address){
      // Modified and tested by Thai Cao Phong, JavaScriptBank.com
      //Assumes that valid email addresses consist of user_name@domain.tld
     
      at = email_address.indexOf('@');
      dot = email_address.indexOf('.');

      if(at == -1 ||
        dot == -1 ||
        dot <= at + 1 ||
        dot == 0 ||
        dot == email_address.length - 1)
      {
        alert("Invalid email");
        return(false);
      }
         
      user_name = email_address.substr(0, at);
      domain_name = email_address.substr(at + 1, email_address.length);                  

      if(Validate_String(user_name) === false || Validate_String(domain_name) === false)
      {
        alert("Invalid email");
        return(false);
      }

      alert("Valid email");//return(true);
    }
    </script>
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->
     
    Step 2: Place HTML below in your BODY section
    HTML
    Code (Text):
    <form name=f>
    <input type=text name=mail value="">
    <input type=button value=Check onclick="Validate_Email_Address(document.f.mail.value)">
    </form>
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->
     





     
  13. JavaScriptBank

    JavaScriptBank Active Member

    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    80
  14. JavaScriptBank

    JavaScriptBank Active Member

    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    80
    Line Graph script

    This is a purely DHTML/ CSS based Line Graph script. It loads fast and blends in with the rest of the page. You can even use a transparent detail at JavaScriptBank.com - 2.000+ free JavaScript codes


    How to setup

    Step 1: Copy & Paste JavaScript code below in your HEAD section
    JavaScript
    Code (Text):
    <script type="text/javascript" src="wz_jsgraphics.js"></script>
    <script type="text/javascript" src="line.js"></script>
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->
     
    Step 2: Place HTML below in your BODY section
    HTML
    Code (Text):
    <div id="lineCanvas" style="overflow: auto; position:relative;height:300px;width:400px;"></div>

    <script type="text/javascript">
    var g = new line_graph();
    g.add('1', 145);
    g.add('2', 0);
    g.add('3', 175);
    g.add('4', 130);
    g.add('5', 150);
    g.add('6', 175);
    g.add('7', 205);
    g.add('8', 125);
    g.add('9', 125);
    g.add('10', 135);
    g.add('11', 125);

    g.render("lineCanvas", "Line Graph");
    </script>
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->
     
    Step 3: Download files below
    Files
    line.js
    wz_jsgraphics.js






     
  15. JavaScriptBank

    JavaScriptBank Active Member

    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    80
    Falling Snowflakes with images

    Decorate your webpage with this great animated document effect! Watch as snow fall gently trickles down the page, then disappear. The image of snow flakes used is changeable, so snow definitely isn't ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


    How to setup

    Step 1: Copy & Paste JavaScript code below in your HEAD section
    JavaScript
    Code (Text):
    <script type="text/javascript">

    /******************************************
    * Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
    ******************************************/
     
      //Configure below to change URL path to the snow image
      var snowsrc="snow3.gif"
      // Configure below to change number of snow to render
      var no = 10;
      // Configure whether snow should disappear after x seconds (0=never):
      var hidesnowtime = 0;
      // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
      var snowdistance = "pageheight";

    ///////////Stop Config//////////////////////////////////

      var ie4up = (document.all) ? 1 : 0;
      var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

        function iecompattest(){
        return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
        }

      var dx, xp, yp;    // coordinate and position variables
      var am, stx, sty;  // amplitude and step variables
      var i, doc_width = 800, doc_height = 600;
     
      if (ns6up) {
        doc_width = self.innerWidth;
        doc_height = self.innerHeight;
      } else if (ie4up) {
        doc_width = iecompattest().clientWidth;
        doc_height = iecompattest().clientHeight;
      }

      dx = new Array();
      xp = new Array();
      yp = new Array();
      am = new Array();
      stx = new Array();
      sty = new Array();
      snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
      for (i = 0; i < no; ++ i) {  
        dx[i] = 0;                        // set coordinate variables
        xp[i] = Math.random()*(doc_width-50);  // set position variables
        yp[i] = Math.random()*doc_height;
        am[i] = Math.random()*20;         // set amplitude variables
        stx[i] = 0.02 + Math.random()/10; // set step variables
        sty[i] = 0.7 + Math.random();     // set step variables
            if (ie4up||ns6up) {
          if (i == 0) {
            document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><a href="http://dynamicdrive.com"><img src='"+snowsrc+"' border="0"></a></div>");
          } else {
            document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><img src='"+snowsrc+"' border="0"></div>");
          }
        }
      }

      function snowIE_NS6() {  // IE and NS6 main animation function
        doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
            doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
        for (i = 0; i < no; ++ i) {  // iterate for every dot
          yp[i] += sty[i];
          if (yp[i] > doc_height-50) {
            xp[i] = Math.random()*(doc_width-am[i]-30);
            yp[i] = 0;
            stx[i] = 0.02 + Math.random()/10;
            sty[i] = 0.7 + Math.random();
          }
          dx[i] += stx[i];
          document.getElementById("dot"+i).style.top=yp[i]+"px";
          document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";  
        }
        snowtimer=setTimeout("snowIE_NS6()", 10);
      }

        function hidesnow(){
            if (window.snowtimer) clearTimeout(snowtimer)
            for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
        }
           

    if (ie4up||ns6up){
        snowIE_NS6();
            if (hidesnowtime>0)
            setTimeout("hidesnow()", hidesnowtime*1000)
            }

    </script>
    Step 2: Download files below
    Files
    snow3.gif






     
  16. JavaScriptBank

    JavaScriptBank Active Member

    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    80
  17. JavaScriptBank

    JavaScriptBank Active Member

    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    80
    World clock with unique display

    World clock script with unusual design. Cross-browser (IE4 contains additional visual effects). World clock<... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


    How to setup

    Step 1: Use CSS code below for styling the script
    CSS
    Code (Text):
    <STYLE>
    .topcoverlay {
        BACKGROUND-COLOR: #ffffff; FILTER: alpha(opacity=85); HEIGHT: 240px; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 1000px
    }
    .bottomcoverlay {
        BACKGROUND-COLOR: #ffffff; FILTER: alpha(opacity=85); HEIGHT: 1000px; LEFT: 0px; POSITION: absolute; TOP: 253px; WIDTH: 1000px
    }
    </STYLE>
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->
     
    Step 2: Use JavaScript code below to setup the script
    JavaScript
    Code (Text):
    <SCRIPT language=JavaScript>
    <!-- Beginning of JavaScript -


    var startpos=240
    var bildhoehe=720
    var step=3
    var makepause=200
    var difference=0
    var local=1
    var timer

    function showtimelocal() {
        if (local==1) {
            var  thistime= new Date()
            var seconds=thistime.getSeconds()
            var minutes=thistime.getMinutes()
            var hours=thistime.getHours()
            if (hours>=24) {hours=hours-24}
            var secondspos=Math.floor(bildhoehe/60*seconds)
            var minutespos=Math.floor(bildhoehe/60*minutes)
            var hourspos=Math.floor(bildhoehe/60*hours)
           
            if(document.all) {
                document.all.secondsdiv.style.posTop=startpos-secondspos
                document.all.minutesdiv.style.posTop=startpos-minutespos
                document.all.hoursdiv.style.posTop=startpos-hourspos
            }
           
            if(document.layers) {
                document.secondsdiv.top=startpos-secondspos
                document.minutesdiv.top=startpos-minutespos
                document.hoursdiv.top=startpos-hourspos
            }
            var timer=setTimeout("showtimelocal()",makepause)
        }
        else {
            clearTimeout(timer)
        }
    }

    function preUTC(thisdifference) {
        clearTimeout(timer)
        difference=eval(thisdifference)
        local=0
        showtimeUTC()
    }

    function inititate() {
        if (document.layers) {
            document.markernetscape1.visibility="VISIBLE"
            document.markernetscape2.visibility="VISIBLE"
        }
        showtimelocal()
    }

    function prelocal() {
        if (document.layers) {document.markernetscape.visibility="VISIBLE"}
        clearTimeout(timer)
        local=1
        showtimelocal()
    }

    function showtimeUTC() {
        if (local==0) {
            var  thistime= new Date()
            var seconds=thistime.getSeconds()
            var minutes=thistime.getMinutes()
            var hours=thistime.getUTCHours()
            hours+=difference
            if (hours>=24) {hours=hours-24}
            var secondspos=Math.floor(bildhoehe/60*seconds)
            var minutespos=Math.floor(bildhoehe/60*minutes)
            var hourspos=Math.floor(bildhoehe/60*hours)
           
            if(document.all) {
                document.all.secondsdiv.style.posTop=startpos-secondspos
                document.all.minutesdiv.style.posTop=startpos-minutespos
                document.all.hoursdiv.style.posTop=startpos-hourspos
            }
           
            if(document.layers) {
                document.secondsdiv.top=startpos-secondspos
                document.minutesdiv.top=startpos-minutespos
                document.hoursdiv.top=startpos-hourspos
            }
            var timer=setTimeout("showtimeUTC()",makepause)
        }
        else {
            clearTimeout(timer)
        }
    }

    window.onload=inititate
    // - End of JavaScript - -->
    </SCRIPT>
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->
     
    Step 3: Place HTML below in your BODY section
    HTML
    Code (Text):
    <DIV id=secondsdiv style="LEFT: 200px; POSITION: absolute; TOP: 240px">
      <IMG
    src="rotaclock2930.gif" width="14" height="720"></DIV>
    <DIV id=minutesdiv style="LEFT: 180px; POSITION: absolute">
      <IMG
    src="rotaclock2930.gif" width="14" height="720"></DIV>
    <DIV id=hoursdiv style="LEFT: 160px; POSITION: absolute; TOP: 240px">
      <IMG
    src="rotaclock2930.gif" width="14" height="720"></DIV>
    <DIV class=topcoverlay id=topcover></DIV>
    <DIV class=bottomcoverlay id=bottomcover></DIV>
    <DIV id=limiter1
    style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; FONT-WEIGHT: bold; LEFT: 176px; POSITION: absolute; TOP: 241px">
        :</DIV>
    <DIV id=limiter2
    style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; FONT-WEIGHT: bold; LEFT: 196px; POSITION: absolute; TOP: 241px">
        :</DIV>
    <DIV id=markernetscape1
    style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 12pt; FONT-WEIGHT: bold; LEFT: 122px; POSITION: absolute; TOP: 248px; VISIBILITY: hidden"><IMG
    height=1 src="line2930.gif" width=20></DIV>
    <DIV id=markernetscape2
    style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 12pt; FONT-WEIGHT: bold; LEFT: 230px; POSITION: absolute; TOP: 248px; VISIBILITY: hidden"><IMG
    height=1 src="js 46_files/line2930.gif" width=20></DIV>
    <DIV id=timezones
    style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; LEFT: 10px; POSITION: absolute; TOP: 5px"><A
    href="#"
    onmouseover=prelocal()>&gt;&gt; local time</A><BR><A
    href="#"
    onmouseover="preUTC('-8')">Anchorage</A><BR><A
    href="#"
    onmouseover="preUTC('-11')">Auckland</A><BR><A
    href="#"
    onmouseover="preUTC('3')">Baghdad</A><BR><A
    href="#"
    onmouseover="preUTC('8')">Bejing</A><BR><A
    href="#"
    onmouseover="preUTC('-3')">Buenos Aires</A><BR><A
    href="#"
    onmouseover="preUTC('-6')">Denver</A><BR><A
    href="#"
    onmouseover="preUTC('8')">Hongkong</A><BR><A
    href="#"
    onmouseover="preUTC('-9')">Honolulu</A><BR><A
    href="#"
    onmouseover="preUTC('8')">Jakarta</A><BR><A
    href="#"
    onmouseover="preUTC('2')">Johannesburg</A><BR><A
    href="#"
    onmouseover="preUTC('2')">Kairo</A><BR><A
    href="#"
    onmouseover="preUTC('-5')">Lima</A><BR><A
    href="#"
    onmouseover="preUTC('1')">London</A><BR><A
    href="#"
    onmouseover="preUTC('-7')">Los Angeles</A><BR><A
    href="#"
    onmouseover="preUTC('4')">Moscow</A><BR><A
    href="#"
    onmouseover="preUTC('3')">Nairobi</A><BR><A
    href="#"
    onmouseover="preUTC('-4')">New York</A><BR><A
    href="#"
    onmouseover="preUTC('2')">Paris</A><BR><A
    href="#"
    onmouseover="preUTC('-2')">Rio</A><BR><A
    href="#"
    onmouseover="preUTC('10')">Sydney</A><BR><A
    href="#"
    onmouseover="preUTC('9')">Tokyo</A><BR></DIV>
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->
     
    Step 4: downloads
    Files
    rotaclock2930.gif






     
  18. JavaScriptBank

    JavaScriptBank Active Member

    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    80
    Enlarge Image 2

    This one line script changes the image size and source on your thumbnail picture without reloading the page or using popups.... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


    How to setup

    Step 1: Copy & Paste HTML code below in your BODY section
    HTML
    Code (Text):
    <b>Single-click the image to enlarge it; double-click to make it small again.</b><br>

    <img src="gif_logojsb2.gif" onclick="this.src='gif_logojsb2.gif';this.height=180;this.width=480" ondblclick="this.src='gif_logojsb2.gif';this.height=60;this.width=150">
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->
     





     
  19. JavaScriptBank

    JavaScriptBank Active Member

    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    80
    RSS AJAX Newsticker

    This JavaScript tutorial will show you how to combine RSS, AJAX, and JavaScript to create a real-time RSS ticker.

    Thanks to AJAX... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


    How to setup

    Step 1: Use JavaScript code below to setup the script
    JavaScript
    Code (Text):
    <script type="text/javascript" src="rssticker.js"></script>
    Step 2: Copy & Paste HTML code below in your BODY section
    HTML
    Code (Text):
    CNN:
    <DIV style="HEIGHT: 100px; border-style: dotted; border-width: 1px; background-color: silver; text-align: left;">
    <script type="text/javascript">
    //rss_ticker(RSS_id, cachetime, divId, divClass, delay, optionalswitch)
    new rss_ticker("CNN", 60, "cnnbox", "cnnclass", 200)

    </script>
    </DIV>
    <br><br><br>
    Each ticker on the page can be invoked independently, for example:
    <DIV style="HEIGHT: 100px; border-style: dotted; border-width: 1px; background-color: silver; text-align: left;">
    <PRE><script type="text/javascript">
    //rss_ticker(RSS_id, cachetime, divId, divClass, delay, optionalswitch)
    new rss_ticker("CNN", 60, "cnnbox", "cnnclass", 2000)
    </script></PRE>

    </DIV>
    Step 3: downloads
    Files
    rssticker.js






     
  20. JavaScriptBank

    JavaScriptBank Active Member

    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    80
    Spotlight

    Cast an interactive 'spotlight' on the image of your choice using this DHTML script. Move the light about using your mouse. This cool effect works in IE4+, degrading well with the rest.... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


    How to setup

    Step 1: CSS below for styling thescript, place it into HEAD section
    CSS
    Code (Text):
    <style type="text/css">
    <!--
    body{
    background-image : url('none') !important;
    }

    #content{
    background-color : #ffffff;
    position : absolute;
    top : 0px;
    left : 0px;
    padding : 10px;
    visibility : hidden;
    }

    #light{
    position : absolute;
    top : 0px;
    left : 0px;
    overflow : hidden;
    }
    //-->
    </style>
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->
     
    Step 2: Copy & Paste HTML code below in your BODY section
    HTML
    Code (Text):
    <script type="text/javascript" src="spotlight_part_1.js"></script>
    <script type="text/javascript" src="spotlight_part_2.js"></script>
    <div style="z-index: 110;"></div>
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->
     
    Step 3: downloads
    Files
    spotlight_part_1.js
    spotlight_part_2.js

    spotlight.gif






     
Thread Status:
Not open for further replies.