|
Scripts and Tools Share your free scripts , tools , icons, fontz, screen savers , etc here. |
|
Thread Tools | Display Modes |
#61
|
|||
|
|||
AJAX Net Page Fetcher
This [Only Registered users can see links . Click Here To Register...] 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</... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Place JavaScript 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> 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> |
#62
|
|||
|
|||
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... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup |
#63
|
|||
|
|||
LCD Digital Clock
This digital clock [Only Registered users can see links . Click Here To Register...] attempts to parody that cool 'glowing in the dark night' look of a LCD clock watch by its interface. [Only Registered users can see links . Click Here To Register...] displays the ... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Place CSS below in your HEAD section CSS Code:
<style> <!-- .styling{ background-color:black; color:lime; font: bold 15px MS Sans Serif; padding: 3px; } --> </style> 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'> : </font>"+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>" else clockobj.innerHTML=hours+"<font color='black'> : </font>"+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>" } alternate=(alternate==0)? 1 : 0 setTimeout("show()",1000) } window.onload=show //--> </script> HTML Code:
<span id="digitalclock" class="styling"></span> |
#64
|
|||
|
|||
I have two questions I have to ask before I can really give a proper answer for this one.
First, what format do you want the output in? Do you want a TABLE? Do you want them in DIVs. Do you want them output as just images with a simple BR to seperate the rows. |
#65
|
|||
|
|||
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... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup |
#66
|
|||
|
|||
Double fading Image Scroller 2.03
Image scroller with unique fade zones. Add a comment and [Only Registered users can see links . Click Here To Register...] to each picture. Easy configuration of images, font-attributes and fade zones.... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Copy & Paste HTML code below in your BODY section HTML Code:
<SCRIPT> // Image Scroller 2.03 with double-fade effect // URLs of slides var slideurl=new Array("logojs.gif","photo1.jpg","photo2.jpg","photo3.jpg") // comments displayed below the slides var slidecomment=new Array("JavaScriptBank.com","JavaScriptBank.com","JavaScriptBank.com","JavaScriptBank.com") // links for each slide var slidelink=new Array("http://JavaScriptBank.com","http://JavaScriptBank.com","http://JavaScriptBank.com","http://JavaScriptBank.com") // targets of the links. Allowed values: "_parent", "_top", "_blank", "_self" var slidetarget=new Array("_blank","_blank","_blank","_blank") // the width of the slideshow (pixels) var scrollerwidth=200 // the height of the slideshow (pixels) var scrollerheight=200 // width of the transparent zones (pixels) var translayerszone=40 // font-attributes for the comments var slidefont="Arial" var slidefontcolor="blue" var slidefontsize="2" // background-color of webpage var pagebgcolor="#FFFFFF" // do not edit below this line var translayerswidth=1 var translayersmax=Math.floor(translayerszone/translayerswidth) var translayersleftpos=0 var translayersopacity=100 var translayersfactor=100/translayersmax var translayerswidthall=translayersmax*translayerswidth var allpicturewidth var distancepictopic=0 var scrollerleft=0 var scrollertop=0 var pause=20 var step=2 var newstep=step var clipleft,clipright,cliptop,clipbottom var i_picture=0 var timer var picturecontent="" var ns4=document.layers?1:0 var ns6=document.getElementById&&!document.all?1:0 var ie=document.all?1:0 var browserinfos=navigator.userAgent var opera=browserinfos.match(/Opera/) var preloadedimages=new Array() for (i=0;i<slideurl.length;i++){ preloadedimages[i]=new Image() preloadedimages[i].src=slideurl[i] } function init() { if (ie) { allpicturewidth=document.all.picturediv.offsetWidth document.all.picturediv.style.posTop=scrollertop document.all.picturediv.style.posLeft=scrollerleft+scrollerwidth clipleft=0 clipright=0 cliptop=0 clipbottom=scrollerheight document.all.picturediv.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" document.all.picturediv.style.visibility="visible" scrollpicture() } if (ns6) { allpicturewidth=document.getElementById('emptypicturediv').offsetWidth document.getElementById('picturediv').style.top=scrollertop document.getElementById('picturediv').style.left=scrollerleft+scrollerwidth clipleft=0 clipright=0 cliptop=0 clipbottom=scrollerheight document.getElementById('picturediv').style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" document.getElementById('picturediv').style.visibility="visible" scrollpicture() } if (ns4) { allpicturewidth=document.roof.document.picturediv.document.width document.roof.document.picturediv.top=scrollertop document.roof.document.picturediv.left=scrollerleft+scrollerwidth document.roof.document.picturediv.clip.left=0 document.roof.document.picturediv.clip.right=0 document.roof.document.picturediv.clip.top=0 document.roof.document.picturediv.clip.bottom=scrollerheight document.roof.document.picturediv.visibility="visible" scrollpicture() } } function scrollpicture() { if (ie) { if (document.all.picturediv.style.posLeft>=scrollerleft-allpicturewidth) { document.all.picturediv.style.posLeft-=step clipright+=step if (clipright>scrollerwidth) { clipleft+=step } document.all.picturediv.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" var timer=setTimeout("scrollpicture()",pause) } else { resetposition() } } if (ns6) { if (parseInt(document.getElementById('picturediv').style.left)>=scrollerleft-allpicturewidth) { document.getElementById('picturediv').style.left=parseInt(document.getElementById('picturediv').style.left)-step clipright+=step if (clipright>scrollerwidth) { clipleft+=step } document.getElementById('picturediv').style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" var timer=setTimeout("scrollpicture()",pause) } else { resetposition() } } if (ns4) { if (document.roof.document.picturediv.left>=scrollerleft-allpicturewidth) { document.roof.document.picturediv.left-=step document.roof.document.picturediv.clip.right+=step if (document.roof.document.picturediv.clip.right>scrollerwidth) { document.roof.document.picturediv.clip.left+=step } var timer=setTimeout("scrollpicture()",pause) } else { resetposition() } } } function onmsover() { step=0 } function onmsout() { step=newstep } function resetposition() { if (ie) { document.all.picturediv.style.posLeft=scrollerleft+scrollerwidth clipleft=0 clipright=0 document.all.picturediv.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" scrollpicture() } if (ns6) { allpicturewidth=document.getElementById('emptypicturediv').offsetWidth document.getElementById('picturediv').style.left=scrollerleft+scrollerwidth clipleft=0 clipright=0 document.getElementById('picturediv').style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" scrollpicture() } if (ns4) { document.roof.document.picturediv.left=scrollerleft+scrollerwidth document.roof.document.picturediv.clip.left=0 document.roof.document.picturediv.clip.right=0 scrollpicture() } } picturecontent="" picturecontent+="<table cellpadding=2 cellspacing=0>" picturecontent+="<tr>" for (i=0;i<=slideurl.length-1;i++) { picturecontent+="<td>" picturecontent+="<a href=""+slidelink[i]+"" target=""+slidetarget[i]+"" onMouseOver="javascript:onmsover()" onMouseOut="javascript:onmsout()">" picturecontent+="<img src=""+slideurl[i]+"" border=0></a>" picturecontent+="</td>" } picturecontent+="</tr>" picturecontent+="<tr>" for (i=0;i<=slideurl.length-1;i++) { picturecontent+="<td>" picturecontent+="<font face=""+slidefont+"" color=""+slidefontcolor+"" size="+slidefontsize+">" picturecontent+=slidecomment[i] picturecontent+="</font>" picturecontent+="</td>" } picturecontent+="</tr>" picturecontent+="</tr></table>" if (ie || ns6) { document.write('<div style="position:relative;width:'+scrollerwidth+'px;height:'+scrollerheight+'px;overflow:hidden">') document.write('<div id="picturediv" style="position:absolute;top:0px;left:0px;height:'+scrollerheight+'px;visibility:hidden">'+picturecontent+'</div>') if (ie && !opera) { for (i=0;i<=translayersmax;i++) { document.write('<span ID="trans'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;background-color:'+pagebgcolor+';filter:alpha(opacity='+translayersopacity+');overflow:hidden"> </span>') translayersleftpos+=translayerswidth translayersopacity-=translayersfactor } translayersleftpos=scrollerwidth-translayersleftpos for (ii=0;ii<=translayersmax;ii++) { document.write('<span ID="trans'+ii+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;background-color:'+pagebgcolor+';filter:alpha(opacity='+translayersopacity+');overflow:hidden"> </span>') translayersleftpos+=translayerswidth translayersopacity+=translayersfactor } } if (ns6 && !opera) { for (i=0;i<=translayersmax-1;i++) { document.write('<span ID="transleft'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;background-color:'+pagebgcolor+';-moz-opacity:'+translayersopacity/100+';overflow:hidden"> </span>') translayersleftpos+=translayerswidth translayersopacity-=translayersfactor if (translayersopacity<0) {translayersopacity=0.001} } translayersleftpos=scrollerwidth-translayersleftpos translayersopacity=0.001 for (i=0;i<=translayersmax-1;i++) { document.write('<span ID="transright'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;background-color:'+pagebgcolor+';-moz-opacity:'+translayersopacity/100+';"> </span>') translayersleftpos+=translayerswidth translayersopacity+=translayersfactor } } document.write('</div>') document.write('<div id="emptypicturediv" style="position:absolute;top:0px;left:0px;height:'+scrollerheight+'px;visibility:hidden">'+picturecontent+'</div>') window.onload=init } if (ns4) { document.write('<ilayer name="roof" width='+scrollerwidth+' height='+scrollerheight+'>') document.write('<layer name="picturediv" width='+scrollerwidth+' height='+scrollerheight+' visibility=hide>'+picturecontent+'</layer>') document.write('</ilayer>') window.onload=init } </SCRIPT> |
#67
|
|||
|
|||
Currency Format script
This [Only Registered users can see links . Click Here To Register...] accepts a number or string and formats it like U.S. currency. Adds the dollar sign, rounds to two places past the decimal, adds place holding zeros, and comm... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Place JavaScript below in your HEAD section JavaScript Code:
<SCRIPT LANGUAGE="JavaScript"> // Cyanide_7 (leo7278@hotmail.com) | http://www7.ewebcity.com/cyanide7 <!-- Begin function formatCurrency(num) { num = num.toString().replace(/\$|\,/g,''); if(isNaN(num)) num = "0"; sign = (num == (num = Math.abs(num))); num = Math.floor(num*100+0.50000000001); cents = num%100; num = Math.floor(num/100).toString(); if(cents<10) cents = "0" + cents; for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++) num = num.substring(0,num.length-(4*i+3))+','+ num.substring(num.length-(4*i+3)); return (((sign)?'':'-') + '$' + num + '.' + cents); } // End --> </script> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com --> HTML Code:
<form name=currencyform> Enter a number then click the button: <input type=text name=input size=10 value="1000434.23"> <input type=button value="Convert" onclick="this.form.input.value=formatCurrency(this.form.input.value);"> <br><br> or enter a number and click another field: <input type=text name=input2 size=10 value="1000434.23" onBlur="this.value=formatCurrency(this.value);"> </form> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com --> |
#68
|
|||
|
|||
Rich Content JavaScript DOMTooltips
Are you looking for a JavaScript tooltip which can make your additional content become more beautiful when the mouse is over it, for your anchors? Then this is a JavaScript you should try, <b>DOMToolt... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Place HTML below in your BODY section HTML Code:
<link rel="stylesheet" href="domtooltips.css" type="text/css" /> <script src="domtooltips.js" type="text/javascript"></script> <p>Domtooltips is created by <a href="http://rubensargsyan.com/" target="_blank"><span class="domtooltips" title="Ruben Sargsyan is a web developer from Yerevan, Armenia.">Ruben Sargsyan</span></a>.</p> <p><span class="domtooltips" title="This is the logo of Ruben Sargsyan's personal website."><img src="logo.jpg" width="190" height="160" alt="Logo"></span></p> <script type="text/javascript"> load_domtooltips(); </script> Files [Only Registered users can see links . Click Here To Register...] [Only Registered users can see links . Click Here To Register...] |
#69
|
|||
|
|||
10 Tiptop Animations with JavaScript Framework
The JavaScript-based movement effects, animations, in your Web applications, will become more eye-catching, smoothing and beautiful when they use the powerful JavaScript frameworks to manage and proce... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup |
#70
|
|||
|
|||
Make a JavaScript Countdown Timer in OOP
JavaScript Countdown Timer is the type of JavaScript code presented on [Only Registered users can see links . Click Here To Register...]; and you can find many good scripts as you want; but this JavaScript countdown timer is new on... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup |
Bookmarks |
|
|