Go Back   Themers Club : Computers , Mobiles and Web Development Themes > Webmaster forum > Scripts and Tools

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

Reply
 
Thread Tools Display Modes
  #111  
Old 10-21-2010, 03:57 AM
JavaScriptBank JavaScriptBank is offline
Senior Member
 
Join Date: Jul 2009
Posts: 207
Rep Power: 16
JavaScriptBank is on a distinguished road
Default JavaScript OOP Tutorial for Dummies

In this free HTML JavaScript tutorial, the dummies will have some simple, short concepts about JavaScript OOP programming, OOP in JavaScript such as: how to define a [url="http://www.javascriptbank.com/tag=JavaScript class"]Ja... [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
  #113  
Old 10-21-2010, 03:55 PM
JavaScriptBank JavaScriptBank is offline
Senior Member
 
Join Date: Jul 2009
Posts: 207
Rep Power: 16
JavaScriptBank is on a distinguished road
Default Popular Built-in JavaScript Functions

In this free HTMl JavaScript tutorial, I'll list all of the built-in JavaScript functions available to you. While not everything will be covered, I will cover [url="http://www.javascriptbank.com/tag=function in JavaScript"]fun... [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
  #115  
Old 10-27-2010, 02:39 AM
JavaScriptBank JavaScriptBank is offline
Senior Member
 
Join Date: Jul 2009
Posts: 207
Rep Power: 16
JavaScriptBank is on a distinguished road
Default Web CSS Content Switcher Without JavaScript

Without JavaScript, we can still switch web content with CSS. It's so incredible but it's so true, just click into this free HTML example code, for testing it by yourself, to find how to make <a href=... [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">
* {
	margin: 0;
	padding: 0;
}

img {
	border: none;
}

h1 {
	line-height: 1em;
	font-family: "Times New Roman", Times, serif;
	color: #666;
	font-style: italic;
	text-align: center;
	padding: 30px 0 0 0;
}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0 0 8px 0;
}

h3 {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}

p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	line-height: 1.5em;
	margin: 0 0 14px 0;
	padding: 30px 0 0 0;
	clear: both;
	text-align: center;
	color: #666;
}

#content-slider {
	width: 650px;
	overflow: hidden;
	height: 300px;
	margin: 30px 0 0 0;
	border: solid 1px #666;
}

#content-slider-inside {
	list-style: none;
	height: 320px;
	overflow: scroll;
	overflow-y: hidden;
}

	#content-slider-inside li {
		width: 650px;
		background: #ccc;
		height: 300px;
		color: #666;
		font-size: 200px;
		font-family: "Times New Roman", Times, serif;
		font-style: italic;
		text-align: center;
		line-height: 300px;
	}
	
#navigation {
	list-style: none;
	margin: 20px 0 0 0;
	float: right;
}

#navigation li {
	float: left;
	width: 30px;
	height: 30px;
	text-align: center;
	margin: 0;
	border: solid 1px #ccc;
	line-height: 30px;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0 0 0 5px;
}

#navigation li a, #navigation li a:link, #navigation li a:visited {
	text-decoration: none;
	display: block;
	height: 30px;
	color: #666;
}

#navigation li a.selected, #navigation li a.selected:link, #navigation li a.selected:visited {
	background: #666;
	color: #fff;
}

#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
	background: #666;
	color: #fff;
}
</style>
Step 2: Place HTML below in your BODY section
HTML
Code:
<div style="margin: 0pt auto; width: 650px;">

<h1>A JavaScript Content Switcher That Works Without JavaScript</h1>

	<div id="content-slider">
		<ul id="content-slider-inside">
			<li id="one">1</li>
			<li id="two">2</li>
			<li id="three">3</li>

			<li id="four">4</li>
			<li id="five">5</li>
		</ul>
	</div>
	
	<ul id="navigation">
		<li><a href="#one">1</a></li>
		<li><a href="#two">2</a></li>

		<li><a href="#three">3</a></li>
		<li><a href="#four">4</a></li>
		<li><a href="#five">5</a></li>
	</ul>

<p>This page has no JavaScript, but the content switcher above is fully functional, and even allows deep linking.</p>

<p>JavaScript can now be added as an enhancement to make the content slide, fade, or animate.</p>

<p><a href="http://www.javascriptbank.com/how-create-web-css-content-switcher-without-javascript.html">View the same page with JavaScript/jQuery enhancing it.</a></p>

<p><a href="http://www.javascriptbank.com/how-create-web-css-content-switcher-without-javascript.html">&lt; Go back to the tutorial</a></p>

</div>





Reply With Quote
  #116  
Old 10-27-2010, 03:17 AM
JavaScriptBank JavaScriptBank is offline
Senior Member
 
Join Date: Jul 2009
Posts: 207
Rep Power: 16
JavaScriptBank is on a distinguished road
Default Inner Popup with Cookie

With this [Only Registered users can see links . Click Here To Register...], you can create a section to show marjor info on your website like popup, but this [Only Registered users can see links . Click Here To Register...] use [url="http://www.javascriptbank.com/javascript/"]Java... [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 JavaScript code below to setup the script
JavaScript
Code:
<script language="JavaScript" name="PopIn.js" type="text/javascript">
var div_iPop = '<div id="iCoder" pos="tc" style="display:none;">';
div_iPop += '	<table width="517" height="422" cellspacing="0" cellpadding="2" style="border:1px solid #D349AD;">';
div_iPop += '		<tr style="background-color:#D349AD">';
div_iPop += '			<td height="10" >';
div_iPop += '				<table width="100%" cellpadding="0" cellspacing="0" style="background-color:#D349AD;color:white;font:normal 10pt Verdana;">';
div_iPop += '					<tr><th style="font-size: 16px;">Inner Popup with Cookie</th><th style="padding-left:1ex;padding-right:1ex;">';
div_iPop += '						<a href="javascript:iPop_close()" style="color:white;font:normal 10pt Verdana;text-decoration:none;">×</a></th></tr>';
div_iPop += '				</table>';
div_iPop += '			</td>';
div_iPop += '		</tr>';
div_iPop += '		<tr>';
div_iPop += '			<td height="100%" style="background-color:#FFFFCC;color:black;">';
div_iPop += '				With this script, you can create a section to show marjor info on your website like popup, but this script use JavaScript and cookie to show popup once. Popup will display in center of window and will scroll, but this popup has a close button for closing it.<br /><br />';
div_iPop += '				You can change your content in <b><code>div_iPop</code></b> var';
div_iPop += '			</td>';
div_iPop += '		</tr>';
div_iPop += '	</table>';
div_iPop += '</div>';
document.write(div_iPop);

///////////////////////////////////////////////////////////////
// Pop-In Builder (c)2004.  iCoder.com  All Rights Reserved. //
///////////////////////////////////////////////////////////////
function iPop_close(pop_name) {
  if(!pop_name) pop_name = "iCoder";
  DHTMLAPI_hide(pop_name);
}
function iPop_close() { DHTMLAPI_hide("iCoder"); }
function iPop_init0() {
  if (!iPop_CookieCheck()) return;
  DHTMLAPI_init();
  iCoder_Obj = DHTMLAPI_getRawObject("iCoder");
  iCoder_move();
  window.onscroll=iCoder_move;
  window.onresize=iCoder_move;
}
function iPop_init1() {
//  if (!iPop_CookieCheck()) return;
  DHTMLAPI_init();
  iCoder_delta = 16;
  iCoder_Obj = DHTMLAPI_getRawObject("iCoder");
  var theObj = iCoder_Obj; if (theObj && isCSS) theObj = theObj.style;
  if (theObj && theObj.visibility == "hidden") return;
  if (theObj && theObj.display == "none") { theObj.display = "block"; theObj.position = "absolute"; }
  DHTMLAPI_shiftTo(iCoder_Obj, 0, 5000);
  var center = DHTMLAPI_positionWindow(iCoder_Obj, true);
  iCoder_x = center[0];
  iCoder_y = center[1];
  var w_scroll = DHTMLAPI_getScrollWindow();
  var start_y = parseInt((w_scroll[1]-iCoder_y-DHTMLAPI_getObjectHeight(iCoder_Obj)-100)/100)*100 + iCoder_y;
  DHTMLAPI_shiftTo(iCoder_Obj, iCoder_x, start_y);
  iCoder_dropstart=setInterval("iCoder_drop()",50);
}
function iCoder_move() {
  if (window.iCoder_timeout) clearTimeout(window.iCoder_timeout);
  if (!iCoder_Obj) return;
  var theObj = iCoder_Obj; if (theObj && isCSS) theObj = theObj.style;
  if (theObj && theObj.visibility == "hidden") return;
  if (theObj && theObj.display == "none") { theObj.display = "block"; theObj.position = "absolute"; }
  DHTMLAPI_positionWindow(iCoder_Obj);
  window.iCoder_timeout = setTimeout("iCoder_move()", 100);
}
function DHTMLAPI_positionWindow(elemID, positionOnly) {
  var obj = DHTMLAPI_getRawObject(elemID);
  var position = obj.getAttribute("pos");
  var scrollX = 0, scrollY = 0;
  if (document.body && typeof(document.body.scrollTop) != "undefined") {
    scrollX += document.body.scrollLeft;
    scrollY += document.body.scrollTop;
    if (0 == document.body.scrollTop
    && document.documentElement
    && typeof(document.documentElement.scrollTop) != "undefined") {
      scrollX += document.documentElement.scrollLeft;
      scrollY += document.documentElement.scrollTop;
    }	
  } else if (typeof(window.pageXOffset) != "undefined") {
    scrollX += window.pageXOffset;
    scrollY += window.pageYOffset;
  }
  var x = Math.round((DHTMLAPI_getInsideWindowWidth( )/2) - (DHTMLAPI_getObjectWidth(obj)/2)) + scrollX;
  var y = Math.round((DHTMLAPI_getInsideWindowHeight( )/2) - (DHTMLAPI_getObjectHeight(obj)/2)) + scrollY;
  var shift_position = parseInt(0);
  if (isNaN(shift_position)) shift_position = 0;
  switch (position) {
    case "tc": y = scrollY+shift_position; break;
    case "tl": y = scrollY+shift_position; x = scrollX+shift_position; break;
    case "tr": y = scrollY+shift_position; x = Math.round(DHTMLAPI_getInsideWindowWidth( ) - DHTMLAPI_getObjectWidth(obj)) + scrollX-shift_position; break;
    case "ml": x = scrollX+shift_position; break;
    case "mr": x = Math.round(DHTMLAPI_getInsideWindowWidth( ) - DHTMLAPI_getObjectWidth(obj)) + scrollX-shift_position; break;
    case "bc": y = Math.round(DHTMLAPI_getInsideWindowHeight( ) - DHTMLAPI_getObjectHeight(obj)) + scrollY-shift_position; break;
    case "bl": y = Math.round(DHTMLAPI_getInsideWindowHeight( ) - DHTMLAPI_getObjectHeight(obj)) + scrollY-shift_position; x = scrollX+shift_position; break;
    case "br": y = Math.round(DHTMLAPI_getInsideWindowHeight( ) - DHTMLAPI_getObjectHeight(obj)) + scrollY-shift_position; x = Math.round(DHTMLAPI_getInsideWindowWidth( ) - DHTMLAPI_getObjectWidth(obj)) + scrollX-shift_position; break;
  }
  if (!positionOnly) DHTMLAPI_shiftTo(obj, x, y);
  return [x, y];
}
function iCoder_drop() {
  var y = DHTMLAPI_getObjectTop(iCoder_Obj);
  if ( iCoder_y > y ) DHTMLAPI_shiftTo(iCoder_Obj, iCoder_x, 50+y);
  else {
    clearInterval(iCoder_dropstart);
    iCoder_vibrostart = setInterval("iCoder_vibro()",40);
  }
}
function iCoder_vibro() {
  var y = DHTMLAPI_getObjectTop(iCoder_Obj);
  DHTMLAPI_shiftTo(iCoder_Obj, iCoder_x, y-iCoder_delta);
  if (iCoder_delta<0) iCoder_delta += 4;
  iCoder_delta *= -1;
  if (iCoder_delta==0) {
    clearInterval(iCoder_vibrostart);
    iCoder_move();
    window.onscroll=iCoder_move;
    window.onresize=iCoder_move;
  }
}
function DHTMLAPI_hide(obj) {
  var theObj = DHTMLAPI_getObject(obj);
  if (theObj) theObj.visibility = "hidden";
}
function DHTMLAPI_getRawObject(obj) {
  var theObj;
  if (typeof obj == "string") {
    if (isW3C) theObj = document.getElementById(obj);
    else if (isIE4) theObj = document.all(obj);
    else if (isNN4) theObj = DHTMLAPI_seekLayer(document, obj);
  } else theObj = obj;
  return theObj;
}
function DHTMLAPI_shiftTo(obj, x, y) {
  var theObj = DHTMLAPI_getObject(obj);
  if (theObj) {
    if (isCSS) {
      var units = (typeof theObj.left == "string") ? "px" : 0;
      theObj.left = x + units;
      theObj.top = y + 100 + units;
    } else if (isNN4) theObj.moveTo(x,y);
  }
}
function DHTMLAPI_getScrollWindow() {
  var scrollX = 0, scrollY = 0;
  if (document.body && typeof(document.body.scrollTop) != "undefined") {
    scrollX += document.body.scrollLeft;
    scrollY += document.body.scrollTop;
  } else if (typeof(window.pageXOffset) != "undefined") {
    scrollX += window.pageXOffset;
    scrollY += window.pageYOffset;
  }
  return [scrollX, scrollY];
}
function DHTMLAPI_getObjectHeight(obj)  {
  var elem = DHTMLAPI_getRawObject(obj);
  var result = 0;
  if (elem.offsetHeight) result = elem.offsetHeight;
  else if (elem.clip && elem.clip.height) result = elem.clip.height;
  else if (elem.style && elem.style.pixelHeight) result = elem.style.pixelHeight;
  return parseInt(result);
}
function DHTMLAPI_getObjectTop(obj)  {
  var elem = DHTMLAPI_getRawObject(obj);
  var result = 0;
  if (document.defaultView) {
    var style = document.defaultView;
    var cssDecl = style.getComputedStyle(elem, "");
    result = cssDecl.getPropertyValue("top");
  }
  else if (elem.currentStyle) result = elem.currentStyle.top;
  else if (elem.style) result = elem.style.top;
  else if (isNN4) result = elem.top;
  return parseInt(result);
}
function DHTMLAPI_getObject(obj) {
  var theObj = DHTMLAPI_getRawObject(obj);
  if (theObj && isCSS) theObj = theObj.style;
  return theObj;
}
function DHTMLAPI_seekLayer(doc, name) {
  var theObj;
  for (var i = 0; i < doc.layers.length; i++) {
    if (doc.layers[i].name == name) {
      theObj = doc.layers[i];
      break;
    }
    if (doc.layers[i].document.layers.length > 0) theObj = DHTMLAPI_seekLayer(document.layers[i].document, name);
  }
  return theObj;
}
function DHTMLAPI_getInsideWindowWidth( ) {
  if (window.innerWidth) return window.innerWidth;
  else if (isIE6CSS) return document.body.parentElement.clientWidth;
  else if (document.body && document.body.clientWidth) return document.body.clientWidth;
  return 0;
}
function DHTMLAPI_getInsideWindowHeight( ) {
  if (window.innerHeight) return window.innerHeight;
  else if (isIE6CSS) return document.body.parentElement.clientHeight;
  else if (document.body && document.body.clientHeight) return document.body.clientHeight;
  return 0;
}
function DHTMLAPI_getObjectWidth(obj)  {
  var elem = DHTMLAPI_getRawObject(obj);
  var result = 0;
  if (elem.offsetWidth) result = elem.offsetWidth;
  else if (elem.clip && elem.clip.width) result = elem.clip.width;
  else if (elem.style && elem.style.pixelWidth) result = elem.style.pixelWidth;
  return parseInt(result);
}
function DHTMLAPI_init( ) {
  if (document.images) {
    isCSS = (document.body && document.body.style) ? true : false;
    isW3C = (isCSS && document.getElementById) ? true : false;
    isIE4 = (isCSS && document.all) ? true : false;
    isNN4 = (document.layers) ? true : false;
    isIE6CSS = (document.compatMode && document.compatMode.indexOf("CSS1") >= 0) ? true : false;
  }
}
setTimeout("iPop_init1()", 100);

function iPop_CookieCheck() {if (document.cookie.indexOf("iCoder=") != -1) return false;var d = new Date();var t = parseInt(1); if (isNaN(t)) t = 1;d.setDate(d.getDate() + t);document.cookie = "iCoder="+d.toGMTString()+"; expires="+d.toGMTString()+";";return true;}
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->





Reply With Quote
  #119  
Old 11-02-2010, 05:26 AM
JavaScriptBank JavaScriptBank is offline
Senior Member
 
Join Date: Jul 2009
Posts: 207
Rep Power: 16
JavaScriptBank is on a distinguished road
Default 3 Simple Ways to Define a JavaScript class

This free HTML JavaScript tutorial guides you how to setup, define a JavaScript class through 3 simple ways. Please try them in the detailed post, or read more HTML JavaScript tutorial about OOP JavaS... [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

Bookmarks


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 09:27 AM.


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