|
|
 |
|
01-28-2011, 07:49 PM
|
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
JavaScript Color Gradient Maker
With this JavaScript code example, you can easy make CSS gradient background, [URL="http://www.javascriptbank.com/=JavaScript color gradient"]JavaScript color gradient</a... 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: Joseph Myers | http://www.codelib.net/
// This script downloaded from www.JavaScriptBank.com
function colorscale(hexstr, scalefactor) {
/* declared variables first, in order;
afterwards, undeclared local variables */
var r = scalefactor;
var a, i;
if (r < 0 || typeof(hexstr) != 'string')
return hexstr;
hexstr = hexstr.replace(/[^0-9a-f]+/ig, '');
if (hexstr.length == 3) {
a = hexstr.split('');
} else if (hexstr.length == 6) {
a = hexstr.match(/(\w{2})/g);
} else
return hexstr;
for (i=0; i<a.length; i++) {
if (a[i].length == 2)
a[i] = parseInt(a[i], 16);
else {
a[i] = parseInt(a[i], 16);
a[i] = a[i]*16 + a[i];
}
}
var maxColor = parseInt('ff', 16);
function relsize(a) {
if (a == maxColor)
return Infinity;
return a/(maxColor-a);
}
function relsizeinv(y) {
if (y == Infinity)
return maxColor;
return maxColor*y/(1+y);
}
for (i=0; i<a.length; i++) {
a[i] = relsizeinv(relsize(a[i])*r);
a[i] = Math.floor(a[i]).toString(16);
if (a[i].length == 1)
a[i] = '0' + a[i];
}
return a.join('');
}
function showrainbow(f) {
var colorcell, hex, i, nhex;
hex = f.orig.value;
hex = hex.replace(/\W/g, '');
nhex = colorscale(hex, f.scalef.value-0);
if (nhex != hex) {
f.outp.value = nhex;
colorcell = document.getElementById('origcolor');
i = document.getElementById('newcolor');
colorcell.style.background = '#' + hex;
i.style.background = '#' + nhex;
for (i=0; i<256; i++) {
colorcell = document.getElementById('colorcell'+i);
nhex = colorscale(hex, i/(256-i));
colorcell.style.background = '#' + nhex;
colorcell.nhexvalue = nhex;
}
}
}
</script>
Step 2: Copy & Paste HTML code below in your BODY section
HTML
Code:
<div style="width: 400px;">
<form>
<p>
Original color: <input type="text" name="orig" value="339990"><br>
Scale factor: <input type="text" name="scalef" value="4"><br>
<input type="button" value="Output" onclick="showrainbow(this.form)">
<input type="text" readonly name="outp" style="border: none;">
</p>
</form>
<table width="150">
<tr>
<td width="50%" height="50" id="origcolor">Original</td>
<td width="50%" id="newcolor">New</td></tr>
</table>
<table cellpadding="0" cellspacing="0">
<tr>
<script type="text/javascript">
for (i=0; i<256; i++)
document.write('<td width="10" height="50" id="colorcell', i, '" onclick="document.forms[0].outp.value = this.nhexvalue"></td>');
</script>
</tr>
</table>
</div>
|
01-28-2011, 08:24 PM
|
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
Built-in JavaScript RegEx APIs
Regular Expressions (RegEx) skills are the indispensable knowledges if you would like become a professional JavaScript coder particularly, or a professional programmer generally; because of a lot of p... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
|
02-04-2011, 07:09 PM
|
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
JavaScript OOP with Input Display Toggle
Usage of this JavaScript code effect is just toggle (show/display) the input text fields when the users click the specified input checkboxes. But this JavaScript code example made with OOP skills, it'... 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">
// Created by: Fang | http://www.webdeveloper.com/forum/showthread.php?p=872326#post872326
// This script downloaded from www.JavaScriptBank.com
function addElement() {
var aInput=document.getElementById('myspan').getElementsByTagName('input');
for(var i=0; i<aInput.length; i++) {
aInput[i].onclick=new Function('addDelete(this)');
}
}
function addDelete(obj) {
var parentSpan=document.getElementById('myspan');
if(obj.nextSibling.nodeName!='INPUT') { // add
var oInputText=document.createElement('input');
oInputText.setAttribute('type', 'text');
parentSpan.insertBefore(oInputText, obj.nextSibling);
}
else { // delete
parentSpan.removeChild(obj.nextSibling);
}
}
// 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() {
addElement();
});
</script>
Step 2: Copy & Paste HTML code below in your BODY section
HTML
Code:
<span id="myspan">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</span>
|
02-04-2011, 09:33 PM
|
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
JavaScript Text Auto-Select onClick
If this JavaScript code example installed on a web page, when users click on text-container HTML elements then it will select all of its inner text automatically.
At present, this JavaScript code m... 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">
// Created by: Matt Murphy | http://www.matts411.com/
// This script downloaded from www.JavaScriptBank.com
function autoSelect(selectTarget) {
if(selectTarget != null && ((selectTarget.childNodes.length == 1
&& selectTarget.childNodes[0].nodeName == "#text") || (selectTarget.tagName == "INPUT"
&& selectTarget.type == "text"))) {
if(selectTarget.tagName == 'TEXTAREA' || (selectTarget.tagName == "INPUT" && selectTarget.type == "text")) {
selectTarget.select();
} else if(window.getSelection) { // FF, Safari, Opera
var sel = window.getSelection();
var range = document.createRange();
range.selectNode(selectTarget.firstChild);
sel.removeAllRanges();
sel.addRange(range);
} else { // IE
document.selection.empty();
var range = document.body.createTextRange();
range.moveToElementText(selectTarget);
range.select();
}
}
}
</script>
Step 2: Copy & Paste HTML code below in your BODY section
HTML
Code:
<h4 style="margin-bottom: 0;">A <code>div</code> Element:</h4>
<div onclick="autoSelect(this);">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam ultrices vestibulum elit. Mauris congue sapien sed dolor. Pellentesque sem augue, porttitor id, placerat ac, congue ac, eros. Etiam fermentum consectetuer pede. Donec tincidunt. Suspendisse non nisi. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer porta egestas sapien.
</div>
<h4 style="margin-bottom: 0;">An <code>input</code> Element:</h4>
<input type="text" size="50" onclick="autoSelect(this);" value="Lorem ipsum dolor sit amet, consectetuer adipiscing elit.">
<h4 style="margin-bottom: 0;">A <code>textarea</code> Element:</h4>
<textarea rows="5" cols="30" onclick="autoSelect(this);">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam ultrices vestibulum elit. Mauris congue sapien sed dolor. Pellentesque sem augue, porttitor id, placerat ac, congue ac, eros. Etiam fermentum consectetuer pede.
</textarea>
<h4 style="margin-bottom: 0;">A <code>pre</code> Element:</h4>
<pre onclick="autoSelect(this);">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
</pre>
|
02-04-2011, 10:38 PM
|
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
Picture Gallery with Display Switcher
This is really very cool and amazing picture gallery to promote your personal/business pictures on the web. With two type of displaying, this JavaScript gallery script allow users to switch the layout... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: CSS below for styling thescript, place it into HEAD section
CSS
Code:
<style type="text/css">
body {
margin: 0;
padding: 50px 0 0;
font: 10px normal Verdana, Arial, Helvetica, sans-serif;
color: #fff;
}
* {
margin: 0;
padding: 0;
}
img {
border: none;
}
h1 {
font: 5em normal Georgia, 'Times New Roman', Times, serif;
text-align:center;
margin-bottom: 20px;
}
h1 span { color: #e7ff61; }
h1 small{
font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing: 1.5em;
display: block;
color: #ccc;
}
.container {
width: 758px;
margin: 0 auto;
padding-bottom: 100px;
overflow: hidden;
}
ul.display {
float: left;
width: 756px;
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid #333;
border-right: 1px solid #333;
background: #222;
}
ul.display li {
float: left;
width: 754px;
padding: 10px 0;
margin: 0;
border-top: 1px solid #111;
border-right: 1px solid #111;
border-bottom: 1px solid #333;
border-left: 1px solid #333;
}
ul.display li a {
color: #e7ff61;
text-decoration: none;
}
ul.display li .content_block {
padding: 0 10px;
}
ul.display li .content_block h2 {
margin: 0;
padding: 5px;
font-weight: normal;
font-size: 1.7em;
}
ul.display li .content_block p {
margin: 0;
padding: 5px 5px 5px 245px;
font-size: 1.2em;
}
ul.display li .content_block a img{
padding: 5px;
border: 2px solid #ccc;
background: #fff;
margin: 0 15px 0 0;
float: left;
}
ul.thumb_view li{
width: 250px;
}
ul.thumb_view li h2 {
display: inline;
}
ul.thumb_view li p{
display: none;
}
ul.thumb_view li .content_block a img {
margin: 0 0 10px;
}
a.switch_thumb {
width: 122px;
height: 26px;
line-height: 26px;
padding: 0;
margin: 10px 0;
display: block;
background: url(switch.gif) no-repeat;
outline: none;
text-indent: -9999px;
}
a:hover.switch_thumb {
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
a.swap { background-position: left bottom; }
</style>
Step 2: Use JavaScript code below to setup the script
JavaScript
Code:
<script type="text/javascript" src="/javascript/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a.switch_thumb").toggle(function(){
$(this).addClass("swap");
$("ul.display").fadeOut("fast", function() {
$(this).fadeIn("fast").addClass("thumb_view");
});
}, function () {
$(this).removeClass("swap");
$("ul.display").fadeOut("fast", function() {
$(this).fadeIn("fast").removeClass("thumb_view");
});
});
});
</script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<a href="javascript:void(0);" class="switch_thumb">Switch Thumb</a>
<ul style="display: block;" class="display">
<li>
<div class="content_block">
<a href="#"><img src="sample.gif" alt=""></a>
<h2><a href="#">Image Name</a></h2>
<p>Askin',
jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
driveway shootin'. </p>
</div>
</li>
<li>
<div class="content_block">
<a href="#"><img src="sample2.gif" alt=""></a>
<h2><a href="#">Image Name</a></h2>
<p>Askin',
jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
driveway shootin'. </p>
</div>
</li>
<li>
<div class="content_block">
<a href="#"><img src="sample3.gif" alt=""></a>
<h2><a href="#">Image Name</a></h2>
<p>Askin',
jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
driveway shootin'. </p>
</div>
</li>
<li>
<div class="content_block">
<a href="#"><img src="sample4.gif" alt=""></a>
<h2><a href="#">Image Name</a></h2>
<p>Askin',
jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
driveway shootin'. </p>
</div>
</li>
<li>
<div class="content_block">
<a href="#"><img src="sample5.gif" alt=""></a>
<h2><a href="#">Image Name</a></h2>
<p>Askin',
jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
driveway shootin'. </p>
</div>
</li>
<li>
<div class="content_block">
<a href="#"><img src="sample6.gif" alt=""></a>
<h2><a href="#">Image Name</a></h2>
<p>Askin',
jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
driveway shootin'. </p>
</div>
</li>
<li>
<div class="content_block">
<a href="#"><img src="sample7.gif" alt=""></a>
<h2><a href="#">Image Name</a></h2>
<p>Askin',
jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
driveway shootin'. </p>
</div>
</li>
<li>
<div class="content_block">
<a href="#"><img src="sample8.gif" alt=""></a>
<h2><a href="#">Image Name</a></h2>
<p>Askin',
jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
spell, chitlins spittin' watchin' hootch me rightly kinfolk that. </p>
</div>
</li>
<li>
<div class="content_block">
<a href="#"><img src="sample9.gif" alt=""></a>
<h2><a href="#">Image Name</a></h2>
<p>Askin',
jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
driveway shootin'. Woman kickin', work yer last dogs, rattler hee-haw
mobilehome stew trailer driveway shootin'.</p>
</div>
</li>
<li>
<div class="content_block">
<a href="#"><img src="sample10.gif" alt=""></a>
<h2><a href="#">Image Name</a></h2>
<p>Askin',
jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
driveway shootin'. </p>
</div>
</li>
<li>
<div class="content_block">
<a href="#"><img src="sample11.gif" alt=""></a>
<h2><a href="#">Image Name</a></h2>
<p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell. </p>
</div>
</li>
<li>
<div class="content_block">
<a href="#"><img src="sample12.gif" alt=""></a>
<h2><a href="#">Image Name</a></h2>
<p>Askin',
jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
driveway shootin'. </p>
</div>
</li>
</ul>
Step 4: downloads
Files
Picture_Gallery_with_Display_Switcher_images.zip
|
02-15-2011, 07:59 PM
|
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
JavaScript Proper Social Security Number Validation
One more JavaScript code example to accept numeric characters. But this JavaScript will work in the different manner, it on... 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: Mr. J | http://www.huntingground.net
// This script downloaded from www.JavaScriptBank.com
function advance2(currentField,nextField,limit) {
if(nextField!="rset"&&document.myForm2[currentField].value.length == limit){
document.myForm2[nextField].select();
} else {
if (document.myForm2[currentField].value.length == limit) {
document.myForm2[currentField].maxLength=limit
document.myForm2[nextField].select()
document.myForm2[nextField].disabled=false
document.myForm2[currentField].blur()
document.myForm2[nextField].style.backgroundColor="#EFCCA4"
}
}
}
</script>
Step 2: Place HTML below in your BODY section
HTML
Code:
<p>
This form is formatted for a social security number (XXX-XX-XXXX).</p>
<form name="myForm2" onreset="this.rset.disabled='true'; this.rset.style.backgroundColor=''">
<input type="text" name="t1" size="6" onclick="select()" onKeyUp="advance2('t1','t2',3)">
<input type="text" name="t2" size="6" onclick="select()" onKeyUp="advance2('t2','t3',2)">
<input type="text" name="t3" size="6" onclick="select()" onKeyUp="advance2('t3','rset',4)">
<input type="reset" name="rset" onclick="this.blur()" disabled>
</form>
<div style="text-align: left; width: 70%;">
<p>
The limit for each individual field is passed to the function by the appropriate input event, as shown in the form using the format: <code>onKeyUp="advance2('currentField','nextField',limit)</code>"</p>
</div>
|
02-15-2011, 09:10 PM
|
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
JavaScript Add-Remove HTML Elements with DOM
This JavaScript code example will dynamically add/remove HTML elements with content included within them according to ... 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: Dustin Diaz | http://www.dustindiaz.com/
// This script downloaded from www.JavaScriptBank.com
var Dom = {
get: function(el) {
if (typeof el === 'string') {
return document.getElementById(el);
} else {
return el;
}
},
add: function(el, dest) {
var el = this.get(el);
var dest = this.get(dest);
dest.appendChild(el);
},
remove: function(el) {
var el = this.get(el);
el.parentNode.removeChild(el);
}
};
var Event = {
add: function() {
if (window.addEventListener) {
return function(el, type, fn) {
Dom.get(el).addEventListener(type, fn, false);
};
} else if (window.attachEvent) {
return function(el, type, fn) {
var f = function() {
fn.call(Dom.get(el), window.event);
};
Dom.get(el).attachEvent('on' + type, f);
};
}
}()
};
Event.add(window, 'load', function() {
var i = 0;
Event.add('add-element', 'click', function() {
var el = document.createElement('p');
el.innerHTML = 'Remove This Element (' + ++i + ')';
Dom.add(el, 'content');
Event.add(el, 'click', function(e) {
Dom.remove(this);
});
});
});
</script>
Step 2: Place HTML below in your BODY section
HTML
Code:
<div id="doc">
<p id="add-element">Add Elements</p>
<div id="content"></div>
</div>
|
|
|
| Thread Tools |
|
|
| Display Modes |
 Linear Mode
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
