Computer Forums - JavaScript codes for Web DEV

Computer Forums (http://www.geekboards.com/forums/index.php)

- Building Websites (http://www.geekboards.com/forums/forumdisplay.php?f=3)

- - JavaScript codes for Web DEV (http://www.geekboards.com/forums/showthread.php?t=15045)

Awesome Picture Showcase with Simple JavaScript Gallery

Simple AJAX File Uploader

This JavaScript article tutorial guides us how to use AJAX to create a simple file uploader. Please go to the inner post page for full completed details, instructions and JavaScript source codes.... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...e-uploader.jpg
Demo: JavaScript Simple AJAX File Uploader

How to setup

JavaScript Bookmark Page script - JavaScript Color Wheel - JavaScript Image slideshow

Best Christmas Countdown Timers for 2012

Years passed, I shared many Christmas countdown timers on these posts: [URL="http://www.javascriptbank.com/top-10-beautiful-christmas-countdown-timers.html"]10 Awesome Christmas Countdown Timers</a... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...imers-2012.jpg
Demo: JavaScript Best Christmas Countdown Timers for 2012

How to setup

JavaScript Line Graph script - JavaScript Virtual Keyboard - JavaScript Horizontal Slider

Free Awesome jQuery Count Down/Up Timer Scripts

65 Free JavaScript Photo Gallery Solutions

9 Funniest JavaScript effects

The Internet is getting more and more important, we can use it for working, learning, for entertaining ... Only in the aspect of entertainment, we use the Internet to play the detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...pt-effects.jpg
Demo: JavaScript 9 Funniest JavaScript effects

How to setup

JavaScript Make link open in new tab/window - JavaScript World clock - circumference calculator

10 Tiptop Analog and Digital Clock Resources and Techniques with Javascript

With beautiful and amazing analog or digital clock on the web pages, you're able to attract more visitors to your website if it relates to some date/time. In Flash, the web developers and web designer... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...javascript.jpg
Demo: JavaScript 10 Tiptop Analog and Digital Clock Resources and Techniques with Javascript

How to setup

Javascript floating message - Javascript multi level drop down menu - JavaScript in_array()

getElementsByAttribute

Ever run into a situation where you want to get an array of all elements with a specific attribute? Or even want elements with a certain value for that chosen attribute as well? Just add this <a href=... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...yattribute.jpg
Demo: JavaScript getElementsByAttribute

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

Code:

<script type="text/javascript">

/* 

Copyright Robert Nyman, http://www.robertnyman.com

Free to use if this text is included 

*/



function getElementsByAttribute(oElm, strTagName, strAttributeName, strAttributeValue){

    var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName);

    var arrReturnElements = new Array();

    var oAttributeValue = (typeof strAttributeValue != "undefined")? new RegExp("(^|\\s)" + strAttributeValue + "(\\s|$)") : null;

    var oCurrent;

    var oAttribute;

    for(var i=0; i<arrElements.length; i++){

        oCurrent = arrElements[i];

        oAttribute = oCurrent.getAttribute(strAttributeName);

        if(typeof oAttribute == "string" && oAttribute.length > 0){

            if(typeof strAttributeValue == "undefined" || (oAttributeValue && oAttributeValue.test(oAttribute))){

                arrReturnElements.push(oCurrent);

            }

        }

    }

    return arrReturnElements;

}

</script>

        <!--

            This script downloaded from www.JavaScriptBank.com

            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com

        -->

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

40 Super Nice JavaScript Extensions and Plugins

How to Implement Interfaces in JavaScript

In Object-Oriented programming languages, an interface defines a set of methods which a Class must include in order to implement the interface (otherwise, if the Class is missing the required methods,... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...javascript.jpg
Demo: JavaScript How to Implement Interfaces in JavaScript

How to setup

JavaScript Make link open in new tab/window - JavaScript World clock - circumference calculator

More 30 Excellent JavaScript/AJAX based Photo Galleries to Boost your Sites

Javascript Countdown Timer redirecting Affiliate Links

With this simple JavaScript countdown timer, you will easily notice to visitors that the link will be redirected. This JavaScript script is quite short and very easy to modify as you want; so this cod... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...iate-links.jpg
Demo: JavaScript Javascript Countdown Timer redirecting Affiliate Links

How to setup

Step 1: Place CSS below in your HEAD section
CSS

Code:

<style type="text/css">

/*

     This script downloaded from www.JavaScriptBank.com

     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com

*/



body {

   color: black;

   background: white;

   font: bold 18pt Verdana, Arial, Helvetica, sans-serif;

   text-align: center;

}



span.counter {

   color: red;

   cursor: default;

   font-size: larger;

}



div.info {

   margin: 0 auto;

   text-align: left;

   font-size: smaller;

   width: 80%;

   margin-top: 2em;

}

</style>

Step 2: Use JavaScript code below to setup the script
JavaScript

Code:

<script name="countdownRedirect.js" type="text/javascript">

/*

     This script downloaded from www.JavaScriptBank.com

     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com

*/



/**

 * Copyright (C) 2006-2009, QuietAffiliate.com. All rights reserved.

 *

 * Script Name: Countdown Redirect

 *

 * THIS SOURCE CODE MAY BE USED FREELY PROVIDED THAT

 * YOU DO NOT REMOVE THIS MESSAGE.

 *

 * You can obtain this script at http://www.QuietAffiliate.com

 */



function countdownRedirect(url, msg)

{

   var TARG_ID = "COUNTDOWN_REDIRECT";

   var DEF_MSG = "Redirecting...";



   if( ! msg )

   {

      msg = DEF_MSG;

   }



   if( ! url )

   {

      throw new Error('You didn\'t include the "url" parameter');

   }





   var e = document.getElementById(TARG_ID);



   if( ! e )

   {

      throw new Error('"COUNTDOWN_REDIRECT" element id not found');

   }



   var cTicks = parseInt(e.innerHTML);



   var timer = setInterval(function()

   {

      if( cTicks )

      {

         e.innerHTML = --cTicks;

      }

      else

      {

         clearInterval(timer);

         document.body.innerHTML = msg;

         location = url;          

      }



   }, 1000);

}



window.onload = function() {

        countdownRedirect("http://www.javascriptbank.com", "Thanks For Visiting")

}

</script>

Step 3: Place HTML below in your BODY section
HTML

Code:

<div class="info">This is a demo page of the redirect script in action, code and instructions can be found at <strong>QuietAffiliate.com</strong><br /><br /><center>You will automatically be redirected in <span class="counter" id="COUNTDOWN_REDIRECT">10</span> seconds.</center>

</div>

JavaScript Vertical Marquee - JavaScript DHTML analog clock - JavaScript Backwards Text

HTML Button with CSS3: Tiny & Helpful Demo plus Tutorial

If you're a senior web developer, you know that on the big web projects, you have to encounter a situation where you need a coherent set of detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...o-tutorial.jpg
Demo: JavaScript HTML Button with CSS3: Tiny & Helpful Demo plus Tutorial

How to setup

JavaScript Countdown Timer - JavaScript Web based Music Player - Free JavaScript Codes

Single Responsive Photo Gallery plus Slideshow

Currently, there are many JavaScript photo slideshow scripts, detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...-slideshow.jpg
Demo: JavaScript Single Responsive Photo Gallery plus Slideshow

How to setup

Step 1: Use CSS code below for styling the script
CSS

Code:

<link rel="stylesheet" type="text/css" href="srpgs.css"/>

Step 2: Use JavaScript code below to setup the script
JavaScript

Code:

<script type="text/javascript" src="jquery-1.4.3.min.js"></script>

<script type="text/javascript" src="srpgs.js"></script>

<script type="text/javascript">

/*

* Project        :        Single Responsive Photo Gallery plus Slideshow

* Author        :        Phong Thai (http://www.javascriptbank.com/)

* Support        :        http://www.javascriptbank.com/

* Version        :        1.0

*/



/*

        You are free to use this plugin in any personal, commercial project without my permission.

        But please help me by leaving the Copyright sign, it just occupies about 10 pixels, 

        otherwise please help me with a milk coffee (paypal) to remove this sign.

*/



var srpgs_slideshowSpeed = 5000,        // speed of the automatic slideshow

        srpgs_scroll_delay = 700,                // speed of the scrolling controls

        srpgs_path_pics = 'pics/';                // path to large photos

        srpgs_path_thumb = 'pics/thumbnails/';



var srpgs_photos = [ {

                "image" : "srpgs-01.jpg"

        }, {

                "image" : "srpgs-02.jpg"

        }, {

                "image" : "srpgs-03.jpg"

        }, {

                "title" : "Title of Photo #04",

                "image" : "srpgs-04.jpg",

                "url" : "http://www.yoursite.com/photo-set-01/",

                "subject" : "#04 in Subject of Set #1"

        }, {

                "title" : "Title of Photo #05",

                "image" : "srpgs-05.jpg",

                "url" : "http://www.yoursite.com/photo-set-01/",

                "subject" : "#05 in Subject of Set #1"

        }, {

                "title" : "Title of Photo #06",

                "image" : "srpgs-06.jpg",

                "url" : "http://www.yoursite.com/photo-set-02/",

                "subject" : "Subject of Set #2: Photo #06"

        }, {

                "title" : "",

                "image" : "srpgs-07.jpg",

                "url" : "",

                "subject" : ""

        }, {

                "title" : "Title of Photo #08",

                "image" : "srpgs-08.jpg",

                "url" : "http://www.yoursite.com/photo-set-02/",

                "subject" : "Subject of Set #2: Photo #08"

        }, {

                "image" : "srpgs-09.jpg"

        }, {

                "image" : "srpgs-10.jpg"

        }, {

                "image" : "srpgs-11.jpg"

        }, {

                "image" : "srpgs-12.jpg"

        }, {

                "image" : "srpgs-13.jpg"

        }, {

                "image" : "srpgs-14.jpg"

        }, {

                "image" : "srpgs-15.jpg"

        }, {

                "image" : "srpgs-16.jpg"

        }, {

                "image" : "srpgs-17.jpg"

        }, {

                "image" : "srpgs-18.jpg"

        }

];

</script>

Step 3: Place HTML below in your BODY section
HTML

Code:

<div class="srpgs-container">

        <!-- Photo placeholders -->

        <div id="srpgs-slideshow">

                <div id="srpgs-rotate-1" class="srpgs-holder"><img src="" /></div>

                <div id="srpgs-rotate-2" class="srpgs-holder"><img src="" /></div>

        </div>

        

        <!-- Photo slideshow controls -->

        <div id="srpgs-control">

                <div class="srpgs-thumbs-nav copyright"><a href="http://www.javascriptbank.com" title="Copyright 2013">+</a></div>

                <div class="srpgs-thumbs-nav up"></div>

                <div id="srpgs-thumbs-gallery"></div>

                <div class="srpgs-thumbs-nav down"></div>

                <div id="srpgs-control-btns">

                        <div id="srpgs-control-back"></div>

                        <div id="srpgs-control-play-pause"></div>

                        <div id="srpgs-control-next"></div>

                </div>

        </div>

        

        <!-- Titles and subjects of the photos -->

        <div id="srpgs-picture">

                <span id="srpgs-picture-title"></span>

                <p class="srpgs-picture-link">

                        In: <a href="#" id="srpgs-picture-url"></a>

                </p>

        </div>

</div>

Javascript Music Player - Random Text Generator - Floating Image Script