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 14 of 21 « First < 41213 14 1516 > Last »
 
Thread Tools Display Modes
  #131  
Old 12-31-2010, 05:16 AM
JavaScriptBank JavaScriptBank is offline
Senior Member
  
Join Date: Jul 2009
Posts: 207
Rep Power: 16
JavaScriptBank is on a distinguished road
Default Essential jQuery Examples for Web Designers
jQuery is becoming more important than we think, although it's just JavaScript framework to help web coders, web programmers write the interactive tasks. However, with the higher requirements of moder... [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
  #132  
Old 01-07-2011, 02:07 AM
JavaScriptBank JavaScriptBank is offline
Senior Member
  
Join Date: Jul 2009
Posts: 207
Rep Power: 16
JavaScriptBank is on a distinguished road
Default Simple JavaScript Chat Box with OOP Skill
This JavaScript code example (JavaScript chat code) just help you learn more OOP in JavaScript by making a message box with chat-style window. A simple free JavaScript chat effect with a few codelines... [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">
div#list {
  background-color: #DFDFDF;
  color: #000;
  overflow: scroll;
  width: 15em;
  height: 10em;
  padding: 10px;
  text-align: left;
}
</style>
Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<script type="text/javascript">
// Created by: James Robertson | http://www.r0bertson.co.uk
// This script downloaded from www.JavaScriptBank.com

function addText() {
  olist = document.getElementById('list');
  op = document.createElement('p');
  op.innerHTML = 'More text ...';
  ocontent = document.getElementById('content');
  ocontent.appendChild(op);
  olist.scrollTop = olist.scrollHeight;
}
</script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<p>A simple chat-style display</p>

<div id="list">
  <div id="content">
  <p class="other_user">Good afternoon. How are you?</p>
  <p class="other_user">Hello?</p>
  <p class="other_user">Is anybody there?</p>
  </div>
</div>
<p>
<div id="toolbar"><input type="button" value="add text" onclick="addText()" /></div>





Reply With Quote
  #133  
Old 01-07-2011, 02:48 AM
JavaScriptBank JavaScriptBank is offline
Senior Member
  
Join Date: Jul 2009
Posts: 207
Rep Power: 16
JavaScriptBank is on a distinguished road
Default Awesome JavaScript Image Rotator with jQuery
This is an awesome [Only Registered users can see links . Click Here To Register...] using jQuery to perform animation, with a little of CSS for styling. You can also use this [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: CSS below for styling thescript, place it into HEAD section
CSS
Code:
<style type="text/css">
body {
	margin: 0; padding: 0;
	font: 10px normal Arial, Helvetica, sans-serif;
}
* {margin: 0; padding: 0; outline: none;}
img {border: none;}
fieldset h1 {
	font: 3em normal Georgia, "Times New Roman", Times, serif;
	color: #fff;
	text-align: center;
	background: url(h1_bg.gif) no-repeat;
	text-indent: -99999px;
	margin: 100px 0 10px;
}
.container {
	overflow: hidden;
	width: 900px;
	margin: 0 auto;
}
#main {
	padding: 10px;
	background: #f0f0f0;
	border: 1px solid #ccc;
}
fieldset a {color: #fff;}

/*--Main Image Preview--*/
.main_image {
	width: 598px; height: 456px;
	float: left;
	background: #333;
	position: relative;
	overflow: hidden;
	color: #fff;
}
.main_image h2 {
	font-size: 2em;
	font-weight: normal;
	margin: 0 0 5px;	padding: 10px;
}
.main_image p {
	font-size: 1.2em;
	padding: 10px;	margin: 0;
	line-height: 1.6em;
}
.block small { 
	padding: 0 0 0 20px; 
	background: url(icon_calendar.gif) no-repeat 0 center; 
	font-size: 1em; 
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
	position: absolute;
	bottom: 0;	left: 0;
	width: 100%;
	display: none;
}
.main_image .block{
	width: 100%;
	background: #111;
	border-top: 1px solid #000;
}
.main_image a.collapse {
	background: url(btn_collapse.gif) no-repeat left top;
	height: 27px; width: 93px;
	text-indent: -99999px;
	position: absolute; 
	top: -27px; right: 20px; 
}
.main_image a.show {background-position: left bottom;} 


.image_thumb {
	float: left;
	width: 299px;
	background: #f0f0f0;
	border-right: 1px solid #fff;
	border-top: 1px solid #ccc;
}
.image_thumb img {
	border: 1px solid #ccc; 
	padding: 5px; 
	background: #fff; 
	float: left;
}
.image_thumb ul {
	margin: 0; padding: 0;
	list-style: none;
}
.image_thumb ul li{
	margin: 0; padding: 12px 10px;
	background: #f0f0f0 url(nav_a.gif) repeat-x;
	width: 279px;
	float: left;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #fff;
	border-right: 1px solid #ccc;
}
.image_thumb ul li.hover {
	background: #ddd;
	cursor: pointer;
}
.image_thumb ul li.active {
	background: #fff;
	cursor: default;
}
html .image_thumb ul li h2 {
	font-size: 1.5em; 
	margin: 5px 0; padding: 0;
}
.image_thumb ul li .block {
	float: left; 
	margin-left: 10px;
	padding: 0;
	width: 170px;
}	
.image_thumb ul li p{display: none;}



</style>
Step 2: Place JavaScript below in your HEAD section
JavaScript
Code:
<script type="text/javascript" src="/javascript/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {	

	//Show Banner
	$(".main_image .desc").show(); //Show Banner
	$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity

	//Click and Hover events for thumbnail list
	$(".image_thumb ul li:first").addClass('active'); 
	$(".image_thumb ul li").click(function(){ 
		//Set Variables
		var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
		var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
		var imgDesc = $(this).find('.block').html(); 	//Get HTML of block
		var imgDescHeight = $(".main_image").find('.block').height();	//Calculate height of block	
		
		if ($(this).is(".active")) {  //If it's already active, then...
			return false; // Don't click through
		} else {
			//Animate the Teaser				
			$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
				$(".main_image .block").html(imgDesc).animate({ opacity: 0.85,	marginBottom: "0" }, 250 );
				$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
			});
		}
		
		$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
		$(this).addClass('active');  //add class of 'active' on this list only
		return false;
		
	}) .hover(function(){
		$(this).addClass('hover');
		}, function() {
		$(this).removeClass('hover');
	});
			
	//Toggle Teaser
	$("a.collapse").click(function(){
		$(".main_image .block").slideToggle();
		$("a.collapse").toggleClass("show");
	});
	
});//Close Function
</script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<div id="main" class="container">
	<div class="main_image">
		<img src="banner5.jpg" alt="Puzzled Putter">
		<div style="display: block;" class="desc">
			<a href="#" class="collapse">Close Me!</a>
			<div style="opacity: 0.85; margin-bottom: 0px; display: block;" class="block">
					<h2>Puzzled Putter</h2>
					<small>04/14/09</small>
					<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et. <br><a href="http://store.glennz.com/puzzledputter.html" target="_blank">Artwork By Glenn Jones</a></p>
				</div>
		</div>
	</div>
	<div class="image_thumb">
		<ul>
			<li class="">
				<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner1.jpg"><img src="banner1_thumb.jpg" alt="Slowing Dow"></a>
				<div class="block">
					<h2>Slowing Down</h2>
					<small>04/10/09</small>
					
					<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et.<br><a href="http://store.glennz.com/slowingdown.html" target="_blank">Artwork By Glenn Jones</a> </p>
				</div>
			</li>
			<li class="">
				<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner2.jpg"><img src="banner2_thumb.jpg" alt="Organized Food Fight"></a>
				<div class="block">
					<h2>Organized Food Fight</h2>
					<small>04/11/09</small>
					<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et. Autem conventio nimis quis ad, nisl secundum sed,
facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam
validus eum quadrum, volutpat et.</p>
					<p>Autem conventio nimis
quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem.
Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br><a href="http://store.glennz.com/orfofi.html" target="_blank">Artwork By Glenn Jones</a></p>
				</div>
			</li>
			<li class="">
				<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner3.jpg"><img src="banner3_thumb.jpg" alt="Endangered Species"></a>
				<div class="block">
					<h2>Endangered Species</h2>
					<small>04/12/09</small>
					<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et.<br><a href="http://store.glennz.com/ensp.html" target="_blank">Artwork By Glenn Jones</a></p>
				</div>
			</li>
			<li class="">
				<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner4.jpg"><img src="banner4_thumb.jpg" alt="Evolution"></a>
				<div class="block">
					<h2>Evolution</h2>
					<small>04/13/09</small>
					<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et. Autem conventio nimis quis ad, nisl secundum sed,
facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam
validus eum quadrum, volutpat et.<br><a href="http://store.glennz.com/evolution.html" target="_blank">Artwork By Glenn Jones</a></p>
				</div>
			</li>
			<li class="active hover">
				<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner5.jpg"><img src="banner5_thumb.jpg" alt="Puzzled Putter"></a>
				<div class="block">
					<h2>Puzzled Putter</h2>
					<small>04/14/09</small>
					<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et. <br><a href="http://store.glennz.com/puzzledputter.html" target="_blank">Artwork By Glenn Jones</a></p>
				</div>
			</li>
			<li class="">
				<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner6.jpg"><img src="banner6_thumb.jpg" alt="Secret Habit"></a>
				<div class="block">
					<h2>Secret Habit</h2>
					<small>04/15/09</small>
					<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem.<br><a href="http://store.glennz.com/secrethabit1.html" target="_blank">Artwork By Glenn Jones</a></p>
				</div>
			</li>
		</ul>
	</div>
</div>





Reply With Quote
  #134  
Old 01-13-2011, 01:16 PM
JavaScriptBank JavaScriptBank is offline
Senior Member
  
Join Date: Jul 2009
Posts: 207
Rep Power: 16
JavaScriptBank is on a distinguished road
Default Simple JavaScript Typing Text onClick
With this [Only Registered users can see links . Click Here To Register...] script, you can use to spell out a string of text, letter by letter. This JavaScript code example provides 3 ways to type our st... [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: Ilya Gerasimenko | http://www.gerasimenko.com
// This script downloaded from www.JavaScriptBank.com

// Text to type
var stringOfText1 = '... with a new string of text. Convenient for those "read more..." links.';
var stringOfText2 = ' spots on the same page; the animations will be consecutive.';
var stringOfText3 = 'Click (and keep clicking) here to retype this text over and over. You don\'t have to, but you can.';

// Animation
var textHolder;
var textTarget;
var letter;
var index;
var printing;
var waiting = false;

// Start

spellString = function (oId,str) {
 	if (waiting == false) {
  		index = 0;
  		waiting = true;
  		textTarget = document.getElementById(oId);
  		textTarget.innerHTML = '';
  		textHolder = str.split('');
  		sendToPrint();
 	}
}

// Animation

sendToPrint = function () {
 	if (index<textHolder.length) {
 		 printing = window.setTimeout(
    	 function () {
 					  getLetter(textTarget,index); 
 			},	1);
 	} else {
 		 waiting = false;
 	}
}

getLetter = function (textTarget,index) {
 	letter = document.createTextNode(textHolder[index]);
 	if (letter.value == '\\') letter.value = '';
 	printLetter(textTarget,letter);
}

printLetter = function (textTarget,letter) {
 	textTarget.appendChild(letter);
	 window.clearTimeout(printing);
	 index++;
	 sendToPrint();
}


// Created by: Simon Willison | http://simon.incutio.com/
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.getElementById('clickhere1').onclick = function () {
		  		spellString('typehere1',stringOfText1);
  		}
		document.getElementById('clickhere2').onclick = function () {
				  spellString('typehere2',stringOfText2);
  		}
		document.getElementById('keepclicking').onclick = function () {
		  		spellString('keepclicking',stringOfText3);
  		}
  }
);
</script>
Step 2: Place HTML below in your BODY section
HTML
Code:
<!--
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
-->
<div style="text-align: left; width: 70%;">

<p id="typehere1"><span id="clickhere1">Click here to <em>replace</em> this text ...</span></p>

<p>Can be used in several<span id="typehere2">... <span id="clickhere2">(click here to <em>read more</em>)</span></span></p>
<p id="keepclicking">Click (and keep clicking) here to <em>retype this text over and over</em>.</p>
</div>





Reply With Quote
  #135  
Old 01-13-2011, 01:57 PM
JavaScriptBank JavaScriptBank is offline
Senior Member
  
Join Date: Jul 2009
Posts: 207
Rep Power: 16
JavaScriptBank is on a distinguished road
Default AJAX Basics for Beginners
In this AJAX JavaScript article tutorial, the author shows you some basics about AJAX (Asynchronous JavaScript and XML), such as: methods and properties of AJAX, how to send a request to server with G... [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
  #136  
Old 01-13-2011, 02:27 PM
JavaScriptBank JavaScriptBank is offline
Senior Member
  
Join Date: Jul 2009
Posts: 207
Rep Power: 16
JavaScriptBank is on a distinguished road
Default Simple JavaScript Number Formatter
This JavaScript code example provides us two functions to clean up and format numbers quite nicely.

One [Only Registered users can see links . Click Here To Register...] function will take any decima... [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: Justin Barlow | http://www.netlobo.com/
// This script downloaded from www.JavaScriptBank.com

// This function formats numbers by adding commas
function numberFormat(nStr){
  nStr += '';
  x = nStr.split('.');
  x1 = x[0];
  x2 = x.length > 1 ? '.' + x[1] : '';
  var rgx = /(\d+)(\d{3})/;
  while (rgx.test(x1))
    x1 = x1.replace(rgx, '$1' + ',' + '$2');
  return x1 + x2;
}

// This function removes non-numeric characters
function stripNonNumeric( str ){
  str += '';
  var rgx = /^\d|\.|-$/;
  var out = '';
  for( var i = 0; i < str.length; i++ ){
    if( rgx.test( str.charAt(i) ) ){
      if( !( ( str.charAt(i) == '.' && out.indexOf( '.' ) != -1 ) ||
             ( str.charAt(i) == '-' && out.length != 0 ) ) ){
        out += str.charAt(i);
      }
    }
  }
  return out;
}
</script>
Step 2: Place HTML below in your BODY section
HTML
Code:
<div>
			numberFormat():<br>

			<form method="get" onsubmit="javascript:return false;">
				<input type="text" onkeyup="javascript:document.getElementById('numFormatResult').innerHTML = numberFormat( this.value );">

				<input type="reset" value="clear">
			</form>
			<span id="numFormatResult"></span>
			<br><br>
			stripNonNumeric():<br>
			<form method="get" onsubmit="javascript:return false;">

				<input type="text" onkeyup="javascript:document.getElementById('numStripResult').innerHTML = stripNonNumeric( this.value );">
				<input type="reset" value="clear">

			</form>
			<span id="numStripResult"></span>
			<br><br>
			stripNonNumeric() then numberFormat():<br>
			<form method="get" onsubmit="javascript:return false;">
				<input type="text" onkeyup="javascript:document.getElementById('numBothResult').innerHTML = numberFormat( stripNonNumeric( this.value ) );">

				<input type="reset" value="clear">
			</form>

			<span id="numBothResult"></span>
		</div>





Reply With Quote
  #138  
Old 01-20-2011, 05:20 AM
JavaScriptBank JavaScriptBank is offline
Senior Member
  
Join Date: Jul 2009
Posts: 207
Rep Power: 16
JavaScriptBank is on a distinguished road
Default HOT New JavaScript APIs with HTML5
In this JavaScript article tutorial, we're together to enjoy awesome experiments on HTML5 with new hot JavaScript APIs. With a lot of JavaScript/Web application live demos in this JavaScript HTML5 tut... [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
Reply
Page 14 of 21 « First < 41213 14 1516 > 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 01:45 AM.

Contact Us - Themers Club - Archive - Top

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