Computer Forums
Page 1 of 4 1 23 Last »
Show 40 post(s) from this thread on one page

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)

JavaScriptBank 05-15-2010 10:07 AM
JavaScript codes for Web DEV
 
Helpful JavaScript for Web development

DHTML Fading Animation Image

Enhancing image presentation on your website with this image rotator plus smooth dynamic motion (fade-in-fade-out). A very great anima... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<SCRIPT language=javaScript>
<!-- Beginning of JavaScript -

sandra0 = new Image();
sandra0.src = "photo1.jpg";

sandra1 = new Image();
sandra1.src = "photo2.jpg";

sandra2 = new Image();
sandra2.src = "photo3.jpg";

var i_strngth=1
var i_image=0

var imageurl = new Array()
imageurl[0] ="photo1.jpg"
imageurl[1] ="photo2.jpg"
imageurl[2] ="photo3.jpg"


function showimage() {               
        if(document.all) {
                if (i_strngth <=110) {
                        testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
                        i_strngth=i_strngth+10
                        var timer=setTimeout("showimage()",100)
                }       
                else {
                        clearTimeout(timer)
                        var timer=setTimeout("hideimage()",1000)
                }
        }       
       
        if(document.layers) {
                        clearTimeout(timer)
                        document.testimage.document.write("<img src="+imageurl[i_image]+" border=0>")
                        document.close()
                        i_image++
                        if (i_image >= imageurl.length) {i_image=0}       
                        var timer=setTimeout("showimage()",2000)
                               
        }       
}


function hideimage() {               
        if (i_strngth >=-10) {
                testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
                i_strngth=i_strngth-10
                var timer=setTimeout("hideimage()",100)
        }       
        else {
                clearTimeout(timer)
                i_image++
                if (i_image >= imageurl.length) {i_image=0}
                i_strngth=1
                var timer=setTimeout("showimage()",500)       
        }
}


// - End of JavaScript - -->
</SCRIPT>
Step 2: Place HTML below in your BODY section
HTML
Code:
<BODY onload=showimage()>
<DIV id=mainbod style="POSITION: relative; VISIBILITY: visible"></DIV>

<DIV id=testimage style="POSITION: relative; VISIBILITY: visible"></DIV>
</BODY>





Javascript Music Player - Random Text Generator - Floating Image 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.

JavaScriptBank 05-18-2010 08:02 PM
Streaming Horizontal Banner
 
Use this JavaScript code to make a a horizontal image scroller on your web page. If do not view the source code, maybe you will think tha... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Use CSS code below for styling the script
CSS
Code:
<style type="text/css">
<!--
#slideCont {
        border:solid 1px #000;
        text-align:center;
}

#slideCont img {
        margin: 5px;
}
-->
</style>
Step 2: Place JavaScript below in your HEAD section
JavaScript
Code:
<script type="text/javascript">
<!--
/*
  -----------------------------------------------
  Streaming banners - v.1
  (c) 2006 www.haan.net
  You may use this script but please leave the credits on top intact.
  Please inform us of any improvements made.
  When usefull we will add your credits.
  ------------------------------------------------ */
<!--

function clip() {
        // width of the banner container
        var contWidth = 425;
        // height of the banner container
        var contHeight = 90;

        var id1 = document.getElementById('slideA');
        var id2 = document.getElementById('slideB');

        id1.style.left = parseInt(id1.style.left)-1 + 'px';
       
        document.getElementById('slideCont').style.width = contWidth + "px";
        document.getElementById('slideCont').style.clip = 'rect(auto,'+ contWidth +'px,' + contHeight +'px,auto)';
        id2.style.display = '';
        if(parseFloat(id1.style.left) == -(contWidth))        {
                id1.style.left = '0px';
        }
        setTimeout(clip,25)
}

// 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() {
  clip();
});
//-->
</script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<div id="slideCont" style="overflow: hidden; position: relative; z-index: 1; width: 425px; height: 90px; top: 0px; clip: rect(auto, 425px, 90px, auto);">
        <div id="slideA" style="overflow: hidden; position: absolute; z-index: 1; top: 0px; left: -194px; width: 850px; height: 90px;">
                <div style="float: left;" id="innerSlideA">
                        <a href="http://www.apache.org/"><img src="/logos/logo_jsbank.jpg" border="0" height="44" width="126"></a>
                        <a href="http://www.haan.net/"><img src="/logos/gif_logojsb2.gif" border="0" height="60" width="120"></a>
                        <a href="http://www.mysql.com/"><img src="/logos/jsb_banner.gif" border="0" height="44" width="126"></a>

                </div>
                <div id="slideB" style="overflow: hidden; position: relative; z-index: 1; top: 0px; left: 0px; width: 425px; height: 90px;">
                        <a href="http://www.apache.org/"><img src="/logos/logo_jsb.jpg" border="0" height="44" width="126"></a>
                        <a href="http://www.haan.net/"><img src="/logos/logo_jsb__88x31.gif" border="0" height="60" width="120"></a>
                        <a href="http://www.mysql.com/"><img src="/logos/logo_jsb_120x60.jpg" border="0" height="44" width="126"></a>
                </div>
        </div>
</div>

JavaScriptBank 05-19-2010 07:35 PM
Expanding Navigation Menu onClick
 
This is a simple expand collapse menu. The anchor tags that expand each menu are added by JavaScript, so the HTML code doesn't contain any event handlers or unnecessary HTML tags. The ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Place CSS below in your HEAD section
CSS
Code:
<style type="text/css">
ul#menu {
  width: 100px;
  list-style-type: none;
  border-top: solid 1px #b9a894;
  margin: 0;
  padding: 0;
}

ul#menu ol {
  display: none;
  text-align: right;
  list-style-type: none;
  margin: 0;
  padding: 5px;
}

ul#menu li,
  ul#menu a {
  font-family: verdana, sans-serif;
  font-size: 11px;
  color: #785a3c;
}

ul#menu li {
  border-bottom: solid 1px #b9a894;
  line-height: 15px;
}

ul#menu ol li {
  border-bottom: none;
}

ul#menu ol li:before {
  content: "-";
}

ul#menu a {
  text-decoration: none;
  outline: none;
}

ul#menu a:hover {
  color: #539dbc;
}

ul#menu a.active {
  color: #be5028;
}
</style>
Step 2: Use JavaScript code below to setup the script
JavaScript
Code:
<script language="javascript">

/*
Created by: Travis Beckham :: http://www.squidfingers.com | http://www.podlob.com
version date: 06/02/03 :: If want to use this code, feel free to do so,
but please leave this message intact. (Travis Beckham) */

// Node Functions

if(!window.Node){
  var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}

function checkNode(node, filter){
  return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}

function getChildren(node, filter){
  var result = new Array();
  var children = node.childNodes;
  for(var i = 0; i < children.length; i++){
    if(checkNode(children[i], filter)) result[result.length] = children[i];
  }
  return result;
}

function getChildrenByElement(node){
  return getChildren(node, "ELEMENT_NODE");
}

function getFirstChild(node, filter){
  var child;
  var children = node.childNodes;
  for(var i = 0; i < children.length; i++){
    child = children[i];
    if(checkNode(child, filter)) return child;
  }
  return null;
}

function getFirstChildByText(node){
  return getFirstChild(node, "TEXT_NODE");
}

function getNextSibling(node, filter){
  for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
    if(checkNode(sibling, filter)) return sibling;
  }
  return null;
}
function getNextSiblingByElement(node){
        return getNextSibling(node, "ELEMENT_NODE");
}

// Menu Functions & Properties

var activeMenu = null;

function showMenu() {
  if(activeMenu){
    activeMenu.className = "";
    getNextSiblingByElement(activeMenu).style.display = "none";
  }
  if(this == activeMenu){
    activeMenu = null;
  } else {
    this.className = "active";
    getNextSiblingByElement(this).style.display = "block";
    activeMenu = this;
  }
  return false;
}

function initMenu(){
  var menus, menu, text, a, i;
  menus = getChildrenByElement(document.getElementById("menu"));
  for(i = 0; i < menus.length; i++){
    menu = menus[i];
    text = getFirstChildByText(menu);
    a = document.createElement("a");
    menu.replaceChild(a, text);
    a.appendChild(text);
    a.href = "#";
    a.onclick = showMenu;
    a.onfocus = function(){this.blur()};
  }
}

if(document.createElement) window.onload = initMenu;

</script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<ul id="menu">
  <li>Menu Item 1
    <ol>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>

    </ol>
  </li>
  <li>Menu Item 2
    <ol>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">Sub Item 2.2</a></li>
      <li><a href="#">Sub Item 2.3</a></li>
    </ol>

  </li>
  <li>Menu Item 3
    <ol>
      <li><a href="#">Sub Item 3.1</a></li>
      <li><a href="#">Sub Item 3.2</a></li>
      <li><a href="#">Sub Item 3.3</a></li>
    </ol>
  </li>

  <li>Menu Item 4
    <ol>
      <li><a href="#">Sub Item 4.1</a></li>
      <li><a href="#">Sub Item 4.2</a></li>
      <li><a href="#">Sub Item 4.3</a></li>
    </ol>
  </li>
  <li>Menu Item 5
    <ol>

      <li><a href="#">Sub Item 5.1</a></li>
      <li><a href="#">Sub Item 5.2</a></li>
      <li><a href="#">Sub Item 5.3</a></li>
    </ol>
  </li>
</ul>

JavaScriptBank 05-21-2010 07:59 PM
Waving Text Trailer
 
This JavaScript codecan be used to be that a mouse cursor pointer was just a mouse cursor. Since DHTML came along and gave programmers the ability to track the precise coordinates of the mouse, it was... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Place CSS below in your HEAD section
CSS
Code:
<STYLE>.spanstyle {
        FONT-WEIGHT: bold; FONT-SIZE: 10pt; COLOR: black; FONT-FAMILY: Verdana; POSITION: absolute; TOP: -50px
}
</STYLE>
Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<SCRIPT>

/*
Cursor Trailor Text- By Peter Gehrig (http://www.24fun.ch/)
Permission given to Dynamicdrive.com to feature script in it's archive.
*/

var moves=17
var tracker=0
var xpos
var ypos
var cursortext='JavaScriptBank.com - Bank of over 2000+ free JavaScript'
cursortext=cursortext.split("")

function setup() {
        if (tracker==1 && document.all) {
            for (i=cursortext.length-1; i>=1; i--) {
                          xposition[i]=xposition[i-1]+moves
                        yposition[i]=yposition[i-1]
            }
                xposition[0]=xpos+moves
                yposition[0]=ypos
       
                for (i=0; i<cursortext.length-1; i++) {
                    var thisspan = eval("span"+(i)+".style")
                    thisspan.posLeft=xposition[i]
                        thisspan.posTop=yposition[i]
            }
        }
       
        else if (tracker==1 && document.layers) {
            for (i=cursortext.length-1; i>=1; i--) {
                          xposition[i]=xposition[i-1]+moves
                        yposition[i]=yposition[i-1]
            }
                xposition[0]=xpos+moves
                yposition[0]=ypos
       
                for (i=0; i<cursortext.length-1; i++) {
                    var thisspan = eval("document.span"+i)
                    thisspan.left=xposition[i]
                        thisspan.top=yposition[i]
            }
        }
                var timer=setTimeout("setup()",40)
}

function MouseMovement(e)
{
        xpos = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
        ypos = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
        tracker=1
}

var xposition=new Array()
for (i=0;i<=cursortext.length-1;i++) {
        xposition[i]=-50
}

var yposition=new Array()
for (i=0;i<=cursortext.length-1;i++) {
        yposition[i]=-50
}

/*hieu ung di chuyen chuot*/

for (i=0;i<=cursortext.length-1;i++) {
    document.write("<span id='span"+i+"' class='spanstyle'>")
        document.write(cursortext[i])
    document.write("</span>")
}

if (document.layers){
        document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = MouseMovement;
</SCRIPT>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<BODY onload=setup()>
</body>

JavaScriptBank 05-23-2010 07:51 PM
Trailing Kisses and Lips
 
Spreading the love on your site with this JavaScript! It produces big kisses and lips behind your mouse pointer as it moves, each disappearing only after a noticeable delay (set to 1 second in demo). ... 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">
<!--
h1 {
  color:#cc3333;
  font-family:"Comic Sans MS",Helvetica;
}
h3 {
  color:#993333;
  font-family:"Comic Sans MS",Helvetica;
}
.kisser {
  position:absolute;
  top:0;
  left:0;
  visibility:hidden;
}
-->
</style>
Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<script language="JavaScript1.2" type="text/JavaScript">
<!-- cloak
//Kissing trail- By dij8 (dij8@dij8.com)
//Modified by Dynamic Drive for bug fixes
//Visit http://www.dynamicdrive.com for this script

kisserCount = 15 //maximum number of images on screen at one time
curKisser = 0 //the last image DIV to be displayed (used for timer)
kissDelay = 1000 //duration images stay on screen (in milliseconds)
kissSpacer = 50 //distance to move mouse b4 next heart appears
theimage = "lips_small.gif" //the 1st image to be displayed
theimage2 = "small_heart.gif" //the 2nd image to be displayed


//Browser checking and syntax variables
var docLayers = (document.layers) ? true:false;
var docId = (document.getElementById) ? true:false;
var docAll = (document.all) ? true:false;
var docbitK = (docLayers) ? "document.layers['":(docId) ? "document.getElementById('":(docAll) ? "document.all['":"document."
var docbitendK = (docLayers) ? "']":(docId) ? "')":(docAll) ? "']":""
var stylebitK = (docLayers) ? "":".style"
var showbitK = (docLayers) ? "show":"visible"
var hidebitK = (docLayers) ? "hide":"hidden"
var ns6=document.getElementById&&!document.all
//Variables used in script
var posX, posY, lastX, lastY, kisserCount, curKisser, kissDelay, kissSpacer, theimage
lastX = 0
lastY = 0
//Collection of functions to get mouse position and place the images
function doKisser(e) {

  posX = getMouseXPos(e)
  posY = getMouseYPos(e)
  if (posX>(lastX+kissSpacer)||posX<(lastX-kissSpacer)||posY>(lastY+kissSpacer)||posY<(lastY-kissSpacer)) {
    showKisser(posX,posY)
    lastX = posX
    lastY = posY
  }
}
// Get the horizontal position of the mouse
function getMouseXPos(e) {
  if (document.layers||ns6) {
    return parseInt(e.pageX+10)
  } else {
    return (parseInt(event.clientX+10) + parseInt(document.body.scrollLeft))
  }
}
// Get the vartical position of the mouse
function getMouseYPos(e) {
  if (document.layers||ns6) {
    return parseInt(e.pageY)
  } else {
    return (parseInt(event.clientY) + parseInt(document.body.scrollTop))
  }
}
//Place the image and start timer so that it disappears after a period of time
function showKisser(x,y) {
  var processedx=ns6? Math.min(x,window.innerWidth-75) : docAll? Math.min(x,document.body.clientWidth-55) : x
  if (curKisser >= kisserCount) {curKisser = 0}
  eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".left = " + processedx)
  eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".top = " + y)
  eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".visibility = '" + showbitK + "'")
  if (eval("typeof(kissDelay" + curKisser + ")")=="number") {
    eval("clearTimeout(kissDelay" + curKisser + ")")
  }
  eval("kissDelay" + curKisser + " = setTimeout('hideKisser(" + curKisser + ")',kissDelay)")
  curKisser += 1
}
//Make the image disappear
function hideKisser(knum) {
  eval(docbitK + "kisser" + knum + docbitendK + stylebitK + ".visibility = '" + hidebitK + "'")
}

function kissbegin(){
//Let the browser know when the mouse moves
if (docLayers) {
  document.captureEvents(Event.MOUSEMOVE)
  document.onMouseMove = doKisser
} else {
  document.onmousemove = doKisser
}
}
window.onload=kissbegin
// decloak -->
</script>
Step 3: Place HTML below in your BODY section
HTML
Code:
<script language="JavaScript" type="text/JavaScript">
<!-- cloak
// Add all DIV's of hearts
if (document.all||document.getElementById||document.layers){
for (k=0;k<kisserCount;k=k+2) {
  document.write('<div id="kisser' + k + '" class="kisser"><img src="' + theimage + '" alt="" border="0"></div>n')
  document.write('<div id="kisser' + (k+1) + '" class="kisser"><img src="' + theimage2 + '" alt="" border="0"></div>n')
}
}

// decloak -->
</script>
Step 4: must download files below
Files
lips_small.gif
small_heart.gif

JavaScriptBank 05-25-2010 08:06 PM
Slideshow with zoom-in-zoom-out-animation
 
Slideshow with great transitoon effect. Each image has a JavaScript link of its own. Netscape-users will see a simple image-rotation-ef... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Place HTML below in your BODY section
HTML
Code:
<BODY onload=initiate()>
<SCRIPT>
<!-- Beginning of JavaScript -
// Slideshow with zoom-in-zoom-out-animation

// CONFIGURATION:
// 1.        Create your images (gif or jpg). They should have the same width.
//                Put those images in the same directory as the HTML-file.
//                You can add as many images as you like.
// 2.        Copy the script-block and paste it into head-section of your HTML-file..
// 3.        Copy the span-blocks with the id "imgcontainer" into the body-section
//      of your HTML-file.
// 4.        Insert 'onLoad="initiate()"' into the body tag.
// 5.        Configure the varibales below.
               
// The width of your images (pixels). All pictures should have the same width.
var imgwidth=256

// The horizontal and vertical position of the images (pixels).
var pos_left=10
var pos_top=10

// The name of your images. You may add as many images as you like.
var imgname=new Array()
imgname[0]="logojs.gif"
imgname[1]="photo3.jpg"
imgname[2]="photo4.jpg"

// Where should those images be linked to?
// Add an URL for each image.
// If you don't want to add an URL just write '#' instead of the URL.
var imgurl=new Array()
imgurl[0]="http://javascriptbank.com"
imgurl[1]="http://javascriptbank.com"
imgurl[2]="http://javascriptbank.com"

// This block will preload your images. Do not edit this block.
var imgpreload=new Array()
for (i=0;i<=imgname.length-1;i++) {
        imgpreload[i]=new Image()
        imgpreload[i].src=imgname[i]
}

// Standstill-time between the images (microseconds).
var pause=2000

// Speed of the stretching and shrinking effect. More means slower.
var speed=20

// This variable also affects the speed (the length of the step between each inmage-frame measured in pixels). More means faster.
var step=10

// Do not edit the variables below
var i_loop=0
var i_image=0

function stretchimage() {
        if (i_loop<=imgwidth) {
                if (document.all) {
                        imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' src='"+imgname[i_image]+"' border='0'></a>"

                }
                i_loop=i_loop+step
                var timer=setTimeout("stretchimage()",speed)
          }
        else {
                clearTimeout(timer)
                var timer=setTimeout("shrinkimage()",pause)
        }
}

function shrinkimage() {
        if (i_loop>-step) {
                if (document.all) {
                        imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' src='"+imgname[i_image]+"' border='0'></a>"

                }
                i_loop=i_loop-step
                var timer=setTimeout("shrinkimage()",speed)
          }
        else {
                clearTimeout(timer)
                changeimage()
        }
}

function changeimage() {
        i_loop=0
        i_image++
        if (i_image>imgname.length-1) {i_image=0}
          var timer=setTimeout("stretchimage()",pause)
}

function initiate() {
        if (document.all) {
                document.all.imgcontainer.style.posLeft=pos_left
                document.all.imgcontainer.style.posTop=pos_top
                changeimage()
        }
        if (document.layers) {
                document.imgcontainer.left=pos_left
                document.imgcontainer.top=pos_top
                rotatenetscape()
        }
}

function rotatenetscape() {
        document.imgcontainer.document.write("<a href='"+imgurl[i_image]+"' target='_blank'><img src='"+imgname[i_image]+"' border='0'></a>")       
        document.imgcontainer.document.close()       
        i_image++
        if (i_image>imgname.length-1) {i_image=0}
          var timer=setTimeout("rotatenetscape()",pause*2)
}

document.write("<div id=\"roof\" style=\"position:relative\">")

document.write("<div id=\"imgcontainer\" style=\"position:absolute;top:0px;left:0px\"></div>")
document.write("</div>")

// - End of JavaScript - -->

</SCRIPT>
</BODY>
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->

JavaScriptBank 05-29-2010 03:57 AM
AJAX Net Page Fetcher
 
This AJAX playscript allows you make page read on other page's content (both asks to be from the same web site - avoid [URL="http://www.javascriptbank.com/javascript/security/"]security issues</... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<script type="text/javascript" name="ajaxpagefetcher.js">
/***********************************************
* Ajax Page Fetcher- by JavaScript Kit (www.javascriptkit.com)
***********************************************/

var ajaxpagefetcher={
loadingmessage: "Loading Page, please wait...",
exfilesadded: "",

connect:function(containerid, pageurl, bustcache, jsfiles, cssfiles){
        var page_request = false
        var bustcacheparameter=""
        if (window.XMLHttpRequest) // if Mozilla, IE7, Safari etc
                page_request = new XMLHttpRequest()
        else if (window.ActiveXObject){ // if IE6 or below
                try {
                page_request = new ActiveXObject("Msxml2.XMLHTTP")
                }
                catch (e){
                        try{
                        page_request = new ActiveXObject("Microsoft.XMLHTTP")
                        }
                        catch (e){}
                }
        }
        else
                return false
        var ajaxfriendlyurl=pageurl.replace(/^http://[^/]+//i, "http://"+window.location.hostname+"/")
        page_request.onreadystatechange=function(){ajaxpagefetcher.loadpage(page_request, containerid, pageurl, jsfiles, cssfiles)}
        if (bustcache) //if bust caching of external page
                bustcacheparameter=(ajaxfriendlyurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
        document.getElementById(containerid).innerHTML=ajaxpagefetcher.loadingmessage //Display "fetching page message"
        page_request.open('GET', ajaxfriendlyurl+bustcacheparameter, true)
        page_request.send(null)
},

loadpage:function(page_request, containerid, pageurl, jsfiles, cssfiles){
        if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
                document.getElementById(containerid).innerHTML=page_request.responseText
                for (var i=0; i<jsfiles.length; i++)
                        this.loadjscssfile(jsfiles[i], "js")
                for (var i=0; i<cssfiles.length; i++)
                        this.loadjscssfile(cssfiles[i], "css")
                this.pageloadaction(pageurl) //invoke custom "onpageload" event
        }
},

createjscssfile:function(filename, filetype){
        if (filetype=="js"){ //if filename is a external JavaScript file
                var fileref=document.createElement('script')
                fileref.setAttribute("type","text/javascript")
                fileref.setAttribute("src", filename)
        }
        else if (filetype=="css"){ //if filename is an external CSS file
                var fileref=document.createElement("link")
                fileref.setAttribute("rel", "stylesheet")
                fileref.setAttribute("type", "text/css")
                fileref.setAttribute("href", filename)
        }
        return fileref
},

loadjscssfile:function(filename, filetype){ //load or replace (if already exists) external .js and .css files
        if (this.exfilesadded.indexOf("["+filename+"]")==-1){ //if desired file to load hasnt already been loaded
                var newelement=this.createjscssfile(filename, filetype)
                document.getElementsByTagName("head")[0].appendChild(newelement)
                this.exfilesadded+="["+filename+"]" //remember this file as being added
        }
        else{ //if file has been loaded already (replace/ refresh it)
        var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist using
        var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
        var allsuspects=document.getElementsByTagName(targetelement)
        for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
          if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1){
          var newelement=this.createjscssfile(filename, filetype)
          allsuspects[i].parentNode.replaceChild(newelement, allsuspects[i])
          }
                }
 }
},


pageloadaction:function(pageurl){
        this.onpageload(pageurl) //call customize onpageload() function when an ajax page is fetched/ loaded
},

onpageload:function(pageurl){
 //do nothing by default
},

load:function(containerid, pageurl, bustcache, jsfiles, cssfiles){
        var jsfiles=(typeof jsfiles=="undefined" || jsfiles=="")? [] : jsfiles
        var cssfiles=(typeof cssfiles=="undefined" || cssfiles=="")? [] : cssfiles
        this.connect(containerid, pageurl, bustcache, jsfiles, cssfiles)
}

} //End object

//Sample usage:
//1) ajaxpagefetcher.load("mydiv", "content.htm", true)
//2) ajaxpagefetcher.load("mydiv2", "content.htm", true, ["external.js"])
//3) ajaxpagefetcher.load("mydiv2", "content.htm", true, ["external.js"], ["external.css"])
//4) ajaxpagefetcher.load("mydiv2", "content.htm", true, ["external.js", "external2.js"])
//5) ajaxpagefetcher.load("mydiv2", "content.htm", true, "", ["external.css", "external2.css"])
</script>
<script type="text/javascript">
// Fetch and display "content.htm" inside a DIV automatically as the page loads:
ajaxpagefetcher.load("joe", "content.htm", true)
</script>
Step 2: Place HTML below in your BODY section
HTML
Code:
<div id="bob"></div>

<script type="text/javascript">
<!-- Fetch and display "sub/content2.htm" inside a DIV when a link is clicked on. Also load one .css file-->
<a href="javascript:ajaxpagefetcher.load('bob', 'sub/content2.htm', false, '', ['page.css'])">Load Content 2</a>
</script>

JavaScriptBank 05-30-2010 07:23 PM
Helpful JavaScript resources for Designers
 
Web Design - a task that requires the creativity and a lot of time, to create the high quality products. However, in the environment of modern web nowadays, the Internet produced a lot of libraries, u... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 06-04-2010 10:58 PM
LCD Digital Clock
 
This digital clock JavaScript code attempts to parody that cool 'glowing in the dark night' look of a LCD clock watch by its interface. LCD displays the ... 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>
<!--
.styling{
background-color:black;
color:lime;
font: bold 15px MS Sans Serif;
padding: 3px;
}
-->
</style>
Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<script>
<!--
/*****************************************
* LCD Clock script- by Javascriptkit.com
*****************************************/

var alternate=0
var standardbrowser=!document.all&&!document.getElementById

if (standardbrowser)
document.write('<form name="tick"><input type="text" name="tock" size="6"></form>')

function show(){
if (!standardbrowser)
var clockobj=document.getElementById? document.getElementById("digitalclock") : document.all.digitalclock
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var dn="AM"

if (hours==12) dn="PM"
if (hours>12){
dn="PM"
hours=hours-12
}
if (hours==0) hours=12
if (hours.toString().length==1)
hours="0"+hours
if (minutes<=9)
minutes="0"+minutes

if (standardbrowser){
if (alternate==0)
document.tick.tock.value=hours+" : "+minutes+" "+dn
else
document.tick.tock.value=hours+"  "+minutes+" "+dn
}
else{
if (alternate==0)
clockobj.innerHTML=hours+"<font color='lime'>&nbsp;:&nbsp;</font>"+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
else
clockobj.innerHTML=hours+"<font color='black'>&nbsp;:&nbsp;</font>"+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
}
alternate=(alternate==0)? 1 : 0
setTimeout("show()",1000)
}
window.onload=show

//-->
</script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<span id="digitalclock" class="styling"></span>

JavaScriptBank 06-08-2010 10:29 AM
10 Tiny JavaScript Snippets for Good Beginners
 
Yes, as the title of this JavaScript tutorial said, these JavaScript tips and tricks are so tiny and simple for operating, but sometimes we (web developers and web programmers/coders) forget about the... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 06-17-2010 09:04 AM
Currency Format script
 
This JavaScript accepts a number or string and formats it like U.S. currency. Adds the dollar sign, rounds to two places past the decimal, adds place holding zeros, and comm... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript
Code:
<SCRIPT LANGUAGE="JavaScript">
// Cyanide_7 (leo7278@hotmail.com) | http://www7.ewebcity.com/cyanide7

<!-- Begin
function formatCurrency(num) {
num = num.toString().replace(/\$|\,/g,'');
if(isNaN(num))
num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();
if(cents<10)
cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
num = num.substring(0,num.length-(4*i+3))+','+
num.substring(num.length-(4*i+3));
return (((sign)?'':'-') + '$' + num + '.' + cents);
}
//  End -->
</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 name=currencyform>
Enter a number then click the button: <input type=text name=input size=10 value="1000434.23">
<input type=button value="Convert" onclick="this.form.input.value=formatCurrency(this.form.input.value);">
<br><br>
or enter a number and click another field: <input type=text name=input2 size=10 value="1000434.23" onBlur="this.value=formatCurrency(this.value);">
</form>
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->

JavaScriptBank 06-18-2010 07:26 PM
Rich Content JavaScript DOMTooltips
 
Are you looking for a JavaScript tooltip which can make your additional content become more beautiful when the mouse is over it, for your anchors? Then this is a JavaScript you should try, <b>DOMToolt... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Place HTML below in your BODY section
HTML
Code:
<link rel="stylesheet" href="domtooltips.css" type="text/css" />
<script src="domtooltips.js" type="text/javascript"></script>

<p>Domtooltips is created by <a href="http://rubensargsyan.com/" target="_blank"><span class="domtooltips" title="Ruben Sargsyan is a web developer from Yerevan, Armenia.">Ruben Sargsyan</span></a>.</p>
<p><span class="domtooltips" title="This is the logo of Ruben Sargsyan's personal website."><img src="logo.jpg" width="190" height="160" alt="Logo"></span></p>

<script type="text/javascript"> load_domtooltips(); </script>
Step 2: downloads
Files
domtooltips.css
domtooltips.js

JavaScriptBank 06-20-2010 08:54 PM
10 Tiptop Animations with JavaScript Framework
 
The JavaScript-based movement effects, animations, in your Web applications, will become more eye-catching, smoothing and beautiful when they use the powerful JavaScript frameworks to manage and proce... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 06-25-2010 06:06 AM
Make a JavaScript Countdown Timer in OOP
 
JavaScript Countdown Timer is the type of JavaScript code presented on JavaScriptBank.com; and you can find many good scripts as you want; but this JavaScript countdown timer is new on... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 06-28-2010 08:49 PM
Countdown Timer 2
 
This countdown script prints directly to the page, displaying the time left in minutes and seconds. The time duration can be set in the ... 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>
.timeClass {
  font-family:arial,verdana,helvetica,sans-serif;
  font-weight:normal;
  font-size:10pt;
}
</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>
/*
        Created by: Sandeep Gangadharan
        Web Site: http://www.sivamdesign.com/
*/

var sec = 30;  // set the seconds
var min = 02;  // set the minutes

function countDown() {
  sec--;
  if (sec == -01) {
    sec = 59;
    min = min - 1;
  } else {
  min = min;
  }
if (sec<=9) { sec = "0" + sec; }
  time = (min<=9 ? "0" + min : min) + " min and " + sec + " sec ";
if (document.getElementById) { theTime.innerHTML = time; }
  SD=window.setTimeout("countDown();", 1000);
if (min == '00' && sec == '00') { sec = "00"; window.clearTimeout(SD); }
}

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() {
  countDown();
});

</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:
<span id="theTime" class="timeClass"></span>
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->

JavaScriptBank 07-01-2010 08:37 PM
JavaScript Word Clock: Spell the Time
 
This is most excellent JavaScript clock on the web page I ever see, although this is 5 minutes interval JavaScript clock but it has a very nice design and very unique performance: writing the time in ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Use CSS code below for styling the script
CSS
Code:
<style>
        body {
            background-color: #111;
        }
        div#clock {
            font-size: 50px;
            font-family: monospace;
            color: #222;
            text-align: center;
        }
       
        .lightup {
            color: #EEE;
        }
       
        .seclightup {
            color: #EEE;
        }
       
        .gumuz {
            color: #333;
        }
    </style>
Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("jquery", "1.3.2");   
        google.setOnLoadCallback(function() {
            function render_time(classes) {
                // reset
                $('span').removeClass('lightup');
                //toggle_sec();
               
                for (var i in classes) {
                    $(classes[i]).addClass('lightup');
                }
            }
           
            function toggle_sec() {               
                if ($('.sec').hasClass('seclightup')) {
                    $('.sec').removeClass('seclightup')
                } else {
                    $('.sec').addClass('seclightup')
                }
            }
           
            function check_time() {
                var classes = ['.it_is']
               
                toggle_sec();
               
                var date = new Date();
                var hours = date.getHours()%12;
                if (hours==0) hours = 12;
                var minutes = date.getMinutes()-(date.getMinutes()%5);
                if (date.getMinutes()%5 > 2) minutes = minutes + 5;
                if (minutes == 60) { minutes = 0; hours = hours+1;}
               
                // stupid switch logic...
                if (minutes == 0) {
                    // o'clock!
                    classes.push('.'+hours);
                    classes.push('.oclock');
                } else if (minutes == 30) {
                    // half past
                    classes.push('.'+hours);
                    classes.push('.half');
                    classes.push('.past');
                } else if (minutes == 15) {
                    // quarter past
                    classes.push('.'+hours);
                    classes.push('.past');
                    classes.push('.quarter');
                } else if (minutes == 45) {
                    // quarter to
                    if (hours==12) hours = 0;
                    classes.push('.'+(hours+1));
                    classes.push('.quarter');
                    classes.push('.to');
                } else if (minutes < 30) {
                    // X past
                    classes.push('.'+hours);
                    classes.push('.'+minutes+'to');
                    classes.push('.past');
                    classes.push('.minutes');
                } else if (minutes > 30) {
                    // X to
                    if (hours==12) hours = 0;
                    classes.push('.'+(hours+1));
                    classes.push('.'+(60-minutes)+'to');
                    classes.push('.to');
                    classes.push('.minutes');
                }
               
                render_time(classes);
               
            }
           
            setInterval(check_time, 1000);
      });
</script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<div id="clock">
        <span class="it_is lightup">it</span>r<span class="it_is lightup">is</span>u<span class="half">half</span><span class="10to 10past">ten</span><br>
        <span class="quarter">quarter</span><span class="20to 25to lightup">twenty</span><br>

        <span class="25to 5to">five</span>q<span class="minutes lightup">minutes</span>t<br>
        <span class="past lightup">past</span>gumuz<span class="to">to</span>ne<br>
        <span class="1">one</span>n<span class="2">two</span>z<span class="3">three</span><br>

        <span class="4">four</span><span class="5">five</span><span class="7">seven</span><br>
        <span class="6">six</span><span class="8 lightup">eight</span>y<span class="9">nine</span><br>
        <span class="10">ten</span><span class="11">eleven</span><span class="sec">♥</span>sec<br>

        <span class="12">twelve</span><span class="oclock">o'clock</span><br>
    </div>

JavaScriptBank 07-05-2010 07:17 PM
Create Topic Selectors like Digg Style
 
If you joined Digg, certainly you had known about the multi-topic navigation menu for choosing of this webs... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 07-06-2010 07:29 PM
5 Good and Small JavaScript Tips and Tricks
 
If you are a professional programmer or senior coder to one or many programming languages, certainly we will always have some little tips and tricks to solve the some problems better, and the web Java... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 07-11-2010 11:26 PM
30+ Super High Cool Sites with Amazing JavaScript effects
 
This JavaScript article shows you a list of 30 super high cool websites have great amazing JavaScript effects. These websites have an unique layout, along with a clever combination of awesome JavaScri... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 07-13-2010 07:36 PM
JavaScript DHTML Dock Carousel Using Mootools
 
This is an awesome navigation menu with an unique and eye-catching design, operated by the famous JavaScript framework, ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Place CSS below in your HEAD section
CSS
Code:
<link rel='stylesheet' href='slider.css' type='text/css' />
Step 2: Use JavaScript code below to setup the script
JavaScript
Code:
<script src="mootools-12-core.js" type="text/javascript"></script>
<script src="mootools-12-more.js" type="text/javascript"></script>
<script src="dock.js" type="text/javascript"></script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<div id="stage-container">
                <p class="text">
                        <img src="text.gif" alt="image" width="111" height="24" />
                </p> <br clear="all"/>
               
                <a href="#" id="moveleft">Left</a>

                <a href="#" id="moveright">Right</a>
               
                <div id="wrapper">
                        <ul id="items">

                                <li><a><img class="icon" src="1.png" alt="image" width="32" height="32" /></a></li>
                                <li><a><img class="icon" src="2.png" alt="image" width="32" height="32" /></a></li>
                                <li><a><img class="icon" src="3.png" alt="image" width="32" height="32" /></a></li>
                                <li><a><img class="icon" src="4.png" alt="image" width="32" height="32" /></a></li>
                                <li><a><img class="icon" src="5.png" alt="image" width="32" height="32" /></a></li>

                                <li><a><img class="icon" src="10.png" alt="image" width="32" height="32" /></a></li>
                                <li><a><img class="icon" src="6.png" alt="image" width="32" height="32" /></a></li>
                                <li><a><img class="icon" src="7.png" alt="image" width="32" height="32" /></a></li>
                                <li><a><img class="icon" src="8.png" alt="image" width="32" height="32" /></a></li>
                                <li><a><img class="icon" src="9.png" alt="image" width="32" height="32" /></a></li>
                                                                       
                        </ul>
                </div>
        </div>
Step 4: downloads
Files
1.png
10.png
2.png
3.png
4.png
5.png
6.png
7.png
8.png
9.png
dock.js
left.gif
mootools-12-core.js
mootools-12-more.js
right.gif
slider.css
stage2.jpg
text.gif

JavaScriptBank 07-16-2010 08:57 PM
Super Awesome and Amazing MooTools Site Examples
 
MooTools - a JavaScript framework designed mainly to support for the animation, motion, movement, ... of the objects ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 07-19-2010 07:42 PM
12 Awesome and Creative JavaScript Games you should try
 
Nowadays, with the rapid growth of superior technology (innovation, improvement of programming languages, power of processing), even the technical (processor and performance of computer are increasing... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 07-21-2010 05:04 AM
Web based JavaScript Media 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 at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Copy & Paste JavaScript code 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>

JavaScriptBank 07-27-2010 09:23 PM
jsDatePick - A Simple Free Javascript Date Picker
 
jsDatePick is a free JavaScript application that uses DOM techniques to create the date pickers on your web page. Within minutes, you can have a cool popup date pic... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 07-27-2010 09:56 PM
Highlight your PHP and JavaScript codes with PHP highlight_string
 
Highlighting the source code of your applications on the web pages is an interesting job to any programmer/coder, for showing the simpler look out to all audiences. And this feature has also been supp... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 07-30-2010 10:05 PM
Five Tricks for Improving JavaScript Security
 
This JavaScript tutorial gives you 5 helpful guides to improve the JavaScript security troubles for JavaScript applications, web ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 08-04-2010 05:19 AM
Super Cool and Great Button Resources and Tutorials with CSS3
 
CSS3 - a higher CSS standard for designing HTML layout on web applications - is gradually being used widely. CSS3 is gradually affirming the position and benefit to CSS2... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 08-08-2010 08:29 PM
10 Small Javascript Tricks You Should Master
 
In this JavaScript tutorial article, the author provides ten small JavaScript tips and tricks, mainly aimed for beginner and intermediate Javascript developers; also... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 08-12-2010 08:36 PM
Best Ways to Preload Image JavaScript with CSS, AJAX
 
Surfing time - is the loading time in other hand - is the big problem to all websites, site owners. And now, it's one of important factor to Google for ranking our URLs. For the big sites have a lot o... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 08-12-2010 09:30 PM
Using JavaScript to Change Your Web Page Font Size
 
In this short JavaScript tutorial, <i>Nurani</i> guides you how to use JavaScript in changing the web page's font size. Maybe the JavaScripts to change font size are not new things on ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Use JavaScript code below to setup the script
JavaScript
Code:
<script type="text/javascript">
var min=8;
var max=18;
function zoominLetter() {
  var p = document.getElementsByTagName('p');
  for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
        var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
        var s = 12;
      }
      if(s!=max) {
        s += 1;
      }
      p[i].style.fontSize = s+"px"
  }
}
function zoomoutLetter() {
  var p = document.getElementsByTagName('p');
  for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
        var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
        var s = 12;
      }
      if(s!=min) {
        s -= 1;
      }
      p[i].style.fontSize = s+"px"
  }
}
</script>
Step 2: Copy & Paste HTML code below in your BODY section
HTML
Code:
<a href="javascript:zoominLetter();">A</a>
<a href="javascript:zoomoutLetter();">a</a>

JavaScriptBank 08-14-2010 12:27 PM
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


How to setup

JavaScriptBank 08-16-2010 08:32 PM
Helpful JavaScript Time and Date Picker, Plugins for Frameworks
 
Do you need a beautiful JavaScript time/date picker for your web blog? Just spend a little of time to view these JavaScript time and date pickers in action, maybe you wi... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 08-16-2010 09:05 PM
Incredible and Amazing 3D JavaScript Canvas Enginges
 
Did you ever imagine the JavaScript programming language could render fantastic, incredible out of 3D effects, animations? Let check out these JavaScript codes presented in this free JavaScript articl... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 08-20-2010 08:56 PM
Super Amazing jQuery Dynamic Navigation Menu Solutions
 
In the world of jQuery framework, there are many design miracles made by web developers, web designers that attract the web audiences. One of these jQuery d... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 08-20-2010 09:35 PM
JavaScript Try and Catch Statement in Advance
 
Through this free JavaScript article tutorial, <i>Louis</i> gives you a detailed viewpoint about <code>Try</code> and <code>Catch</code> statement in the JavaScript wen programming language; by specif... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 08-25-2010 07:26 PM
Great Powered Resources for 7 Helpful jQuery Plug-ins
 
This free JavaScript article provides a list of over 20 great resources for jQuery add-ons, such as: jQuery AJAX plugin, Paralax, jQuery UI plugin, jQuery plugin form, jQuery Background tricks, jQuery... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 08-27-2010 07:38 PM
Top 10 Free Web Chat box Plug-ins and Add-ons
 
If you want to make your website more interactive and attract thousands of visitors on a regular basis, then adding an online chat box to the website is perhaps one ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 09-08-2010 07:32 PM
jsClock: Featured Digital Clock JavaScript
 
If you're needing a simple digital clock that is updating automatically and takes directly the time from the server, also you want to show the time in other count... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


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
*/
.clock{
        cursor:pointer;
        padding:5px 5px 5px 5px;
        margin:5px 0 5px 0;
        width:70px;
        -webkit-border-bottom-right-radius: 4px;
        -webkit-border-bottom-left-radius: 4px;
        -webkit-border-top-right-radius: 4px;
        -webkit-border-top-left-radius: 4px;
        -moz-border-radius-bottomright: 4px;
        -moz-border-radius-bottomleft: 4px;
        -moz-border-radius-topright: 4px;
        -moz-border-radius-topleft: 4px;
        text-align:center;
        font-weight: bold;
        font-family: arial;
}


#clock {
        background-color:#000000;
        color:#00CC66;
}

#reloj {
        background-color:#999999;
        color:#FFFFFF;
}


#rellotje {
        background-color:#237ab2;
        color:#FFFFFF;
}
</style>
Step 2: Use JavaScript code below to setup the script
JavaScript
Code:
<script type="text/javascript">
/*
    This script downloaded from www.JavaScriptBank.com
    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
function moveClock(idClock,startTime){//move given clock
        var timeout=1000;//miliseconds to repeat the function

        if ( startTime === undefined ) {//just take the browser time
                    rightNow = new Date();
                hour = rightNow.getHours();
                minute = rightNow.getMinutes();
                second = rightNow.getSeconds();               
        }       
        else{//starttime set
                rightNow = startTime.split(':',3);
                hour = parseInt(rightNow[0],10);
                minute =  parseInt(rightNow[1],10);
                second =  parseInt(rightNow[2],10);
                if (second==59){
                        if (minute==59){
                                if (hour==23) hour=0;       
                                else hour++;
                                minute=0;
                        }else minute++;
                        second=0;
                }else second++;
        }

        if (minute<10) minute= "0" + minute;
        if (second<10) second= "0" + second;

        currentTime=hour + ":" + minute + ":" +second;// tim to return
        document.getElementById(idClock).innerHTML = currentTime;//tim for the HTML element

        //recursivity
        if (startTime===undefined) setTimeout("moveClock('"+idClock+"')",timeout);//browser time
        else setTimeout("moveClock('"+idClock+"','"+currentTime+"')",timeout);//set time
               
}
</script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
Normal clock using browser time:

<div id="clock" class="clock">clock</div>moveClock("clock");<br /><br />
<hr>
Clock using server time:
<div id="reloj" class="clock">reloj</div>  moveClock("reloj","< ?php echo date("G:i:s");? >");<br /><br />
<hr>
Clock with manual time:
<div id="rellotje" class="clock">rellotje</div> moveClock("rellotje","23:58:56");<br /><br />
<hr>

<script  type='text/javascript'>
moveClock("clock");
moveClock("reloj","2:23:25");
moveClock("rellotje","23:58:56");
</script>

JavaScriptBank 09-09-2010 07:41 PM
jsPDF: Generating your PDF Web Page Documents using JavaScript
 
<b>jsPDF</b> is an open-source JavaScript library written by <i>James</i>, this tool allow us generate PDF web page documents in server-side and client-side by using nothing... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript
Code:
<script type="text/javascript" src="base64.js"></script>
<script type="text/javascript" src="sprintf.js"></script>
<script type="text/javascript" src="jspdf.js"></script>

<script type="text/javascript">

function demo1() {
        var doc = new jsPDF();
        doc.text(20, 20, 'Hello world!');
        doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
        doc.addPage();
        doc.text(20, 20, 'Do you like that?');
       
        // Output as Data URI
        doc.output('datauri');
}

function demo2() {
        var doc = new jsPDF();
        doc.setFontSize(22);
        doc.text(20, 20, 'This is a title');
       
        doc.setFontSize(16);
        doc.text(20, 30, 'This is some normal sized text underneath.');       
       
        // Output as Data URI
        doc.output('datauri');
}

function demo3() {
        var doc = new jsPDF();
        doc.text(20, 20, 'This PDF has a title, subject, author, keywords and a creator.');
       
        // Optional - set properties on the document
        doc.setProperties({
                title: 'Title',
                subject: 'This is the subject',               
                author: 'James Hall',
                keywords: 'generated, javascript, web 2.0, ajax',
                creator: 'MEEE'
        });
       
        // Output as Data URI
        doc.output('datauri');
}

function demo4() {       
        var name = prompt('What is your name?');
        var multiplier = prompt('Enter a number:');
        multiplier = parseInt(multiplier);

        var doc = new jsPDF();
        doc.setFontSize(22);       
        doc.text(20, 20, 'Questions');
        doc.setFontSize(16);
        doc.text(20, 30, 'This belongs to: ' + name);
       
        for(var i = 1; i <= 12; i ++) {
                doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ___');
        }
       
        doc.addPage();
        doc.setFontSize(22);
        doc.text(20, 20, 'Answers');
        doc.setFontSize(16);
       
        for(var i = 1; i <= 12; i ++) {
                doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ' + (i * multiplier));
        }       
        doc.output('datauri');
       
}

</script>
Step 2: Copy & Paste HTML code below in your BODY section
HTML
Code:
<h2>Simple Two-page Text Document</h2>
<pre>var doc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
doc.addPage();
doc.text(20, 20, 'Do you like that?');

// Output as Data URI
doc.output('datauri');</pre>
<a href="javascript:demo1()">Run Code</a>

<h2>Different font sizes</h2>
<pre>var doc = new jsPDF();
doc.setFontSize(22);
doc.text(20, 20, 'This is a title');

doc.setFontSize(16);
doc.text(20, 30, 'This is some normal sized text underneath.');       

// Output as Data URI
doc.output('datauri');</pre>
<a href="javascript:demo2()">Run Code</a>


<h2>Adding metadata</h2>
<pre>var doc = new jsPDF();
doc.text(20, 20, 'This PDF has a title, subject, author, keywords and a creator.');

// Optional - set properties on the document
doc.setProperties({
        title: 'Title',
        subject: 'This is the subject',               
        author: 'James Hall',
        keywords: 'generated, javascript, web 2.0, ajax',
        creator: 'MEEE'
});

// Output as Data URI
doc.output('datauri');</pre>
<a href="javascript:demo3()">Run Code</a>


<h2>Example of user input</h2>
<pre>var name = prompt('What is your name?');
var multiplier = prompt('Enter a number:');
multiplier = parseInt(multiplier);

var doc = new jsPDF();
doc.setFontSize(22);       
doc.text(20, 20, 'Questions');
doc.setFontSize(16);
doc.text(20, 30, 'This belongs to: ' + name);

for(var i = 1; i <= 12; i ++) {
        doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ___');
}

doc.addPage();
doc.setFontSize(22);
doc.text(20, 20, 'Answers');
doc.setFontSize(16);

for(var i = 1; i <= 12; i ++) {
        doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ' + (i * multiplier));
}       
doc.output('datauri');</pre>
<a href="javascript:demo4()">Run Code</a>
Step 3: Download files below
Files
base64.js
jspdf.js
sprintf.js

JavaScriptBank 09-10-2010 07:52 PM
Remove an Element in JavaScript Array
 
This free JavaScript snippet guides you how to remove an element in JavaScript array, by the value of element or its index. Very useful and helpful for coding and programming in JavaScript. Indexes in... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup


All times are GMT -5. The time now is 02:02 PM.
Page 1 of 4 1 23 Last »
Show 40 post(s) from this thread on one page

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
HTML Help provided by HTML Help Central.