 |
 |
|
|
|||||||
| Scripts and Tools Share your free scripts , tools , icons, fontz, screen savers , etc here. |
 |
|
|
Thread Tools | Display Modes |
|
|
|
|
|
|||||||
| Scripts and Tools Share your free scripts , tools , icons, fontz, screen savers , etc here. |
|
|
|
Thread Tools | Display Modes |
|
#31
02-24-2010, 03:05 PM
|
|||
|
|||
Rating star script
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
[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/utility/rating-star-script-index.jpg[/IMG] Demo: JavaScript Rating star script How to setup Step 1: Use JavaScript code below to setup the script JavaScript Code:
<SCRIPT language=JavaScript>
string="<a href='hxxp ://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 w w w.JavaScriptBank. com
Come to view and download over 2000+ free javascript at w w w.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="hxxp ://javascriptbank. com/" style="text-decoration: none;">JavaScriptBank. com</A>
<!-- put desired text above. Replase my text. HTML tag allowed -->
</P>
<!--
This script downloaded from w w w.JavaScriptBank. com
Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
-->
JavaScript Vertical Marquee - JavaScript DHTML analog clock - JavaScript Backwards Text
|
|
#32
03-01-2010, 11:44 PM
|
|||
|
|||
|
Horizontal Slider JavaScript v2.2
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
[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/scroller/horizontal-slider-javascript-v2-2.jpg[/IMG] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Copy & Paste CSS code 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 w w w.JavaScriptBank. com
Come to view and download over 2000+ free javascript at w w w.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
* hxxp ://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="hxxp ://javascriptbank. com"><img src='+preload1.src+' width=310 height=47 alt="JavaScript Bank"></a>';
leftimage[1]='<a href="hxxp ://javascriptbank. com"><img src='+preload2.src+' width=310 height=47 alt="JavaScript Bank"></a>';
leftimage[2]='<a href="hxxp ://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 w w w.JavaScriptBank. com
Come to view and download over 2000+ free javascript at w w w.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 w w w.JavaScriptBank. com
Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
-->
Javascript floating message - Javascript multi level drop down menu - JavaScript in_array()
Last edited by JavaScriptBank; 03-02-2010 at 12:36 AM.
|
|
#33
03-04-2010, 11:50 PM
|
|||
|
|||
|
3D self-revolving cube
This is a spinning three dimensional cube. Eight dots revolve by itself to create a motional cube.... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Place JavaScript below in your HEAD section JavaScript Code:
<SCRIPT language=javascript>
/*
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 [Only Registered users can see links . Click Here To Register...] [Only Registered users can see links . Click Here To Register...] [Only Registered users can see links . Click Here To Register...] [Only Registered users can see links . Click Here To Register...]
|
|
#34
03-08-2010, 11:39 PM
|
|||
|
|||
|
Animated Drop Down Navigation Menu
This free JavaScript will add [Only Registered users can see links . Click Here To Register...] for menus when users move mouse over a specified link, or they are set to appear through click. The menu also allo... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Copy & Paste CSS code below in your HEAD section CSS Code:
<style type="text/css" name="jkoutlinemenu.css">
/*
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
.outlinemenu{
position: absolute; /*leave this alone*/
display: none; /*leave this alone*/
width: 180px; /*default width of menu*/
border: 1px solid black;
overflow-x: hidden;
}
.outlinemenu ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.outlinemenu ul li a{
background: white;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: #00014e;
display: block;
width: auto;
padding: 3px 0;
padding-left: 5px;
text-decoration: none;
border-bottom: 1px solid #B5B5B5;
}
.outlinemenu ul li a:visited, .outlinemenu ul li a:active{
color: #00014e;
}
.outlinemenu ul li a:hover{
color: black;
background: #ffffcb;
}
/* Holly Hack for IE \*/
* html .outlinemenu li {height: 1%; }
* html .outlinemenu li a { height: 1%; }
/* End */
</style>
JavaScript Code:
<script type="text/javascript" src="/javascript/jquery.js"></script>
<script type="text/javascript" name="jkoutlinemenu.js">
/***********************************************
* Animated Outline Menu- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/
var jkoutlinemenu={
effectduration: 300, //duration of animation, in milliseconds
outlinemenulabels: [],
outlinemenus: [], //array to contain each block menu instances
zIndexVal: 1000, //starting z-index value for drop down menu
$shimobj: null,
addshim:function(){
$(document.body).append('<IFRAME id="outlineiframeshim" src="'+(location.protocol=="https:"? 'blank.htm' : 'about:blank')+'" style="display:none; left:0; top:0; z-index:999; position:absolute; filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)" frameBorder="0" scrolling="no"></IFRAME>')
this.$shimobj=$("#outlineiframeshim")
//alert(this.$shimobj.attr("src"))
},
alignmenu:function(e, outlinemenu_pos){
var outlinemenu=this.outlinemenus[outlinemenu_pos]
var $anchor=outlinemenu.$anchorobj
var $menu=outlinemenu.$menuobj
var menuleft=($(window).width()-(outlinemenu.offsetx-$(document).scrollLeft())>outlinemenu.actualwidth)? outlinemenu.offsetx : outlinemenu.offsetx-outlinemenu.actualwidth+outlinemenu.anchorwidth //get x coord of menu
var menutop=($(window).height()-(outlinemenu.offsety-$(document).scrollTop()+outlinemenu.anchorheight)>outlinemenu.actualheight)? outlinemenu.offsety+outlinemenu.anchorheight : outlinemenu.offsety-outlinemenu.actualheight //get y coord of menu
$menu.css({left:menuleft+"px", top:menutop+"px"})
this.$shimobj.css({width:outlinemenu.actualwidth+"px", height:outlinemenu.actualheight+"px", left:menuleft+"px", top:menutop+"px", display:"block"})
},
showmenu:function(e, outlinemenu_pos){
var outlinemenu=this.outlinemenus[outlinemenu_pos]
var $menu=outlinemenu.$menuobj
var $menuinner=outlinemenu.$menuinner
if ($menu.css("display")=="none"){
this.alignmenu(e, outlinemenu_pos)
$menu.css("z-index", ++this.zIndexVal)
$menu.show(this.effectduration, function(){
$menuinner.css('visibility', 'visible')
})
}
else if ($menu.css("display")=="block" && e.type=="click"){ //if menu is hidden and this is a "click" event (versus "mouseout")
this.hidemenu(e, outlinemenu_pos)
}
return false
},
hidemenu:function(e, outlinemenu_pos){
var outlinemenu=this.outlinemenus[outlinemenu_pos]
var $menu=outlinemenu.$menuobj
var $menuinner=outlinemenu.$menuinner
$menuinner.css('visibility', 'hidden')
this.$shimobj.css({display:"none", left:0, top:0})
$menu.hide(this.effectduration)
},
definemenu:function(anchorid, menuid, revealtype, optwidth, optheight){
var $=jQuery
this.outlinemenulabels.push([anchorid, menuid, revealtype, optwidth, optheight])
},
render:function($){
for (var i=0, labels=this.outlinemenulabels[i]; i<this.outlinemenulabels.length; i++, labels=this.outlinemenulabels[i]){
this.outlinemenus.push({$anchorobj:$("#"+labels[0]), $menuobj:$("#"+labels[1]), $menuinner:$("#"+labels[1]).children('ul:first-child'), revealtype:labels[2]})
var outlinemenu=this.outlinemenus[i]
outlinemenu.$anchorobj.add(outlinemenu.$menuobj).attr("_outlinemenupos", i+"pos")
outlinemenu.$menuobj.css(parseInt(labels[3])>10? {width:parseInt(labels[3])+"px"} : {})
outlinemenu.$menuobj.css(parseInt(labels[4])<outlinemenu.$menuobj.height()? {height:parseInt(labels[4])+"px", overflow:"scroll", overflowX:"hidden"} : {})
outlinemenu.actualwidth=outlinemenu.$menuobj.outerWidth()
outlinemenu.actualheight=outlinemenu.$menuobj.outerHeight()
outlinemenu.offsetx=outlinemenu.$anchorobj.offset().left
outlinemenu.offsety=outlinemenu.$anchorobj.offset().top
outlinemenu.anchorwidth=outlinemenu.$anchorobj.outerWidth()
outlinemenu.anchorheight=outlinemenu.$anchorobj.outerHeight()
outlinemenu.$menuobj.css("z-index", ++this.zIndexVal).hide()
outlinemenu.$menuinner.css("visibility", "hidden")
outlinemenu.$anchorobj.bind(outlinemenu.revealtype=="click"? "click" : "mouseenter", function(e){
return jkoutlinemenu.showmenu(e, parseInt(this.getAttribute("_outlinemenupos")))
})
outlinemenu.$anchorobj.bind("mouseleave", function(e){
var $menu=jkoutlinemenu.outlinemenus[parseInt(this.getAttribute("_outlinemenupos"))].$menuobj
if (e.relatedTarget!=$menu.get(0) && $(e.relatedTarget).parents("#"+$menu.get(0).id).length==0){ //check that mouse hasn't moved into menu object
jkoutlinemenu.hidemenu(e, parseInt(this.getAttribute("_outlinemenupos")))
}
})
outlinemenu.$menuobj.bind("click mouseleave", function(e){
jkoutlinemenu.hidemenu(e, parseInt(this.getAttribute("_outlinemenupos")))
})
} //end for loop
$(document).bind("click", function(e){
for (var i=0; i<jkoutlinemenu.outlinemenus.length; i++){
jkoutlinemenu.hidemenu(e, i)
}
}) //end document.click
$(window).bind("resize", function(){
for (var i=0; i<jkoutlinemenu.outlinemenus.length; i++){
var outlinemenu=jkoutlinemenu.outlinemenus[i]
outlinemenu.offsetx=outlinemenu.$anchorobj.offset().left
outlinemenu.offsety=outlinemenu.$anchorobj.offset().top
}
})
jkoutlinemenu.addshim()
}
}
jQuery(document).ready(function($){
jkoutlinemenu.render($)
})
/*
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
</script>
HTML Code:
<a href="#" id="designanchor">Web Design Links</a>
<br /><br />
<div style="text-align:right"><a href="#" id="designanchor2">More web Design Links</a></div>
<!--Define HTML for all animated menus at the very end of the page (ie: right before </body> tag)!-->
<div id="mymenu1" class="outlinemenu">
<ul>
<li><a href="http://www.dynamicdrive.com/">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/" >Dynamic Drive</a></li>
<li><a href="http://www.javascriptbank.com/">JavaScript Bank</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >CSS Library</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptbank.com/forum/">JavaScript Forums</a></li>
<li><a href="http://www.javascriptbank.com/service/">JavaScript Services</a></li>
<li><a href="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a></li>
</ul>
</div>
<script type="text/javascript">
//jkoutlinemenu.definemenu("anchorid", "menuid", "mouseover|click", optional_width, optional_height)
jkoutlinemenu.definemenu("designanchor", "mymenu1", "mouseover", 180)
</script>
<div id="mymenu2" class="outlinemenu">
<ul>
<li><a href="http://www.dynamicdrive.com/">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.javascriptbank.com/">JavaScript Bank</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >CSS Library</a></li>
<li><a href="http://www.javascriptbank.com/forum/">JavaScript Forums</a></li>
<li><a href="http://www.javascriptbank.com/service/">JavaScript Services</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a></li>
</ul>
</div>
<script type="text/javascript">
//jkoutlinemenu.definemenu("anchorid", "menuid", "mouseover|click", optional_width, optional_height)
jkoutlinemenu.definemenu("designanchor2", "mymenu2", "mouseover", 170, 150)
</script>
|
|
#35
03-13-2010, 12:50 AM
|
|||
|
|||
|
Top 10 Best JavaScript eBooks that Beginners should Learn
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... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup
|
|
#36
03-16-2010, 09:04 AM
|
|||
|
|||
|
RSS AJAX Newsticker
This [Only Registered users can see links . Click Here To Register...] will show you how to combine RSS, AJAX, and [Only Registered users can see links . Click Here To Register...] to create a real-time RSS ticker.
Thanks to AJAX... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...] [Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Copy & Paste JavaScript code below in your HEAD section 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 [Only Registered users can see links . Click Here To Register...]
|
|
#37
03-20-2010, 01:21 AM
|
|||
|
|||
|
Fading Slide Show
Displays images continuously in a slideshow presentation format, with a fade effect on [Only Registered users can see links . Click Here To Register...] transitions. (Fade in Internet Explorer 4+ only).... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Place JavaScript below in your HEAD section JavaScript Code:
<script>
/*
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
-->
|
|
#38
03-23-2010, 12:33 AM
|
|||
|
|||
|
VML fireworks script
This is an interesting [Only Registered users can see links . Click Here To Register...] effect with the following attributes:
+ Makes use of VML support in IE5+ to render the stars. No graphics involved. + Uses conditional... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...] [Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Copy & Paste CSS code below in your HEAD section CSS Code:
<STYLE type=text/css>BODY {
OVERFLOW-X: hidden
}
v\:* {
BEHAVIOR: url(#default#VML)
}
</STYLE>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
JavaScript Code:
<!--[if IE ]>
<SCRIPT language=JavaScript>
// VML fireworks script By Jacco IJzerman , j.ijzerman1@chello.nl
//Customize fireworks colors:
colors = new Array();
colors[0] = new Array('yellow', 'lime');
colors[1] = new Array('lime', 'green')
colors[2] = new Array('lime', 'blue');
colors[3] = new Array('lightyellow', 'purple');
colors[4] = new Array('lightblue', 'white');
colors[5] = new Array('blue', 'silver');
colors[6] = new Array('red', 'fuchsia');
colors[7] = new Array('yellow', 'red');
maximum = 1000;
vmlobj='';
for(i = 0; i < 12; i++){
vmlobj += '<div id="ster'+i+'" style="position:absolute; left:-50px; top-50px; visibility:hidden; z-index:50;">';
vmlobj += '<v:shape style="width:15px; height:15px;" fillcolor="yellow" coordorigin="0,0" coordsize="200 200">';
vmlobj += '<v:path v="m 8,65 l 72,65, 92,11, 112,65, 174,65, 122,100, 142,155,92,121, 42,155, 60,100 x e"/>';
vmlobj += '<v:stroke on="false" /></v:shape></div>';
}
document.write(vmlobj); vmlobj = null;
aantal = 0;
function begin()
{
try {
if(aantal == maximum){ return;}
kleurschema = Math.floor(Math.random() * colors.length);
posLinks = Math.floor(Math.random() * (document.body.clientWidth - 180));
posLinks = (posLinks < 170)? 170: posLinks;
posBoven = Math.floor(Math.random() * (document.body.clientHeight - 180));
posBoven = (posBoven < 170)? 170: posBoven;
straal = 0; uiteen = true; teller = 1; flikkereffect = false;
for(var i = 0; i < 12; i++){
document.getElementsByTagName('shape')[i].setAttribute('fillcolor', colors[kleurschema][0]);
document.getElementById('ster'+i).style.visibility = 'hidden'; // 5.0 fix
document.getElementById('ster'+i).style.left = posLinks;
document.getElementById('ster'+i).style.top = posBoven;
}
document.getElementById('ster0').style.top = (document.body.clientHeight - 20);
document.getElementById('ster0').style.visibility = 'visible';
omhoog();
} catch(e){}
}
function omhoog()
{
try {
positie = parseInt(document.getElementById('ster0').style.top);
if(positie > posBoven){
document.getElementById('ster0').style.top = (positie - 25);
setTimeout('omhoog()', 50);
} else {
for(i = 1; i < 12; i++){
document.getElementById('ster'+i).style.top = positie;
document.getElementById('ster'+i).style.visibility = 'visible';
}
uiteenspatten();
}
} catch(e){}
}
function uiteenspatten()
{
try {
if(straal > 120 && straal % 10 == 0){
flikkereffect = true;
teller = (teller == colors[kleurschema].length)? 0: (teller+1);
}
for(var i = 0; i < 12; i++){
var hoek = i * 30;
var piHoek = Math.PI - Math.PI / 180 * hoek;
var links = posLinks + Math.round(straal * Math.sin(piHoek));
var boven = positie + Math.round(straal * Math.cos(piHoek));
document.getElementById('ster'+i).style.left = links;
document.getElementById('ster'+i).style.top = boven;
if(flikkereffect){
document.getElementsByTagName('shape')[i].setAttribute('fillcolor', colors[kleurschema][teller]);
}
}
if(straal < 160 && uiteen){
straal += (straal < 120)? 10: 5;
setTimeout('uiteenspatten()', 50);
}
else if(straal > 120){
uiteen = false; straal -= 5;
setTimeout('uiteenspatten()', 50);
}
else if(straal <= 120){
for(var i = 0; i < 12; i++){
document.getElementById('ster'+i).style.visibility = 'hidden';
}
aantal++;
setTimeout('begin()', 500);
}
} catch(e) {}
}
window.onload=begin;
</SCRIPT><![endif]-->
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
|
|
#39
03-27-2010, 01:45 AM
|
|||
|
|||
|
Vertical Marquee
Text scrolls from bottom to top, pauses, then scrolls up and out of view. A [Only Registered users can see links . Click Here To Register...] can be added, opening in a new window. Configuration is simple.... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Copy & Paste CSS code below in your HEAD section CSS Code:
<style type="text/css">
#jump_base {
overflow-y:hidden;
width: 200px;
height: 100px;
border: 2px dotted #000099;
margin: auto;
padding: 0 10px 0 10px;
font-size: .9em;
font-family: Verdana, Arial, sans-serif;
}
#jump_base a {
color: #000099;
background-color: inherit;
}
.news {
background-color: #DDDDDD;
color: inherit;
}
</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">
// Created by: Mike Hudson :: http://www.afrozeus.com
/*
To change the values in the setupLinks function below.
You will notice there are two arrays for each of Titles and
Links. Currently there are 3 items in each array, but you can easily
expand on that by adding to the array. For example, to add a 4th record,
you would simply include the following 2 lines at the end of setupLinks
function:
arrLinks[3] = "someURL.htm";
arrTitles[3] = "Some title";
*/
function setupLinks() {
arrLinks[0] = "http://forums.webdeveloper.com/forumdisplay.php?s=&forumid=3";
arrTitles[0] = "If you have any questions, be sure to visit our forums.";
arrLinks[1] = "http://javascript.internet.com/new/";
arrTitles[1] = "Don't miss anything — check our new additions.";
arrLinks[2] = "http://www.webreference.com/programming/javascript/diaries/";
arrTitles[2] = "Want to learn JavaScript? Start at the beginning.";
}
var m_iInterval;
var m_Height;
//window.onload = wl;
var iScroll=0;
var arrLinks;
var arrTitles;
var arrCursor = 0;
var arrMax;
window.onload=wl;
function wl() {
m_iInterval = setInterval(ontimer, 10);
var base = document.getElementById("jump_base");
m_Height = base.offsetHeight;
var divi = parseInt(m_Height/5);
m_Height = divi*5;
var td1 = document.getElementById("td1");
var td2 = document.getElementById("td2");
var td3 = document.getElementById("td3");
td1.height = m_Height-5;
td2.height = m_Height-5;
td3.height = m_Height-5;
arrLinks = new Array();
arrTitles = new Array();
setupLinks();
arrMax = arrLinks.length-1;
setLink();
}
function setLink() {
var ilink = document.getElementById("jump_link");
ilink.innerHTML = arrTitles[arrCursor];
ilink.href = arrLinks[arrCursor];
}
function ontimer() {
var base = document.getElementById("jump_base");
iScroll+=5;
if (iScroll>(m_Height*2)) {
iScroll=0;
arrCursor++;
if (arrCursor>arrMax)
arrCursor=0;
setLink();
}
if (iScroll==m_Height) {
pause();
m_iInterval = setTimeout(resume, 4000);
}
base.scrollTop=iScroll;
}
function pause() {
clearInterval(m_iInterval);
}
function resume() {
m_iInterval = setInterval(ontimer, 10);
}
</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="jump_base" class="news" onmouseover="pause()" onmouseout="resume()">
<table class="news">
<tr>
<td id="td1"> </td></tr>
<tr><td id = "td2" valign="middle" align="center"><a id="jump_link" href="" target="_new"></a></td></tr>
<tr><td id="td3"> </td></tr>
</table>
</div>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
|
|
#40
03-31-2010, 05:45 AM
|
|||
|
|||
|
Extreme Form Field Validator
Handle and precess all of your [Only Registered users can see links . Click Here To Register...] using just one script. This JavaScript can verify numeric strings; monitor the [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Place CSS below in your HEAD section CSS Code:
<style>
#errordiv {
border: 1px solid red;
background-color: #FFAFAF;
display: none;
width: 50%;
margin: 5px;
padding: 5px;
}
.required {
background-color: #CC4444;
}
.required:focus {
background-color: #fff;
border: 1px solid #f00;
}
.checkit {
background-color: #E0E5EF;
}
</style>
JavaScript Code:
<script type="text/javascript" src="chkform.js"></script><script type="text/javascript">
function configureValidation(f,alerttype){
f.firstname.isAlphaNumeric = true;
f.lastname.isAlphaNumeric = true;
f.email.isEmail = true;
f.phone.isPhoneNumber = true;
f.birthday.isDate = true;
f.postalcode.isEmpty = true;
f.password1.isLengthBetween = [4,255];
f.password2.isMatch = f.password1.value;
f.comments.optional = true;
var preCheck = (!f.infohtml.checked && !f.infocss.checked && !f.infojs.checked) ? errormsg[0] : null;
return validateForm(f, preCheck, 'required', alerttype);
}
</script>
HTML Code:
<div> <form action="#" method="post" onsubmit="return configureValidation(this,3)" onreset="confirm(errormsg[99])"> <table class="formtable"> <tr> <td>First Name:</td> <td><input class="checkit" type="text" id="First name" name="firstname" value="" class="text"></td> </tr> <tr> <td>Last Name:</td> <td><input class="checkit" type="text" id="Last name" name="lastname" value="" class="text"></td> </tr> <tr> <td>Email:</td> <td><input class="checkit" type="text" id="Email" name="email" value="" class="text"></td> </tr> <tr> <td>Email Preferred:</td> <td><select name="emailpreferred"> <option value="text">Text</option> <option value="html">HTML</option> <option value="flash">Flash</option> </select></td> </tr> <tr> <td>Phone: (US only) </td> <td><input class="checkit" type="text" id="Phone" name="phone" value="000-000-0000" class="text"></td> </tr> <tr> <td>Birthday:</td> <td><input class="checkit" type="text" id="Birthday" name="birthday" value="mm-dd-yyyy" class="text"></td> </tr> <tr> <td>Gender:</td> <td>Male:<input type="radio" name="gender" value="male" class="radio" checked="checked"> Female:<input type="radio" name="gender" value="female" class="radio"></td> </tr> <tr> <td>Password:</td> <td><input class="checkit" onKeyPress="checkCapsLock( event )" id="Password" type="password" name="password1" value="" class="text"></td> </tr> <tr> <td>Re-Enter:</td> <td><input class="checkit" onKeyPress="checkCapsLock( event )" id="Password again" type="password" name="password2" value="" class="text"></td> </tr> <tr> <td>Postal Code</td> <td><input class="checkit" name="postalcode" type="text" id="Postal code" onKeyPress="javascript:checkNumber(this);" onKeyUp="javascript:checkNumber(this);"></td> </tr> <tr> <td colspan="2">Select one or more of the following:</td> </tr> <tr> <td colspan="2">HTML:<input type="checkbox" name="infohtml" value="true" class="checkbox"> CSS:<input type="checkbox" name="infocss" value="true" class="checkbox"> JavaScript:<input type="checkbox" name="infojs" value="true" class="checkbox"></td> </tr> <tr> <td>Comments:</td> <td><textarea id="Comment" name="comments" class="text" cols="20" rows="4"></textarea></td> </tr> </table> <div id="errordiv"> </div> <div> <input type="submit" name="submit" value="Submit" class="button"> <input type="reset" name="reset" value="Reset" class="button"></td> </form> </div> Files [Only Registered users can see links . Click Here To Register...]
|
|
| Bookmarks |
| Thread Tools | |
| Display Modes | |
|
|
Linear Mode
