Tweet
Page 1 of 8 123 ... LastLast
Results 1 to 10 of 76
  1. #1
    MFC Member
    Join Date
    Jul 2009
    Posts
    75
    Rep Power
    0

    Default Free JavaSccript codes

    Usefull JavaScripts

    Multiple Functions onLoad

    Let use this JavaScript code if you want to load serval functions with onLoad event. Very short script and easy to use, but you can load unlimited functions.... detail


    How to setup

    Step 1: Place JavaScript below in your HEAD section
    JavaScript
    Code:
    <script type="text/javascript">
    // Created by: Simon Willison | http://simon.incutio.com/
    
    function addLoadEvent(func) {
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = func;
      } else {
        window.onload = function() {
          if (oldonload) {
            oldonload();
          }
          func();
        }
      }
    }
    
    addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
    addLoadEvent(function() {
      functionHere();
    });
    
    </script>
    Quote Originally Posted by Copyright
    The Site may provide, or third parties may provide, links to non-JavaScriptBank.com Internet World Wide Web sites or resources. Because JavaScriptBank.com has no control over such sites and resources, you acknowledge and agree that JavaScriptBank.com is not responsible for the availability of such external sites or resources, and does not endorse and is not responsible or liable for any content, advertising, products, or other materials on or available from such sites or resources. You further acknowledge and agree that JavaScriptBank.com shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, goods or services available on or through any such site or resource.

  2. #2
    MFC Member
    Join Date
    Jul 2009
    Posts
    75
    Rep Power
    0

    Default Live Page Change tool

    Live Page Change is an easy to use tool for web page designers and those wanting to know more about how CSS affects a web page.... detail


    How to setup

  3. #3
    MFC Member
    Join Date
    Jul 2009
    Posts
    75
    Rep Power
    0

    Default Autofill and Select Form Fields

    When testing forms you don't need to keep filling in the different fields. Use this function to automatically fill-in input blocks and select values in the form for you. Very easy to use.... detail


    How to setup

    Step 1: Copy & Paste JavaScript code below in your HEAD section
    JavaScript
    Code:
    <script language="javascript">
    <!--
    // Created by: assbach :: http://www.ipernity.com/home/assbach
    
    function dummyreg() {
      var currentDate = new Date();
      var month = currentDate.getMonth() +1;
      var day = currentDate.getDate();
      var year = currentDate.getFullYear();
      var formDate = month + "-" + day + "-" + year;
    
      // Use whatever data you like for the items below
     	document.getElementById("name").value = "JavaScriptBank.com";
     	document.getElementById("email").value = "[email protected]";
     	document.getElementById("datebox").value = formDate;
     	document.getElementById("checkbox").checked = true; // checkbox
     	document.getElementById("radiobutton").checked = true; // radiobutton
     	document.getElementById("pulldown").selectedIndex = 1; // dropdown
    }
    
    // Multiple onload function created by: Simon Willison
    // http://simonwillison.net/2004/May/26/addLoadEvent/
    function addLoadEvent(func) {
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = func;
      } else {
        window.onload = function() {
          if (oldonload) {
            oldonload();
          }
          func();
        }
      }
    }
    
    addLoadEvent(function() {
      dummyreg();
    });
    //-->
    </script>
    	<!--
        	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:
    <form>
      <table>
        <tbody><tr>
          <td>Name:</td>
          <td><input class="inputBox" id="name" type="text"></td>
        </tr><tr>
          <td>E-mail:</td><td><input class="inputBox" id="email" type="text"></td>
    
        </tr><tr>
          <td>Date</td><td><input class="date" id="datebox" type="text"></td>
        </tr><tr>
          <td>
            <input id="checkbox" name="option1" value="Milk" type="checkbox"> Milk<br>
            <input name="option2" value="Butter" type="checkbox"> Butter<br>
    
            <input name="option3" value="Cheese" type="checkbox"> Cheese<br>
          </td>
          <td>
            <input name="heading of button" value="Milk" type="radio"> Milk<br>
            <input id="radiobutton" name="heading of button" value="Butter" type="radio"> Butter<br>
            <input name="heading of button" value="Cheese" type="radio"> Cheese
          </td>
    
        </tr>
        <tr>
          <td>
            <select id="pulldown">
              <option>Milk</option>
              <option>Coffee</option>
              <option>Tea</option>
    
            </select>
          </td>
          <td>&nbsp;</td>
        </tr>
      </tbody></table>
    </form>
    	<!--
        	This script downloaded from www.JavaScriptBank.com
        	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
    	-->






  4. #4
    MFC Member
    Join Date
    Jul 2009
    Posts
    75
    Rep Power
    0

    Default Bookmark Page script

    A cross-browser bookmarking script that not only works in Internet Explorer but also Firefox. Other browsers will get an alert message telling them how to bookmark the ... detail


    How to setup

    Step 1: Place CSS below in your HEAD section
    CSS
    Code:
    <style type="text/css">
    INPUT.demo {
    	BORDER-RIGHT: thin solid; PADDING-RIGHT: 0.3em; BORDER-TOP: thin solid; PADDING-LEFT: 0.3em; PADDING-BOTTOM: 0.3em; BORDER-LEFT: thin solid; COLOR: #00009c; PADDING-TOP: 0.3em; BORDER-BOTTOM: thin solid; BACKGROUND-COLOR: #fff
    }
    </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:
    <script language="javascript" name="bookMark.js">
    // Created by: Philip Myers :: http://virtualipod.tripod.com/bookmark.html
    
    function bookmark(url,title){
      if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4)) {
      window.external.AddFavorite(url,title);
      } else if (navigator.appName == "Netscape") {
        window.sidebar.addPanel(title,url,"");
      } else {
        alert("Press CTRL-D (Netscape) or CTRL-T (Opera) to bookmark");
      }
    }
    </script>
    	<!--
        	This script downloaded from www.JavaScriptBank.com
        	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
    	-->
    Step 3: Copy & Paste HTML code below in your BODY section
    HTML
    Code:
    <input type="button" value="Bookmark us!" class=demo onclick="bookmark('http://javascriptbank.com/','J a v a S c r i p t  B a n k')">
    	<!--
        	This script downloaded from www.JavaScriptBank.com
        	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
    	-->






  5. #5
    MFC Member
    Join Date
    Jul 2009
    Posts
    75
    Rep Power
    0

    Default Show/hide layer

    Move the cursor over JavaScript menu items and the layers would appear. This JavaScript allows to detail


    How to setup

    Step 1: Place JavaScript below in your HEAD section
    JavaScript
    Code:
    <SCRIPT language=JavaScript>
    <!-- // Hide from old browsers 
    
    // Maryanna Nesina
    // [email protected]
    // This script allows to show and hide layes for a set of main brousers
    // And can be used to construct pull-down menus
    
    // All the Layers get names from menu0 to menu_vith_nomber_m
    // If we want to hide all the layers 
    // we call showmenu() function without parametrs
    // i.e. using onMouseOver evant
    
    function DOMGetElement(xx) 
    {
      // This function returns document's elemtnt acording it's name
      // Using Document Object Model
     if (document.getElementById) return document.getElementById(xx); 
     return nul;
    }
    
    function showmenu(name) 
    {
    // This is the main function that hide all the layers but the only one, 
    // which name was delivered to the function as a parametr
    
    var ii;  // cicle variable
    var m=2; // variable that shows maximum nomber in layers' names 
    var qq;  // here we store the name of a layer that we must show
    var nen; // here we store the names of all layers (in a cicle)
    
    NeMenu =  new Array(m+1); // an array to store the objects -  all the layers that should be hidden
    nename = new Array(m+1);  // an array to store the names of all the layers  that should be hidden
    
    // cicle to store the names of all the layers that should be hidden an array
    for (ii=0; ii<=m; ii++) {
      nen="menu" + ii;
      nename[ii]=nen;
       if (name) { // this
        if (nen==name) qq=ii; // flag on - if it's a name of a layer hat should be shown
       }
    }
    
    // than we should show one layer and hide all the others (in a cicle)
    // we do it for all the main types of brousers 
    
      if (document.getElementById) { 
      // Type 1: IE5,6; NN6; Mozilla
      // if our brouser supports DOM and we can get an object according to it's name
        if (name) { // if there was a parametr
         var Menu = DOMGetElement(name); // get an object 
         Menu.style.visibility='visible'; // and show it, changing the style
        }
        for (ii=0; ii<=m; ii++) { // for all the layers
         if (ii!=qq) { // but one that should be shown
          NeMenu[ii] = DOMGetElement(nename[ii]); // get an object that we do NOT show
          NeMenu[ii].style.visibility='hidden';  // and hide it, changing the style
         }
        }
        return true; // exit function
      } // that's all for the first type of brousers
    
     if(document.all) { 
      // Type 2: For document.all stands IE4-6 and Opera5, but IE5,6 were gone as the 1-st type 
       if (name) document.all[name].style.visibility= 'visible'; //if there was a parametr, show that layer using style
      for (ii=0; ii<=m; ii++) { 
       // hide all the layers but one that should be shown  - using style
       if (ii!=qq) document.all[nename[ii]].style.visibility= 'hidden'; 
      }
        return true; // exit function
     } // that's all for the second type of brousers
    
     if (document.layers) { 
       //Type 2: NN4
       if (name) document.layers[name].visibility='show'; // if there was a parametr, show that layer using layer
        for (ii=0; ii<=m; ii++) {
        // hide all the layers but one that should be shown  - using layer
         if (ii!=qq) document.layers[nename[ii]].visibility='hide';
        }
        return true; // exit function
      } // that's all for the second type of brousers (NN4)
    } 
    //-->
    </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:
    <TABLE width="75%" border=1>
      <TBODY>
      <TR>
        <TD bgColor=#00ccff><A onmouseover="showmenu('menu0')" 
          onmouseout=showmenu() href="">This is the first item - move your cursor 
    	over it </A>
          <DIV id=menu0 
          style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; Z-INDEX: 1; LEFT: 490px; VISIBILITY: hidden; BORDER-LEFT: #000000 1px; WIDTH: 211px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 35px; HEIGHT: 95px; BACKGROUND-COLOR: #006633; layer-background-color: #006633">
          <P>That is the first layer</P>
          <P>It is green</P></DIV></TD>
        <TD>&nbsp;</TD>
    
        <TD bgColor=#00ccff>&nbsp;</TD></TR>
      <TR>
        <TD><A onmouseover="showmenu('menu1')" onmouseout=showmenu() href="">This is 
    	the second item - move your cursor over it </A>
          <DIV id=menu1 
          style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; Z-INDEX: 2; LEFT: 57px; VISIBILITY: hidden; BORDER-LEFT: #000000 1px; WIDTH: 204px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 75px; HEIGHT: 94px; BACKGROUND-COLOR: #3300ff; layer-background-color: #3300FF">
          <P>That is the second layer</P>
          <P>It is blue</P></DIV></TD>
        <TD bgColor=#00ccff>&nbsp;</TD>
    
        <TD>&nbsp;</TD></TR>
      <TR>
        <TD bgColor=#00ccff><A onmouseover="showmenu('menu2')" 
          onmouseout=showmenu() href="">This is the third item - move your cursor 
    	over it </A>
          <DIV id=menu2 
          style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; Z-INDEX: 3; LEFT: 157px; VISIBILITY: hidden; BORDER-LEFT: #000000 1px; WIDTH: 204px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 125px; HEIGHT: 94px; BACKGROUND-COLOR: #ffffff; layer-background-color: #FFFFFF">
          <P>That is the third layer</P>
          <P>Can your see it?</P></DIV></TD>
        <TD>&nbsp;</TD>
    
        <TD bgColor=#00ccff>&nbsp;</TD></TR></TBODY></TABLE>
    	<!--
        	This script downloaded from www.JavaScriptBank.com
        	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
    	-->






  6. #6
    MFC Member
    Join Date
    Jul 2009
    Posts
    75
    Rep Power
    0

    Default Sorted Items

    When visitors click the buttons, this JavaScript will sort the items in the listbox.... detail


    How to setup

    Step 1: Copy & Paste JavaScript code below in your HEAD section
    JavaScript
    Code:
    <SCRIPT>
    OrgSel=new Array()
    S=document.forms[0].SelectName
    for(x=0;x<S.length;x++){
    OrgSel[x]=S.options[x].value
    }
    
    function ShfSel(){
    TestArray=new Array()
    TestArray=OrgSel
    shuf=new Array()
    x=0
    while(x<OrgSel.length){
    ran=Math.floor(TestArray.length*Math.random())
    shuf[x]=TestArray[ran]
    Fst=TestArray.slice(0,ran)
    Snd=TestArray.slice(ran+1)
    TestArray=Fst.concat(Snd)
    x++
    }
    ReArr(shuf)
    }
    
    function DesSel(){
    shuf=OrgSel
    shuf=shuf.sort()
    ReArr(shuf)
    }
    
    function AscSel(){
    shuf=OrgSel
    shuf=shuf.sort()
    shuf=shuf.reverse()
    ReArr(shuf)
    }
    
    
    function ReArr(arr){
    for(x=0;x<S.length;x++){
    S.options[x].value=arr[x]
    S.options[x].text=arr[x]
    }
    }
    </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:
    <FORM><SELECT size=7 name=SelectName> <OPTION value=Zero>Zero<OPTION 
      value=One>One<OPTION value=Two>Two<OPTION value=Three>Three<OPTION 
      value=Four>Four<OPTION value=Five>Five<OPTION value=Six>Six</OPTION></SELECT> 
    
    <BR>
    <HR>
    <BR><INPUT onclick=ShfSel() type=button value=Shuffle> <INPUT onclick=DesSel() type=button value="Sort A-Z"> <INPUT onclick=AscSel() type=button value="Sort Z-A"> </FORM>
    	<!--
        	This script downloaded from www.JavaScriptBank.com
        	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
    	-->






  7. #7
    MFC Member
    Join Date
    Jul 2009
    Posts
    75
    Rep Power
    0

    Default 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


    How to setup

    Step 1: Place CSS below in your HEAD section
    CSS
    Code:
    <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 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:
    <script language="javascript">
    // Created by: Neill Broderick :: http://www.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 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:
    <form name="cd">
    <input id="txt" readonly="true" type="text" value="10:00" border="0" name="disp">
    </form>
    	<!--
        	This script downloaded from www.JavaScriptBank.com
        	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
    	-->






  8. #8
    MFC Member
    Join Date
    Jul 2009
    Posts
    75
    Rep Power
    0

    Default Image slideshow transition

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


    How to setup

    Step 1: Use JavaScript code below to setup the script
    JavaScript
    Code:
    <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 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:
    <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 www.JavaScriptBank.com
        	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
    	-->






  9. #9
    MFC Member
    Join Date
    Jul 2009
    Posts
    75
    Rep Power
    0

    Default 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


    How to setup

    Step 1: Use JavaScript code below to setup the script
    JavaScript
    Code:
    <script language=javascript>
    /*
    	Kevin Yank
    	http://www.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 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:
    <a href="http://javascriptbank.com/">Home</a> | 
    	<a href="http://javascriptbank.com/4rum/">Forum</a> | 
    	<a href="http://javascriptbank.com/javascript/">JavaScript</a> | 
    	<a href="http://javascriptbank.com/service/">Services</a> | 
    	<a href="http://javascriptbank.com/javascript/submit-javascript-bank.html">Submit script</a> | 
    	<a href="http://javascriptbank.com/thietkeweb/javascriptmall/">Documentary</a> | 
    	<a href="http://javascriptbank.com/javascript/contact-javascript-bank.html">Contact us</a> | 
    	<a href="http://javascriptbank.com/javascript/aboutus-javascript-bank.html">About us</a>
    	<!--
        	This script downloaded from www.JavaScriptBank.com
        	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
    	-->






  10. #10
    MFC Member
    Join Date
    Jul 2009
    Posts
    75
    Rep Power
    0

    Default 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 <code>body... 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:
    <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:
    <script type="text/javascript">
    <!-- Begin
    /*
         This script downloaded from www.JavaScriptBank.com
         Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
    */
    
    // Created by: Eddie Traversa (2005) :: http://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:
    <div id="contentLYR"></div>
    	<script>window.onload = function(){ajaxLoader('demo.xml','contentLYR');}</script>
    Step 4: Download files below
    Files
    demo.xml







Page 1 of 8 123 ... LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Advertisement

Sponsors




Increase your deposit by 30%. Expand your trading opportunities. Earn more profit!