PDA

View Full Version : Free JavaSccript codes



JavaScriptBank
05-18-2010, 09:16 PM
Good and Nice JavaScripts

Streaming Horizontal Banner

Use this JavaScript code (http://www.javascriptbank.com/javascript/) to make a a horizontal image scroller (http://www.javascriptbank.com/javascript/scroller/) on your web page. If do not view the source code, maybe you will think tha... detail (http://www.javascriptbank.com/streaming-horizontal-banner.html/en//) at JavaScriptBank.com - 2.000+ free JavaScript codes (http://www.javascriptbank.com/)


http://www.javascriptbank.com/javascript.images/image/streaming-horizontal-banner.jpg (http://www.javascriptbank.com/javascript/image/slideshow/streaming-horizontal-banner/preview/en/)
Demo: JavaScript Streaming Horizontal Banner (http://www.javascriptbank.com/streaming-horizontal-banner.html/en/)


How to setup

Step 1: CSS below for styling thescript, place it into HEAD section
CSS

<style type="text/css">
<!--
#slideCont {
border:solid 1px #000;
text-align:center;
}

#slideCont img {
margin: 5px;
}
-->
</style>

Step 2: Use JavaScript code below to setup the script
JavaScript

<script type="text/javascript">
<!--
/*
-----------------------------------------------
Streaming banners - v.1
(c) 2006 www.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.
------------------------------------------------ */
<!--

function clip() {
// width of the banner container
var contWidth = 425;
// height of the banner container
var contHeight = 90;

var id1 = document.getElementById('slideA');
var id2 = document.getElementById('slideB');

id1.style.left = parseInt(id1.style.left)-1 + 'px';

document.getElementById('slideCont').style.width = contWidth + "px";
document.getElementById('slideCont').style.clip = 'rect(auto,'+ contWidth +'px,' + contHeight +'px,auto)';
id2.style.display = '';
if(parseFloat(id1.style.left) == -(contWidth)) {
id1.style.left = '0px';
}
setTimeout(clip,25)
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}

addLoadEvent(function() {
clip();
});
//-->
</script>

Step 3: Copy & Paste HTML code below in your BODY section
HTML

<div id="slideCont" style="overflow: hidden; position: relative; z-index: 1; width: 425px; height: 90px; top: 0px; clip: rect(auto, 425px, 90px, auto);">
<div id="slideA" style="overflow: hidden; position: absolute; z-index: 1; top: 0px; left: -194px; width: 850px; height: 90px;">
<div style="float: left;" id="innerSlideA">
<a href="http://www.apache.org/"><img src="/logos/logo_jsbank.jpg" border="0" height="44" width="126"></a>
<a href="http://www.haan.net/"><img src="/logos/gif_logojsb2.gif" border="0" height="60" width="120"></a>
<a href="http://www.mysql.com/"><img src="/logos/jsb_banner.gif" border="0" height="44" width="126"></a>

</div>
<div id="slideB" style="overflow: hidden; position: relative; z-index: 1; top: 0px; left: 0px; width: 425px; height: 90px;">
<a href="http://www.apache.org/"><img src="/logos/logo_jsb.jpg" border="0" height="44" width="126"></a>
<a href="http://www.haan.net/"><img src="/logos/logo_jsb__88x31.gif" border="0" height="60" width="120"></a>
<a href="http://www.mysql.com/"><img src="/logos/logo_jsb_120x60.jpg" border="0" height="44" width="126"></a>
</div>
</div>
</div>







JavaScript Enlarge Image (http://www.javascriptbank.com/enlarge-image-2.html/en/) - JavaScript Fading Slide Show (http://www.javascriptbank.com/fading-slide-show.html) - JavaScript Rotating Image script (http://www.javascriptbank.com/rotating-image-script.html)


The Site may provide, or third parties may provide, links to non-JavaScriptBank.com Internet World Wide Web sites or resources. Because JavaScriptBank.com has no control over such sites and resources, you acknowledge and agree that JavaScriptBank.com is not responsible for the availability of such external sites or resources, and does not endorse and is not responsible or liable for any content, advertising, products, or other materials on or available from such sites or resources. You further acknowledge and agree that JavaScriptBank.com shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, goods or services available on or through any such site or resource.

pwsslick
05-25-2010, 08:58 AM
Thanks for the cool tutorial . Keep going !

jenyroger
06-14-2010, 02:13 AM
Java script code is use with tags like HTML tags it is really very useful while creating the website it's nice to do the coding with our own way .

nitin705
06-15-2010, 01:48 PM
Your article has helped many Javascript beginners like me.

clivewilliam
11-29-2010, 04:26 AM
It is an interesting one and helpful information to get the higher coding. Another thing is that it is easy to understand and comfort to use it. There is required to understand it change it before the use it. The reason is that I can make the same another one code as per the requirement.