![]() |
|
|||||||
| JavaScript Programming Discuss javascript coding. |
This is a discussion on Open New Window Dropdown within the JavaScript Programming forums, part of the Webmaster / Coding / Web Design Discussion category; Only a fews of days then Christmas will come. And if you are looking for one beautiful countdown timer for ...
![]() |
|
|
LinkBack | Thread Tools | Display Modes |
|
|
#21 |
|
New Hunter
|
Only a fews of days then Christmas will come. And if you are looking for one beautiful countdown timer for waiting <i>Christmas Day</i> on your website, then I hope this post will satisfy your needs; ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup |
|
|
|
|
|
#22 |
|
New Hunter
|
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: Place JavaScript 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
-->
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
-->
Files line.js wz_jsgraphics.js |
|
|
|
|
|
#23 |
|
New Hunter
|
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: Use JavaScript code below to setup the script 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>
Files snow3.gif |
|
|
|
|
|
#24 |
|
New Hunter
|
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 |
|
|
|
|
|
#25 |
|
New Hunter
|
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: Place CSS 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
-->
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
-->
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()>>> 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
-->
Files rotaclock2930.gif |
|
|
|
|
|
#26 |
|
New Hunter
|
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: Place HTML 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
-->
|
|
|
|
|
|
#27 |
|
New Hunter
|
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> 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>
Files rssticker.js |
|
|
|
|
|
#28 |
|
New Hunter
|
Cast an interactive 'spotlight' on the image of your choice using this DHTML script. Move the light about using your mouse. This cool effect works in IE4+, degrading well with the rest.... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup Step 1: Copy & Paste CSS code below in your HEAD section CSS Code:
<style type="text/css">
<!--
body{
background-image : url('none') !important;
}
#content{
background-color : #ffffff;
position : absolute;
top : 0px;
left : 0px;
padding : 10px;
visibility : hidden;
}
#light{
position : absolute;
top : 0px;
left : 0px;
overflow : hidden;
}
//-->
</style>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
HTML Code:
<script type="text/javascript" src="spotlight_part_1.js"></script>
<script type="text/javascript" src="spotlight_part_2.js"></script>
<div style="z-index: 110;"></div>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Files spotlight_part_1.js spotlight_part_2.js spotlight.gif |
|
|
|
|
|
#29 |
|
New Hunter
|
One of the many cursor codes in our JavaScript library, this one creates dancing stars animating around your pointers mouse. This [URL="http://www.javascriptbank.com/=cursor move"]cur... 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">
<!--
/*
Dancing Stars cursor (Submitted by Kurt at kurt.grigg@virgin.net)
Modified and permission granted to Dynamic Drive to feature script in archive
For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/
if (document.all){
document.write('<div id="starsDiv" style="position:absolute;top:0px;left:0px">')
for (xy=0;xy<7;xy++)
document.write('<div style="position:relative;width:3px;height:3px;background:#FFFF00;font-size:2px;visibility:visible"></div>')
document.write('</div>')
}
if (document.layers)
{window.captureEvents(Event.MOUSEMOVE);}
var yBase = 200;
var xBase = 200;
var yAmpl = 10;
var yMax = 40;
var step = .2;
var ystep = .5;
var currStep = 0;
var tAmpl=1;
var Xpos = 1;
var Ypos = 1;
var i = 0;
var j = 0;
if (document.all)
{
function MoveHandler(){
Xpos = document.body.scrollLeft+event.x;
Ypos = document.body.scrollTop+event.y;
}
document.onmousemove = MoveHandler;
}
else if (document.layers)
{
function xMoveHandler(evnt){
Xpos = evnt.pageX;
Ypos = evnt.pageY;
}
window.onMouseMove = xMoveHandler;
}
function animateLogo() {
if (document.all)
{
yBase = window.document.body.offsetHeight/4;
xBase = window.document.body.offsetWidth/4;
}
else if (document.layers)
{
yBase = window.innerHeight/4 ;
xBase = window.innerWidth/4;
}
if (document.all)
{
var totaldivs=document.all.starsDiv.all.length
for ( i = 0 ; i < totaldivs ; i++ )
{
var tempdiv=document.all.starsDiv.all[i].style
tempdiv.top = Ypos + Math.cos((20*Math.sin(currStep/20))+i*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
tempdiv.left = Xpos + Math.sin((20*Math.sin(currStep/20))+i*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
}
}
else if (document.layers)
{
for ( j = 0 ; j < 7 ; j++ )
{
var templayer="a"+j
document.layers[templayer].top = Ypos + Math.cos((20*Math.sin(currStep/20))+j*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
document.layers[templayer].left =Xpos + Math.sin((20*Math.sin(currStep/20))+j*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
}
}
currStep += step;
setTimeout("animateLogo()", 15);
}
animateLogo();
// -->
</script>
HTML Code:
<LAYER NAME="a0" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER> <LAYER NAME="a1" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER> <LAYER NAME="a2" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER> <LAYER NAME="a3" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER> <LAYER NAME="a4" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER> <LAYER NAME="a5" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER> <LAYER NAME="a6" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER> |
|
|
|
|
|
#30 |
|
New Hunter
|
When designing web site, sometimes we need to fill areas of layout with some text, and we usually do this thing by making some copy & paste on any conte... 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">
// Created by: Will Munslow | http://subterrane.com
function objectTag() {
var lorem = new Array();
switch(document.loremForm.loremString.value) {
case "latin": {
lorem[0] = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.";
break;
}
case "silly": {
lorem[0] = "Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.";
break;
}
case "spanish": {
lorem[0] = "Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit? de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.";
break;
}
case "italian": {
lorem[0] = "Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es."
break;
}
}
if ("characters" == document.loremForm.type.value) {
var outputString = '';
var numOfChars = document.loremForm.numbers.value;
numOfChars = parseInt( numOfChars );
var tempString = lorem.join( "nn" );
while (
outputString.length < numOfChars ) outputString += tempString;
document.loremForm.output.value = outputString.substring(0, numOfChars ); // changed
} else if("words" == document.loremForm.type.value) {
var numOfWords = document.loremForm.numbers.value;
numOfWords = parseInt( numOfWords );
var list = new Array();
var wordList = new Array();
wordList = lorem[0].split( ' ' );
var iParagraphCount = 0;
var iWordCount = 0;
while( list.length < numOfWords ) {
if( iWordCount > wordList.length ) {
iWordCount = 0;
iParagraphCount++;
if( iParagraphCount + 1 > lorem.length ) iParagraphCount = 0;
wordList = lorem[ iParagraphCount ].split( ' ' );
wordList[0] = "nn" + wordList[ 0 ];
}
list.push( wordList[ iWordCount ] );
iWordCount++;
}
document.loremForm.output.value = list.join(' '); // changed
} else {
var numOfParagraphs = document.loremForm.numbers.value;
numOfParagraphs = parseInt( numOfParagraphs );
var list = new Array();
var iParagraphCount = 0;
while(list.length < numOfParagraphs) {
if(iParagraphCount +1 > lorem.length) {
iParagraphCount = 0;
}
list.push( lorem[iParagraphCount] );
iParagraphCount++;
}
document.loremForm.output.value = list.join( "nn" ); // changed
}
}
function copypaste() {
document.loremForm.output.focus();
document.loremForm.output.select();
therange=document.loremForm.output.createTextRange();
therange.execCommand("Copy");
}
</script>
HTML Code:
<form name="loremForm" action="javascript:objectTag();" id="loremForm"> <strong>Select language type ...</strong> <select name="loremString" style="width: 100%;"> <option value="latin" selected="selected">Lorem ipsum dolor sit amet...</option> <option value="silly">Epsum factorial non deposit quid pro quo...</option> <option value="spanish">Li Europan lingues es membres del sam familie...</option> <option value="italian">Ma quande lingues coalesce, li grammatica...</option> </select><br /> <strong>Select number of </strong> <select name="type"> <option value="characters">Characters</option> <option value="words" selected="selected">Words</option> <option value="paragraphs">Paragraphs</option> </select> <input type="text" name="numbers" value="8" size="4"> <input type="submit" name="btnOK" value="Generate"> <br /> <textarea rows="10" name="output" style="width: 100%;"></textarea> <br /> <input type="button" onclick="copypaste()" value="Select Text" name="select"> <input type="button" onclick=document.loremForm.reset() value="Reset form"> </form> |
|
|
|
|
|
#31 |
|
New Hunter
|
This JavaScript 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... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup Step 1: Use JavaScript code below to setup the script JavaScript Code:
<SCRIPT LANGUAGE="JavaScript">
// 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
-->
|
|
|
|
|
|
#32 |
|
New Hunter
|
By using your computer's clock, you can calculate the time in other time zones all over the world! Currently, the script works for eight of the major time zones. But, just change one entry (or just ad... 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">
<!-- Original: Emanuel Gavrilv (eltal@sprint.ca) -->
<!-- Begin
function GetTime() {
var dt = new Date();
var def = dt.getTimezoneOffset()/60;
var gmt = (dt.getHours() + def);
document.clock.local.value = (IfZero(dt.getHours()) + ":" + IfZero(dt.getMinutes()) + ":" + IfZero(dt.getSeconds()));
var ending = ":" + IfZero(dt.getMinutes()) + ":" + IfZero(dt.getSeconds());
var rome =check24(((gmt + 1) > 24) ? ((gmt + 1) - 24) : (gmt + 1));
document.clock.rome.value = (IfZero(rome) + ending);
var isr =check24(((gmt + 2) > 24) ? ((gmt + 2) - 24) : (gmt + 2));
document.clock.Israel.value = (IfZero(isr) + ending);
var msw =check24(((gmt + 3) > 24) ? ((gmt + 3) - 24) : (gmt + 3));
document.clock.msw.value = (IfZero(msw) + ending);
var baku =check24(((gmt + 4) > 24) ? ((gmt + 4) - 24) : (gmt + 4));
document.clock.baku.value = (IfZero(baku) + ending);
var del =check24(((gmt + 5) > 24) ? ((gmt + 5) - 24) : (gmt + 5));
document.clock.del.value = (IfZero(del) + ending);
var dh =check24(((gmt + 6) > 24) ? ((gmt + 6) - 24) : (gmt + 6));
document.clock.dh.value = (IfZero(dh) + ending);
var kok =check24(((gmt +7 ) > 24) ? ((gmt +7 ) - 24) : (gmt + 7));
document.clock.kok.value = (IfZero(kok) + ending);
var ho =check24(((gmt + 8) > 24) ? ((gmt + 8) - 24) : (gmt + 8));
document.clock.ho.value = (IfZero(ho) + ending);
var tky =check24(((gmt + 9) > 24) ? ((gmt + 9) - 24) : (gmt + 9));
document.clock.tky.value = (IfZero(tky) + ending);
var sdn =check24(((gmt + 10) > 24) ? ((gmt + 10) - 24) : (gmt + 10));
document.clock.sdn.value = (IfZero(sdn) + ending);
var mag =check24(((gmt + 11) > 24) ? ((gmt + 11) - 24) : (gmt + 11));
document.clock.mag.value = (IfZero(mag) + ending);
var wll =check24(((gmt + 12) > 24) ? ((gmt + 12) - 24) : (gmt + 12));
document.clock.wll.value = (IfZero(wll) + ending);
var _GMT =check24(((gmt) > 24) ? ((gmt) - 24) : (gmt));
document.clock._GMT.value = (IfZero(_GMT) + ":" + IfZero(dt.getMinutes()) + ":" + IfZero(dt.getSeconds()));
var eniw =check24(((gmt + (24-12)) > 24) ? ((gmt + (24-12)) - 24) : (gmt + (24-12)));
document.clock.eniw.value = (IfZero(eniw) + ending);
var sam =check24(((gmt + (24-11)) > 24) ? ((gmt + (24-11)) - 24) : (gmt + (24-11)));
document.clock.sam.value = (IfZero(sam) + ending);
var haw =check24(((gmt + (24-10)) > 24) ? ((gmt + (24-10)) - 24) : (gmt + (24-10)));
document.clock.Hawaii.value = (IfZero(haw) + ending);
var ala =check24(((gmt + (24-9)) > 24) ? ((gmt + (24-9)) - 24) : (gmt + (24-9)));
document.clock.alaska.value = (IfZero(ala) + ending);
var pacif =check24(((gmt + (24-8)) >= 24) ? ((gmt + (24-8)) - 24) : (gmt + (24-8)));
document.clock.pacif.value = (IfZero(pacif) + ending);
var mount =check24(((gmt + (24-7)) > 24) ? ((gmt + (24-7)) - 24) : (gmt + (24-7)));
document.clock.mount.value = (IfZero(mount) + ending);
var center =check24(((gmt + (24-6)) > 24) ? ((gmt + (24-6)) - 24) : (gmt + (24-6)));
document.clock.center.value = (IfZero(center) + ending);
var east =check24(((gmt + (24-5)) > 24) ? ((gmt + (24-5)) - 24) : (gmt + (24-5)));
document.clock.east.value = (IfZero(east) + ending);
var atl =check24(((gmt + (24-4)) > 24) ? ((gmt + (24-4)) - 24) : (gmt + (24-4)));
document.clock.atl.value = (IfZero(atl) + ending);
var bra =check24(((gmt + (24-3)) > 24) ? ((gmt + (24-3)) - 24) : (gmt + (24-3)));
bra = (bra >= 24) ? bra - 24 : bra;
document.clock.bra.value = (IfZero(bra) + ending);
var mid =check24(((gmt + (24-2)) > 24) ? ((gmt + (24-2)) - 24) : (gmt + (24-2)));
mid = (mid >= 24) ? mid - 24 : mid;
document.clock.mid.value = (IfZero(mid) + ending);
var azo =check24(((gmt + (24-1)) > 24) ? ((gmt + (24-1)) - 24) : (gmt + (24-1)));
azo = (azo >= 24) ? azo - 24 : azo;
document.clock.azo.value = (IfZero(azo) + ending);
setTimeout("GetTime()", 1000);
}
function IfZero(num) {
return ((num <= 9) ? ("0" + num) : num);
}
function check24(hour) {
return (hour >= 24) ? hour - 24 : hour;
}
// End -->
</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="javascript:GetTime();">
<form name="clock">
<strong>Local Time <input type="text" size="8" name="local"></strong>
<p>
Eniwetok (GMT-12) <input type="text" size="8" name="eniw"><br>
Samoa (GMT-11) <input type="text" size="8" name="sam"><br>
Hawaii (GMT-10) <input type="text" size="8" name="Hawaii">
<p>
Alaska (GMT-9) <input type="text" size="8" name="alaska"><br>
Pacific Time (GMT-8) <input type="text" size="8" name="pacif"><br>
Mountain Time (GMT-7) <input type="text" size="8" name="mount">
<p>
Central Time (GMT-6) <input type="text" size="8" name="center"><br>
Eastern Time (GMT-5) <input type="text" size="8" name="east"><br>
Atlantic Time (GMT-4) <input type="text" size="8" name="atl">
<p>
Brazilia (GMT-3) <input type="text" size="8" name="bra"><br>
Mid-Atlantic (GMT-2) <input type="text" size="8" name="mid"><br>
Azores (GMT-1) <input type="text" size="8" name="azo">
<p>
<strong>Greenwich Mean Time (GMT) <input type="text" size="8" name="_GMT"></strong>
<p>
Rome (GMT +1) <input type="text" size="8" name="rome"><br>
Israel (GMT +2) <input type="text" size="8" name="Israel"><br>
Moscow (GMT +3) <input type="text" size="8" name="msw">
<p>
Baku (GMT +4) <input type="text" size="8" name="baku"><br>
New Delhi (GMT +5) <input type="text" size="8" name="del"><br>
Dhakar (GMT +6) <input type="text" size="8" name="dh">
<p>
Bangkok (GMT +7) <input type="text" size="8" name="kok"><br>
Hong Kong (GMT +8) <input type="text" size="8" name="ho"><br>
Tokyo (GMT +9) <input type="text" size="8" name="tky">
<p>
Sydney (GMT +10) <input type="text" size="8" name="sdn"><br>
Magadan (GMT +11) <input type="text" size="8" name="mag"><br>
Wellington (GMT +12) <input type="text" size="8" name="wll">
</form>
</body>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
|
|
|
|
|
|
#33 |
|
New Hunter
|
This JavaScript helps you open floating layer popups. The layers alway stay on top, allowing your visitors to work in the main 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">
/*
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
.jsbank_sample_cont {margin: 20px; padding: 20px;}
.jsbank_sample_tit {font-weight: bold; margin-bottom: 10px; padding: 5px; width: auto; background-color: #c0c0c0; border: 5px solid #a0a0a0; color: black; text-align: center;}
/*
Created by: Jeroen Haan
Web Site: http://www.haan.net/
*/
#layer1 {
position: absolute;
visibility: hidden;
width: 400px;
height: 300px;
left: 20px;
top: 300px;
background-color: #ccc;
border: 1px solid #000;
padding: 10px;
}
#close {
float: right;
}
</style>
JavaScript Code:
<SCRIPT type=text/javascript>
<!--
// Created by: Jeroen Haan :: http://www.haan.net/
/* -----------------------------------------------
Floating layer - v.1
(c) 2006 www.haan.net
contact: jeroen@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.
------------------------------------------------ */
x = 20;
y = 70;
function setVisible(obj)
{
obj = document.getElementById(obj);
obj.style.visibility = (obj.style.visibility == 'visible') ? 'hidden' : 'visible';
}
function placeIt(obj)
{
obj = document.getElementById(obj);
if (document.documentElement)
{
theLeft = document.documentElement.scrollLeft;
theTop = document.documentElement.scrollTop;
}
else if (document.body)
{
theLeft = document.body.scrollLeft;
theTop = document.body.scrollTop;
}
theLeft += x;
theTop += y;
obj.style.left = theLeft + 'px' ;
obj.style.top = theTop + 'px' ;
setTimeout("placeIt('layer1')",500);
}
window.onscroll = setTimeout("placeIt('layer1')",500);
//-->
</SCRIPT>
HTML Code:
<DIV id=layer1><SPAN id=close><A style="TEXT-DECORATION: none"
href="javascript:setVisible('layer1')"><STRONG>Hide</STRONG></A></SPAN>
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci.</P><BR><BR><IMG height=65
src="../image/logojs.gif" width=120 border=0> </DIV>
<p>This link uses the onclick event handler.<br>
<a href="#" onclick="setVisible('layer1');return false" target="_self">Open popup</a></p>
<p>This next one uses the javascript link inside the href tag.<br>
<a href="javascript:setVisible('layer1',true)">Open popup</a></p>
<form>
And this one uses the input button inside a form tag.<br>
<input type="button" value="Open popup" onclick="setVisible('layer1')">
</form>
<p>It can also be used in an image map. Here, the word 'Webhost' contains the link<br>
<img src="../image/logojs.gif" width="120" height="65" border="0" usemap="#Map">
<map name="Map" id="Map">
<area shape="rect" coords="1,1,113,23" href="#" onclick="setVisible('layer1');return false" target="_self">
</map>
|
|
|
|
|
|
#34 |
|
New Hunter
|
Floating background image script animates any image (or block of HTML) up and down the 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>
//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>
GetDiv('Top',0,0,100,100,'pink',1,0)
document.write("Top Place")
EndDiv()
GetDiv('Bottom',4000,0,100,100,'pink',1,0)
document.write("Bottom Place")
EndDiv()
d=50
y=0
function Scroll(){
y+=d
if(y>=3800)d=-50
if(y<=0)d=50
window.scroll(0,y)
}
setInterval('Scroll()',50)
</SCRIPT>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
HTML Code:
<BODY background="pic191.jpg">
</BODY>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Files pic191.jpg |
|
|
|
|
|
#35 |
|
New Hunter
|
Script creates JavaScript menu with links based on rollover effect. While moving 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>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("logojs.gif","photo1.jpg","photo2.jpg","photo3.jpg","photo4.jpg")
</script>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
HTML Code:
<a href="" onMouseover="changeimage(myimages[0],this.href)">JavaScriptBank.com</a><br>
<a href="" onMouseover="changeimage(myimages[1],this.href)">JavaScriptBank.com</a><br>
<a href="" onMouseover="changeimage(myimages[2],this.href)">JavaScriptBank.com</a><br>
<a href="" onMouseover="changeimage(myimages[3],this.href)">JavaScriptBank.com</a><br>
<a href="" onMouseover="changeimage(myimages[4],this.href)">JavaScriptBank.com</a><br>
<a href="javascript:warp()"><img src="logojs.gif" name="targetimage" border=0></a>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
|
|
|
|
|
|
#36 |
|
New Hunter
|
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 |
|
|
|
|
|
#37 |
|
New Hunter
|
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 Code:
<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 Code:
<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 |
|
|
|
|
|
#38 |
|
New Hunter
|
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: Place JavaScript below in your HEAD section JavaScript Code:
<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
-->
|
|
|
|
|
|
#39 |
|
New Hunter
|
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: Place CSS below in your HEAD section CSS Code:
<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 Code:
<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
-->
|
|
|
|
|
|
#40 |
|
New Hunter
|
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: Place JavaScript 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
*/
<!-- // (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 Code:
<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 |
|
|
|
![]() |
| Bookmarks |
| Thread Tools | |
| Display Modes | |
|
|