Page 7 of 17 FirstFirst ... 56789 ... LastLast
Results 61 to 70 of 161

Thread: Free JavaScript codes

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

    AJAX Navigation Menu

    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


    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>






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

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






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

    JavaScript Countdown Timer solution in OOP

    This JavaScript code is the new &amp; 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


    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>






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

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






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

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






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

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






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

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







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

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






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

    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>






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

    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







Page 7 of 17 FirstFirst ... 56789 ... LastLast

Similar Threads

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

Tags for this Thread

Bookmarks

Posting Permissions

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