Computer Forums
Page 1 of 14 1 2311 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


All times are GMT -5. The time now is 10:18 AM.
Page 1 of 14 1 2311 Last »
Show 40 post(s) from this thread on one page

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