Page 1 of 17 12311 ... LastLast
Results 1 to 10 of 161

Thread: Free JavaScript codes

  1. #1
    JavaScriptBank is offline Unknown Net Builder
    Join Date
    Sep 2009
    Posts
    151
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Free JavaScript codes

    JavaScript Collector

    Banner effects

    This JavaScript scrolls messages with many varity ways.... detail


    How to setup

    Step 1: Copy & Paste HTML code below in your BODY section
    HTML
    Code:
    <SCRIPT>
    
    // your messages. Add as many as you like.
    var messages = new Array()
    messages[0] = "JavaScriptBank.com"
    messages[1] = "Bank of over 2000+ free JavaScripts"
    messages[2] = "Free JavaScripts, Tutorials"
    messages[3] = "Free Example Codes, DHTML"
    messages[4] = "Free CSS, Resources and more"
    
    // the background-colors of your scroller. Add as many as you like.
    var backgroundcolor=new Array("silver", "yellow", "#7083c7", "lime", "red", "orange")
    
    // the font-colors of your messages. Add as many as you like.
    var fntcolor = new Array("black","white","navy","white","black")
    
    // the font of your messages.
    var fntfamily="Verdana, Arial"
    
    // the font-size (1 to 7)
    var fntsize=2
    
    // font-weight: set 1 for bold font, set 0 for normal font
    var fntweight=1
    
    // the width of the border (pixels)
    var borderwidth=0
    
    // the width of your scroller (pixels)
    var scrollerwidth=300
    
    // the height of your scroller (pixels)
    var scrollerheight=40
    
    // the horizontal position of your scroller (distance to the left margin of browserwindow)
    var scrollerposition_x=0
    
    // the horizontal position of your scroller (distance to the top margin of browserwindow)
    var scrollerposition_y=0
    
    // interval (time for each effect plus standstill time, seconds)
    var interval=4
    
    
    ///////////////////////////////////////////////////////////////////////////
    // CONFIGURATION ENDS HERE
    ///////////////////////////////////////////////////////////////////////////
    
    var i_messages = 0
    var timer
    interval=interval*1000
    if (fntweight==1) { 
        fntweight="<b>"
    }
    else {
        fntweight=""
    }
    
    function randomposition(range) {		
    	return Math.floor(range*Math.random())
    }
    
    function dotransition() {
        if (document.all) {
            content.filters[i_messages].apply()
            content.innerHTML = "<table width="+scrollerwidth+" height="+scrollerheight+" border="+borderwidth+" cellpadding=3 cellspacing=0><tr><td bgcolor="+backgroundcolor[randomposition(backgroundcolor.length)]+" align=center valign=middle>"+fntweight+"<font face="+fntfamily+" size="+fntsize+" color="+fntcolor[randomposition(fntcolor.length)]+">"+messages[i_messages]+"</font></td></tr></table>"
            content.filters[i_messages].play()
            if (i_messages >= messages.length-1) {
                i_messages = 0
            }
            else {
                i_messages++
            }
        } 
    	
    	    if (document.layers) {
            document.nn.document.write("<table width="+scrollerwidth+" height="+scrollerheight+" border="+borderwidth+" cellpadding=3 cellspacing=0><tr><td bgcolor="+backgroundcolor[randomposition(backgroundcolor.length)]+" align=center valign=middle>")
    		 document.nn.document.write(fntweight+"<font face="+fntfamily+" size="+fntsize+" color="+fntcolor[randomposition(fntcolor.length)]+">"+messages[i_messages]+"</font></td></tr></table>")
    		document.close()
            if (i_messages >= messages.length-1) {
                i_messages = 0
            }
            else {
                i_messages++
            }
        } 
        timer = setTimeout("dotransition()",interval)   
    }
    
    if (document.all) {
        document.write('<DIV id=content style="position:absolute; top:'+scrollerposition_y+'px; left:'+scrollerposition_x+'px;  text-align:center; filter: revealTrans(Transition=1, Duration=3) revealTrans(Transition=2, Duration=3) revealTrans(Transition=3, Duration=2)  revealTrans(Transition=4, Duration=2)  revealTrans(Transition=5, Duration=1)  revealTrans(Transition=6, Duration=3)  revealTrans(Transition=7, Duration=2)  revealTrans(Transition=8, Duration=1)  revealTrans(Transition=9, Duration=3)  revealTrans(Transition=10, Duration=1)  revealTrans(Transition=11, Duration=2)  revealTrans(Transition=12, Duration=3)  revealTrans(Transition=13, Duration=1)  revealTrans(Transition=14, Duration=2)  revealTrans(Transition=15, Duration=3)  revealTrans(Transition=16 Duration=1)  revealTrans(Transition=17, Duration=2)  revealTrans(Transition=18, Duration=3) revealTrans(Transition=19, Duration=1) revealTrans(Transition=20, Duration=2) revealTrans(Transition=21, Duration=3) revealTrans(Transition=22, Duration=3)"><table width='+scrollerwidth+' height='+scrollerheight+' border='+borderwidth+' cellpadding=3 cellspacing=0><tr><td bgcolor='+backgroundcolor[randomposition(backgroundcolor.length)]+' align=center valign=middle> </td></tr></table></DIV>')
        window.onload=dotransition
    }
    if (document.layers) {
        document.write('<layer id=nn top='+scrollerposition_y+' left='+scrollerposition_x+'> </layer>')
        document.close()
        window.onload=dotransition
        }
        </SCRIPT>
    	<!--
        	This script downloaded from www.JavaScriptBank.com
        	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
    	-->





    Javascript floating message - Javascript multi level menu - JavaScript in_array()
    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. Thanked by:

    Diesel (26 October, 2009)

  3. #2
    JavaScriptBank is offline Unknown Net Builder
    Join Date
    Sep 2009
    Posts
    151
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Line Wrapper script

    Wraps entries in a textarea box to whatever number of characters per line you want. For example, The script can automatically i... detail


    How to setup

    Step 1: Use JavaScript code below to setup the script
    JavaScript
    Code:
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    function showLines(max, text) {
    max--;
    text = "" + text;
    var temp = "";
    var chcount = 0; 
    for (var i = 0; i < text.length; i++) // for each character ... 
    {   
    var ch = text.substring(i, i+1); // first character
    var ch2 = text.substring(i+1, i+2); // next character
    if (ch == '\n') // if character is a hard return
    {  
    temp += ch;
    chcount = 1;
    }
    else
    {
    if (chcount == max) // line has max chacters on this line
    {
    temp += '\n' + ch; // go to next line
    chcount = 1; // reset chcount
    }
    else  // Not a newline or max characters ...
    {
    temp += ch;
    chcount++; // so add 1 to chcount
          }
       }
    }
    return (temp); // sends value of temp back
    }
    //  End -->
    </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 name=form1>
    <textarea name=text1 rows=15 cols=50>This is just an example of a long textbox entry that just went on and on and on and on.....  The visitor did not hit <enter> when entering this information so it continued off the right side of the textarea box.  Notice that hitting <enter> after each line, like this:
    This is on another line
    And so is this one.....
    
    Still wraps correctly.  Neat!</textarea><br>
    <input type=button value="Wrap Lines to 50 Spaces"
    onClick="this.form.text1.value = showLines(50, this.form.text1.value)">
    
    <br><br>
    
    <textarea name=text2 rows=15 cols=50 wrap=virtual>This is another example, but this time the textarea box has the "wrap=virtual" attribute, which makes each line wrap in the box rather than scrolling out the right side.  The script also correctly deals with this type of box.  Like before, notice that hitting <enter> after each line, like this:
    
    This is on another line
    And so is this one.....
    
    Still wraps correctly.  Neat!</textarea><br>
    <input type=button value="Wrap Lines to 50 Spaces"
    onClick="this.form.text2.value = showLines(50, this.form.text2.value)">
    </form>
    	<!--
        	This script downloaded from www.JavaScriptBank.com
        	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
    	-->






  4. #3
    JavaScriptBank is offline Unknown Net Builder
    Join Date
    Sep 2009
    Posts
    151
    Thanks
    0
    Thanked 5 Times in 5 Posts

    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: Copy & Paste CSS code 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
    	-->






  5. Thanked by:

    Diesel (26 October, 2009)

  6. #4
    JavaScriptBank is offline Unknown Net Builder
    Join Date
    Sep 2009
    Posts
    151
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Image slideshow transition

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


    How to setup

    Step 1: Copy & Paste JavaScript code below in your HEAD section
    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
    	-->






  7. Thanked by:

    Diesel (26 October, 2009)

  8. #5
    JavaScriptBank is offline Unknown Net Builder
    Join Date
    Sep 2009
    Posts
    151
    Thanks
    0
    Thanked 5 Times in 5 Posts

    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


    How to setup

    Step 1: Place JavaScript below in your HEAD section
    JavaScript
    Code:
    <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:
    <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>






  9. Thanked by:

    Diesel (26 October, 2009)

  10. #6
    Diesel's Avatar
    Diesel is offline DJuice Net Builder
    Join Date
    Jun 2009
    Location
    Heartbeat City
    Posts
    180
    Thanks
    66
    Thanked 48 Times in 43 Posts
    Thank you JSB for some cool JavaScript codes. Can you please provide me such script that has the option to zoom in/out images in high quality? I need to use it for a fashion & fabric related website.

    Thanx
    - Diesel -

  11. #7
    Aziz's Avatar
    Aziz is offline no investment, no glory
    Join Date
    May 2009
    Location
    IL
    Posts
    736
    Thanks
    588
    Thanked 243 Times in 168 Posts
    Quote Originally Posted by Diesel View Post
    Thank you JSB for some cool JavaScript codes. Can you please provide me such script that has the option to zoom in/out images in high quality? I need to use it for a fashion & fabric related website.

    Thanx
    - Diesel -
    http://www.dolem.com/lytebox/

  12. Thanked by:

    Diesel (2 November, 2009)

  13. #8
    Diesel's Avatar
    Diesel is offline DJuice Net Builder
    Join Date
    Jun 2009
    Location
    Heartbeat City
    Posts
    180
    Thanks
    66
    Thanked 48 Times in 43 Posts
    Thanx Aziz for that site. I found something similar scripts in Dynamic drive. It has the only option to enlarge the images. Actually besides this, what I wanted to have such option to zoom in/out or magnify an image so it can be perceived well in high resolution.

  14. #9
    JavaScriptBank is offline Unknown Net Builder
    Join Date
    Sep 2009
    Posts
    151
    Thanks
    0
    Thanked 5 Times in 5 Posts

    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: Copy & Paste CSS code below in your 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: Place JavaScript 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: must download files below
    Files
    demo.xml







  15. #10
    ruben's Avatar
    ruben is offline Net Builder
    Join Date
    Oct 2009
    Posts
    378
    Blog Entries
    1
    Thanks
    44
    Thanked 56 Times in 47 Posts
    nice codes it would be cool if you could also share some php snippets with us

Page 1 of 17 12311 ... LastLast

Similar Threads

  1. Need Help In JavaScript
    By Zash in forum Programming
    Replies: 1
    Last Post: 10 September, 2010, 18:08 PM
  2. Javascript
    By Sbfc_ in forum Community Building
    Replies: 5
    Last Post: 19 March, 2010, 00:21 AM
  3. Javascript
    By KMRock in forum Programming
    Replies: 0
    Last Post: 29 July, 2009, 01:02 AM
  4. [WTH] $$ for Simple Javascript
    By MarxGrayscaleServices in forum Services
    Replies: 2
    Last Post: 31 May, 2009, 19:31 PM
  5. Use PHP functions in JavaScript
    By ankit in forum Programming
    Replies: 3
    Last Post: 31 May, 2009, 10:12 AM

Tags for this Thread

Bookmarks

Posting Permissions

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