Awesome jQuery Accordion with CSS3 and HTML5
This JavaScript-jQuery code example is suitable for websites with a huge list of categories (divided into subjects) need to be showed. This detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Place CSS below in your HEAD section
CSS
Code:
<link rel='stylesheet' type='text/css' href='css/style.css' />
Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='js/infogrid.js'></script>
Step 3: Place HTML below in your BODY section
HTML
Code:
<div id="page-wrap">
<div class="info-col">
<h2>Superman</h2>
<a class="image superman" href="http://jprart.deviantart.com/art/Batman-and-Superman-64545242">View Image</a>
<dl>
<dt>Super Power</dt>
<dd><a href="http://css-tricks.com">Consectetur</a> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Costume</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Morality</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Sidekicks</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Vehicles</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Weaknesses</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
</dl>
</div>
<div class="info-col">
<h2>Batman</h2>
<a class="image batman" href="http://jprart.deviantart.com/">View Image</a>
<dl>
<dt>Super Power</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Costume</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Morality</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Sidekicks</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Vehicles</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Weaknesses</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
</dl>
</div>
<div class="info-col">
<h2>Aquaman</h2>
<a class="image aquaman" href="http://www.deviantart.com/print/8342014/">View Image</a>
<dl>
<dt id="starter">Super Power</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Costume</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Morality</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Sidekicks</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Vehicles</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Weaknesses</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
</dl>
</div>
<div class="info-col">
<h2>Spiderman</h2>
<a class="image spiderman" href="http://eldelgado.deviantart.com/">View Image</a>
<dl>
<dt>Super Power</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Costume</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Morality</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Sidekicks</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Vehicles</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Weaknesses</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
</dl>
</div>
<div class="info-col">
<h2>Ironman</h2>
<a class="image ironman" href="http://diablo2003.deviantart.com/">View Image</a>
<dl>
<dt>Super Power</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Costume</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Morality</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Sidekicks</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Vehicles</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Weaknesses</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
</dl>
</div>
</div>
Step 4: Download files below
Files
Awesome jQuery Accordion with CSS3 and HTML5.zip
Simple Auto Image Rotator with jQuery
This is a simple JavaScript code example to rotate your pictures continuously. This jQuery code example uses the blur effects for the animations of picture transitions. A very easy JavaScript code exa... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Use CSS code below for styling the script
CSS
Code:
<style type="text/css">
/* rotator in-page placement */
div#rotator {
position:relative;
height:345px;
margin-left: 15px;
}
/* rotator css */
div#rotator ul li {
float:left;
position:absolute;
list-style: none;
}
/* rotator image style */
div#rotator ul li img {
border:1px solid #ccc;
padding: 4px;
background: #FFF;
}
div#rotator ul li.show {
z-index:500
}
</style>
Step 2: Use JavaScript code below to setup the script
JavaScript
Code:
<script type="text/javascript" src="/javascript/jquery.js"></script>
<!-- By Dylan Wagstaff, http://www.alohatechsupport.net -->
<script type="text/javascript">
function theRotator() {
//Set the opacity of all images to 0
$('div#rotator ul li').css({opacity: 0.0});
//Get the first image and display it (gets set to full opacity)
$('div#rotator ul li:first').css({opacity: 1.0});
//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval('rotate()',6000);
}
function rotate() {
//Get the first image
var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first'));
//Get next image, when it reaches the end, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));
//Set the fade in effect for the next image, the show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
};
$(document).ready(function() {
//Load the slideshow
theRotator();
});
</script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<div id="rotator">
<ul>
<li class="show"><a href="http://www.alohatechsupport.net/webdesignmaui/"><img src="image-1.jpg" width="500" height="313" alt="pic1" /></a></li>
<li><a href="http://www.alohatechsupport.net/"><img src="image-2.jpg" width="500" height="313" alt="pic2" /></a></li>
<li><a href="http://www.alohatechsupport.net/mauiwebdesign.html"><img src="image-3.jpg" width="500" height="313" alt="pic3" /></a></li>
<li><a href="http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html"><img src="image-4.jpg" width="500" height="313" alt="pic4" /></a></li>
</ul>
</div>
Step 4: Download files below
Files
jquery.js
image-1.jpg
image-2.jpg
image-3.jpg
image-4.jpg
Awesome Canvas Drawer with HTML5
Although HTML5 is still developed but at present we still can enjoy many amazing web applications for HTML5, they're also presented on jsB@nk:
- detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: must download files below
Files
Awesome Canvas Drawer with HTML5.zip
JavaScript RegEx Example Code for Text Input Limitations
One more JavaScript code example to limit user inputs with many options: non-alphanumeric characters with spaces, removes ex... 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: Ilya Gerasimenko | http://www.gerasimenko.com/
// This script downloaded from www.JavaScriptBank.com
// clean lines
cleanUpLine = function (str,limit) { // clean string
var clean_pass1 = str.replace(/\W/g, ' '); //replace punctuation with spaces
var clean_pass2 = clean_pass1.replace(/\s{2,}/g, ' '); // compact multiple whitespaces
var clean_pass3 = clean_pass2.replace(/^\s+|\s+$/g, ''); // trim whitespaces from beginning or end of string
var clean_pass4 = clean_pass3.substring(0,limit); // trim string
return clean_pass4;
}
// number of keywords and keyword length validation
cleanUpList = function (fld) {
var charLimit = 20; // ADJUST: number of characters per line
var lineLimit = 10; // ADJUST: number of lines
var cleanList = [];
var re1 = /\S/; // all non-space characters
var re2 = /[\n\r]/; // all line breaks
var tempList = fld.value.split('\n');
for (var i=0; i<tempList.length;i++) {
if (re1.test(tempList[i])) { // store filtered lines in an array
var cleanS = cleanUpLine(tempList[i],charLimit);
cleanList.push(cleanS);
}
}
for (var j=0; j<tempList.length;j++) {
if (tempList[j].length > charLimit && !re2.test(tempList[j].charAt(charLimit))) { // make sure that last char is not a line break - for IE compatibility
fld.value = cleanList.join('\n'); // restore from array
}
}
if (cleanList.length > lineLimit) {
cleanList.pop(); // remove last line
fld.value = cleanList.join('\n'); // restore from array
}
fld.onblur = function () {this.value = cleanList.join('\n');} // onblur - restore from array
}
// 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 () {
document.form.word_list.onkeyup = function () {
cleanUpList(document.form.word_list);
}
}
);
</script>
Step 2: Place HTML below in your BODY section
HTML
Code:
Textarea below has limitations: 20 characters and 10 lines<br />
<form name="form">
<textarea cols="22" rows="12" name="word_list" id="word_list"></textarea>
</form>
Powerful JavaScript OOP for HTML Scroller
The powers jsB@nk would like to tell in this JavaScript text scroller are JavaScript OOP skills, this [URL="http://www.javascriptbank.com/=news scroller JavaScript"]news scroller JavaSc... 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">
#scr1 div {
visibility:hidden;
}
#scr1, #scr1 div.default {
width:160px;
height:120px;
overflow:hidden;
visibility:visible;
}
#scr1 table tr td div {
visibility:visible;
}
#scr1 {
background-color:#fff;
margin:0px auto;
font-size: .8em;
}
</style>
Step 2: Place JavaScript below in your HEAD section
JavaScript
Code:
<script type="text/javascript">
// Created by: Brian Huisman | http://www.greywyvern.com/
// This script downloaded from www.JavaScriptBank.com
/* ********************************************************************
* HTML Block Scroller & Marquee JavaScript - v2.0
* - Copyright 2008 - Licenced for free distribution under the BSDL
* - http://www.opensource.org/licenses/bsd-license.php
*
* Have one or more scrolling blocks of HTML anywhere on your webpages.
* The scroller will even pause on mouseover and resume on mouseout.
*
* Version 2.0
* - Uses DOM-only methods (compatible with application/xhtml+xml)
* - Blocks are created in the HTML page, rather than as JS variables
* - Automatic startup on page load
***********************************************************************
*** Instructions ******************************************************
***********************************************************************
* 1. Create the container for the scroller in the body of your HTML:
*
* <div id="scr1"></div>
*
* Where "scr1" is any name you choose. You don't have to use a <div>
* either. You may use any block level element that can be pixel
* resized; such as a <span> element to which the display:block; CSS
* property has been applied.
*
***********************************************************************
* 2. Fill the scroller container with child <div> blocks:
*
* <div id="scr1">
* <div class="default">
* The contents of this block will be displayed if the browser does
* not support the scroller.
* It will be overwritten if the scroller is supported.
* </div>
* <div>Block 2</div>
* <div>Block 3</div>
*
* ...
*
* </div>
*
* Assign the class "default" to the first block, the one which you
* would like displayed if javascript is disabled.
*
***********************************************************************
* 3. Add the following rule(s) to your CSS stylesheet:
*
* #scr1 div {
* visibility:hidden;
* }
* #scr1, #scr1 div.default {
* width:160px;
* height:120px;
* overflow:hidden;
* visibility:visible;
* }
* #scr1 table tr td div {
* visibility:visible;
* }
*
* Change both "scr1" to the id you gave to the scroller container. The
* width and height properties should match those you will use in step 4.
*
* To further style the scroller container, assign CSS properties to the
* scroller target id:
*
* #scr1 {
* background-color:#f6f6f6;
* margin:0px auto;
* }
*
* The script will replace each block you add to the container with a
* single-celled <table>. So to style the blocks of your scroller, you
* can style these table cells as if they were actually part of your
* document source:
*
* #scr1 table tr td {
* padding:10px;
* color:#ff0000;
* text-align:center;
* vertical-align:middle;
* }
*
***********************************************************************
* 4. Create a new scrollObject:
*
* new scrollObject("scr1", 120, 120, "up", 5000, 1.4);
*
* The arguments for this object are as follows:
* a. - ID of the target tag (from step 1)
* b. - Width (in pixels) of your scroller
* c. - Height (in pixels) of your scroller
* d. - Scroll direction: one of "up", "down", "left" or "right"
* e. - Amount of time to pause before next scroll begins (ms)
* f. - Slide-in speed of your scroller (1.001 up to width or height)
*
***********************************************************************
*** To add more scrollers to the same page: ***************************
***********************************************************************
* 1. Create additional containers - with different ID's - and blocks in
* the body of your HTML
*
* <div id="scr2">
* <div class="default"><strong>HTML is allowed too!</strong></div>
* <div><img src="/images/mybanner.jpg" alt=""></div>
* <div><a href="/home">And links!</a></div>
* <div>As long as it fits within the dimensions above</div>
* </div>
*
* <div id="scr3">
* <div class="default">Block 1</div>
* <div>Block 2</div>
* <div>Block 3</div>
* <div>Block 4</div>
* </div>
*
***********************************************************************
* 2. Add the matching rules to your CSS stylesheet
*
* #scr2 div,
* #scr3 div {
* visibility:hidden;
* }
* #scr2, #scr2 div.default {
* width:468px;
* height:60px;
* overflow:hidden;
* visibility:visible;
* }
* #scr3, #scr3 div.default {
* width:140px;
* height:140px;
* overflow:hidden;
* visibility:visible;
* }
* #scr2 table tr td div,
* #scr3 table tr td div {
* visibility:visible;
* }
*
***********************************************************************
* 3. Create new scrollObjects for each scroller in the <script> tag:
*
* new scrollObject("scr2", 468, 60, "down", 10000, 1.2);
* new scrollObject("scr3", 140, 140, "right", 4000, 2);
*
***********************************************************************
*** End Instructions **************************************************
*************************************************** BEGIN CODE ***** */
/* *****
* See http://www.greywyvern.com/code/js/scroller.html for the page
* which uses the example scrollers below
*
*/
// ***** Start scroller #1
new scrollObject("scr1", 160, 120, "up", 5000, 1.15);
// ***** Start scroller #2
new scrollObject("scr2", 468, 60, "left", 3000, 1.5);
/* ********************************************************************
* The Mighty ScrollObject
* - Don't edit this if you know what's good for ya!
*
*/
function scrollObject(main, width, height, direct, pause, speed) {
var self = this;
this.main = main;
this.width = width;
this.height = height;
this.direct = direct;
this.pause = pause;
this.speed = Math.max(1.001, Math.min((direct == "up" || direct == "down") ? height : width, speed));
this.slope = (direct == "up" || direct == "left") ? 1 : -1;
this.prev = this.offset = 0;
this.curr = 1;
this.mouse = false;
this.scroll = function() {
this.main = document.getElementById(this.main);
this.main.style.overflow = "hidden";
this.main.style.position = "relative";
this.main.style.width = this.width + "px";
this.main.style.height = this.height + "px";
var b = [], c;
while (this.main.firstChild) if ((c = this.main.removeChild(this.main.firstChild)).nodeName == "DIV") b.push(c);
for (var x = 0; x < b.length; x++) {
var table = document.createElement('table');
table.cellPadding = table.cellSpacing = table.border = "0";
table.style.position = "absolute";
table.style.left = table.style.top = "0px";
table.style.width = table.style.height = "100%";
table.style.overflow = table.style.visibility = "hidden";
var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
var td = document.createElement('td');
while (b[x].firstChild)
td.appendChild(b[x].removeChild(b[x].firstChild));
tr.appendChild(td);
tbody.appendChild(tr);
table.appendChild(tbody);
this.main.appendChild(table);
} b = c = null;
if (this.main.childNodes.length > 1) {
this.main.onmouseover = function() { self.mouse = true; };
this.main.onmouseout = function() { self.mouse = false; };
setInterval(function() {
if (!self.offset && self.scrollLoop()) self.main.childNodes[self.curr].style.visibility = "visible";
}, this.pause);
} this.main.childNodes[this.prev].style.visibility = "visible";
};
this.scrollLoop = function() {
if (!this.offset) {
if (this.mouse) return false;
this.offset = (this.direct == "up" || this.direct == "down") ? this.height : this.width;
} else this.offset = Math.floor(this.offset / this.speed);
if (this.direct == "up" || this.direct == "down") {
this.main.childNodes[this.curr].style.top = (this.offset * this.slope) + "px";
this.main.childNodes[this.prev].style.top = ((this.offset - this.height) * this.slope) + "px";
} else {
this.main.childNodes[this.curr].style.left = (this.offset * this.slope) + "px";
this.main.childNodes[this.prev].style.left = ((this.offset - this.width) * this.slope) + "px";
}
if (!this.offset) {
this.main.childNodes[this.prev].style.visibility = "hidden";
this.prev = this.curr;
if (++this.curr >= this.main.childNodes.length) this.curr = 0;
} else setTimeout(function() { self.scrollLoop(); }, 30);
return true;
};
if (window.addEventListener) {
window.addEventListener('load', function() { self.scroll(); }, false);
} else if (window.attachEvent)
window.attachEvent('onload', function() { self.scroll(); });
}
</script>
Step 3: Place HTML below in your BODY section
HTML
Code:
<div id="scr1">
<div class="default"><i>The JavaScript Bank</i> is an excellent JavaScript resource.</div>
<div><b>Want some recognition for your scripts?</b><br><a href="http://javascriptbank.com/submit/">Submit them to us</a> and they can be featured on JavaScript Source!</div>
<div>Three times a week we add a new script or tutorial to our archives.</div>
</div>
Cool JavaScript Date Picker
A very simple JavaScript code example to create the amazing date pickers. This JavaScript date picker script will display pickers with the layout of calendar to allow users pick the date.
Within a ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: must download files below
Files
Cool JavaScript Date Picker.zip
Random of Testimonial Bubbles with XML and jQuery
This JavaScript code example uses jQuery framework and a XML file to create a section for displaying random of testimonial bubbles. It has an amazing design for layout and the testimonials will be dis... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Download files below
Files
Random of Testimonial Bubbles with XML and jQuery.zip
Simple Awesome Inline Modal Box with CSS3
Like JavaScript popup scripts ever presented on jsB@nk:
- [URL="http://www.javascriptbank.com/greybox-cool-html-javascript-ajax-flash-window-popup.html"]GreyBox: Cool HTML/JavaScript/AJAX/Flash... 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">
#popup{
z-index+999999;
position:absolute;
left:400px;
top:200px;
padding:10px;
display:none;
width:400px;
height:200px;
background: #FFFFFF;
box-shadow: 5px 5px 5px #ccc;
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
}
.tit{
width:98%;
height:20px;
padding:5px;
background:#3654A8;
}
</style>
Step 2: Place JavaScript below in your HEAD section
JavaScript
Code:
<script type="text/javascript" language="JavaScript">
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
document.bgColor="silver" ;
}
else
{
document.getElementById(divId).style.display = 'none';
document.bgColor="#FFFFFF" ;
}
}
</script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim volutpat sem ac scelerisque. Cras non rutrum lorem. Duis lacinia quam at leo ultrices commodo. Ut eget urna feugiat odio lobortis condimentum. Donec ultrices eros id mi bibendum feugiat. Vestibulum augue eros, ultrices id viverra at, euismod sed neque. Pellentesque non magna vitae velit venenatis condimentum. Phasellus eleifend tristique odio eget posuere. Nulla lacinia molestie quam at luctus. Vestibulum non lorem velit.</p>
<p>Nulla venenatis pretium urna. Suspendisse nisl orci, congue a gravida a, ornare id ipsum. Duis sapien nulla, congue id dictum eget, sollicitudin non nisi. Integer congue dictum augue ac fermentum. Etiam nec semper dui. Pellentesque rutrum lobortis neque in imperdiet. Donec ut lacus felis, id scelerisque nisi. Maecenas lacus erat, cursus nec facilisis non, aliquet ut felis. Aenean <a href="javascript:void(0);" onclick="return ShowHide('popup');"><b>Click Here for PopUp</b></a>. Nam sit amet magna in quam cursus porttitor. Maecenas laoreet blandit tellus, at volutpat turpis suscipit et. Maecenas tempus convallis magna. Vivamus venenatis dolor quis ligula laoreet tristique. Praesent euismod porttitor ligula, vitae iaculis quam faucibus non. Sed sagittis ullamcorper erat vel porttitor.</p>
<p>Suspendisse convallis vehicula ligula, in pellentesque lacus dictum in. Nam a ante eros, vitae luctus mauris. Sed tempus tellus at purus semper ac viverra nulla hendrerit. Quisque condimentum vestibulum cursus. Pellentesque vehicula commodo nisl, quis blandit tortor consequat sed. Praesent sed orci nisl. Donec id justo eu elit elementum convallis ac at metus. Nam quis erat ut lorem facilisis eleifend. Phasellus et velit sed nulla sodales blandit quis sed massa. Praesent suscipit auctor luctus. Praesent eleifend, est sit amet vestibulum placerat, mi erat placerat arcu, non luctus enim tellus a felis. Sed sed sapien dolor. Nulla vestibulum mattis ante, in convallis mauris tempor nec. Proin aliquam arcu eu orci luctus adipiscing. Etiam pulvinar, justo sed volutpat mattis, erat purus gravida sem, vitae pretium eros velit sit amet dolor. </p>
</div>
<div id="popup">
<div class="tit">Your Title </div>
<p>Suspendisse convallis vehicula ligula, in pellentesque lacus dictum in. Nam a ante eros, vitae luctus mauris. Sed tempus tellus at purus semper ac viverra nulla </p>
<a href="javascript:void(0);" onclick="return ShowHide('popup');">Close</a>
</div>
JavaScript Loading Progress Effect with jQuery
A very unique and amazing JavaScript code example to create JavaScript loading progress effects on the web pages. With this ver... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: downloads
Files
JavaScript Loading Progress Effect with jQuery.zip
