Go Back   Themers Club : Computers , Mobiles and Web Development Themes > Webmaster forum > Scripts and Tools
Reload this Page JavaScript codes for Web DEV
FAQ Members List IPhone Apps Downloads Today's Posts

Scripts and Tools Share your free scripts , tools , icons, fontz, screen savers , etc here.

Reply
Page 15 of 21 « First < 51314 15 1617 > Last »
 
Thread Tools Display Modes
  #141  
Old 01-28-2011, 03:33 PM
JavaScriptBank JavaScriptBank is offline
Senior Member
  
Join Date: Jul 2009
Posts: 207
Rep Power: 18
JavaScriptBank is on a distinguished road
Default JavaScript Add More Unlimited Input Fields
The type of this JavaScript effect can be seen on many upload-allowance sites, such as Youtube, Flickr, ImageShack, Picasa, etc. That's your visitors can upload files through this JavaScript code, aft... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]


How to setup

Step 1: Use CSS code below for styling the script
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
*/
#imageUpload input {
	display: block;
}
</style>
Step 2: Use JavaScript code below to setup the script
JavaScript
Code:
<script type="text/javascript">
// Created by: Jeroen Haan | http://www.haan.net
// This script downloaded from JavaScriptBank.com

function fileFields() {
	 var x = document.getElementById('imageUpload');
	 x.onclick = function() {
  		var i = parseFloat(this.lastChild.id)+1;
  		input = document.createElement("input");
  		input.setAttribute("type", "file");
  		input.setAttribute("name", 'imageName_' + i);
  		input.setAttribute("id", i);
  		this.appendChild(input);
	 }
}

// 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() {
  fileFields();
});
</script>
Step 3: Place HTML below in your BODY section
HTML
Code:
<a href="#" id="imageUpload"><input type="file" name="imageName_1" id="1" /></a>





Reply With Quote
  #143  
Old 01-29-2011, 01:41 AM
JavaScriptBank JavaScriptBank is offline
Senior Member
  
Join Date: Jul 2009
Posts: 207
Rep Power: 18
JavaScriptBank is on a distinguished road
Default JavaScript Color Gradient Maker
With this [Only Registered users can see links . Click Here To Register...], you can easy make [Only Registered users can see links . Click Here To Register...], [url="http://www.javascriptbank.com/=JavaScript color gradient"]JavaScript color gradient</a... [Only Registered users can see links . Click Here To Register...] at [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 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>





Reply With Quote
  #144  
Old 01-29-2011, 02:16 AM
JavaScriptBank JavaScriptBank is offline
Senior Member
  
Join Date: Jul 2009
Posts: 207
Rep Power: 18
JavaScriptBank is on a distinguished road
Default 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... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]


How to setup






Reply With Quote
  #145  
Old 02-05-2011, 01:01 AM
JavaScriptBank JavaScriptBank is offline
Senior Member
  
Join Date: Jul 2009
Posts: 207
Rep Power: 18
JavaScriptBank is on a distinguished road
Default 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'... [Only Registered users can see links . Click Here To Register...] at [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">
// 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>





Reply With Quote
  #147  
Old 02-05-2011, 03:25 AM
JavaScriptBank JavaScriptBank is offline
Senior Member
  
Join Date: Jul 2009
Posts: 207
Rep Power: 18
JavaScriptBank is on a distinguished road
Default 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... [Only Registered users can see links . Click Here To Register...] at [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 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>





Reply With Quote
  #149  
Old 02-05-2011, 04:31 AM
JavaScriptBank JavaScriptBank is offline
Senior Member
  
Join Date: Jul 2009
Posts: 207
Rep Power: 18
JavaScriptBank is on a distinguished road
Default 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... [Only Registered users can see links . Click Here To Register...] at [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 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: Place HTML 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
[Only Registered users can see links . Click Here To Register...]






Reply With Quote
  #150  
Old 02-16-2011, 01:51 AM
JavaScriptBank JavaScriptBank is offline
Senior Member
  
Join Date: Jul 2009
Posts: 207
Rep Power: 18
JavaScriptBank is on a distinguished road
Default JavaScript Proper Social Security Number Validation
One more [Only Registered users can see links . Click Here To Register...] to accept numeric characters. But this JavaScript will work in the different manner, it on... [Only Registered users can see links . Click Here To Register...] at [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 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>





Reply With Quote
Reply
Page 15 of 21 « First < 51314 15 1617 > Last »

Bookmarks

« Previous Thread | Next Thread »

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT. The time now is 04:50 PM.

Contact Us - Themers Club - Archive - Top

Powered by vBulletin® Version 3.7.6
Copyright ©2000 - 2026, Jelsoft Enterprises Ltd.