Free JavaScript codes

Use this JavaScript instead of frames. When a visitor clicks on a specific link, the content of that link is inserted into the page without a refresh. When a page doesn... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...ation-menu.jpg
Demo: JavaScript AJAX Navigation Menu

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

Code:

---

<script language="javascript">

// Created by: Michael :: http://www.posters-bestellen.nl

var please_wait = null;

function open_url(url, target) {
        if ( ! document.getElementById) {
                  return false;
        }

        if (please_wait != null) {
                  document.getElementById(target).innerHTML = please_wait;
        }

        if (window.ActiveXObject) {
                  link = new ActiveXObject("Microsoft.XMLHTTP");
        } else if (window.XMLHttpRequest) {
                  link = new XMLHttpRequest();
        }

        if (link == undefined) {
                  return false;
        }
        link.onreadystatechange = function() { response(url, target); }
        link.open("GET", url, true);
        link.send(null);
}

function response(url, target) {
        if (link.readyState == 4) {
                document.getElementById(target).innerHTML = (link.status == 200) ? link.responseText : "Ooops!! A broken link! Please contact the webmaster of this website ASAP and give him the fallowing errorcode: " + link.status;
        }
}

function set_loading_message(msg) {
        please_wait = msg;
}
</script>

---

Step 2: Place HTML below in your BODY section
HTML

Code:

---

<script type="text/javascript">
<!--
/* This script and many more are available free online at
Created by: Michael :: http://www.posters-bestellen.nl */

  set_loading_message("Please wait while the page is opening....");
//-->

</script>
<table>
<tr>
<td valign=top width=150>
<H5>My Navagation links</H5>
<a href="javascript:void(0)" onclick="open_url('page-1.html','my_site_content');">
Go to page 1</a><br>
<a href="javascript:void(0)" onclick="open_url('page-2.html','my_site_content');">
Go to page 2</a><br>
<a href="javascript:void(0)" onclick="open_url('page-3.html','my_site_content');">
Go to page 3</a><br>
<a href="javascript:void(0)" onclick="open_url('page-4.html','my_site_content');">
Go to page 4</a><br>

<a href="javascript:void(0)" onclick="open_url('xxxx.html','my_site_content');">
Broken Link</a><br>
</td>
<td valign=top>
<div id="my_site_content">
</div>
</td>
</tr>
</table>

---

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

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

http://www.javascriptbank.com/javasc...tion-image.jpg
Demo: JavaScript DHTML Fading Animation Image

How to setup

Step 1: Use JavaScript code below to setup the script
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: Copy & Paste HTML code 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 Bookmark Page script - JavaScript Color Wheel - JavaScript Image slideshow

This JavaScript code is the new & unique solution to create a countdown timer on your web pages; it's really new in the look of web developers and users. This JavaScript countdown timer is very ea... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...ion-in-oop.jpg
Demo: JavaScript JavaScript Countdown Timer solution in OOP

How to setup

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

Code:

---

<style type="text/css">
    body{
      font-family:arial,sans-serif;
      color:#000;
      background:#fff;
      text-align:center;
    }
    input{
      font-size:20px;
      padding:5px;
      border:none;
      background:#69c;
      margin:0 10px;
    }
    input#c[disabled]{
        background:#eee;
    }
    #display{
        font-weight:bold;
        margin:20px auto;
        width:720px;
        font-size:350px;
    }
    .final{
      color:#c00;
    }
    .over{
      color:#c00;
      text-decoration:blink;
    }
    #preferences{
      margin-top:.5em;
      background:#ccc;
      border-top:1px solid #999;
      padding:2em;
      font-size:1em;
      text-align:left;
    }
    #preferences p {
      width:49%;
      float:left;
      padding:5px 0;
      margin:0;
      position: absolute;
      top: 0px;
    }
    #preferences input{
      font-size:20px;
      padding:5px;
      border:1px solid #999;
      background:#fff;
      margin:0 2px;
    }
    #preferences label{
      padding-top:10px;
      width:30%;
      float:left;
      display:block;
      padding-right:1em;
    }
    #preferences input#set{
      font-size:20px;
      padding:5px;
      width:600px;
      margin:0 auto;
      border:none;
      background:#69c;
      clear:both;
      display:block;
    }
    #preferences input#set:hover{
      background:#ffc;
    }
  </style>

---

Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript

Code:

---

<script>
    countdown = function(){
      /*
        configuration of script, properties with
        values and labels will become form elements!
      */
      var cfg = {
        displayID:'display',
        preferencesID:'preferences',
        finalClass:'final',
        overClass:'over',
        initialText:{
          value:'2:00',
          label:'Initial Text'
        },
        seconds:{
          value:2*60,
          label:'Time in Seconds'
        },
        finalCountdown:{
          value:30,
          label:'Warning start'
        },
        pauseLabel:{
        value:'pause',
        label:'Pause Text'
        }, 
        resumeLabel:{
          value:'resume',
          label:'Resume Text'
        },
        resetLabel:{
          value:'reset',
          label:'Reset Text'
        },
        startLabel:{
          value:'start',
          label:'Start Text'
        }
      };

      /* presets */
      var seconds = cfg.seconds.value;
      var interval = null;
      var secs = null;
      var startTime = null;
      var realsecs = null;

      /* create display */
      var display = document.createElement('div');
      display.id = cfg.displayID;
      document.body.appendChild(display);
      display.innerHTML = cfg.initialText.value;

      /* create form with buttons */
      var form = document.createElement('form');
      document.body.appendChild(form);
      var startButton = createInput('button','startButton',cfg.startLabel.value);
      startButton.onclick = startCountDown;
      form.appendChild(startButton);
      var pauseButton = createInput('button','pauseButton',cfg.pauseLabel.value);
      pauseButton.onclick = pauseCountDown;
      pauseButton.disabled = true;
      form.appendChild(pauseButton);
      var resetButton = createInput('button','resetButton',cfg.resetLabel.value);
      resetButton.onclick = resetCountDown;
      form.appendChild(resetButton);

      /* create preferences panel */
      var preferencesPanel = document.createElement('div');
      preferencesPanel.id = cfg.preferencesID;
      preferencesPanel.style.display = 'none';
      var firstForm = document.getElementsByTagName('form')[0];
      firstForm.appendChild(preferencesPanel);
      var button = createInput('button',null,'preferences');
      button.onclick = togglePreferences;
      preferencesPanel.parentNode.insertBefore(button,preferencesPanel);
      /* create preferences form */
      var prefs = [];
      for (var i in cfg){
        if(cfg[i].value){
          prefs.push(i);
          var p = document.createElement('p');
          p.appendChild(createLabel(cfg[i].label,i));
          p.appendChild(createInput('text',i,cfg[i].value));
          preferencesPanel.appendChild(p);
        }
      }
      var setPreferencesButton = createInput('button','set','set');
      preferencesPanel.appendChild(setPreferencesButton);
      setPreferencesButton.onclick = setPreferences;

      function setPreferences(){
        for(var i=0,j=prefs.length;i<j;i++){
          cfg[prefs[i]].value = document.getElementById(prefs[i]).value;
        }
        resetCountDown();
        preferencesPanel.style.display = 'none';
      }
      function togglePreferences(){
        preferencesPanel.style.display = preferencesPanel.style.display === 'none' ? 'block' : 'none';
      }
      function startCountDown(){
        pauseButton.disabled = false;
        startButton.disabled = true;
        startTime = new Date();
        interval = setInterval(countdown.doCountDown, 100);
      }
      function doCountDown(){
        realsecs = Math.ceil(seconds - (new Date() - startTime) / 1000);
        var mins = parseInt(realsecs / 60);
        var secs = realsecs % 60;
        display.innerHTML = parseInt(mins) + ':'+ (secs < 10 ? '0' : '') +(secs % 60);
        display.className = (realsecs > cfg.finalCountdown.value) ? '' : cfg.finalClass;
        if(realsecs===0){
          display.className = cfg.overClass;
          window.clearTimeout(interval);
        }
      }
      function resetCountDown(){
        window.clearTimeout(interval);
        startButton.disabled = false;
        pauseButton.disabled = true;
        display.innerHTML = cfg.initialText.value;
        interval = null;
        seconds = cfg.seconds.value;
        pauseButton.value = cfg.pauseLabel.value;
        resetButton.value = cfg.resetLabel.value;
        startButton.value = cfg.startLabel.value;
        display.className = '';
      }
      function pauseCountDown(){
        if(pauseButton.value === cfg.pauseLabel.value){
          seconds = realsecs;
          window.clearTimeout(interval);
          pauseButton.value = cfg.resumeLabel.value;
        } else {
          startCountDown();
          pauseButton.value = cfg.pauseLabel.value;
        }
      }
      function createInput(type,id,value){
        var input = document.createElement('input');
        input.value = value;
        input.type = type;
        if(id){
          input.id = id;
        }
        return input;
      }
      function createLabel(text,id){
        var label = document.createElement('label');
        label.appendChild(document.createTextNode(cfg[id].label));
        label.htmlFor = id;
        return label;
      }
      return {doCountDown:doCountDown};
    }();
  </script>

---

Javascript Music Player - Random Text Generator - Floating Image Script

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

http://www.javascriptbank.com/javasc...tal-banner.jpg
Demo: JavaScript Streaming Horizontal Banner

How to setup

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

---

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

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

http://www.javascriptbank.com/javasc...nu-onclick.jpg
Demo: JavaScript Expanding Navigation Menu onClick

How to setup

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

---

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

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

http://www.javascriptbank.com/javasc...xt-trailer.jpg
Demo: JavaScript Waving Text Trailer

How to setup

Step 1: Copy & Paste CSS code 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: Use JavaScript code below to setup the script
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: Place HTML below in your BODY section
HTML

Code:

---

<BODY onload=setup()>
</body>

---

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

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

http://www.javascriptbank.com/javasc...s-and-lips.jpg
Demo: JavaScript Trailing Kisses and Lips

How to setup

Step 1: Place CSS below in your 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: Place JavaScript 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: Copy & Paste HTML code 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: downloads
Files
lips_small.gif
small_heart.gif

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

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

http://www.javascriptbank.com/javasc...-animation.jpg
Demo: JavaScript Slideshow with zoom-in-zoom-out-animation

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
        -->

---

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

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

http://www.javascriptbank.com/javasc...ge-fetcher.jpg
Demo: JavaScript AJAX Net Page Fetcher

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>

---

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

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

http://www.javascriptbank.com/javasc...-designers.jpg
Demo: JavaScript Helpful JavaScript resources for Designers

How to setup

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