Webmaster Forum

Go Back   Webmaster Forum > V7N Webmaster Marketplace > The Webmaster Marketplace > Content

Content Buy and sell scripts, prewritten articles and databases for your website or blog here.


Closed Thread
 
LinkBack Thread Tools Display Modes
Share |
  #1 (permalink)  
Old 08-11-2009, 12:21 AM
Banned
Latest Blog:
None

 
Join Date: 07-08-09
Location: JavaScriptBank.com - 2.000+ free JavaScript codes
Posts: 137
iTrader: 0 / 0%
Free JavaScript Codes Download

This is an easy way to determine the mouse position on a Web page. Click anywhere on the page and the coordinates will be displayed.... detail


How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript
Code:
<script type="text/javascript"> // Created by: Roy Marchand | http://www.expertsrt.com function showit() { document.forms['theform'].xcoord.value=event.x; document.getElementById('spanx').innerHTML='x = '+event.x; document.forms.theform.ycoord.value=event.y; document.getElementById('spany').innerHTML='y = '+event.y; } function showitMOZ(e) { document.forms['theform'].xcoord.value=e.pageX; document.getElementById('spanx').innerHTML='x = '+e.pageX; document.getElementById('spany').innerHTML='y = '+e.pageY; document.forms.theform.ycoord.value=e.pageY; } if (!document.all) { window.captureEvents(Event.CLICK); window.onclick=showitMOZ; } else { document.onclick=showit; } </script> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->
Step 2: Place HTML below in your BODY section
HTML
Code:
<h4>You can store them in form fields</h4> <form name="theform"> x = <input name="xcoord" type="text" readonly size="5"> y = <input name="ycoord" type="text" readonly size="5"> </form> <p> <h4>or as plain text</h4> <span id="spanx"> </span> <span id="spany"> </span> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->
 
  #2 (permalink)  
Old 08-17-2009, 02:49 AM
Contributing Member
Latest Blog:
None

 
Join Date: 07-01-08
Posts: 99
iTrader: 0 / 0%
Sorry, i could see nothing.
 
  #3 (permalink)  
Old 09-14-2009, 06:07 AM
Banned
Latest Blog:
None

 
Join Date: 07-08-09
Location: JavaScriptBank.com - 2.000+ free JavaScript codes
Posts: 137
iTrader: 0 / 0%
Basic Web Calendar

This open source calendar contains three style of calendar blocks. Setup information are in each sample.... detail


How to setup






[REMOVED]

Last edited by HTMLBasicTutor; 09-14-2009 at 09:04 AM.
 
  #4 (permalink)  
Old 09-21-2009, 03:52 AM
Banned
Latest Blog:
None

 
Join Date: 07-08-09
Location: JavaScriptBank.com - 2.000+ free JavaScript codes
Posts: 137
iTrader: 0 / 0%
Color Wheel

This JavaScript code will change the background from one color to the next for each of the 10 colors then it starts the loop over again... detail


How to setup

Step 1: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<script language="javascript"> /* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com */ <!-- Begin // author: Eric Stremming (estremming@hotmail.com) var pos = 10; function initArray() { this.length = initArray.arguments.length; for (var i = 0; i < this.length; i++) { this[i] = initArray.arguments[i]; } } var col=new initArray("4b","5b","8b","8b"); function stop() { document.bgColor = '#FFFFFF'; clearTimeout(loopID); } function start() { col[1]="red" col[2]="yellowgreen" col[3]="yellow" col[4]="whitesmoke" col[5]="white" col[6]="wheat" col[7]="violet" col[8]="turquoise" col[9]="tomato" col[10]="thistle" pos++; if (pos<0||pos>10) { pos = 0; } document.bgColor = col[pos]; loopID = setTimeout("start()",50); } // End --> </SCRIPT> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->
Step 2: Place HTML below in your BODY section
HTML
Code:
<BODY onload=start()> <FORM> <INPUT onclick='parent.location="javascript:location.reload()"' type=button value=" Turn on "> <INPUT onclick=stop() type=button value=" Turn off"> </FORM> </body> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->

Last edited by Kream; 05-15-2010 at 08:47 AM.
 
  #5 (permalink)  
Old 09-28-2009, 07:39 AM
Banned
Latest Blog:
None

 
Join Date: 07-08-09
Location: JavaScriptBank.com - 2.000+ free JavaScript codes
Posts: 137
iTrader: 0 / 0%
Drag-drop image

This is a simple JavaScript that allows the user to click and move an image. Each image is on a layer. If it is clicked for the first time, ... detail


How to setup

Step 1: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<SCRIPT> //detecting browser to dynamically write appropriate DIVs/LAYERs N=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)<5) S=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)>4.9) M=(navigator.appName.indexOf('Microsoft')!=-1) Vis=new Array() Vis[0]=(M||S) ? "hidden" : "hide" Vis[1]=(M||S) ? "visible" : "show" function GetDiv(divId,divY,divX,divW,divH,bCol,visb,zInd){ bkCol=(bCol!="")?((N)?" bgColor="+bCol:";background:"+bCol):"" Styl = (M||S) ? "<DIV" : "<LAYER" if(M||S){ Styl+=" ID="+divId Styl+=" style='position:absolute;top:"+divY+";left:"+divX+";width:"+divW+";height:"+divH+bkCol Styl+=";visibility:"+Vis[visb]+";z-index:"+zInd Styl+="'>" } if(N){ Styl+=" ID="+divId Styl+=" top="+divY+" left="+divX+" width="+divW+" height="+divH+bkCol Styl+=" visibility="+Vis[visb]+" z-index="+zInd Styl+=">" } document.writeln(Styl) } function EndDiv(){ (M||S)? document.writeln("</DIV>"): document.writeln("</LAYER>") } function PutIt(ID,dX,dY){ if(N){ document.layers[ID].left=dX document.layers[ID].top=dY } if(M){ document.all[ID].style.left=dX document.all[ID].style.top=dY } if(S){ document.getElementById(ID).style.left=dX document.getElementById(ID).style.top=dY } } function ShowHide(ID,vs){ if(N){ document.layers[ID].visibility=Vis[vs] } if(M){ document.all[ID].style.visibility=Vis[vs] } if(S){ document.getElementById(ID).style.visibility=Vis[vs] } } function Xof(ID){ if(N){ return document.layers[ID].left } if(M){ return document.all[ID].style.left } if(S){ return document.getElementById(ID).style.left } } function Yof(ID){ if(N){ return document.layers[ID].top } if(M){ return document.all[ID].style.top } if(S){ return document.getElementById(ID).style.top } } function Zind(ID,zz){ if(N){ document.layers[ID].zIndex=zz } if(M){ document.all[ID].style.zIndex=zz } if(S){ document.getElementById(ID).style.zIndex=zz } } function ChangeCol(ID,colrx){ if(M)document.all[ID].style.background=colrx if(N)document.layers[ID].bgColor=colrx if(S)document.getElementById(ID).style.background=colrx } function DivWrite(IdName,Str) { if (N){ document.layers[IdName].document.write(Str) document.layers[IdName].document.close() } if(M) document.all[IdName].innerHTML=Str if(S) document.getElementById(IdName).innerHTML=Str } </SCRIPT> <SCRIPT> //write the layers (for NN4.7) and div 9for other browsers) GetDiv("Pic1",150,50,50,50,'',1,1) document.write("<a href='javascript:void(0);' onclick='Klik(\"Pic1\")'><img src=logojs.gif border=0></a>") EndDiv() GetDiv("Pic2",300,50,50,50,'',1,1) document.write("<a href='javascript:void(0);' onclick='Klik(\"Pic2\")'><img src=photo3.jpg border=0></a>") EndDiv() //tog will be togged between 0 and 1 with every click on the defined image link tog=0 //sensing the mouse move event - gets its coords if(N) window.captureEvents(Event.MOUSEMOVE); if(N||S) window.onmousemove=newPos; if(M) document.onmousemove=newPos; function newPos(e){ if(M){ mX=event.clientX mY=event.clientY } if(N||S){ mX=e.pageX mY=e.pageY } window.status="Mouse coords=("+mX+":"+mY+")" //if tog is 1 (ie clicked first time - move with mouse) //CurObj is the last image clicked if(tog==1&&CurObj!='undefined'){ PutIt(CurObj,mX-5,mY-5) } } function Klik(x){ CurObj=x tog=!tog } </SCRIPT> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->

Last edited by Kream; 05-15-2010 at 08:47 AM.
 
  #6 (permalink)  
Old 10-05-2009, 08:09 AM
Banned
Latest Blog:
None

 
Join Date: 07-08-09
Location: JavaScriptBank.com - 2.000+ free JavaScript codes
Posts: 137
iTrader: 0 / 0%
Climbing Links

A JavaScript menu that move from the bottom to top.... detail


How to setup

Step 1: Copy & Paste CSS code below in your HEAD section
CSS
Code:
<style> .links{ font-family:Arial; text-align:left; background-color:'red'; position:relative; width:120; text-indent:5; } .divs{ top:0; left:0; background-color:'red'; position:absolute; width:120; z-index:1 } .linksdiv{ top:0; left:0; background-color:'red'; position:absolute; width:120; z-index:0 } A:link{ font-size:10pt; color:black; text-decoration:none; font-weigth:'bolder';} A:visited{ font-size:10pt; color:black; text-decoration:none; font-weigth:'bolder';} A:active{ font-size:10pt; color:black; text-decoration:none; font-weigth:'bolder';} </style> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->
Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<script language="JScript"> <!-- //place your links here (as many as you want) var links=new Array(); links[0]="JavaScript Source" links[1]="JavaScript Tips" links[2]="Home" links[3]="JavaScripts" //set the urls of the links here var urls=new Array(); urls[0]="http://JavaScriptBank.com/"; urls[1]="http://JavaScriptBank.com/"; urls[2]="http://JavaScriptBank.com/"; urls[3]="http://JavaScriptBank.com/"; //set the speed of the links var intBannerSpeed=1; function Start_Climbing() { Set_DivPositions(); Arrange_Links(); //call Climb() function every 50 miliseconds action = window.setInterval("Climb()",50); } function Set_DivPositions(){ //set the position where the links start disappearing document.all.TopDiv.style.pixelHeight=screen.availHeight*3/10; document.all.MiddleDiv.style.pixelTop=screen.availHeight*3/10; //set the height of the area where the links displayed document.all.MiddleDiv.style.pixelHeight=screen.availHeight*1/10; //set the position where the links start appearing document.all.BottomDiv.style.pixelTop = document.all.TopDiv.style.pixelHeight + document.all.MiddleDiv.style.pixelHeight; document.all.BottomDiv.style.pixelHeight = screen.availHeight*4/10; document.all.LinksDiv.style.pixelTop = document.all.BottomDiv.style.pixelTop; } function Arrange_Links(){ //for each link create a div strLinks= "<DIV class='links' > "; for (intArrayCell=0; intArrayCell<links.length; intArrayCell++){ strLinks += "<A HREF=" + urls[intArrayCell] + " onmouseover='Change_Color(this)' onmouseout='Change_Color(this)' >"; strLinks += links[intArrayCell]; strLinks += "</A></DIV>" if (intArrayCell+1==links.length) break; else strLinks += "<DIV class='links' >"; } strLinks +="</A></DIV>"; //place all the divs inside LinksDiv div (see bottom of the page) document.all.LinksDiv.innerHTML=strLinks; } function Change_Color(objLink){ if(objLink.style.color=="white") objLink.style.color="black"; else objLink.style.color="white"; } function Climb() { //every time this function is called reduce the top position of the LinksDiv by intBannerSpeed document.all.LinksDiv.style.pixelTop -= intBannerSpeed; //check if LinksDiv has reached the position where the last link has disappeared //if so start all over again if (document.all.LinksDiv.style.pixelTop<=document.all.TopDiv.style.pixelHeight - document.all.LinksDiv.offsetHeight) { window.clearInterval(action); Start_Climbing() } } --> </script> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->
Step 3: Place HTML below in your BODY section
HTML
Code:
<body onload="Start_Climbing()"> <div id="TopDiv" class="divs"></div> <div id="MiddleDiv" class="linksdiv"></div> <div id="BottomDiv" class="divs"></div> <div id="LinksDiv" class="linksdiv"></div> </body> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->

Last edited by Kream; 05-15-2010 at 08:47 AM.
 
  #7 (permalink)  
Old 10-12-2009, 07:54 AM
Banned
Latest Blog:
None

 
Join Date: 07-08-09
Location: JavaScriptBank.com - 2.000+ free JavaScript codes
Posts: 137
iTrader: 0 / 0%
JavaScript Countdown Timer

This JavaScript displays a countdown timer and alerts the user when the timer reaches zero. It then redirects to another Web ... detail


How to setup

Step 1: CSS below for styling thescript, place it into HEAD section
CSS
Code:
<style type="text/css"> #txt { border:none; font-family:verdana; font-size:16pt; font-weight:bold; border-right-color:#FFFFFF } </style> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->
Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<script language="javascript"> // Created by: Neill Broderick :: http://www.bespoke-software-solutions.co.uk/downloads/downjs.php var mins var secs; function cd() { mins = 1 * m("10"); // change minutes here secs = 0 + s(":01"); // change seconds here (always add an additional second to your total) redo(); } function m(obj) { for(var i = 0; i < obj.length; i++) { if(obj.substring(i, i + 1) == ":") break; } return(obj.substring(0, i)); } function s(obj) { for(var i = 0; i < obj.length; i++) { if(obj.substring(i, i + 1) == ":") break; } return(obj.substring(i + 1, obj.length)); } function dis(mins,secs) { var disp; if(mins <= 9) { disp = " 0"; } else { disp = " "; } disp += mins + ":"; if(secs <= 9) { disp += "0" + secs; } else { disp += secs; } return(disp); } function redo() { secs--; if(secs == -1) { secs = 59; mins--; } document.cd.disp.value = dis(mins,secs); // setup additional displays here. if((mins == 0) && (secs == 0)) { window.alert("Time is up. Press OK to continue."); // change timeout message as required // window.location = "yourpage.htm" // redirects to specified page once timer ends and ok button is pressed } else { cd = setTimeout("redo()",1000); } } function init() { cd(); } window.onload = init; </script> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->
Step 3: Place HTML below in your BODY section
HTML
Code:
<form name="cd"> <input id="txt" readonly="true" type="text" value="10:00" border="0" name="disp"> </form> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->

Last edited by Kream; 05-15-2010 at 08:47 AM.
 
  #8 (permalink)  
Old 10-21-2009, 07:45 AM
Banned
Latest Blog:
None

 
Join Date: 07-08-09
Location: JavaScriptBank.com - 2.000+ free JavaScript codes
Posts: 137
iTrader: 0 / 0%
Image slideshow transition

This JavaScript creates slideshow effect with one of transitions.... detail


How to setup

Step 1: Use JavaScript code below to setup the script
JavaScript
Code:
<script LANGUAGE="JavaScript1.1"> <!-- Beginning of JavaScript - messages = new Array() //anh dung de tao hieu ung messages[0] = "<img src=logojs.gif>" messages[1] = "<img src=photo1.jpg>" messages[2] = "<img src=photo2.jpg>" messages[3] = "<img src=photo3.jpg>" messages[4] = "<img src=photo4.jpg>" var i_messages = 0 var timer function dotransition() { if (document.all) { content.filters[0].apply() content.innerHTML = messages[i_messages] content.filters[0].play() if (i_messages >= messages.length-1) { i_messages = 0 } else { i_messages++ } } if (document.layers) { document.nn.document.write("<table cellspacing=2 cellpadding=2 border=0><tr><td align=left>"+messages[i_messages]+"</td></tr></table>") document.close() if (i_messages >= messages.length-1) { i_messages = 0 } else { i_messages++ } } timer = setTimeout("dotransition()",5000) } // - End of JavaScript - --> </script> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->
Step 2: Place HTML below in your BODY section
HTML
Code:
<BODY onload="dotransition()"> <DIV id=content style="position: relative; width:160px; height:240px; text-align:center; filter: revealTrans(Transition=12, Duration=3)"></DIV> </BODY> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->

Last edited by Kream; 05-15-2010 at 08:48 AM.
 
  #9 (permalink)  
Old 10-25-2009, 08:09 PM
Banned
Latest Blog:
None

 
Join Date: 07-08-09
Location: JavaScriptBank.com - 2.000+ free JavaScript codes
Posts: 137
iTrader: 0 / 0%
Web based Music Player

Bring the sound of life - music to your visitors by this JavaScript. It is an advanced web based midi player that actually enables you to jump, pause, and manipulate the play list like never before.... detail


How to setup

Step 1: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<SCRIPT language=JavaScript> <!-- Begin counter = 0; html = true; songs = new Array(); function addsong() { file = document.forms[0].file.value; if(file == "") { alert("Entra un nombre de archivo o da click en Examinar.."); } else { fn = file; while(fn.indexOf() != -1) { pos = fn.indexOf(); fn = fn.substring(fn.lenght); } if(fn.indexOf(".gif") == 1) { alert("Sólo sonidos o música"); } else { songs[counter] = file; document.forms[0].selMusica[counter] = new Option(fn, file, false, true); counter++; } document.forms[0].file.value = ""; } } function musica() { document.all.sound.src=document.clock.selMusica.options[document.clock.selMusica.selectedIndex].text; } function stop() { document.all.sound.src=""; } function count() { document.clock.songs.value=document.clock.selMusica.options.length; } function deletethis() { if(counter > 0) { counter--; document.forms[0].selMusica[counter] = null; songs[counter] = ""; } else { alert("No hay nada en la lista!"); } } function bajar() { document.clock.selMusica.options[document.clock.selMusica.selectedIndex++]; saber2(); saber(); } function subir() { document.clock.selMusica.options[document.clock.selMusica.selectedIndex--]; saber2(); saber(); } function saber() { document.clock.url.value=document.clock.selMusica.options[document.clock.selMusica.selectedIndex].text; } function saber2() { fn = document.clock.selMusica.options[document.clock.selMusica.selectedIndex].text; char = unescape("%5C"); while(fn.indexOf(char) != -1) { pos = fn.indexOf(char); fn = fn.substring(pos + 1, fn.length); document.clock.nombre.value=fn; } } // End--> </SCRIPT>
Step 2: Place HTML below in your BODY section
HTML
Code:
<BODY onclick=count() onload=count()> <BGSOUND id=sound src=""> <FORM name=clock><INPUT type=file name=file size="20"> <INPUT onclick=addsong() type=button value=Add><INPUT onclick=deletethis() type=button value=Delete><BR><INPUT onclick=musica() type=button value=Listen name=empezar> <INPUT onclick=stop() type=button value=Stop name=detener> You have:<INPUT readOnly size=2 name=songs>song(s) in the list.<BR>Name of the song:<INPUT size=25 name=nombre><INPUT onclick="saber2(); saber()" type=button value="Know Name & Url">Url of the song:<INPUT size=19 name=url> <BR><INPUT onclick=bajar() type=button value=MoveDown><INPUT onclick=subir() type=button value=MoveUp><BR><BR><SELECT multiple size=20 name=selMusica></SELECT> </FORM> </BODY>

Last edited by Kream; 05-15-2010 at 08:48 AM.
 
  #10 (permalink)  
Old 11-09-2009, 07:43 AM
Banned
Latest Blog:
None

 
Join Date: 07-08-09
Location: JavaScriptBank.com - 2.000+ free JavaScript codes
Posts: 137
iTrader: 0 / 0%
AJAX Page Content Loader

AJAX - a very great web development technology nowaday. Use this AJAX in order to load XML and HTML files on the same website with XMLHttpRequest. And in the <code>body... 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"> <!-- #contentLYR { position:relative;/* width:200px; height:115px; left: 200px; top: 200px;*/ z-index:1; } --> </style>
Step 2: Use JavaScript code below to setup the script
JavaScript
Code:
<script type="text/javascript"> <!-- Begin /* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com */ // Created by: Eddie Traversa (2005) :: http://dhtmlnirvana.com/ function ajaxLoader(url,id) { if (document.getElementById) { var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest(); } if (x) { x.onreadystatechange = function() { if (x.readyState == 4 && x.status == 200) { el = document.getElementById(id); el.innerHTML = '<JavaScriptBank>This is content of demo.xml file</JavaScriptBank>';//x.responseText; } } x.open("GET", url, true); x.send(null); } } //--> </script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<div id="contentLYR"></div> <script>window.onload = function(){ajaxLoader('demo.xml','contentLYR');}</script>
Step 4: Download files below
Files
demo.xml

Last edited by Kream; 05-15-2010 at 08:48 AM.
 
  #11 (permalink)  
Old 11-15-2009, 09:52 PM
Banned
Latest Blog:
None

 
Join Date: 07-08-09
Location: JavaScriptBank.com - 2.000+ free JavaScript codes
Posts: 137
iTrader: 0 / 0%
Top 10 JavaScript Frameworks by Google, Yahoo, Bing

JavaScript - an indispensable part for developing websites and web pages, whether that is simple pages or professional website, and whether you are senior or junior. Nowadays, JavaScript frameworks be... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Last edited by Kream; 05-15-2010 at 08:48 AM.
 
  #12 (permalink)  
Old 11-19-2009, 05:28 PM
Banned
Latest Blog:
None

 
Join Date: 07-08-09
Location: JavaScriptBank.com - 2.000+ free JavaScript codes
Posts: 137
iTrader: 0 / 0%
Time Picker with child window

This JavaScript code - date picker helps you choose a time through a popup window. Perhaps this feature is not new on [URL="http://www.javascriptbank.com/"]J... 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" type="text/javascript" src="timePicker.js"> /* Bassem R. Zohdy | bassem.zohdy@gmail.com */ </script>
Step 2: Place HTML below in your BODY section
HTML
Code:
<form name="form1"> <input id="field" onkeydown="time(this.id)"/> </form>
Step 3: Download files below
Files
down.jpg
time.html
timePicker.js
up.jpg

Last edited by Kream; 05-15-2010 at 08:48 AM.
 
  #13 (permalink)  
Old 11-22-2009, 05:57 PM
Banned
Latest Blog:
None

 
Join Date: 07-08-09
Location: JavaScriptBank.com - 2.000+ free JavaScript codes
Posts: 137
iTrader: 0 / 0%
Fading Slide Show

Displays images continuously in a slideshow presentation format, with a fade effect on image transitions. (Fade in Internet Explorer 4+ only).... 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> /* Original: CodeLifter.com (support@codelifter.com) Web Site: http://www.codelifter.com */ // set the following variables // Set slideShowSpeed (milliseconds) var slideShowSpeed = 5000 // Duration of crossfade (seconds) var crossFadeDuration = 3 // Specify the image files var Pic = new Array() // don't touch this // to add more images, just continue // the pattern, adding to the array below Pic[0] = 'logojs.gif' Pic[1] = 'photo3.jpg' Pic[2] = 'logojs.gif' Pic[3] = 'photo5.jpg' Pic[4] = 'photo2.jpg' // do not edit anything below this line var t var j = 0 var p = Pic.length var preLoad = new Array() for (i = 0; i < p; i++){ preLoad[i] = new Image() preLoad[i].src = Pic[i] } function runSlideShow(){ if (document.all){ document.images.SlideShow.style.filter="blendTrans(duration=2)" document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)" document.images.SlideShow.filters.blendTrans.Apply() } document.images.SlideShow.src = preLoad[j].src if (document.all){ document.images.SlideShow.filters.blendTrans.Play() } j = j + 1 if (j > (p-1)) j=0 t = setTimeout('runSlideShow()', slideShowSpeed) } </script> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->
Step 2: Place HTML below in your BODY section
HTML
Code:
<body onLoad="runSlideShow()"> <img id="VU" src="logojs.gif" name='SlideShow'> </body> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->

Last edited by Kream; 05-15-2010 at 08:48 AM.
 
  #14 (permalink)  
Old 12-13-2009, 04:35 PM
Banned
Latest Blog:
None

 
Join Date: 07-08-09
Location: JavaScriptBank.com - 2.000+ free JavaScript codes
Posts: 137
iTrader: 0 / 0%
Line Graph script

This is a purely DHTML/ CSS based Line Graph script. It loads fast and blends in with the rest of the page. You can even use a transparent 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" src="wz_jsgraphics.js"></script> <script type="text/javascript" src="line.js"></script> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->
Step 2: Place HTML below in your BODY section
HTML
Code:
<div id="lineCanvas" style="overflow: auto; position:relative;height:300px;width:400px;"></div> <script type="text/javascript"> var g = new line_graph(); g.add('1', 145); g.add('2', 0); g.add('3', 175); g.add('4', 130); g.add('5', 150); g.add('6', 175); g.add('7', 205); g.add('8', 125); g.add('9', 125); g.add('10', 135); g.add('11', 125); g.render("lineCanvas", "Line Graph"); </script> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->
Step 3: must download files below
Files
line.js
wz_jsgraphics.js

Last edited by Kream; 05-15-2010 at 08:48 AM.
 
  #15 (permalink)  
Old 12-16-2009, 04:44 PM
Banned
Latest Blog:
None

 
Join Date: 07-08-09
Location: JavaScriptBank.com - 2.000+ free JavaScript codes
Posts: 137
iTrader: 0 / 0%
Falling Snowflakes with images

Decorate your webpage with this great animated document effect! Watch as snow fall gently trickles down the page, then disappear. The image of snow flakes used is changeable, so snow definitely isn't ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript
Code:
<script type="text/javascript"> /****************************************** * Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html) ******************************************/ //Configure below to change URL path to the snow image var snowsrc="snow3.gif" // Configure below to change number of snow to render var no = 10; // Configure whether snow should disappear after x seconds (0=never): var hidesnowtime = 0; // Configure how much snow should drop down before fading ("windowheight" or "pageheight") var snowdistance = "pageheight"; ///////////Stop Config////////////////////////////////// var ie4up = (document.all) ? 1 : 0; var ns6up = (document.getElementById&&!document.all) ? 1 : 0; function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } var dx, xp, yp; // coordinate and position variables var am, stx, sty; // amplitude and step variables var i, doc_width = 800, doc_height = 600; if (ns6up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = iecompattest().clientWidth; doc_height = iecompattest().clientHeight; } dx = new Array(); xp = new Array(); yp = new Array(); am = new Array(); stx = new Array(); sty = new Array(); snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc for (i = 0; i < no; ++ i) { dx[i] = 0; // set coordinate variables xp[i] = Math.random()*(doc_width-50); // set position variables yp[i] = Math.random()*doc_height; am[i] = Math.random()*20; // set amplitude variables stx[i] = 0.02 + Math.random()/10; // set step variables sty[i] = 0.7 + Math.random(); // set step variables if (ie4up||ns6up) { if (i == 0) { document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><a href="http://dynamicdrive.com"><img src='"+snowsrc+"' border="0"></a></div>"); } else { document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><img src='"+snowsrc+"' border="0"></div>"); } } } function snowIE_NS6() { // IE and NS6 main animation function doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10; doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight; for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] += sty[i]; if (yp[i] > doc_height-50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = 0; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); } dx[i] += stx[i]; document.getElementById("dot"+i).style.top=yp[i]+"px"; document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px"; } snowtimer=setTimeout("snowIE_NS6()", 10); } function hidesnow(){ if (window.snowtimer) clearTimeout(snowtimer) for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden" } if (ie4up||ns6up){ snowIE_NS6(); if (hidesnowtime>0) setTimeout("hidesnow()", hidesnowtime*1000) } </script>
Step 2: must download files below
Files
snow3.gif

Last edited by Kream; 05-15-2010 at 08:48 AM.
 
  #16 (permalink)  
Old 12-16-2009, 06:17 PM
Banned
Latest Blog:
None

 
Join Date: 11-04-09
Posts: 411
iTrader: 0 / 0%
That can help your site to decorarate animated pictures but it can also affect the upload time of the page.
 
  #17 (permalink)  
Old 12-19-2009, 07:50 AM
Banned
Latest Blog:
None

 
Join Date: 07-08-09
Location: JavaScriptBank.com - 2.000+ free JavaScript codes
Posts: 137
iTrader: 0 / 0%
40 Super Nice JavaScript Extensions and Plugins

In the environment of Internet in any country, beside the web promotion - one of Internet marketing UK aspects; if a company or a website want to success; it nee... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Last edited by Kream; 05-15-2010 at 08:49 AM.
 
  #18 (permalink)  
Old 12-23-2009, 04:37 PM
Banned
Latest Blog:
None

 
Join Date: 07-08-09
Location: JavaScriptBank.com - 2.000+ free JavaScript codes
Posts: 137
iTrader: 0 / 0%
World clock with unique display

World clock script with unusual design. Cross-browser (IE4 contains additional visual effects). World [URL="http://www.javascriptbank.com/javascript/time/clock-time-date/"]clock<... 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> .topcoverlay { BACKGROUND-COLOR: #ffffff; FILTER: alpha(opacity=85); HEIGHT: 240px; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 1000px } .bottomcoverlay { BACKGROUND-COLOR: #ffffff; FILTER: alpha(opacity=85); HEIGHT: 1000px; LEFT: 0px; POSITION: absolute; TOP: 253px; WIDTH: 1000px } </STYLE> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->
Step 2: Place JavaScript below in your HEAD section
JavaScript
Code:
<SCRIPT language=JavaScript> <!-- Beginning of JavaScript - var startpos=240 var bildhoehe=720 var step=3 var makepause=200 var difference=0 var local=1 var timer function showtimelocal() { if (local==1) { var thistime= new Date() var seconds=thistime.getSeconds() var minutes=thistime.getMinutes() var hours=thistime.getHours() if (hours>=24) {hours=hours-24} var secondspos=Math.floor(bildhoehe/60*seconds) var minutespos=Math.floor(bildhoehe/60*minutes) var hourspos=Math.floor(bildhoehe/60*hours) if(document.all) { document.all.secondsdiv.style.posTop=startpos-secondspos document.all.minutesdiv.style.posTop=startpos-minutespos document.all.hoursdiv.style.posTop=startpos-hourspos } if(document.layers) { document.secondsdiv.top=startpos-secondspos document.minutesdiv.top=startpos-minutespos document.hoursdiv.top=startpos-hourspos } var timer=setTimeout("showtimelocal()",makepause) } else { clearTimeout(timer) } } function preUTC(thisdifference) { clearTimeout(timer) difference=eval(thisdifference) local=0 showtimeUTC() } function inititate() { if (document.layers) { document.markernetscape1.visibility="VISIBLE" document.markernetscape2.visibility="VISIBLE" } showtimelocal() } function prelocal() { if (document.layers) {document.markernetscape.visibility="VISIBLE"} clearTimeout(timer) local=1 showtimelocal() } function showtimeUTC() { if (local==0) { var thistime= new Date() var seconds=thistime.getSeconds() var minutes=thistime.getMinutes() var hours=thistime.getUTCHours() hours+=difference if (hours>=24) {hours=hours-24} var secondspos=Math.floor(bildhoehe/60*seconds) var minutespos=Math.floor(bildhoehe/60*minutes) var hourspos=Math.floor(bildhoehe/60*hours) if(document.all) { document.all.secondsdiv.style.posTop=startpos-secondspos document.all.minutesdiv.style.posTop=startpos-minutespos document.all.hoursdiv.style.posTop=startpos-hourspos } if(document.layers) { document.secondsdiv.top=startpos-secondspos document.minutesdiv.top=startpos-minutespos document.hoursdiv.top=startpos-hourspos } var timer=setTimeout("showtimeUTC()",makepause) } else { clearTimeout(timer) } } window.onload=inititate // - End of JavaScript - --> </SCRIPT> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->
Step 3: Place HTML below in your BODY section
HTML
Code:
<DIV id=secondsdiv style="LEFT: 200px; POSITION: absolute; TOP: 240px"> <IMG src="rotaclock2930.gif" width="14" height="720"></DIV> <DIV id=minutesdiv style="LEFT: 180px; POSITION: absolute"> <IMG src="rotaclock2930.gif" width="14" height="720"></DIV> <DIV id=hoursdiv style="LEFT: 160px; POSITION: absolute; TOP: 240px"> <IMG src="rotaclock2930.gif" width="14" height="720"></DIV> <DIV class=topcoverlay id=topcover></DIV> <DIV class=bottomcoverlay id=bottomcover></DIV> <DIV id=limiter1 style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; FONT-WEIGHT: bold; LEFT: 176px; POSITION: absolute; TOP: 241px"> :</DIV> <DIV id=limiter2 style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; FONT-WEIGHT: bold; LEFT: 196px; POSITION: absolute; TOP: 241px"> :</DIV> <DIV id=markernetscape1 style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 12pt; FONT-WEIGHT: bold; LEFT: 122px; POSITION: absolute; TOP: 248px; VISIBILITY: hidden"><IMG height=1 src="line2930.gif" width=20></DIV> <DIV id=markernetscape2 style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 12pt; FONT-WEIGHT: bold; LEFT: 230px; POSITION: absolute; TOP: 248px; VISIBILITY: hidden"><IMG height=1 src="js 46_files/line2930.gif" width=20></DIV> <DIV id=timezones style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; LEFT: 10px; POSITION: absolute; TOP: 5px"><A href="#" onmouseover=prelocal()>&gt;&gt; local time</A><BR><A href="#" onmouseover="preUTC('-8')">Anchorage</A><BR><A href="#" onmouseover="preUTC('-11')">Auckland</A><BR><A href="#" onmouseover="preUTC('3')">Baghdad</A><BR><A href="#" onmouseover="preUTC('8')">Bejing</A><BR><A href="#" onmouseover="preUTC('-3')">Buenos Aires</A><BR><A href="#" onmouseover="preUTC('-6')">Denver</A><BR><A href="#" onmouseover="preUTC('8')">Hongkong</A><BR><A href="#" onmouseover="preUTC('-9')">Honolulu</A><BR><A href="#" onmouseover="preUTC('8')">Jakarta</A><BR><A href="#" onmouseover="preUTC('2')">Johannesburg</A><BR><A href="#" onmouseover="preUTC('2')">Kairo</A><BR><A href="#" onmouseover="preUTC('-5')">Lima</A><BR><A href="#" onmouseover="preUTC('1')">London</A><BR><A href="#" onmouseover="preUTC('-7')">Los Angeles</A><BR><A href="#" onmouseover="preUTC('4')">Moscow</A><BR><A href="#" onmouseover="preUTC('3')">Nairobi</A><BR><A href="#" onmouseover="preUTC('-4')">New York</A><BR><A href="#" onmouseover="preUTC('2')">Paris</A><BR><A href="#" onmouseover="preUTC('-2')">Rio</A><BR><A href="#" onmouseover="preUTC('10')">Sydney</A><BR><A href="#" onmouseover="preUTC('9')">Tokyo</A><BR></DIV> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->
Step 4: must download files below
Files
rotaclock2930.gif

Last edited by Kream; 05-15-2010 at 08:49 AM.
 
  #19 (permalink)  
Old 12-27-2009, 04:52 PM
Banned
Latest Blog:
None

 
Join Date: 07-08-09
Location: JavaScriptBank.com - 2.000+ free JavaScript codes
Posts: 137
iTrader: 0 / 0%
Enlarge Image 2

This one line script changes the image size and source on your thumbnail picture without reloading the page or using popups.... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Copy & Paste HTML code below in your BODY section
HTML
Code:
<b>Single-click the image to enlarge it; double-click to make it small again.</b><br> <img src="gif_logojsb2.gif" onclick="this.src='gif_logojsb2.gif';this.height=180;this.width=480" ondblclick="this.src='gif_logojsb2.gif';this.height=60;this.width=150"> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->

Last edited by Kream; 05-15-2010 at 08:49 AM.
 
  #20 (permalink)  
Old 12-30-2009, 04:03 PM
Banned
Latest Blog:
None

 
Join Date: 07-08-09
Location: JavaScriptBank.com - 2.000+ free JavaScript codes
Posts: 137
iTrader: 0 / 0%
RSS AJAX Newsticker

This JavaScript tutorial will show you how to combine RSS, AJAX, and JavaScript to create a real-time RSS ticker.

Thanks to AJAX... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Use JavaScript code below to setup the script
JavaScript
Code:
<script type="text/javascript" src="rssticker.js"></script>
Step 2: Copy & Paste HTML code below in your BODY section
HTML
Code:
CNN: <DIV style="HEIGHT: 100px; border-style: dotted; border-width: 1px; background-color: silver; text-align: left;"> <script type="text/javascript"> //rss_ticker(RSS_id, cachetime, divId, divClass, delay, optionalswitch) new rss_ticker("CNN", 60, "cnnbox", "cnnclass", 200) </script> </DIV> <br><br><br> Each ticker on the page can be invoked independently, for example: <DIV style="HEIGHT: 100px; border-style: dotted; border-width: 1px; background-color: silver; text-align: left;"> <PRE><script type="text/javascript"> //rss_ticker(RSS_id, cachetime, divId, divClass, delay, optionalswitch) new rss_ticker("CNN", 60, "cnnbox", "cnnclass", 2000) </script></PRE> </DIV>
Step 3: downloads
Files
rssticker.js

Last edited by Kream; 05-15-2010 at 08:49 AM.
 
Go Back   Webmaster Forum > V7N Webmaster Marketplace > The Webmaster Marketplace > Content

Closed Thread


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Title and meta title question la cala SEO Forum 5 02-26-2008 07:55 AM
Repeat keywords in Title Tag? Repeat Title Tag? Christine8 SEO Forum 22 12-21-2006 11:21 AM
Title Tag Seo rtheodorow SEO Forum 23 03-31-2005 09:21 PM
Invision Board - Display Topic Title as Page Title? gunface Coding Forum 3 07-05-2004 11:37 AM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 11:23 PM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2014 Escalate Media




Search Engine Optimization by vBSEO 3.6.0 RC 2 ©2011, Crawlability, Inc.