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)

JavaScript Image Rotation script with CANVAS in HTML5

Rotating images is not new type of JavaScript effects because they were ever showed on jsB@nk through many JavaScript code examples:

- detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...nvas-html5.jpg
Demo: JavaScript JavaScript Image Rotation script with CANVAS in HTML5

How to setup

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

Code:

<script type="text/javascript">

// Created by: Benoit Asselin | http://www.ab-d.fr

// This script downloaded from www.JavaScriptBank.com



function rotate(p_deg) {

        if(document.getElementById('canvas')) {

                /*

                Ok!: Firefox 2, Safari 3, Opera 9.5b2

                No: Opera 9.27

                */

                var image = document.getElementById('image');

                var canvas = document.getElementById('canvas');

                var canvasContext = canvas.getContext('2d');

                

                switch(p_deg) {

                        default :

                        case 0 :

                                canvas.setAttribute('width', image.width);

                                canvas.setAttribute('height', image.height);

                                canvasContext.rotate(p_deg * Math.PI / 180);

                                canvasContext.drawImage(image, 0, 0);

                                break;

                        case 90 :

                                canvas.setAttribute('width', image.height);

                                canvas.setAttribute('height', image.width);

                                canvasContext.rotate(p_deg * Math.PI / 180);

                                canvasContext.drawImage(image, 0, -image.height);

                                break;

                        case 180 :

                                canvas.setAttribute('width', image.width);

                                canvas.setAttribute('height', image.height);

                                canvasContext.rotate(p_deg * Math.PI / 180);

                                canvasContext.drawImage(image, -image.width, -image.height);

                                break;

                        case 270 :

                        case -90 :

                                canvas.setAttribute('width', image.height);

                                canvas.setAttribute('height', image.width);

                                canvasContext.rotate(p_deg * Math.PI / 180);

                                canvasContext.drawImage(image, -image.width, 0);

                                break;

                };

                

        } else {

                /*

                Ok!: MSIE 6 et 7

                */

                var image = document.getElementById('image');

                switch(p_deg) {

                        default :

                        case 0 :

                                image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';

                                break;

                        case 90 :

                                image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';

                                break;

                        case 180 :

                                image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';

                                break;

                        case 270 :

                        case -90 :

                                image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';

                                break;

                };

                

        };

};



// 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() {

        var image = document.getElementById('image');

        var canvas = document.getElementById('canvas');

        if(canvas.getContext) {

                image.style.visibility = 'hidden';

                image.style.position = 'absolute';

        } else {

                canvas.parentNode.removeChild(canvas);

        };

        

        rotate(0);

});

</script>

Step 2: Copy & Paste HTML code below in your BODY section
HTML

Code:

<!--

/*

     This script downloaded from www.JavaScriptBank.com

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

*/

-->

<p>

        rotate:

        <input type="button" value="0Â°" onclick="rotate(0);">



        <input type="button" value="90Â°" onclick="rotate(90);">

        <input type="button" value="180Â°" onclick="rotate(180);">

        <input type="button" value="-90Â°" onclick="rotate(-90);">

</p>

<p>

        <img id="image" src="http://www.javascriptbank.com/templates/jsb.V8/images/logo_jsbank.jpg" alt="">

        <canvas id="canvas"></canvas>

</p>

JavaScript Countdown Timer - JavaScript Web based Music Player - JavaScript AJAX Page Content Loader

Nice AJAX Effects for Messages Box using MooTools

This is very simple JavaScript code example but it can create an amazing message box effect with AJAX operations, bases on ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...g-mootools.jpg
Demo: JavaScript Nice AJAX Effects for Messages Box using MooTools

How to setup

Step 1: Copy & Paste CSS code below in your HEAD section
CSS

Code:

<style type="text/css">

body{font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:12px;}

#box {

        margin-bottom:10px;

        width: auto;

        padding:4px;

        border:solid 1px #DEDEDE;

        background: #FFFFCC;

        display:none;

}

</style>

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

Code:

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

<script type="text/javascript">

// Created by Antonio Lupetti | http://woork.blogspot.com

// This script downloaded from www.JavaScriptBank.com

window.addEvent('domready', function(){

        var box = $('box');

        var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});

        

        $('save_button').addEvent('click', function() {

                box.style.display="block";

                box.setHTML('Save in progress...');

                

                /* AJAX Request here... */

                

                fx.start({        

                        }).chain(function() {

                                box.setHTML('Saved!');

                                this.start.delay(1000, this, {'opacity': 0});

                        }).chain(function() {

                                box.style.display="none";

                                this.start.delay(0001, this, {'opacity': 1});

                        });

                });

        }); 

</script>

Step 3: Copy & Paste HTML code below in your BODY section
HTML

Code:

Press &quot;Save&quot;</p>

<div id="box"></div>

<input name="" type="text" /><input id="save_button" name="save_button" type="button" value="save"/>

Step 4: downloads
Files
mootools.js

AJAX news ticker - JavaScript Refresh Page - JavaScript Unclosable Window

HTC-style JavaScript Countdown Timer with jQuery

If the JavaScript countdown timers are ever presented on jsB@nk still do not satisfy you:

- [URL="http://www.javascriptbank.com/cool-javascript-digital-countdown-with-jquery.html"]Cool JavaScri... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...ith-jquery.jpg
Demo: JavaScript HTC-style JavaScript Countdown Timer with jQuery

How to setup

Step 1: Copy & Paste CSS code below in your HEAD section
CSS

Code:

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

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

Code:

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

<script src="jquery.countdown.packed.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

$('#countdown').countdown({until:$.countdown.UTCDate(-8, 2011,  1 - 1, 1), format: 'DHMS', layout: 

'<div id="timer">' + '<hr />'+

        '<div id="timer_days" class="timer_numbers">{dnn}</div>'+

        '<div id="timer_hours" class="timer_numbers">{hnn}</div>'+ 

        '<div id="timer_mins" class="timer_numbers">{mnn}</div>'+

        '<div id="timer_seconds" class="timer_numbers">{snn}</div>'+

'<div id="timer_labels">'+

        '<div id="timer_days_label" class="timer_labels">days</div>'+

        '<div id="timer_hours_label" class="timer_labels">hours</div>'+

        '<div id="timer_mins_label" class="timer_labels">mins</div>'+

        '<div id="timer_seconds_label" class="timer_labels">secs</div>'+

'</div>'+                                                        

'</div>'                                          

});

});

</script>

Step 3: Copy & Paste HTML code below in your BODY section
HTML

Code:

<div id="countdown"></div>

Step 4: must download files below
Files
countdown1.png
countdown2.png
jquery.countdown.packed.js
style.css

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

So-Ticker: OOP JavaScript Dynamic Ticker with Typing-Styled

This JavaScript code example makes your detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...ing-styled.jpg
Demo: JavaScript So-Ticker: OOP JavaScript Dynamic Ticker with Typing-Styled

How to setup

Step 1: CSS below for styling thescript, place it into 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

*/

#so_oTickerContainer {

        width:700px;

        margin:auto;

        font:1.0em verdana,arial;

        background-color:lightyellow;

        border-top:1px solid yellow;

        border-bottom:1px solid yellow;

}



#so_oTickerContainer h1 {

        font:bold 0.9em verdana,arial;

        margin:0;

        padding:0;

}

        

.so_tickerContainer {

        position:relative;

        margin:auto;

        width:700px;

        background-color:lightyellow;

        border-top:1px solid yellow;

        border-bottom:1px solid yellow;

}



#so_tickerAnchor, #so_oTickerContainer a {

        text-decoration:none;

        color:black;

        font:bold 0.7em arial,verdana;

        border-right:1px solid #000;

        padding-right:2px;

}



#so_oTickerContainer a {

        border-style:none;

}



#so_oTickerContainer ul {

        margin-top:5px;

}



#so_tickerDiv {

        display:inline;

        margin-left:5px;

}



#so_tickerH1 {

        font:bold 1.0em arial,verdana;

        display:inline;

}



#so_tickerH1 a {

        text-decoration:none;

        color:#000;

        padding-right:2px;

}



#so_tickerH1 a img {

        border-style:none;

}



</style>

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

Code:

<script type="text/javascript">

// Created by: Steve Chipman | http://slayeroffice.com/



/*

     This script downloaded from www.JavaScriptBank.com

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

*/





/****************************



so_ticker

version 1.0

last revision: 03.30.2006

steve@slayeroffice.com



For implementation instructions, see:

http://slayeroffice.com/code/so_ticker/



Should you improve upon or modify this

code, please let me know so that I can update

the version hosted at slayeroffice.



Please leave this notice intact.





****************************/



so_ticker = new Object();

so_ticker = {

        current:0,                        

        currentLetter:0,        

        zInterval:null,        

        tObj: null,                        

        op:0.95,                        

        pause: false,                

        tickerContent: [],        

        LETTER_TICK:100, 

        FADE: 10, 

        NEXT_ITEM_TICK: 3000, 

        init:function() {

                var d=document;        

                var mObj = d.getElementById("so_oTickerContainer");        

                so_ticker.tObj = d.createElement("div");                

                so_ticker.tObj.setAttribute("id","so_tickerDiv"); 

                var h = d.createElement("h1");        

                h.appendChild(d.createTextNode(so_ticker.getTextNodeValues(mObj.getElementsByTagName("h1")[0])));        

                h.setAttribute("id","so_tickerH1");        

                var ea = d.createElement("a");

                ea.setAttribute("href","javascript:so_ticker.showContent();");

                pImg = ea.appendChild(document.createElement("img"));

                pImg.setAttribute("src","plus.png");

                pImg.setAttribute("alt","Click to View all News Items.");

                ea.setAttribute("title","Click to View all News Items.");

                h.insertBefore(ea,h.firstChild);

                anchors = mObj.getElementsByTagName("a");                

                var nObj = mObj.cloneNode(false);                

                mObj.parentNode.insertBefore(nObj,mObj); 

                mObj.style.display = "none";        

                nObj.className = "so_tickerContainer";         

                nObj.setAttribute("id","so_nTickerContainer");

                nObj.appendChild(h);         

                nObj.appendChild(so_ticker.tObj);        

                so_ticker.getTickerContent();        

                so_ticker.zInterval = setInterval(so_ticker.tick,so_ticker.LETTER_TICK);         

        },

        showContent:function() {

                        var d = document;

                        d.getElementById("so_oTickerContainer").style.display = "block"; 

                        d.getElementById("so_nTickerContainer").style.display = "none";

                        d.getElementById("so_oTickerContainer").getElementsByTagName("a")[0].focus();

                        clearInterval(so_ticker.zInterval);

        },

        getTickerContent:function() {

                for(var i=0;i<anchors.length;i++) so_ticker.tickerContent[i] = so_ticker.getTextNodeValues(anchors[i]);

        }, 

        getTextNodeValues:function(obj) {

                if(obj.textContent) return obj.textContent;

                if (obj.nodeType == 3) return obj.data;

                var txt = [], i=0;

                while(obj.childNodes[i]) {

                        txt[txt.length] = so_ticker.getTextNodeValues(obj.childNodes[i]);

                        i++;

                }

            return txt.join("");

    },

    tick: function() {

            var d = document;

            if(so_ticker.pause) {

                    try {

                            so_ticker.clearContents(d.getElementById("so_tickerAnchor"));

                            d.getElementById("so_tickerAnchor").appendChild(d.createTextNode(so_ticker.tickerContent[so_ticker.current]));

                            so_ticker.currentLetter = so_ticker.tickerContent[so_ticker.current].length;

                    } catch(err) { }

                    return;

            }

            if(!d.getElementById("so_tickerAnchor")) {

                    var aObj = so_ticker.tObj.appendChild(d.createElement("a"));

                    aObj.setAttribute("id","so_tickerAnchor");

                    aObj.setAttribute("href",anchors[so_ticker.current].getAttribute("href"));

                    aObj.onmouseover = function() { so_ticker.pause = true; }

                    aObj.onmouseout = function() { so_ticker.pause = false; }

                    aObj.onfocus = aObj.onmouseover;

                        aObj.onblur = aObj.onmouseout;

                        aObj.setAttribute("title",so_ticker.tickerContent[so_ticker.current]);

            }

                d.getElementById("so_tickerAnchor").appendChild(d.createTextNode(so_ticker.tickerContent[so_ticker.current].charAt(so_ticker.currentLetter)));

            so_ticker.currentLetter++;

            if(so_ticker.currentLetter > so_ticker.tickerContent[so_ticker.current].length) {

                    clearInterval(so_ticker.zInterval);

                    setTimeout(so_ticker.initNext,so_ticker.NEXT_ITEM_TICK);

            }

    },

    fadeOut: function() {

            if(so_ticker.paused) return;

            so_ticker.setOpacity(so_ticker.op,so_ticker.tObj);

            so_ticker.op-=.10;

            if(so_ticker.op<0) {

                    clearInterval(so_ticker.zInterval);

                    so_ticker.clearContents(so_ticker.tObj);

                    so_ticker.setOpacity(.95,so_ticker.tObj);

                    so_ticker.op = .95;

                    so_ticker.zInterval = setInterval(so_ticker.tick,so_ticker.LETTER_TICK);

            }

    },

    initNext:function() {

                    so_ticker.currentLetter = 0, d = document;

                    so_ticker.current = so_ticker.tickerContent[so_ticker.current + 1]?so_ticker.current+1:0;

                    d.getElementById("so_tickerAnchor").setAttribute("href",anchors[so_ticker.current].getAttribute("href"));

                    d.getElementById("so_tickerAnchor").setAttribute("title",so_ticker.tickerContent[so_ticker.current]);

                    so_ticker.zInterval = setInterval(so_ticker.fadeOut,so_ticker.FADE);

    },

    setOpacity:function(opValue,obj) {

            obj.style.opacity = opValue;

            obj.style.MozOpacity = opValue;

            obj.style.filter = "alpha(opacity=" + (opValue*100) + ")";

    },

    clearContents:function(obj) {

            try {

                    while(obj.firstChild) obj.removeChild(obj.firstChild);

            } catch(err) { }

    }

}





function page_init(){

        so_ticker.init();

}

window.addEventListener?window.addEventListener("load",page_init,false):window.attachEvent("onload",page_init);

</script>

Step 3: Place HTML below in your BODY section
HTML

Code:

<!--

/*

     This script downloaded from www.JavaScriptBank.com

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

*/

-->



        <div id="so_oTickerContainer">

                <h1>Latest News:</h1>

                <ul>

                        <li><a href="http://slayeroffice.com" rel="nofollow">Cat reported to have secured a fiddle.</a></li>

                        <li><a href="http://centricle.com" rel="nofollow">Cows: Able to leap orbiting satellites?</a></li>

                        <li><a href="http://adactio.com" rel="nofollow">People alarmed to hear small dog laughing.</a></li>

                        <li><a href="http://steve.ganz.name/blog/" rel="nofollow">Fork devastated as Spoon runs off with Dish.</a></li>



                </ul>

        </div>

Step 4: Download files below
Files
plus.png

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

Colours-on-Page Displaying with MooTools

When users click a specified button, this JavaScript code example will get colours of all HTML elements with the predefined color attributes then fill those colours into many tiny rectangles. The auth... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...h-mootools.jpg
Demo: JavaScript Colours-on-Page Displaying with MooTools

How to setup

Step 1: CSS below for styling thescript, place it into 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

*/



.dcolor  {

  height:40px;

}



.dtext {

  }



.dwrapper {

  width:100px;

  float:left;

  padding:10px;

  margin:0 20px 20px 0;

  border:1px solid #ccc;

}

</style>

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

Code:

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

<script type="text/javascript">

// Created by: David Walsh | http://eriwen.com/css/color-palette-with-css-and-moo/

// This script downloaded from www.JavaScriptBank.com



//once the dom is ready

window.addEvent('domready', function() {



        //do it!

        $('get-colors').addEvent('click', function() {

                //starting the colors array

                var colors = [];

                var disallows = ['transparent'];



                //for every element

                $$('*').each(function(el) {

                        //record colors!

                        colors.include(el.getStyle('color'));

                        colors.include(el.getStyle('background-color'));

                        el.getStyle('border-color').split(' ').each(function(c) {

                                colors.include(c);

                        });

                });



                //sort the colors

                colors.sort();



                //empty wrapper

                $('colors-wrapper').empty();



                //for every color...

                colors.each(function(val,i) {



                        //if it's good

                        if(!disallows.contains(val))

                        {



                                //create wrapper div

                                var wrapper = new Element('div', {

                                        'class':'dwrapper'

                                });



                                //create color div, inject

                                var colorer = new Element('div', {

                                        'class':'dcolor',

                                        'style': 'background:' + val

                                });

                                colorer.inject(wrapper);



                                //alert(val);



                                //create text div, inject

                                var texter = new Element('div', {

                                        'class':'dtext',

                                        'text':val

                                });

                                texter.inject(wrapper);



                                //inject wrapper

                                wrapper.inject($('colors-wrapper'));

                        }

                });

        });

});

</script>

Step 3: Copy & Paste HTML code below in your BODY section
HTML

Code:

<!--

/*

     This script downloaded from www.JavaScriptBank.com

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

*/

-->

<input type="button" id="get-colors" value="Get Colors" class="button">

<br><br><br>

<div id="colors-wrapper"></div>



<br clear="all">



<div style="text-align: left; width: 70%;">

<p>

Ma quande lingues coalesce. <span style="color: #279F37;">Li nov lingua franca va esser</span> plu simplic e regulari. Lorem ipsum dolor sit amet, <span style="color: #9F6827;">consectetuer adipiscing elit, sed diam nonummy</span> nibh euismod tincidunt ut <span style="color: #BFB00B;">laoreet dolore magna aliquam erat volutpat</span>.</p>



</div>

Step 4: must download files below
Files
mootools.js

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

Tick Tock: Amazing Analog Clock with CSS

This JavaScript code example will create a super beautiful analog clock with amazing layout on your web pages. However, this [URL="http://www.javascriptbank.com/dhtml-analog-clock-ii.html"]JavaScri... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...k-with-css.jpg
Demo: JavaScript Tick Tock: Amazing Analog Clock with CSS

How to setup

Step 1: CSS below for styling thescript, place it into HEAD section
CSS

Code:

<style type="text/css">

        #clockbase {

                width: 512px;

                height: 512px;

                position: relative;

                margin: 0 auto;

                background: url(clock_bg.jpg) no-repeat;

        }

        #minutes {

                width: 229px;

                height: 229px;

                position: absolute;

                top: 200px;

                left: 137px;

                background: url(minutes-arm.png) no-repeat;

        }

        #hours {

                width: 200px;

                height: 200px;

                position: absolute;

                top: 220px;

                left: 150px;

                background: url(hours-arm.png) no-repeat left bottom;

        }

        #seconds {

                width: 260px;

                height: 260px;

                position: absolute;

                top: 184px;

                left: 120px;

                background: url(SECS.gif) no-repeat;

                

        }

        #clockbase .min05 {background-position: left top;}

        #clockbase .min10 {background-position: left -229px;}

        #clockbase .min15 {background-position: left -458px;}

        #clockbase .min20 {background-position: left -687px;}

        #clockbase .min25 {background-position: left -916px;}

        #clockbase .min30 {background-position: left -1145px;}

        #clockbase .min35 {background-position: left -1374px;}

        #clockbase .min40 {background-position: left -1603px;}

        #clockbase .min45 {background-position: left -1832px;}

        #clockbase .min50 {background-position: left -2061px;}

        #clockbase .min55 {background-position: left -2290px;}

        #clockbase .min00 {background-position: left -2519px;}

        

        #clockbase .hr1 {background-position: left top;}

        #clockbase .hr2 {background-position: left -200px;}

        #clockbase .hr3 {background-position: left -400px;}

        #clockbase .hr4 {background-position: left -600px;}

        #clockbase .hr5 {background-position: left -800px;}

        #clockbase .hr6 {background-position: left -1000px;}

        #clockbase .hr7 {background-position: left -1200px;}

        #clockbase .hr8 {background-position: left -1400px;}

        #clockbase .hr9 {background-position: left -1600px;}

        #clockbase .hr10 {background-position: left -1800px;}

        #clockbase .hr11 {background-position: left -2000px;}

        #clockbase .hr12 {background-position: left -2200px;}

        

        *html #minutes {

                background: url(minutes-arm.gif) no-repeat;

        }

        *html #hours {

                background: url(hours-arm.gif) no-repeat left bottom;

        }

        </style>

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

Code:

<script type="text/javascript" language="javascript">

                var g_nLastTime = null;

                

                function cssClock(hourElementId, minuteElementId)

                {

                        // Check if we need to do an update

                        var objDate = new Date();

                        if(!g_nLastTime || g_nLastTime.getHours() > objDate.getHours() || g_nLastTime.getMinutes() <= (objDate.getMinutes() - 5))

                        {

                                // make sure parameters are valid

                                if(!hourElementId || !minuteElementId) { return; }



                                // get the element objects

                                var objHour = document.getElementById(hourElementId);

                                var objMinutes = document.getElementById(minuteElementId);

                                if (!objHour || !objMinutes) { return; }



                                // get the time

                                var nHour = objDate.getHours();

                                if (nHour > 12) { nHour -= 12; }  // switch from 24-hour to 12-hour system

                                var nMinutes = objDate.getMinutes();



                                // round the time

                                var nRound = 5;

                                var nDiff = nMinutes % nRound;

                                if(nDiff != 0)

                                {

                                        if (nDiff < 3) { nMinutes -= nDiff; } // round down

                                        else { nMinutes += nRound - nDiff; } // round up

                                }

                                if(nMinutes > 59)

                                {

                                        // handle increase the hour instead

                                        nHour++;

                                        nMinutes = 0;

                                }



                                // Update the on page elements

                                objHour.className = 'hr' + nHour;

                                objMinutes.className = 'min' + nMinutes;



                                // Timer to update the clock every few minutes

                                g_nLastTime = objDate;

                        }



                        // Set a timer to call this function again

                        setTimeout(function() { cssClock(hourElementId, minuteElementId); }, 60000); // update the css clock every minute (or so)

                }

        </script>

Step 3: Copy & Paste HTML code below in your BODY section
HTML

Code:

<div id="clockbase">

            <div class="hr10" id="hours"></div>

            <div class="min10" id="minutes"></div>

                <div id="seconds"></div>

        </div>

        <script type="text/javascript" language="javascript">

        cssClock('hours', 'minutes');

        </script>

Step 4: downloads
Files
clock_bg.jpg
hours-arm.gif
hours-arm.png
minutes-arm.gif
minutes-arm.png
SECS.gif

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

Simulate Awesome Flash Horizontal Navigation with MooTools

Simple JavaScript Slideshow in 2 code lines with jQuery

In this post, jsB@nk is happy to present to you a tiny JavaScript slideshow effect made by 2 code lines. It's so very simple and easy to implement but its JavaScript animations are so great to apply o... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...nes-jquery.jpg
Demo: JavaScript Simple JavaScript Slideshow in 2 code lines with jQuery

How to setup

Step 1: must download files below
Files
1.html
2.html
3.html
jquery-1.4.3.js

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

Simple JavaScript RegEx to Parse Domain Name

There are many JavaScript resources to parse an URL in JavaScript RegEx. And parsing the domain main is easy since there's a lot of trick. This is useful f... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...omain-name.jpg
Demo: JavaScript Simple JavaScript RegEx to Parse Domain Name

How to setup

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

Code:

<script type="text/javascript">

// Copyright: ivanceras - http://www.ivanceras.com/

/*

     This script downloaded from www.JavaScriptBank.com

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

*/



/**

 * 

 * USAGE:

 * UriParser.parseRootDomain("http://user:password@www.truste.com.ca:80/pathname?querystring&key=value#fragment"); //= truste.com.ca

 * UriParser.parseRootDomain("http://google.com.ph/pathname?querystring&key=value#fragment"); //= google.com.ph

 * UriParser.parseRootDomain("http://www.google.com/pathname?querystring&key=value#fragment"); //= google.com

 * 

 */

var UriParser =  {



 //parse the root domain, exclude the sub domain

 parseRootDomain : function(url) {

  var matches = url.match(/^((\w+):\/\/)?((\w+):?(\w+)?@)?([^\/\?:]+):?(\d+)?(\/?[^\?#]+)?\??([^#]+)?#?(\w*)/);

 

  //my additional code

  var theDomain = matches[6];

  

  if(UriParser.isIp(theDomain)){//if it is an ip address return it as domain

   return theDomain;

  }

  var dots = theDomain.split('.');

  var n = dots.length;

  

  if(n < 3){//google.com, 2 root words concatenate, 1 word as well i.e. localhost

   return dots.join(".");

  }

  else{//should be greater than or equal to 3 dot split ie. adsense.google.com

   var last = dots[n-1];

   var second2l = dots[n-2];

   var third2l = dots[n-3];

  

   var ext;

   var root;

   if(second2l.length <= 3){//if google.com.ph, or bbc.co.uk

    ext = second2l +"."+ last;

    root = third2l;

   }else{// adsense.google.com

    ext = last;

    root = second2l;

   }

   var domain = ""+ root + "." + ext;

   return domain;

  }

 },

 

 //private

 isNumber : function (o) {

    return !isNaN (o-0);

 },

 //private

 /**

  * determines if the url is an ip address

  */

 isIp: function(domain){

  var exploded = domain.split('.');

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

   if(!UriParser.isNumber(exploded[i])){

    return false;

   }

  }

  return true;

 },

 

 isSameDomain: function(url1, url2){

  if(UriParser.parseRootDomain(url1) == UriParser.parseRootDomain(url2)){

   return true;

  }

  return false;

 }



}

</script>

Step 2: Copy & Paste HTML code below in your BODY section
HTML

Code:

<h3>Usages:</h3>

document.write(UriParser.parseRootDomain("http://user:password@www.truste.com.ca:80/pathname?querystring&key=value#fragment"));<br />

document.write(UriParser.parseRootDomain("http://google.com.ph/pathname?querystring&key=value#fragment"));<br />

document.write(UriParser.parseRootDomain("http://www.google.com/pathname?querystring&key=value#fragment"));<br />

document.write(UriParser.parseRootDomain("http://google.com/pathname?querystring&key=value#fragment"));<br />

document.write(UriParser.parseRootDomain("http://localhost/pathname?querystring&key=value#fragment"));<br />

document.write(UriParser.parseRootDomain("localhost"));<br />

document.write(UriParser.parseRootDomain("http://192.168.1.1/pathname?querystring&key=value#fragment"));<br />

document.write(UriParser.isSameDomain("http://www.google.com/pathname?querystring&key=value#fragment", "http://adsense.google.com/?x=123123"))

document.write(UriParser.isSameDomain("http://www.blogger.com/navbar.g?targetBlogID=5856931630868336061&blogName=TeamPilipinas.info&publishMode=PUBLISH_MODE_HOSTED&navbarType=BLACK&layoutType=LAYOUTS&searchRoot=http%3A%2F%2Fteampilipinas.info%2Fsearch&blogLocale=en_PH&homepageUrl=http%3A%2F%2Fteampilipinas.info%2F", "blogger.com"));<br />

<hr />

<h3>Results:</h3>

<script type="text/javascript">

document.write(UriParser.parseRootDomain("http://user:password@www.truste.com.ca:80/pathname?querystring&key=value#fragment") + '<br />');

document.write(UriParser.parseRootDomain("http://google.com.ph/pathname?querystring&key=value#fragment") + '<br />');

document.write(UriParser.parseRootDomain("http://www.google.com/pathname?querystring&key=value#fragment") + '<br />');

document.write(UriParser.parseRootDomain("http://google.com/pathname?querystring&key=value#fragment") + '<br />');

document.write(UriParser.parseRootDomain("http://localhost/pathname?querystring&key=value#fragment") + '<br />');

document.write(UriParser.parseRootDomain("localhost") + '<br />');

document.write(UriParser.parseRootDomain("http://192.168.1.1/pathname?querystring&key=value#fragment") + '<br />');

document.write(UriParser.isSameDomain("http://www.google.com/pathname?querystring&key=value#fragment", "http://adsense.google.com/?x=123123"))

document.write(UriParser.isSameDomain("http://www.blogger.com/navbar.g?targetBlogID=5856931630868336061&blogName=TeamPilipinas.info&publishMode=PUBLISH_MODE_HOSTED&navbarType=BLACK&layoutType=LAYOUTS&searchRoot=http%3A%2F%2Fteampilipinas.info%2Fsearch&blogLocale=en_PH&homepageUrl=http%3A%2F%2Fteampilipinas.info%2F", "blogger.com"));

</script>

Javascript Music Player - Random Text Generator - Floating Image Script

Snake Game in JavaScript & YUI

There are already many versions of snake classic games available on the Internet. Now this Snake game was just some fun ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...cript--yui.jpg
Demo: JavaScript Snake Game in JavaScript & YUI

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 {

    background-color:#EEF3E2;

    margin:0;

    padding:0;

    font:13px arial;

}

#arena {

    border:1px solid #000;

    width:644px;

    height:444px;

    margin:20px 0 0 24px;

    float:left;

}

#info {

    float:left;

    margin:20px 0 0 40px;

}

#info ul {

    margin-left:0;

    padding-left:16px;

}

#info #title {

    color:#228B22;

    font-size:20px;

}

#info #instructions ul#colorCodes {

    padding:0;

}

#info #instructions #colorCodes li {

    list-style-type:none;

}

#info #instructions #colorCodes span {

    width:14px;

    height:12px;

    display:inline-block;

    color:#FFF;

    margin-right:4px;

}

#info #instructions #colorCodes span.foodColor {

    background-color:#228B22;

}

#info #instructions #colorCodes span.bonusColor {

    background-color:#FFB90F;

}

#info #score {

    border:0px solid #000;

    width:100px;

    height:20px;

    margin-top:20px;

    color:#8B4513;

    font-weight:bold;

    font-size:15px;

}

#info #addninfo {

    margin-top:20px;

    font-size:12px;

    font-style:italic;

}

.cell {

    border:0px solid #000;

    width:14px;

    height:12px;

    background-color: #FFF;

    float:left;

}   

.clear {

    clear:both;

}

</style>

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

Step 2: Place JavaScript below in your HEAD section
JavaScript

Code:

<script src="yahoo-dom-event.js"></script>

<script src="container-min.js"></script>

<script src="snake.js"></script>

Step 3: Place HTML below in your BODY section
HTML

Code:

<!--

/*

     This script downloaded from www.JavaScriptBank.com

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

*/

-->

<body class="yui-skin-sam">

    <div id="wrapper">

        <div id="arena"></div>

        <div id="info">

            <div id="title">SNAKE</div>

            <div id="score">Score: <i>0</i></div>

            <div id="instructions">



                <ul>

                    <li>Press ARROW keys to move the snake.</li>

                    <li>Press P to pause or resume.</li>

                    <li>Earlier you eat the food, more points you get.</li>

                    <li>Snake gets killed if it collides with the walls or its own body.</li>

                    <li>Color codes:

                        <ul id=colorCodes>



                            <li><span class=foodColor></span>Food (Max 250 points, length increases by 4 units)</li>

                            <li><span class=bonusColor></span>Bonus (500 points, disappears if not eaten within 10 seconds)</li>

                        </ul>

                    </li>

                </ul>

            </div>

            <div id=credits>

                This game is created in Javascript using YUI 2 framework.

                </br>



                Author: <a href="http://odhyan.com">Saurabh Odhyan</a>

                </br>

            </div>

            <div id="addninfo">

                Works well on FF, Chrome and Safari. Didn't have the patience to debug on IE.

            </div>

        </div>

        <div class="clear"></div>



    </div>

</body>

Step 4: downloads
Files
container-min.js
container.css
snake.js
yahoo-dom-event.js

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