IdealProgrammer.com

ondblclick JavaScript (JS) Example: HTML DOM Objects – Event – ondblclick JavaScript (JS) Example

asp.net videos — Sun, 21 Feb 2010 16:48:05 +0000

ondblclick JavaScript (JS) Example: HTML DOM Objects – Event – ondblclick JavaScript (JS) Example

Purpose: – Illustrates the JavaScript syntax for the ondblclick Event.

View Other Attributes and Handlers for DOM Events

Prerequistes:

Install Visual Web Developer 2008

Syntax: Object.ondblclick="yourjavascriptcode()" – Allows you to know when double click event occurs.

Restrictions: None

Notes:

You can build your own library of syntax examples by using same web site over and over and just add new files to it.

Instructions:

Use Visual Web Developer 2008
Create new web site;
- Click File/New Web Site
- Select ASP.NET Website Template
- Select C-Sharp for language
- name of Web Site could be JavaScript_Syntax.

Add New folder named "HTMLDOMObjects"
- Right-click project name in solution explorer;
- add new folder;
- name of folder should be: HTMLDOMObjects
Add New subfolder to "HTMLDOMObjects" folder named "DOMEvent"
- Right-click folder named "HTMLDOMObjects" in solution explorer;
- add new folder;
- name of folder should be: DOMEvent
Add New subfolder to "DOMEvent" subfolder named "EventHandlers"
- Right-click subfolder named "DOMEvent" in solution explorer;
- add new folder;
- name of folder should be: EventHandlers
Add HTML Page Named ondblclick to EventHandlers subfolder
- Right-click EventHandlers subfolder;
- add new item;
- Select HTML Page
- HTML Page name should be ondblclick
Click on copy code in code below to copy code into HTML Page ondblclick.htm
Right-click on HTML page ondblclick.htm and select view in browser

View Example In Browser


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
<head>
<title>IdealProgrammer.com: ondblclick </title>
 
<script type="text/javascript">
 
 
 
// Arrays of possible properties
 
var theTargets = new Array(
	'target',
	'relatedTarget',
	'currentTarget',
	'originalTarget',
	'srcElement',
	'fromElement',
	'toElement'
);
 
var theMouse = new Array(
	'clientX',
	'clientY',
	'x',
	'y',
	'layerX',
	'layerY',
	'screenX',
	'screenY',
	'offsetX',
	'offsetY',
	'pageX',
	'pageY',
	'which',
	'button',
	'detail',
	'wheelDelta'
);
 
var theKeys = new Array(
	'modifiers',
	'which',
	'keyCode',
	'charCode',
	'isChar',
	'shiftKey',
	'shiftLeft',
	'metaKey',
	'altKey',
	'altLeft',
	'ctrlKey',
	'ctrlLeft'
);
 
var theType = new Array(
	'type',
	'eventPhase',
	'bubbles',
	'cancelable',
	'cancelBubble',
	'detail',
	'returnValue',
	'timeStamp',
	'view'
);
 
 
function writeAvailableProperties() {
    document.write(event.altkey + " - altKey	     Retrieves a value that indicates the state of the ALT key.
");
    document.write(event.clientX + " - clientX	     Sets or retrieves the x-coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars.
 Please use browser back button to return to previous page


");
}
function doSomething(e) {
    if (!e) var e = window.event
    // e refers to the event
    var string = printInfo(e);
	alert(string);
 
}
 
 
 
 
// Print out property information based on user checking of form
 
function printInfo(e)
{
	var printstring = '';
	if (this.id) printstring +=	'Event is now in layer ' + this.id + '\n\n';
	var possibilities = document.forms[0].elements;
	for (var i=0;i<possibilities .length;i++)
	{
		if (possibilities[i].checked)
		{
			var thearray = self[possibilities[i].name];
			for (var j=0;j<thearray.length;j++)
			{
				var current = e[thearray[j]];
				var curr = typeof current;
//				alert(thearray[j] + ' is ' + curr);
				if (curr == 'undefined' || (curr == 'object' && !current)) continue;
				if (possibilities[i].name == 'theTargets')
				{
					var tag = (current.tagName) ? current.tagName : '[unknown tag]';
					var tagid = (current.id) ? current.id : '[no id]';
					printstring += '\n' + thearray[j] + ' = ' + tag + ' ' + tagid;
 
				}
				else
					printstring += '\n' + thearray[j] + ' = ' + current;
 
			}
		}
	}
	if (!printstring) printstring = 'Alert required for example\nUse checkboxes to see useful information';
	return printstring;
}
 
 
 
</script>
 
 
</possibilities></script></head>
<body>
<h2>Example #1: Check the categories and double click button to see ondblclick Attributes</h2>
 
<form>Show
<input type="checkbox" name="theType"/> type/misc
<input type="checkbox" name="theTargets"/> targets
<input type="checkbox" name="theMouse"/> mouse stuff
<input type="checkbox" name="theKeys"/> key stuff
</form>
 
<br />
<br />
 
<input id="Button1" type="button" value="double click me" />
 
<script type="text/javascript">
 
// This is the "traditional" and recommended technique for registering an event
// handler because it allows you to separate structure from behavior; the
// "inline" method of registering an event within xhtml tags is not
// the recommended approach because it blurs structure and behavior.
// For complete explanation, please see the following excellent article:
// http://www.digital-web.com/articles/separating_behavior_and_structure_2/
//
// Note: Using getElementById so registering event will work in FireFox
//
var mybutton = document.getElementById("Button1")
mybutton.ondblclick = doSomething;
if (mybutton.captureEvents) mybutton.captureEvents(Event.CLICK);
</script>  
<hr />
 
<h2>Example #2: Double click button Below to See ondblclick Copy Example</h2>
 
FieldA: <input type="text" id="fieldA" value="Copy Me!" />
<br />
FieldB: <input type="text" id="fieldB" />
<br /><br />
Click the button below to copy the content of FieldA to FieldB.
<br />
<button ondblclick="document.getElementById('fieldB').value=
document.getElementById('fieldA').value">Double Click to Copy</button>
 
 
 
 
</body>
 
</html>

Post from: IdealProgrammer.com

onBlur JavaScript (JS) Example: HTML DOM Objects – Event – onBlur JavaScript JS Example onBlur JavaScript (JS) Example HTML DOM Objects Event...
onChange JavaScript (JS) Example: HTML DOM Objects – Event – onChange JavaScript (JS) Example onChange JavaScript (JS) Example: HTML DOM Objects - Event -...
HTML DOM Event Object Examples JavaScript (JS) HTML DOM Event Object Examples JavaScript (JS)...

Related posts brought to you by Yet Another Related Posts Plugin.

onClick JavaScript (JS) Example: HTML DOM Objects – Event – onClick JavaScript (JS) Example

asp.net videos — Sun, 21 Feb 2010 13:40:05 +0000

onClick JavaScript (JS) Example: HTML DOM Objects – Event – onClick JavaScript (JS) Example

Purpose: – Illustrates the JavaScript syntax for the onClick Event.

View Other Attributes and Handlers for DOM Events

Prerequistes:

Install Visual Web Developer 2008

Syntax: Object.onClick="yourjavascriptcode()" – Allows you to know when text or selection for element has changed.

Restrictions: None

Notes:

You can build your own library of syntax examples by using same web site over and over and just add new files to it.

Instructions:

Use Visual Web Developer 2008
Create new web site;
- Click File/New Web Site
- Select ASP.NET Website Template
- Select C-Sharp for language
- name of Web Site could be JavaScript_Syntax.

Add New folder named "HTMLDOMObjects"
- Right-click project name in solution explorer;
- add new folder;
- name of folder should be: HTMLDOMObjects
Add New subfolder to "HTMLDOMObjects" folder named "DOMEvent"
- Right-click folder named "HTMLDOMObjects" in solution explorer;
- add new folder;
- name of folder should be: DOMEvent
Add New subfolder to "DOMEvent" subfolder named "EventHandlers"
- Right-click subfolder named "DOMEvent" in solution explorer;
- add new folder;
- name of folder should be: EventHandlers
Add HTML Page Named onClick to EventHandlers subfolder
- Right-click EventHandlers subfolder;
- add new item;
- Select HTML Page
- HTML Page name should be onClick
Click on copy code in code below to copy code into HTML Page onClick.htm
Right-click on HTML page onClick.htm and select view in browser

View Example In Browser


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
<head>
<title>IdealProgrammer.com: onClick </title>
 
<script type="text/javascript">
 
 
 
// Arrays of possible properties
 
var theTargets = new Array(
	'target',
	'relatedTarget',
	'currentTarget',
	'originalTarget',
	'srcElement',
	'fromElement',
	'toElement'
);
 
var theMouse = new Array(
	'clientX',
	'clientY',
	'x',
	'y',
	'layerX',
	'layerY',
	'screenX',
	'screenY',
	'offsetX',
	'offsetY',
	'pageX',
	'pageY',
	'which',
	'button',
	'detail',
	'wheelDelta'
);
 
var theKeys = new Array(
	'modifiers',
	'which',
	'keyCode',
	'charCode',
	'isChar',
	'shiftKey',
	'shiftLeft',
	'metaKey',
	'altKey',
	'altLeft',
	'ctrlKey',
	'ctrlLeft'
);
 
var theType = new Array(
	'type',
	'eventPhase',
	'bubbles',
	'cancelable',
	'cancelBubble',
	'detail',
	'returnValue',
	'timeStamp',
	'view'
);
 
 
function writeAvailableProperties() {
    document.write(event.altkey + " - altKey	     Retrieves a value that indicates the state of the ALT key.
");
    document.write(event.clientX + " - clientX	     Sets or retrieves the x-coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars.
 Please use browser back button to return to previous page


");
}
function doSomething(e) {
    if (!e) var e = window.event
    // e refers to the event
    var string = printInfo(e);
	alert(string);
 
}
 
 
 
 
// Print out property information based on user checking of form
 
function printInfo(e)
{
	var printstring = '';
	if (this.id) printstring +=	'Event is now in layer ' + this.id + '\n\n';
	var possibilities = document.forms[0].elements;
	for (var i=0;i<possibilities .length;i++)
	{
		if (possibilities[i].checked)
		{
			var thearray = self[possibilities[i].name];
			for (var j=0;j<thearray.length;j++)
			{
				var current = e[thearray[j]];
				var curr = typeof current;
//				alert(thearray[j] + ' is ' + curr);
				if (curr == 'undefined' || (curr == 'object' && !current)) continue;
				if (possibilities[i].name == 'theTargets')
				{
					var tag = (current.tagName) ? current.tagName : '[unknown tag]';
					var tagid = (current.id) ? current.id : '[no id]';
					printstring += '\n' + thearray[j] + ' = ' + tag + ' ' + tagid;
 
				}
				else
					printstring += '\n' + thearray[j] + ' = ' + current;
 
			}
		}
	}
	if (!printstring) printstring = 'Alert required for example\nUse checkboxes to see useful information';
	return printstring;
}
 
function doConfirm() {
    return confirm('Do you really want to follow this link?')
}
 
</script>
 
 
</possibilities></script></head>
<body>
<h2>Example #1: Check the categories and click button to see onClick Attributes</h2>
 
<form>Show
<input type="checkbox" name="theType"/> type/misc
<input type="checkbox" name="theTargets"/> targets
<input type="checkbox" name="theMouse"/> mouse stuff
<input type="checkbox" name="theKeys"/> key stuff
</form>
 
<br />
<br />
 
<input id="Button1" type="button" value="button" />
 
<script type="text/javascript">
 
// This is the "traditional" and recommended technique for registering an event
// handler because it allows you to separate structure from behavior; the
// "inline" method of registering an event within xhtml tags is not
// the recommended approach because it blurs structure and behavior.
// For complete explanation, please see the following excellent article:
// http://www.digital-web.com/articles/separating_behavior_and_structure_2/
//
// Note: Using getElementById so registering event will work in FireFox
//
var mybutton = document.getElementById("Button1")
mybutton.onclick = doSomething;
if (mybutton.captureEvents) mybutton.captureEvents(Event.CLICK);
</script>  
<hr />
<h2>Example #2: Click Link Below to See onClick Prevent Default Behavior</h2>
 
<a href="http://idealprogrammer.com" onclick="return doConfirm()">Ideal Programmer</a>
 
<p>When onclick is passed a false return value, the default behavior (going to the 
new page) is prevented.</p>
<hr />
<h2>Example #3: Click Link Below to See onClick Copy Example</h2>
 
FieldA: <input type="text" id="fieldA" value="Copy Me!" />
<br />
FieldB: <input type="text" id="fieldB" />
<br /><br />
Click the button below to copy the content of FieldA to FieldB.
<br />
<button onclick="document.getElementById('fieldB').value=
document.getElementById('fieldA').value">Copy</button>
 
 
 
 
</body>
 
</html>

Post from: IdealProgrammer.com

onBlur JavaScript (JS) Example: HTML DOM Objects – Event – onBlur JavaScript JS Example onBlur JavaScript (JS) Example HTML DOM Objects Event...
onChange JavaScript (JS) Example: HTML DOM Objects – Event – onChange JavaScript (JS) Example onChange JavaScript (JS) Example: HTML DOM Objects - Event -...
ondblclick JavaScript (JS) Example: HTML DOM Objects – Event – ondblclick JavaScript (JS) Example ondblclick JavaScript (JS) Example: HTML DOM Objects - Event -...

Related posts brought to you by Yet Another Related Posts Plugin.

onChange JavaScript (JS) Example: HTML DOM Objects – Event – onChange JavaScript (JS) Example

asp.net videos — Sun, 21 Feb 2010 00:50:31 +0000

onChange JavaScript (JS) Example: HTML DOM Objects – Event – onChange JavaScript (JS) Example

Purpose: – Illustrates the JavaScript syntax for the onChange Event.

View Other Attributes and Handlers for DOM Events

Prerequistes:

Install Visual Web Developer 2008

Syntax: Object.onChange="yourjavascriptcode()" – Allows you to know when text or selection for element has changed.

Restrictions: None

Notes:

You can build your own library of syntax examples by using same web site over and over and just add new files to it.

Instructions:

Use Visual Web Developer 2008
Create new web site;
- Click File/New Web Site
- Select ASP.NET Website Template
- Select C-Sharp for language
- name of Web Site could be JavaScript_Syntax.

Add New folder named "HTMLDOMObjects"
- Right-click project name in solution explorer;
- add new folder;
- name of folder should be: HTMLDOMObjects
Add New subfolder to "HTMLDOMObjects" folder named "DOMEvent"
- Right-click folder named "HTMLDOMObjects" in solution explorer;
- add new folder;
- name of folder should be: DOMEvent
Add New subfolder to "DOMEvent" subfolder named "EventHandlers"
- Right-click subfolder named "DOMEvent" in solution explorer;
- add new folder;
- name of folder should be: EventHandlers
Add HTML Page Named onChange to EventHandlers subfolder
- Right-click EventHandlers subfolder;
- add new item;
- Select HTML Page
- HTML Page name should be onChange
Click on copy code in code below to copy code into HTML Page onChange.htm
Right-click on HTML page onChange.htm and select view in browser

View Example In Browser


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
  <head>
    <title>IdealProgrammer.com: onChange </title>
    
    <script type="text/javascript">
 
 
        function writeAvailableProperties() {
            document.write(event.altkey + " - altKey	     Retrieves a value that indicates the state of the ALT key.
");
            document.write(event.clientX + " - clientX	     Sets or retrieves the x-coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars.
 Please use browser back button to return to previous page


");
        }
        function doSomething(e) {
            if (!e) var e = window.event
            // e refers to the event
 
            document.write(e.clientY + " - clientY	     Sets or retrieves the y-coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars.

 Please use browser back button to return to previous page


");
        }
 
    </script>
 
 
   </head>
  <body>
  <h1>Change Text Fields and Select from DropDown to see onChange in Action</h1>
 
<input type="text" 
    name="txtState" 
    value="State" 
    onchange="alert(event.srcElement.name + '\n' + event.srcElement.type)" /><br />
<input type="text" 
    name="txtCountry" 
    value="Country" 
    onchange="writeAvailableProperties()" /><br />
<input type="text" id="idZip"
    name="txtZip" 
    value="Zip"      />
  <script type="text/javascript">
      idZip.onchange = doSomething;
      if (idZip.captureEvents) idZip.captureEvents(Event.CHANGE);
      </script>    
 
    <p>Select a different option in the drop-down list box to trigger the onchange event.<br />
	<select name="Groceries" id="idGroceries" >
	<option value="Fruit">Fruit</option>
	<option value="Meat">Meat</option>
	<option value="Vegatables">Vegatables</option>
	</select> </p>
	<script type="text/javascript">
	    // This is the "traditional" and recommended technique for registering an event
	    // handler because it allows you to separate structure from behavior; the
	    // "inline" method of registering an event within xhtml tags is not
	    // the recommended approach because it blurs structure and behavior.
	    // For complete explanation, please see the following excellent article:
	    // http://www.digital-web.com/articles/separating_behavior_and_structure_2/
	    //
	    // Note: Using getElementById so registering event will work in FireFox
	    //
	    var mySelect = document.getElementById("idGroceries");
	    mySelect.onchange = doSomething;
	    if (mySelect.captureEvents) mySelect.captureEvents(Event.CHANGE);
      </script>  
 
 
</body>
 
</html>

Post from: IdealProgrammer.com

onBlur JavaScript (JS) Example: HTML DOM Objects – Event – onBlur JavaScript JS Example onBlur JavaScript (JS) Example HTML DOM Objects Event...
ondblclick JavaScript (JS) Example: HTML DOM Objects – Event – ondblclick JavaScript (JS) Example ondblclick JavaScript (JS) Example: HTML DOM Objects - Event -...
onClick JavaScript (JS) Example: HTML DOM Objects – Event – onClick JavaScript (JS) Example onClick JavaScript (JS) Example: HTML DOM Objects - Event -...

Related posts brought to you by Yet Another Related Posts Plugin.

onBlur JavaScript (JS) Example: HTML DOM Objects – Event – onBlur JavaScript JS Example

asp.net videos — Sat, 20 Feb 2010 23:17:27 +0000

onBlur JavaScript (JS) Example: HTML DOM Objects – Event – onBlur JavaScript (JS) Example

Purpose: – Illustrates the JavaScript syntax for the onBlur Event.

View Other Attributes and Handlers for DOM Events

Prerequistes:

Install Visual Web Developer 2008

Syntax: Object.onBlur="yourjavascriptcode()" – Allows you to know when element has lost focus.

Restrictions: None

Notes:

You can build your own library of syntax examples by using same web site over and over and just add new files to it.

Instructions:

Use Visual Web Developer 2008
Create new web site;
- Click File/New Web Site
- Select ASP.NET Website Template
- Select C-Sharp for language
- name of Web Site could be JavaScript_Syntax.

Add New folder named "HTMLDOMObjects"
- Right-click project name in solution explorer;
- add new folder;
- name of folder should be: HTMLDOMObjects
Add New subfolder to "HTMLDOMObjects" folder named "DOMEvent"
- Right-click folder named "HTMLDOMObjects" in solution explorer;
- add new folder;
- name of folder should be: DOMEvent
Add New subfolder to "DOMEvent" subfolder named "EventHandlers"
- Right-click subfolder named "DOMEvent" in solution explorer;
- add new folder;
- name of folder should be: EventHandlers
Add HTML Page Named onBlur to EventHandlers subfolder
- Right-click EventHandlers subfolder;
- add new item;
- Select HTML Page
- HTML Page name should be onBlur
Click on copy code in code below to copy code into HTML Page onBlur.htm
Right-click on HTML page onBlur.htm and select view in browser

View Example In Browser


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
  <head>
    <title>IdealProgrammer.com: onBlur </title>
    
    <script type="text/javascript">
 
 
        function writeAvailableProperties() {
            document.write(event.altkey + " - altKey	     Retrieves a value that indicates the state of the ALT key.
");
            document.write(event.clientX + " - clientX	     Sets or retrieves the x-coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars.

Use back button to return to page.");
        }
        function doSomething(e) {
            if (!e) var e = window.event
            // e refers to the event
 
            document.write(e.clientY + " - clientY	     Sets or retrieves the y-coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars.

Use back button to return to page.");
        }
    </script>
 
 
   </head>
  <body>
 
<input type="text" 
    name="txtState" 
    value="State" 
    onblur="alert(event.srcElement.name + '\n' + event.srcElement.type)" /><br />
<input type="text" 
    name="txtCountry" 
    value="Country" 
    onblur="writeAvailableProperties()" /><br />
<input type="text" 
    name="txtZip" 
    value="Zip" 
    onblur="alert(event.srcElement.name + '\n' + event.srcElement.type)" />
      <input id="Button1" type="button" value="button" />
      <script type="text/javascript">
          // This is the "traditional" and recommended technique for registering an event
          // handler because it allows you to separate structure from behavior; the
          // "inline" method of registering an event within xhtml tags is not
          // the recommended approach because it blurs structure and behavior.
          // For complete explanation, please see the following excellent article:
          // http://www.digital-web.com/articles/separating_behavior_and_structure_2/
          //
          // Note: Using getElementById so registering event will work in FireFox
          //
      var myButton = document.getElementById("Button1")
          myButton.onblur = doSomething;
          if (myButton.captureEvents) myButton.captureEvents(Event.BLUR);
      </script>
</body>
 
</html>

Post from: IdealProgrammer.com

onChange JavaScript (JS) Example: HTML DOM Objects – Event – onChange JavaScript (JS) Example onChange JavaScript (JS) Example: HTML DOM Objects - Event -...
ondblclick JavaScript (JS) Example: HTML DOM Objects – Event – ondblclick JavaScript (JS) Example ondblclick JavaScript (JS) Example: HTML DOM Objects - Event -...
onClick JavaScript (JS) Example: HTML DOM Objects – Event – onClick JavaScript (JS) Example onClick JavaScript (JS) Example: HTML DOM Objects - Event -...

Related posts brought to you by Yet Another Related Posts Plugin.

onAbort JavaScript (JS) Example: HTML DOM Objects – Event – onAbort JavaScript (JS) Example

asp.net videos — Fri, 19 Feb 2010 13:53:22 +0000

onAbort JavaScript (JS) Example: HTML DOM Objects – Event – onAbort JavaScript (JS) Example

Purpose: – Illustrates the JavaScript syntax for the Event onAbort .

View Other Attributes and Handlers for DOM Events

Prerequistes:

Install Visual Web Developer 2008

Syntax: ImageObject.onAbort="yourjavascriptcode()" – Allows you to know when user has stopped the loading of an image by: 1. clicking link; 2. clicking browser stop button; 3. navigating to new page.

Restrictions: None

Notes:

You can build your own library of syntax examples by using same web site over and over and just add new files to it.

Instructions:

Use Visual Web Developer 2008
Create new web site;
- Click File/New Web Site
- Select ASP.NET Website Template
- Select C-Sharp for language
- name of Web Site could be JavaScript_Syntax.

Add New folder named "HTMLDOMObjects"
- Right-click project name in solution explorer;
- add new folder;
- name of folder should be: HTMLDOMObjects
Add New subfolder to "HTMLDOMObjects" folder named "DOMEvent"
- Right-click folder named "HTMLDOMObjects" in solution explorer;
- add new folder;
- name of folder should be: DOMEvent
Add New subfolder to "DOMEvent" subfolder named "EventHandlers"
- Right-click subfolder named "DOMEvent" in solution explorer;
- add new folder;
- name of folder should be: EventHandlers
Add HTML Page Named onAbort to EventHandlers subfolder
- Right-click EventHandlers subfolder;
- add new item;
- Select HTML Page
- HTML Page name should be onAbort
Click on copy code in code below to copy code into HTML Page onAbort.htm
Right-click on HTML page onAbort.htm and select view in browser

View Example In Browser


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
  <head>
    <title>IdealProgrammer.com: onAbort </title>
    
 
    <script type="text/javascript">
        function abortImage() {
            alert('Error: Loading of the image was aborted');
 
 
        }
 
 
</script>			
 
   </head>
  <body id="myBodyID">
 
        <div style="background-color:Yellow;border-color:black;border-style:solid;border-width:1px;">
         To see abort message, do one of the following while image is loading:<br /><br />
         1. Click the browser stop button,<br />
         2. Click link on page, or <br />
         3. Quickly navigate to new page<br /><br />
 
         If image is already loaded, use internet options to delete temporary internet 
         files and refresh page. That will remove image from cache so it will not load too fast next time.</div><br /><br />
 
 
        <a href="http://idealprogrammer.com">IdealProgrammer - click while image is loading</a><br />
        <img src="http://graphics.stanford.edu/~mcammara/wtc-photo.jpg" onabort="abortImage()"/>
 
 
 
 
  </body>
</html>

Post from: IdealProgrammer.com

onBlur JavaScript (JS) Example: HTML DOM Objects – Event – onBlur JavaScript JS Example onBlur JavaScript (JS) Example HTML DOM Objects Event...
onChange JavaScript (JS) Example: HTML DOM Objects – Event – onChange JavaScript (JS) Example onChange JavaScript (JS) Example: HTML DOM Objects - Event -...
ondblclick JavaScript (JS) Example: HTML DOM Objects – Event – ondblclick JavaScript (JS) Example ondblclick JavaScript (JS) Example: HTML DOM Objects - Event -...

Related posts brought to you by Yet Another Related Posts Plugin.

HTML DOM Event Object Examples JavaScript (JS)

asp.net videos — Tue, 16 Feb 2010 01:43:10 +0000

Button Object Examples: HTML DOM Event Object Examples – Javascript JS

Purpose: – Illustrates the JavaScript syntax for working with the Event Object. The Event object allows you to access properties related to events

Event Object Examples

Event Handlers
onabort	Event happens when loading of image is interrupted.
onblur	Event happens when an element loses focus.
onchange	Event happens when the content of a field is altered.
onclick	Event happens when mouse clicks an object.
ondblclick	Event happens when mouse double-clicks an object.
onerror	Event happens when an error occurs.
onfocus	Event happens when an element gains focus.
onkeydown	Event happens when a key is pressed.
onkeypress	Event happens when key is held down or pressed.
onkeyup	Event happens when key is released.
onload	Event happens when an image or page has finished loading.
onmousedown	Event happens when a mouse button is pressed.
onmousemove	Event happens when mouse is moved.
onmouseout	Event happens when mouse is moved off an element.
onmouseover	Event happens when mouse is moved over an object.
onmouseup	Event happens when mouse button is released.
onreset	Event happens when a reset button is clicked.
onresize	Event happens when a frame or window is resized.
onselect	Event happens when text is selected.
onsubmit	Event happens when submit button is clicked.
onunload	Event happens when person leaves page.
Mouse/Keyboard Attributes
altKey	Allows access to whether the alt key was pressed.
button	Allows you to access which mouse button was pressed.
clientx	Allows you to access the horizontal coordinate of the mouse when event was triggered.
clienty	Allows you to access the vertical coordinate of the mouse when event was triggered.
ctrlKey	Allows you to access whether the control key was pressed.
metaKey	Allows you to access whether the meta key was pressed
relatedTarget	Allows you to access the element related to the element that triggered the event.
screenx	Allows you to access the horizontal coordinate of the mouse pointer when the event happened.
screeny	Allows you to access the vertical coordinate of the mouse pointer when the event happened.
shiftKey	Allows you to access the whether the shift key was pressed.
Other Event Attributes
bubbles	Allows access to boolean value that indicates whether event is bubbling event.
cancelable	Allows you to access boolean value that shows whether event can prevent default action.
currentTarget	Allows you to access the element whose event listeners triggered the event.
eventPhase	Allows you to access to which phase of the event flow is being evaluated.
target	Allows you to access to element that triggered event.
timeStamp	Allows you to access to the timestamp in milliseconds from system start or event trigger.
type	Allows you to access the name of the event.
screenx	Allows you to access the horizontal coordinate of the mouse pointer when the event happened.
screeny	Allows you to access the vertical coordinate of the mouse pointer when the event happened.
shiftKey	Allows you to access the whether the shift key was pressed.

Post from: IdealProgrammer.com

onBlur JavaScript (JS) Example: HTML DOM Objects – Event – onBlur JavaScript JS Example onBlur JavaScript (JS) Example HTML DOM Objects Event...
onChange JavaScript (JS) Example: HTML DOM Objects – Event – onChange JavaScript (JS) Example onChange JavaScript (JS) Example: HTML DOM Objects - Event -...
ondblclick JavaScript (JS) Example: HTML DOM Objects – Event – ondblclick JavaScript (JS) Example ondblclick JavaScript (JS) Example: HTML DOM Objects - Event -...

Related posts brought to you by Yet Another Related Posts Plugin.

value JavaScript (JS) Example: HTML DOM Objects – Button Object – value JavaScript (JS) Example

asp.net videos — Tue, 16 Feb 2010 00:13:23 +0000

value JavaScript (JS) Example: HTML DOM Objects – Button Object – value JavaScript (JS) Example

Purpose: – Illustrates the JavaScript syntax for the Button Object value Property .

View Other Button Object Properties

Prerequistes:

Install Visual Web Developer 2008

Syntax: ButtonObject.value="texttodisplay" – Allows you to access the text to display on button.

Restrictions: None

Notes:

You can build your own library of syntax examples by using same web site over and over and just add new files to it.

Instructions:

Use Visual Web Developer 2008
Create new web site;
- Click File/New Web Site
- Select ASP.NET Website Template
- Select C-Sharp for language
- name of Web Site could be JavaScript_Syntax.

Add New folder named "HTMLDOMObjects"
- Right-click project name in solution explorer;
- add new folder;
- name of folder should be: HTMLDOMObjects
Add New subfolder to "HTMLDOMObjects" folder named "DOMButton"
- Right-click folder named "HTMLDOMObjects" in solution explorer;
- add new folder;
- name of folder should be: DOMButton
Add New subfolder to "DOMButton" subfolder named "ButtonObjectProperties"
- Right-click subfolder named "DOMButton" in solution explorer;
- add new folder;
- name of folder should be: ButtonObjectProperties
Add HTML Page Named value to ButtonObjectProperties subfolder
- Right-click ButtonObjectProperties subfolder;
- add new item;
- Select HTML Page
- HTML Page name should be value
Click on copy code in code below to copy code into HTML Page value.htm
Right-click on HTML page value.htm and select view in browser

View Example In Browser


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
  <head>
    <title>IdealProgrammer.com: value </title>
    
    <style type="text/css" id="myStyle">
 
       .myButtons
        {
            font-size:large;           
            color:red;
        }
        .myButtons input
        {
        color:Blue
        }
 
        .myButton2
        {
            font-size:xx-small;
        }
        .myButton2 input
        {
        font-style :italic;        
        }
 
        .myButton3
        {
            background-color:#d0e4fe;
        }
        .myButton3 input
        {
        font-weight:600
        }
 
 
    </style>
    <script type="text/javascript">
 
        //****************************************************************
        //         Set Cookie
        //****************************************************************    
 function Set_Cookie( name, value, expires, path, domain, secure )
{
// set time, it's in milliseconds
var today = new Date();
today.setTime( today.getTime() );
 
/*
if the expires variable is set, make the correct
expires time, the current script below will set
it for x number of days, to make it for hours,
delete * 24, for minutes, delete * 60 * 24
*/
if ( expires )
{
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date( today.getTime() + (expires) );
 
document.cookie = name + "=" +escape( value ) +
( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" ) +
( ( path ) ? ";path=" + path : "" ) +
( ( domain ) ? ";domain=" + domain : "" ) +
( ( secure ) ? ";secure" : "" );
}
 
//****************************************************************
//         Get Cookie
//**************************************************************** 
// this fixes an issue with the old method, ambiguous values
// with this test document.cookie.indexOf( name + "=" );
function Get_Cookie(check_name) {
    // first we'll split this cookie up into name/value pairs
    // note: document.cookie only returns name=value, not the other components
    var a_all_cookies = document.cookie.split(';');
    var a_temp_cookie = '';
    var cookie_name = '';
    var cookie_value = '';
    var b_cookie_found = false; // set boolean t/f default f
 
    for (i = 0; i < a_all_cookies.length; i++) {
        // now we'll split apart each name=value pair
        a_temp_cookie = a_all_cookies[i].split('=');
 
 
        // and trim left/right whitespace while we're at it
        cookie_name = a_temp_cookie[0].replace(/^\s+|\s+$/g, '');
 
        // if the extracted name matches passed check_name
        if (cookie_name == check_name) {
            b_cookie_found = true;
            // we need to handle case where cookie has no value but exists (no = sign, that is):
            if (a_temp_cookie.length > 1) {
                cookie_value = unescape(a_temp_cookie[1].replace(/^\s+|\s+$/g, ''));
            }
            // note that in cases where cookie is initialized but no value, null is returned
            return cookie_value;
            break;
        }
        a_temp_cookie = null;
        cookie_name = '';
    }
    if (!b_cookie_found) {
        return null;
    }
}
 
</script>			
 
   </head>
  <body id="myBodyID">
 
        <div style="background-color:Yellow;border-color:black;border-style:solid;border-width:1px;"> click Buttons to change value of  button object:</div><br /><br />
         
 
      <input id="Button1" type="button"  class="myButtons"  value="button1 - value=button1" onclick="javascript: Set_Cookie( 'mycookie', '1', 30, '/', '', '' ); window.location.reload();" /><br /><br />
      <input id="Button2" type="button"  class="myButtons"  value="button2 - value=button2" onclick="javascript: Set_Cookie( 'mycookie', '2', 30, '/', '', '' ); window.location.reload();"/><br /><br />
      <input id="Button3" type="button"  class="myButtons"  value="button3 - value=button3" onclick="javascript: Set_Cookie( 'mycookie', '3', 30, '/', '', '' ); window.location.reload();"/><br /><br />
 
   <script type="text/javascript">
       //*****************************************************
       // DOM Objects
       //*****************************************************
 
 
       //*****************************************************
       //    ***    Button Object Properties   ***
       //*****************************************************
 
       //*****************************************************
       // value
       //*****************************************************
 
       //    SYNTAX:
       //    object.value="value"  Allows you to retrieve or assign value for the text displayed for a button
 
 
       // Two ways to retrieve value
       document.write("\"border-style:solid\">Demonstrating Two Ways to Retrieve Property for Button1
") 
 
         //   1. GetElementsByTagName
                myObject=document.getElementsByTagName('input')[0];
                document.write("Using getElementsByTagName: " + myObject.value);
                document.write("
");
            //   2. GetElementById
 
                document.write("Using getElementById: ");
                document.write(document.getElementById('Button1').value);
                document.write("

");                document.write("
");
 
 
 
       // Two ways to assign value
                if (Get_Cookie('mycookie')) {
 
                    ButtonNum = (Get_Cookie('mycookie'));
                }
                else {
                    ButtonNum = '1';
                }
 
                //   1. GetElementById
 
                if (ButtonNum == '2') {
                    document.write("\"border-style:solid\">Demonstrating Assigning Property with GetById for Button2
")
                    document.getElementById('Button2').value = "button2 - value=newButton2"
                    document.getElementById('Button2').className = "myButton2"
                    document.write("Button2 value changed to value=newButton2: " + document.getElementById('Button2').value + "
");
                }
            //   2. GetElementsByTagName
 
                if (ButtonNum == '3') {
                    document.write("\"border-style:solid\">Demonstrating Assigning Property with GetElementsByTagName for Button3
") 
                    myThirdButton = document.getElementsByTagName('input')[2];
                    myThirdButton.className = "myButton3"
                    myThirdButton.value = "button3 - value=newButton3"
                    document.write("Button3 value changed to value=newButton3: " + myThirdButton.value + "");
 
                }
 
 
 
 
   </script>
 
  </body>
</html>

Post from: IdealProgrammer.com

name JavaScript (JS) Example: HTML DOM Objects – Button Object – name JavaScript (JS) Example name JavaScript (JS) Example: HTML DOM Objects - Button Object...
id JavaScript (JS) Example: HTML DOM Objects – Button Object – id JavaScript (JS) Example id JavaScript (JS) Example: HTML DOM Objects - Button Object...
JavaSript (JS) className Example: HTML DOM Objects – Button Object – JavaScript (JS) className Example JavaSript (JS) className Example: HTML DOM Objects - Button Object...

Related posts brought to you by Yet Another Related Posts Plugin.

type JavaScript (JS) Example: HTML DOM Objects – Button Object – type JavaScript (JS) Example

asp.net videos — Mon, 15 Feb 2010 14:00:19 +0000

type JavaScript (JS) Example: HTML DOM Objects – Button Object – type JavaScript (JS) Example

Purpose: – Illustrates the JavaScript syntax for the Button Object type Property .

View Other Button Object Properties

Prerequistes:

Install Visual Web Developer 2008

Syntax: ButtonObject.type="button|reset|submit" – Allows you to access the type of a Button Object. NOTE: Assigning type cannot be done after element is created. The only way to do it is to create a new element that looks just like the old one and assign a type to the new element. Then, you replace the original element with the new one.

Restrictions: None

Notes:

You can build your own library of syntax examples by using same web site over and over and just add new files to it.

Instructions:

Use Visual Web Developer 2008
Create new web site;
- Click File/New Web Site
- Select ASP.NET Website Template
- Select C-Sharp for language
- name of Web Site could be JavaScript_Syntax.

Add New folder named "HTMLDOMObjects"
- Right-click project name in solution explorer;
- add new folder;
- name of folder should be: HTMLDOMObjects
Add New subfolder to "HTMLDOMObjects" folder named "DOMButton"
- Right-click folder named "HTMLDOMObjects" in solution explorer;
- add new folder;
- name of folder should be: DOMButton
Add New subfolder to "DOMButton" subfolder named "ButtonObjectProperties"
- Right-click subfolder named "DOMButton" in solution explorer;
- add new folder;
- name of folder should be: ButtonObjectProperties
Add HTML Page Named type to ButtonObjectProperties subfolder
- Right-click ButtonObjectProperties subfolder;
- add new item;
- Select HTML Page
- HTML Page name should be type
Click on copy code in code below to copy code into HTML Page type.htm
Right-click on HTML page type.htm and select view in browser

View Example In Browser


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
  <head>
    <title>IdealProgrammer.com: type </title>
    
    <style type="text/css" id="myStyle">
 
       .myButtons
        {
            font-size:large;           
            color:red;
        }
        .myButtons input
        {
        color:Blue
        }
 
        .myButton2
        {
            font-size:xx-small;
        }
        .myButton2 input
        {
        font-style :italic;        
        }
 
        .myButton3
        {
            background-color:#d0e4fe;
        }
        .myButton3 input
        {
        font-weight:600
        }
 
 
    </style>
    <script type="text/javascript">
 
        //****************************************************************
        //         Set Cookie
        //****************************************************************    
 function Set_Cookie( name, value, expires, path, domain, secure )
{
// set time, it's in milliseconds
var today = new Date();
today.setTime( today.getTime() );
 
/*
if the expires variable is set, make the correct
expires time, the current script below will set
it for x number of days, to make it for hours,
delete * 24, for minutes, delete * 60 * 24
*/
if ( expires )
{
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date( today.getTime() + (expires) );
 
document.cookie = name + "=" +escape( value ) +
( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" ) +
( ( path ) ? ";path=" + path : "" ) +
( ( domain ) ? ";domain=" + domain : "" ) +
( ( secure ) ? ";secure" : "" );
}
 
//****************************************************************
//         Get Cookie
//**************************************************************** 
// this fixes an issue with the old method, ambiguous values
// with this test document.cookie.indexOf( name + "=" );
function Get_Cookie(check_name) {
    // first we'll split this cookie up into name/value pairs
    // note: document.cookie only returns name=value, not the other components
    var a_all_cookies = document.cookie.split(';');
    var a_temp_cookie = '';
    var cookie_name = '';
    var cookie_value = '';
    var b_cookie_found = false; // set boolean t/f default f
 
    for (i = 0; i < a_all_cookies.length; i++) {
        // now we'll split apart each name=value pair
        a_temp_cookie = a_all_cookies[i].split('=');
 
 
        // and trim left/right whitespace while we're at it
        cookie_name = a_temp_cookie[0].replace(/^\s+|\s+$/g, '');
 
        // if the extracted name matches passed check_name
        if (cookie_name == check_name) {
            b_cookie_found = true;
            // we need to handle case where cookie has no value but exists (no = sign, that is):
            if (a_temp_cookie.length > 1) {
                cookie_value = unescape(a_temp_cookie[1].replace(/^\s+|\s+$/g, ''));
            }
            // note that in cases where cookie is initialized but no value, null is returned
            return cookie_value;
            break;
        }
        a_temp_cookie = null;
        cookie_name = '';
    }
    if (!b_cookie_found) {
        return null;
    }
}
 
</script>			
 
   </head>
  <body id="myBodyID">
 
        <div style="background-color:Yellow;border-color:black;border-style:solid;border-width:1px;"> click Buttons to change type of  button object:</div><br /><br />
         
 
      <input id="Button1" type="button"  class="myButtons" value="button1 - type=button" onclick="javascript: Set_Cookie( 'mycookie', '1', 30, '/', '', '' ); window.location.reload();" /><br /><br />
      <input id="Button2" type="button"  class="myButtons" value="button2 - type=button" onclick="javascript: Set_Cookie( 'mycookie', '2', 30, '/', '', '' ); window.location.reload();"/><br /><br />
      <input id="Button3" type="button"  class="myButtons" value="button3 - type=button" onclick="javascript: Set_Cookie( 'mycookie', '3', 30, '/', '', '' ); window.location.reload();"/><br /><br />
 
   <script type="text/javascript">
       //*****************************************************
       // DOM Objects
       //*****************************************************
 
 
       //*****************************************************
       //    ***    Button Object Properties   ***
       //*****************************************************
 
       //*****************************************************
       // type
       //*****************************************************
 
       //    SYNTAX:
       //    object.type="submit|button|reset"  Allows you to retrieve or assign type for button
       // NOTE: Assigning type cannot be done after element is created
       // The only way to do it is to create a new element that
       // looks just like the old one and assign a type to the
       // new element.  Then, you replace the original element
       // with the new one 
 
       // Two ways to retrieve type
       document.write("\"border-style:solid\">Demonstrating Two Ways to Retrieve Property for Button1
") 
 
         //   1. GetElementsByTagName
                myObject=document.getElementsByTagName('input')[0];
                document.write("Using getElementsByTagName: " + myObject.type);
                document.write("
");
            //   2. GetElementById
 
                document.write("Using getElementById: ");
                document.write(document.getElementById('Button1').type);
                document.write("

");                document.write("
");
 
 
 
                // Two ways to assign type
                // NOTE: Assigning type cannot be done after element is created
                // The only way to do it is to create a new element that
                // looks just like the old one and assign a type to the
                // new element.  Then, you replace the original element
                // with the new one 
                if (Get_Cookie('mycookie')) {
 
                    ButtonNum = (Get_Cookie('mycookie'));
                }
                else {
                    ButtonNum = '1';
                }
 
                //   1. GetElementById
 
                if (ButtonNum == '2') {
                //replace original button with new one that has new type
                    var input = document.getElementById("Button2")
                    var newInput = document.createElement('input');
                    newInput.type = 'submit';
                    newInput.id = input.id
                    newInput.value = input.value;
                    input.parentNode.replaceChild(newInput, input);
                //end of replace rtn
                    document.write("\"border-style:solid\">Demonstrating Assigning Property with GetById for Button2
")
                    document.getElementById('Button2').className = "myButton2"
                    document.getElementById('Button2').value = "button2 - type=submit"
                    document.write("Button2 type changed to submit: " + document.getElementById('Button2').type + "
");
                }
            //   2. GetElementsByTagName
 
                if (ButtonNum == '3') {
                    //replace original button with new one that has new type
                    var input = document.getElementById("Button3")
                    var newInput = document.createElement('input');
                    newInput.type = 'reset';
                    newInput.id = input.id
                    newInput.value = input.value;
                    input.parentNode.replaceChild(newInput, input);
                    //end of replace rtn
                    document.write("\"border-style:solid\">Demonstrating Assigning Property with GetElementsByTagName for Button3
") 
                    myThirdButton = document.getElementsByTagName('input')[2];
                    myThirdButton.className = "myButton3"
                    myThirdButton.value = "button3 - type=reset"
                    document.write("Button3 type changed to type=reset: " + myThirdButton.type + "");
 
                }
 
 
 
 
   </script>
 
  </body>
</html>

Post from: IdealProgrammer.com

id JavaScript (JS) Example: HTML DOM Objects – Button Object – id JavaScript (JS) Example id JavaScript (JS) Example: HTML DOM Objects - Button Object...
name JavaScript (JS) Example: HTML DOM Objects – Button Object – name JavaScript (JS) Example name JavaScript (JS) Example: HTML DOM Objects - Button Object...
value JavaScript (JS) Example: HTML DOM Objects – Button Object – value JavaScript (JS) Example value JavaScript (JS) Example: HTML DOM Objects - Button Object...

Related posts brought to you by Yet Another Related Posts Plugin.

tabIndex JavaScript (JS) Example: HTML DOM Objects – Button Object – tabIndex JavaScript (JS) Example

asp.net videos — Sat, 13 Feb 2010 21:38:28 +0000

tabIndex JavaScript (JS) Example: HTML DOM Objects – Button Object – tabIndex JavaScript (JS) Example

Purpose: – Illustrates the JavaScript syntax for the Button Object tabIndex Property .

View Other Button Object Properties

Prerequistes:

Install Visual Web Developer 2008

Syntax: ButtonObject.tabIndex – Allows you to access the tabbing order of a Button Object.

Restrictions: None

Notes:

You can build your own library of syntax examples by using same web site over and over and just add new files to it.

Instructions:

Use Visual Web Developer 2008
Create new web site;
- Click File/New Web Site
- Select ASP.NET Website Template
- Select C-Sharp for language
- name of Web Site could be JavaScript_Syntax.

Add New folder named "HTMLDOMObjects"
- Right-click project name in solution explorer;
- add new folder;
- name of folder should be: HTMLDOMObjects
Add New subfolder to "HTMLDOMObjects" folder named "DOMButton"
- Right-click folder named "HTMLDOMObjects" in solution explorer;
- add new folder;
- name of folder should be: DOMButton
Add New subfolder to "DOMButton" subfolder named "ButtonObjectProperties"
- Right-click subfolder named "DOMButton" in solution explorer;
- add new folder;
- name of folder should be: ButtonObjectProperties
Add HTML Page Named tabIndex to ButtonObjectProperties subfolder
- Right-click ButtonObjectProperties subfolder;
- add new item;
- Select HTML Page
- HTML Page name should be tabIndex
Click on copy code in code below to copy code into HTML Page tabIndex.htm
Right-click on HTML page tabIndex.htm and select view in browser

View Example In Browser


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
  <head>
    <title>IdealProgrammer.com: tabIndex </title>
    
    <style type="text/css" id="myStyle">
 
       .myButtons
        {
            font-size:large;           
            color:red;
        }
        .myButtons input
        {
        color:Blue
        }
 
        .myButton2
        {
            font-size:xx-small;
        }
        .myButton2 input
        {
        font-style :italic;        
        }
 
        .myButton3
        {
            background-color:#d0e4fe;
        }
        .myButton3 input
        {
        font-weight:600
        }
 
 
    </style>
    <script type="text/javascript">
 
        //****************************************************************
        //         Set Cookie
        //****************************************************************    
 function Set_Cookie( name, value, expires, path, domain, secure )
{
// set time, it's in milliseconds
var today = new Date();
today.setTime( today.getTime() );
 
/*
if the expires variable is set, make the correct
expires time, the current script below will set
it for x number of days, to make it for hours,
delete * 24, for minutes, delete * 60 * 24
*/
if ( expires )
{
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date( today.getTime() + (expires) );
 
document.cookie = name + "=" +escape( value ) +
( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" ) +
( ( path ) ? ";path=" + path : "" ) +
( ( domain ) ? ";domain=" + domain : "" ) +
( ( secure ) ? ";secure" : "" );
}
 
//****************************************************************
//         Get Cookie
//**************************************************************** 
// this fixes an issue with the old method, ambiguous values
// with this test document.cookie.indexOf( name + "=" );
function Get_Cookie(check_name) {
    // first we'll split this cookie up into name/value pairs
    // note: document.cookie only returns name=value, not the other components
    var a_all_cookies = document.cookie.split(';');
    var a_temp_cookie = '';
    var cookie_name = '';
    var cookie_value = '';
    var b_cookie_found = false; // set boolean t/f default f
 
    for (i = 0; i < a_all_cookies.length; i++) {
        // now we'll split apart each name=value pair
        a_temp_cookie = a_all_cookies[i].split('=');
 
 
        // and trim left/right whitespace while we're at it
        cookie_name = a_temp_cookie[0].replace(/^\s+|\s+$/g, '');
 
        // if the extracted name matches passed check_name
        if (cookie_name == check_name) {
            b_cookie_found = true;
            // we need to handle case where cookie has no value but exists (no = sign, that is):
            if (a_temp_cookie.length > 1) {
                cookie_value = unescape(a_temp_cookie[1].replace(/^\s+|\s+$/g, ''));
            }
            // note that in cases where cookie is initialized but no value, null is returned
            return cookie_value;
            break;
        }
        a_temp_cookie = null;
        cookie_name = '';
    }
    if (!b_cookie_found) {
        return null;
    }
}
 
</script>			
 
   </head>
  <body id="myBodyID">
 
        <div style="background-color:Yellow;border-color:black;border-style:solid;border-width:1px;"> click Buttons to change tabIndex of  button object:</div><br /><br />
         
 
      <input id="Button1" type="button"  class="myButtons" tabindex="1" value="button1 - tabIndex=1" onclick="javascript: Set_Cookie( 'mycookie', '1', 30, '/', '', '' ); window.location.reload();" /><br /><br />
      <input id="Button2" type="button"  class="myButtons" tabindex="2" value="button2 - tabIndex=2" onclick="javascript: Set_Cookie( 'mycookie', '2', 30, '/', '', '' ); window.location.reload();"/><br /><br />
      <input id="Button3" type="button"  class="myButtons" tabindex="3" value="button3 - tabIndex=3" onclick="javascript: Set_Cookie( 'mycookie', '3', 30, '/', '', '' ); window.location.reload();"/><br /><br />
 
   <script type="text/javascript">
       //*****************************************************
       // DOM Objects
       //*****************************************************
 
 
       //*****************************************************
       //    ***    Button Object Properties   ***
       //*****************************************************
 
       //*****************************************************
       // tabIndex
       //*****************************************************
 
       //    SYNTAX:
       //    object.tabIndex="tabIndex"  Allows you to retrieve or assign tabIndex for button
 
 
       // Two ways to retrieve tabIndex
       document.write("\"border-style:solid\">Demonstrating Two Ways to Retrieve Property for Button1
") 
 
         //   1. GetElementsByTagName
                myObject=document.getElementsByTagName('input')[0];
                document.write("Using getElementsByTagName: " + myObject.tabIndex);
                document.write("
");
            //   2. GetElementById
 
                document.write("Using getElementById: ");
                document.write(document.getElementById('Button1').tabIndex);
                document.write("

");                document.write("
");
 
 
 
       // Two ways to assign tabIndex
                if (Get_Cookie('mycookie')) {
 
                    ButtonNum = (Get_Cookie('mycookie'));
                }
                else {
                    ButtonNum = '1';
                }
 
                //   1. GetElementById
 
                if (ButtonNum == '2') {
                    document.write("\"border-style:solid\">Demonstrating Assigning Property with GetById for Button2
")
                    document.getElementById('Button2').tabIndex = "0"
                    document.getElementById('Button2').className = "myButton2"
                    document.getElementById('Button2').value = "button2 - tabIndex=0"
                    document.write("Button2 tabIndex changed to tabIndex=0: " + document.getElementById('Button2').tabIndex + "
");
                }
            //   2. GetElementsByTagName
 
                if (ButtonNum == '3') {
                    document.write("\"border-style:solid\">Demonstrating Assigning Property with GetElementsByTagName for Button3
") 
                    myThirdButton = document.getElementsByTagName('input')[2];
                    myThirdButton.tabIndex = "5";
                    myThirdButton.className = "myButton3"
                    myThirdButton.value = "button3 - tabIndex=5"
                    document.write("Button3 tabIndex changed to tabIndex=5: " + myThirdButton.tabIndex + "");
 
                }
 
 
 
 
   </script>
 
  </body>
</html>

Post from: IdealProgrammer.com

JavaScript (JS) tabIndex Example: HTML DOM Objects – Anchor Object – JavaScript (JS) tabIndex Example JavaScript (JS) tabIndex Example: HTML DOM Objects - Anchor Object...
value JavaScript (JS) Example: HTML DOM Objects – Button Object – value JavaScript (JS) Example value JavaScript (JS) Example: HTML DOM Objects - Button Object...
name JavaScript (JS) Example: HTML DOM Objects – Button Object – name JavaScript (JS) Example name JavaScript (JS) Example: HTML DOM Objects - Button Object...

Related posts brought to you by Yet Another Related Posts Plugin.

name JavaScript (JS) Example: HTML DOM Objects – Button Object – name JavaScript (JS) Example

asp.net videos — Sat, 13 Feb 2010 16:38:05 +0000

name JavaScript (JS) Example: HTML DOM Objects – Button Object – name JavaScript (JS) Example

Purpose: – Illustrates the JavaScript syntax for the Button Object name Property .

View Other Button Object Properties

Prerequistes:

Install Visual Web Developer 2008

Syntax: ButtonObject.name – Allows you to access the name of a Button Object.

Restrictions: None

Notes:

You can build your own library of syntax examples by using same web site over and over and just add new files to it.

Instructions:

Use Visual Web Developer 2008
Create new web site;
- Click File/New Web Site
- Select ASP.NET Website Template
- Select C-Sharp for language
- name of Web Site could be JavaScript_Syntax.

Add New folder named "HTMLDOMObjects"
- Right-click project name in solution explorer;
- add new folder;
- name of folder should be: HTMLDOMObjects
Add New subfolder to "HTMLDOMObjects" folder named "DOMButton"
- Right-click folder named "HTMLDOMObjects" in solution explorer;
- add new folder;
- name of folder should be: DOMButton
Add New subfolder to "DOMButton" subfolder named "ButtonObjectProperties"
- Right-click subfolder named "DOMButton" in solution explorer;
- add new folder;
- name of folder should be: ButtonObjectProperties
Add HTML Page Named name to ButtonObjectProperties subfolder
- Right-click ButtonObjectProperties subfolder;
- add new item;
- Select HTML Page
- HTML Page name should be name
Click on copy code in code below to copy code into HTML Page name.htm
Right-click on HTML page name.htm and select view in browser

View Example In Browser


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
  <head>
    <title>IdealProgrammer.com: name </title>
    
    <style type="text/css" id="myStyle">
 
       .myButtons
        {
            font-size:large;           
            color:red;
        }
        .myButtons input
        {
        color:Blue
        }
 
        .myButton2
        {
            font-size:xx-small;
        }
        .myButton2 input
        {
        font-style :italic;        
        }
 
        .myButton3
        {
            background-color:#d0e4fe;
        }
        .myButton3 input
        {
        font-weight:600
        }
 
 
    </style>
    <script type="text/javascript">
 
        //****************************************************************
        //         Set Cookie
        //****************************************************************    
 function Set_Cookie( name, value, expires, path, domain, secure )
{
// set time, it's in milliseconds
var today = new Date();
today.setTime( today.getTime() );
 
/*
if the expires variable is set, make the correct
expires time, the current script below will set
it for x number of days, to make it for hours,
delete * 24, for minutes, delete * 60 * 24
*/
if ( expires )
{
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date( today.getTime() + (expires) );
 
document.cookie = name + "=" +escape( value ) +
( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" ) +
( ( path ) ? ";path=" + path : "" ) +
( ( domain ) ? ";domain=" + domain : "" ) +
( ( secure ) ? ";secure" : "" );
}
 
//****************************************************************
//         Get Cookie
//**************************************************************** 
// this fixes an issue with the old method, ambiguous values
// with this test document.cookie.indexOf( name + "=" );
function Get_Cookie(check_name) {
    // first we'll split this cookie up into name/value pairs
    // note: document.cookie only returns name=value, not the other components
    var a_all_cookies = document.cookie.split(';');
    var a_temp_cookie = '';
    var cookie_name = '';
    var cookie_value = '';
    var b_cookie_found = false; // set boolean t/f default f
 
    for (i = 0; i < a_all_cookies.length; i++) {
        // now we'll split apart each name=value pair
        a_temp_cookie = a_all_cookies[i].split('=');
 
 
        // and trim left/right whitespace while we're at it
        cookie_name = a_temp_cookie[0].replace(/^\s+|\s+$/g, '');
 
        // if the extracted name matches passed check_name
        if (cookie_name == check_name) {
            b_cookie_found = true;
            // we need to handle case where cookie has no value but exists (no = sign, that is):
            if (a_temp_cookie.length > 1) {
                cookie_value = unescape(a_temp_cookie[1].replace(/^\s+|\s+$/g, ''));
            }
            // note that in cases where cookie is initialized but no value, null is returned
            return cookie_value;
            break;
        }
        a_temp_cookie = null;
        cookie_name = '';
    }
    if (!b_cookie_found) {
        return null;
    }
}
 
</script>			
 
   </head>
  <body id="myBodyID">
 
        <div style="background-color:Yellow;border-color:black;border-style:solid;border-width:1px;"> click Buttons to change name of  button object:</div><br /><br />
         
 
      <input id="Button1" type="button"  class="myButtons" name="nameButton1" value="button1 - name=nameButton1" onclick="javascript: Set_Cookie( 'mycookie', '1', 30, '/', '', '' ); window.location.reload();" /><br /><br />
      <input id="Button2" type="button"  class="myButtons" name="nameButton2" value="button2 - name=nameButton2" onclick="javascript: Set_Cookie( 'mycookie', '2', 30, '/', '', '' ); window.location.reload();"/><br /><br />
      <input id="Button3" type="button"  class="myButtons" name="nameButton3" value="button3 - name=nameButton3" onclick="javascript: Set_Cookie( 'mycookie', '3', 30, '/', '', '' ); window.location.reload();"/><br /><br />
 
   <script type="text/javascript">
       //*****************************************************
       // DOM Objects
       //*****************************************************
 
 
       //*****************************************************
       //    ***    Button Object Properties   ***
       //*****************************************************
 
       //*****************************************************
       // name
       //*****************************************************
 
       //    SYNTAX:
       //    object.name="name"  Allows you to retrieve or assign name for button
 
 
       // Two ways to retrieve name
       document.write("\"border-style:solid\">Demonstrating Two Ways to Retrieve Property
") 
 
         //   1. GetElementsByTagName
                myObject=document.getElementsByTagName('input')[0];
                document.write("Using getElementsByTagName: " + myObject.name);
                document.write("
");
            //   2. GetElementById
 
                document.write("Using getElementById: ");
                document.write(document.getElementById('Button1').name);
                document.write("

");                document.write("
");
 
 
 
       // Two ways to assign name
                if (Get_Cookie('mycookie')) {
 
                    ButtonNum = (Get_Cookie('mycookie'));
                }
                else {
                    ButtonNum = '1';
                }
 
                //   1. GetElementById
 
                if (ButtonNum == '2') {
                    document.write("\"border-style:solid\">Demonstrating Assigning Property with GetById
")
                    document.getElementById('Button2').name = "nameButton4"
                    document.getElementById('Button2').className = "myButton2"
                    document.getElementById('Button2').value = "button2 - name=Button4"
                    document.write("Button2 name changed to name=nameButton4: " + document.getElementById('Button2').name + "
");
                }
            //   2. GetElementsByTagName
 
                if (ButtonNum == '3') {
                    document.write("\"border-style:solid\">Demonstrating Assigning Property with GetElementsByTagName
") 
                    myThirdButton = document.getElementsByTagName('input')[2];
                    myThirdButton.name = "nameButton5";
                    myThirdButton.className = "myButton3"
                    myThirdButton.value = "button3 - name=nameButton5"
                    document.write("Button3 name changed to name=nameButton5: " + myThirdButton.name + "");
 
                }
 
 
 
 
   </script>
 
  </body>
</html>

Post from: IdealProgrammer.com

id JavaScript (JS) Example: HTML DOM Objects – Button Object – id JavaScript (JS) Example id JavaScript (JS) Example: HTML DOM Objects - Button Object...
JavaSript (JS) className Example: HTML DOM Objects – Button Object – JavaScript (JS) className Example JavaSript (JS) className Example: HTML DOM Objects - Button Object...
JavaSript (JS) dir Example: HTML DOM Objects – Button Object – JavaScript (JS) dir Example JavaSript (JS) dir Example: HTML DOM Objects - Button Object...

Related posts brought to you by Yet Another Related Posts Plugin.