LinkBack URL
About LinkBacksThe Internet is getting more and more important, we can use it for working, learning, for entertaining ... Only in the aspect of entertainment, we use the Internet to play the detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Junior Member
The Internet is getting more and more important, we can use it for working, learning, for entertaining ... Only in the aspect of entertainment, we use the Internet to play the detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Junior Member
This JavaScript converts special HTML characters to their entities version inside user entered data such as a TEXTAREA before the detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Place JavaScript below in your HEAD section
JavaScript
Step 2: Copy & Paste HTML code below in your BODY sectionCode:<SCRIPT type=text/javascript> // HTML to Entities (form) script- By JavaScriptKit.com (http://www.javascriptkit.com) // For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/ // This notice must stay intact for use function html2entities(){ var re=/[(<>"'&]/g for (i=0; i<arguments.length; i++) arguments[i].value=arguments[i].value.replace(re, function(m){return replacechar(m)}) } function replacechar(match){ if (match=="<") return "<" else if (match==">") return ">" else if (match=="\"") return """ else if (match=="'") return "'" else if (match=="&") return "&" } </SCRIPT> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->
HTML
Code:<FORM><TEXTAREA style="WIDTH: 400px; HEIGHT: 100px" name=data1></TEXTAREA><BR> <INPUT onclick=html2entities(this.form.data1) type=button value="Convert special chars to entities"> </FORM> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->
Junior Member
SexyBookmarks - a small plugin for sharing the useful & helpful links on the famous social bookmark services (if... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Step 2: Copy & Paste HTML code below in your BODY sectionCode:<script type="text/javascript"> /* click handler for SexyBookmarks Credit: Phong Thai Cao - http://www.JavaScriptBank.com Please keep this creadit when you use this code */ jQuery('.sexy-bookmarks a.external').click(function() { // get the current URL & encode it into the standard URI var url = encodeURIComponent(window.location.href), desc = ''; // parse the description for the above URL by the text() method of jQuery // the text must be placed in the P tag with ID="sexy-bookmarks-content" // so you can change the container of description with another tag and/or another ID if( jQuery('p.sexy-bookmarks-content').length ) { desc = encodeURIComponent(jQuery('p.sexy-bookmarks-content').text()); } // detect the social bookmark site user want to share your URL // by checking the className of site that we'll declare in the HTML code // and assign the URL & description we got into the current anchor // then redirect to the clicked bookmark site, you can use window.open() method for opening the new window switch(this.parentNode.className) { case 'sexy-twittley': this.href += '?title=' + document.title + '&url=' + url + '&desc=' + desc + '&pcat=Internet&tags='; break; case 'sexy-digg': this.href += '?phase=2&title=' + document.title + '&url=' + url + '&desc=' + desc; break; case 'sexy-twitter': this.href += '?status=RT+@your_twitter_id:+' + document.title + '+-+' + url; break; case 'sexy-scriptstyle': this.href += '?title=' + document.title + '&url=' + url; break; case 'sexy-reddit': this.href += '?title=' + document.title + '&url=' + url; break; case 'sexy-delicious': this.href += '?title=' + document.title + '&url=' + url; break; case 'sexy-stumbleupon': this.href += '?title=' + document.title + '&url=' + url; break; case 'sexy-mixx': this.href += '?title=' + document.title + '&page_url=' + url + '&desc=' + desc; break; case 'sexy-technorati': this.href += '?add=' + url; break; case 'sexy-blinklist': this.href += '?Action=Blink/addblink.php&Title=' + document.title + '&Url=' + url; break; case 'sexy-diigo': this.href += '?title=' + document.title + '&url=' + url + '&desc=' + desc; break; case 'sexy-yahoobuzz': this.href += '?submitHeadline=' + document.title + '&submitUrl=' + url + '&submitSummary=' + desc + '&submitCategory=science&submitAssetType=text'; break; case 'sexy-myspace': this.href += '?t=' + document.title + '&u=' + url; break; case 'sexy-facebook': this.href += '?t=' + document.title + '&u=' + url; break; case 'sexy-designfloat': this.href += '?title=' + document.title + '&url=' + url; break; case 'sexy-devmarks': this.href += '?posttitle=' + document.title + '&posturl=' + url + '&posttext=' + desc; break; case 'sexy-newsvine': this.href += '?h=' + document.title + '&u=' + url; break; case 'sexy-google': this.href += '?op=add&title=' + document.title + '&bkmk=' + url; break; } }) </script>
HTML
Step 3: downloadsCode:<script type="text/javascript" src="path/to/directory/js/jquery.js"></script> <script type="text/javascript" src="path/to/directory/js/sexy-bookmarks-public.js"></script> <link rel="stylesheet" type="text/css" href="path/to/directory/css/style.css" media="screen" /> <div class="sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-center sexy-bookmarks-bg-sexy"> <ul class="socials"> <li class="sexy-twittley"><a href="http://twittley.com/submit/" rel="nofollow" class="external" title="Submit this to Twittley">Submit this to Twittley</a></li> <li class="sexy-digg"><a href="http://digg.com/submit" rel="nofollow" class="external" title="Digg this!">Digg this!</a></li> <li class="sexy-twitter"><a href="http://twitter.com/home" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a></li> <li class="sexy-scriptstyle"><a href="http://scriptandstyle.com/submit" rel="nofollow" class="external" title="Submit this to Script & Style">Submit this to Script & Style</a></li> <li class="sexy-reddit"><a href="http://reddit.com/submit" rel="nofollow" class="external" title="Share this on Reddit">Share this on Reddit</a></li> <li class="sexy-delicious"><a href="http://del.icio.us/post" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a></li> <li class="sexy-stumbleupon"><a href="http://www.stumbleupon.com/submit" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a></li> <li class="sexy-mixx"><a href="http://www.mixx.com/submit" rel="nofollow" class="external" title="Share this on Mixx">Share this on Mixx</a></li> <li class="sexy-technorati"><a href="http://technorati.com/faves" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a></li> <li class="sexy-blinklist"><a href="http://www.blinklist.com/index.php" rel="nofollow" class="external" title="Share this on Blinklist">Share this on Blinklist</a></li> <li class="sexy-diigo"><a href="http://www.diigo.com/post">Post this on Diigo</a></li> <li class="sexy-yahoobuzz"><a href="http://buzz.yahoo.com/submit/" rel="nofollow" class="external" title="Buzz up!">Buzz up!</a></li> <li class="sexy-myspace"><a href="http://www.myspace.com/Modules/PostTo/Pages/" rel="nofollow" class="external" title="Post this to MySpace">Post this to MySpace</a></li> <li class="sexy-facebook"><a href="http://www.facebook.com/share.php" rel="nofollow" class="external" title="Share this on Facebook">Share this on Facebook</a></li> <li class="sexy-designfloat"><a href="http://www.designfloat.com/submit.php" rel="nofollow" class="external" title="Submit this to DesignFloat">Submit this to DesignFloat</a></li> <li class="sexy-devmarks"><a href="http://devmarks.com/index.php" rel="nofollow" class="external" title="Share this on Devmarks">Share this on Devmarks</a></li> <li class="sexy-newsvine"><a href="http://www.newsvine.com/_tools/seed&save" rel="nofollow" class="external" title="Seed this on Newsvine">Seed this on Newsvine</a></li> <li class="sexy-google"><a href="http://www.google.com/bookmarks/mark" rel="nofollow" class="external" title="Add this to Google Bookmarks">Add this to Google Bookmarks</a></li> </ul> </div>
Files
sexy-bookmarks-public.js
sexy-bookmarks-style.css
sexy-sprite.png
sexy-trans.png
jquery.js
Junior Member
Need a system to rate an item on your web page? Let's implement the simple script to do that. This script is very easy to setup and modify, you only copy all JavaScript code into your web page (should... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Use JavaScript code below to setup the script
JavaScript
Step 2: Place HTML below in your BODY sectionCode:<SCRIPT language=JavaScript> string="<a href='http://javascriptbank.com/' style='text-decoration: none;'>JavaScriptBank.com</a>" // string to elastic text pausetime=100; // time to elastic effect. Decrease to slow // do not modify below this line var sizes = new Array("-8px","-4px","-2px","-1px","0px", "1px", "2px", "4px", "8px", "16px", "32px"); sizes.pos = 0; function rubberBand() { var el = document.all.elastic; if (el.direction==null) {el.direction = 1;} else if ((sizes.pos > sizes.length-2) || (sizes.pos==0)) {el.direction *= -1;} el.style.letterSpacing = sizes[sizes.pos += el.direction]; setTimeout('rubberBand()',pausetime); } rubberBand(); </SCRIPT> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->
HTML
Code:<P id=elastic style="FONT-SIZE: 25px; POSITION: relative; TOP: 20px" align=center> <!-- put desired text below. Replase my text. HTML tag allowed--> <A href="http://javascriptbank.com/" style="text-decoration: none;">JavaScriptBank.com</A> <!-- put desired text above. Replase my text. HTML tag allowed --> </P> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->
Junior Member
Cross-Browser DHTML Horizontal Slide Show: JavaScript concatenates and slides any number of images from right to left. Adjustable: Size, Backgroun... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Copy & Paste CSS code below in your HEAD section
CSS
Step 2: Place JavaScript below in your HEAD sectionCode:<STYLE type=text/css>A { TEXT-DECORATION: none } A:link { COLOR: blue } A:visited { COLOR: blue } A:hover { COLOR: red; BACKGROUND-COLOR: #66ffff } .tab { FONT-SIZE: 12px; FONT-FAMILY: Arial,Helvetica } .tabc { FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: navy; FONT-FAMILY: Arial,Helvetica; TEXT-ALIGN: center } .tabt { FONT-WEIGHT: bold; FONT-SIZE: 18px; COLOR: red; FONT-FAMILY: Arial,Helvetica; TEXT-ALIGN: center } </STYLE> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->
JavaScript
Step 3: Copy & Paste HTML code below in your BODY sectionCode:<SCRIPT language=JavaScript> if(top.location != self.location) top.location.replace(self.location); </SCRIPT> <SCRIPT language=javascript> //If using any portion of this DEMO script, //one must insert along this notice too: /*********************************** vasile barsan * http://javascripts.vbarsan.com/ * This notice may not be removed ***********************************/ var swidth=310;var sheight=50;var sspeed=2;var resspeed=sspeed;var restart=sspeed;var rspeed=sspeed;var imagef=''; preload1 = new Image(); preload1.src = "../image/gif_logojsb2.gif"; preload2 = new Image(); preload2.src = "../image/gif_logojsb.gif"; preload3 = new Image(); preload3.src = "../image/gif_logojsb2.gif"; var leftimage=new Array(); leftimage[0]='<a href="http://javascriptbank.com"><img src='+preload1.src+' width=310 height=47 alt="JavaScript Bank"></a>'; leftimage[1]='<a href="http://javascriptbank.com"><img src='+preload2.src+' width=310 height=47 alt="JavaScript Bank"></a>'; leftimage[2]='<a href="http://javascriptbank.com"><img src='+preload3.src+' width=310 height=47 alt="JavaScript Bank"></a>'; for(mi=0;mi<leftimage.length;mi++)imagef=imagef+leftimage[mi]; function goup(){if(sspeed!=rspeed*8){sspeed=sspeed*2;restart=sspeed;}} function start(){if(document.getElementById)firstns6(document.getElementById('slider'));else if(document.all)firstie(slider);else if(document.layers)firstns4(document.slider1.document.slider2);} var operbr=navigator.userAgent.toLowerCase().indexOf('opera');if(operbr==-1&&navigator.product&&navigator.product=="Gecko"){var agt = navigator.userAgent.toLowerCase();var rvStart = agt.indexOf('rv:');var rvEnd = agt.indexOf(')', rvStart);var check15 = agt.substring(rvStart+3, rvEnd);if(parseFloat(check15)>=1.8) operbr=0;}if (navigator.appVersion.indexOf("Mac")!=-1)operbr=0; function firstns4(whichdiv){tdivns4=eval(whichdiv);tdivns4.document.write('<nobr>'+imagef+'</nobr>');tdivns4.document.close();thel=tdivns4.document.width;tdivns4.left=swidth;slidens4();} function slidens4(){if(tdivns4.left>=thel*(-1)){tdivns4.left-=sspeed;setTimeout("slidens4()",100);}else{tdivns4.left=swidth;slidens4();}} function firstie(whichdiv){tdivie=eval(whichdiv);tdivie.innerHTML=('<nobr>'+imagef+'</nobr>');thel=tdivie.offsetWidth;tdivie.style.pixelLeft=swidth;slideie();} function slideie(){if(tdivie.style.pixelLeft>thel*(-1)){tdivie.style.pixelLeft-=sspeed;setTimeout("slideie()",100);}else{tdivie.style.pixelLeft=swidth;slideie();}} function firstns6(whichdiv){tdiv6=eval(whichdiv);tdiv6.innerHTML=('<nobr>'+imagef+'</nobr>');thel=tdiv6.offsetWidth;if(operbr!=-1){opslider.innerHTML='<nobr>'+imagef+'</nobr>';thel=opslider.offsetWidth;}tdiv6.style.left=swidth;slidens6();} function slidens6(){if(parseInt(tdiv6.style.left)>=thel*(-1)){tdiv6.style.left=parseInt(tdiv6.style.left)-sspeed;setTimeout("slidens6()",100);}else{tdiv6.style.left=swidth;slidens6();}} </SCRIPT> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->
HTML
Code:<BODY onload=start();> <SCRIPT language=javascript>document.write('<table border=2 align="center" bgcolor="#ccffcc"><tr><td bgcolor="#ffffcc"><div class=tabc><b><a class=tab href="#" onClick="goup();">Speed<br>UP</a></b></div></td><td width='+swidth+'>');if(document.layers)document.write('<span style="borderWidth:0.1px; borderStyle:none; clip:rect(0 '+swidth+' '+sheight+' 0);"><ilayer width='+swidth+' height='+sheight+' name="slider1"><layer class=tabt width='+swidth+' height='+sheight+'>SLIDING SHOW</layer><layer width='+swidth+' height='+sheight+' name="slider2" onMouseover="sspeed=0;" onMouseout="sspeed=resspeed"></layer></ilayer></span>');else {document.write('<div style="position:relative;overflow:hidden;width:'+swidth+';height:'+sheight+';clip:rect(0 '+swidth+' '+sheight+' 0);">');if(operbr!=-1)document.write('<div id="opslider" style="position:absolute;visibility:hidden;"></div>');else document.write('<div class=tabt style="position:absolute;width:'+swidth+';height:'+sheight+';">SLIDING SHOW</div>');document.write('<div id="slider" style="position:relative;height:'+sheight+';" onMouseover="sspeed=0;" onMouseout="sspeed=resspeed"></div></div>');}</SCRIPT> </TD></TR></TABLE><BR> </fieldset> </center> <SCRIPT language=JavaScript> function ctrlA0(corp) { with(corp){ focus(); select() } if(document.all){ txt=corp.createTextRange() txt.execCommand("Copy") window.status='Text copied to clipboard' } else window.status='Press ctrl-c to copy the text to the clipboard' setTimeout("window.status=''",5000) } </SCRIPT> </body> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->
Junior Member
This is a spinning three dimensional cube. Eight dots revolve by itself to create a motional cube.... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Use JavaScript code below to setup the script
JavaScript
Step 2: Copy & Paste HTML code below in your BODY sectionCode:<SCRIPT language=javascript> /* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com */ <!-- // (c) 2001 Till Nagel, till@netzministerium.de & Rene Sander, rene@netzministerium.de // --------------------------------------------------------------------------- // creates cube model with name and (a simple) material var cubeModel = new Model("cube", new Material("°")); // defines model points. // The model's points have to be defined before the respective code is written into the document. cubeModel.setPoints(createCubeModelPoints()); // --------------------------------------------------------------------------- // the matrix to transform the model with var staticRotationMatrix = new Matrix(); staticRotationMatrix.rotateX(0.05); staticRotationMatrix.rotateY(0.1); // --------------------------------------------------------------------------- function initOnLoad() { fixNetscape(); // assign layer (only for Netscape 4.x, for all other browsers // this is done automatically when writing the point code) cubeModel.assignLayers(); // creates and inits matrix to initialize the model var initMatrix = new Matrix(); initMatrix.scale(50, 50, 50); // >> begin to work with the model etc. // initializes model cubeModel.transform(initMatrix); // >> first draw of the model (recommended) cubeModel.draw(); // starts animation animate(); } /* * The main animate method. Calls itself repeatedly. */ function animate() { var delay = 10; // animates cube model ---------------------------------------- // rotates the cube cubeModel.transform(staticRotationMatrix); // updates display cubeModel.draw(); // calls itself with an delay to decouple client computer speed from the animation speed. // result: the animation is as fast as possible. setTimeout("animate()", delay); } // --------------------------------------------------------------------------- function createCubeModelPoints() { // the cube model return new Array( // Point3D( x, y, z, m) new Point3D( 1, 1, 1, 0), new Point3D( 1, 1, -1, 0), new Point3D( 1, -1, 1, 0), new Point3D( 1, -1, -1, 0), new Point3D(-1, 1, 1, 0), new Point3D(-1, 1, -1, 0), new Point3D(-1, -1, 1, 0), new Point3D(-1, -1, -1, 0) ); } // --> </SCRIPT>
HTML
Step 3: Download files belowCode:<DIV id=fixnetscape style="POSITION: absolute; VISIBILITY: hidden"></DIV> <SCRIPT language=JavaScript type=text/javascript> <!-- // (c) 2001 Till Nagel, till@netzministerium.de & Rene Sander, rene@netzministerium.de // MANDATORY: INSERTION OF HTML PART INTO PAGE // creates the HTML code representing the model's points // NB: This is written directly into the page from within the method cubeModel.createPointCode(); // --> </SCRIPT>
Files
LyrObj.js
3dhtml.js
ColorUtil.js
materials.js
Junior Member
As the title of this post said, you should choose one of these JavaScript ebooks, or some ebooks to start learning if you are JavaScript (or Progamming) beginners. So if you are an expert? Then I hope... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Junior Member
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: Place JavaScript below in your HEAD section
JavaScript
Step 2: Place HTML below in your BODY sectionCode:<script type="text/javascript" src="rssticker.js"></script>
HTML
Step 3: Download files belowCode: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>
Files
rssticker.js
Junior Member
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: Use JavaScript code below to setup the script
JavaScript
Step 2: Place HTML below in your BODY sectionCode:<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 -->
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 -->
Posting Permissions
Featured on:
Copyright © 2011 Entrepreneur Media, Inc. All rights reserved.
Disclosure: You should assume that the owner of this website is an affiliate for providers of goods and services mentioned on this website and in the videos. The owner may be compensated when you purchase from a provider. Perform due diligence before purchasing from this or any other website.
Reply With Quote
