Javascript recipes - Revision history

Shawn: /* Example */ removed the superfluous closing tag for the previously used nowiki

2013-04-30T20:47:20Z

Example: removed the superfluous closing tag for the previously used nowiki

← Older revision		Revision as of 13:47, 30 April 2013
Line 16:		Line 16:
	function showhide(whichLayer,action2){		function showhide(whichLayer,action2){
	var elem;		var elem;
	if( document.getElementById ) // ~~this is~~ the way ~~the standards work~~		if( document.getElementById ) // the standard way
	elem = document.getElementById( whichLayer );		elem = document.getElementById( whichLayer );
	else if( document.all ) // ~~this is~~ the way ~~old msie versions work~~		else if( document.all ) // the old MS Internet Explorer way
	elem = document.all[whichLayer];		elem = document.all[whichLayer];
	else if( document.layers ) // ~~this is~~ the way ~~nn4 works~~		else if( document.layers ) // the Netscape Navigator 4 way
	elem = document.layers[whichLayer];		elem = document.layers[whichLayer];
	elem.style.display = action2;		elem.style.display = action2;
Line 27:		Line 27:
	<textarea name="urlnotes" cols="60" rows="10"		<textarea name="urlnotes" cols="60" rows="10"
	onkeypress="showhide('updatebutton','block')">		onkeypress="showhide('updatebutton','block')">
	<?php echo $urlnotes; ?></textarea~~></nowiki~~>		<?php echo $urlnotes; ?></textarea>



	[[Category:Internet]][[Category:Programming]]		[[Category:Internet]][[Category:Programming]]

Shawn: /* Example */

2013-04-03T19:13:43Z

Example

← Older revision		Revision as of 12:13, 3 April 2013
Line 13:		Line 13:
	This text input, pre-populated with the PHP variable $urlnotes, will activate the custom javascript function showhide() when a key is pressed while the user's cursor is inside the text area.		This text input, pre-populated with the PHP variable $urlnotes, will activate the custom javascript function showhide() when a key is pressed while the user's cursor is inside the text area.

	<script type="text/javascript">		<script type="text/javascript">
	function showhide(whichLayer,action2){		function showhide(whichLayer,action2){
	var elem;		var elem;
Line 24:		Line 24:
	elem.style.display = action2;		elem.style.display = action2;
	}		}
	</script>		</script>
	<textarea name="urlnotes" cols="60" rows="10"		<textarea name="urlnotes" cols="60" rows="10"
	onkeypress="showhide('updatebutton','block')">		onkeypress="showhide('updatebutton','block')">

Shawn: /* Example */

2013-04-03T18:46:45Z

Example

← Older revision		Revision as of 11:46, 3 April 2013
Line 12:		Line 12:
	===Example===		===Example===
	This text input, pre-populated with the PHP variable $urlnotes, will activate the custom javascript function showhide() when a key is pressed while the user's cursor is inside the text area.		This text input, pre-populated with the PHP variable $urlnotes, will activate the custom javascript function showhide() when a key is pressed while the user's cursor is inside the text area.
	~~<nowiki>~~<script type="text/javascript">
	function showhide(whichLayer,action2){		<script type="text/javascript">
			function showhide(whichLayer,action2){
	var elem;		var elem;
	if( document.getElementById ) // this is the way the standards work		if( document.getElementById ) // this is the way the standards work
Line 21:		Line 22:
	else if( document.layers ) // this is the way nn4 works		else if( document.layers ) // this is the way nn4 works
	elem = document.layers[whichLayer];		elem = document.layers[whichLayer];
	elem.style.display = action2;		elem.style.display = action2;
	}		}
	</script>		</script>
	<textarea name="urlnotes" cols="60" rows="10" onkeypress="showhide('updatebutton','block')"><?php echo $urlnotes; ?></textarea></nowiki>		<textarea name="urlnotes" cols="60" rows="10"
			onkeypress="showhide('updatebutton','block')">
			<?php echo $urlnotes; ?></textarea></nowiki>



	[[Category:Internet]][[Category:Programming]]		[[Category:Internet]][[Category:Programming]]

Shawn at 18:44, 3 April 2013

2013-04-03T18:44:31Z

← Older revision		Revision as of 11:44, 3 April 2013
Line 12:		Line 12:
	===Example===		===Example===
	This text input, pre-populated with the PHP variable $urlnotes, will activate the custom javascript function showhide() when a key is pressed while the user's cursor is inside the text area.		This text input, pre-populated with the PHP variable $urlnotes, will activate the custom javascript function showhide() when a key is pressed while the user's cursor is inside the text area.
	<nowiki>		<nowiki><script type="text/javascript">
			function showhide(whichLayer,action2){
			var elem;
			if( document.getElementById ) // this is the way the standards work
			elem = document.getElementById( whichLayer );
			else if( document.all ) // this is the way old msie versions work
			elem = document.all[whichLayer];
			else if( document.layers ) // this is the way nn4 works
			elem = document.layers[whichLayer];
			elem.style.display = action2;
			}
			</script>
	<textarea name="urlnotes" cols="60" rows="10" onkeypress="showhide('updatebutton','block')"><?php echo $urlnotes; ?></textarea></nowiki>		<textarea name="urlnotes" cols="60" rows="10" onkeypress="showhide('updatebutton','block')"><?php echo $urlnotes; ?></textarea></nowiki>



	[[Category:Internet]][[Category:Programming]]		[[Category:Internet]][[Category:Programming]]

Shawn at 18:06, 3 April 2013

2013-04-03T18:06:15Z

← Older revision		Revision as of 11:06, 3 April 2013
Line 9:		Line 9:
	;onfocus:This attribute will activate as soon as the field comes into focus. This would be jumping the gun, because one might select a field without making any changes.		;onfocus:This attribute will activate as soon as the field comes into focus. This would be jumping the gun, because one might select a field without making any changes.
	;onpaste, oncut:These attributes can complement onkeypress to account for mouse actions that might change text.		;onpaste, oncut:These attributes can complement onkeypress to account for mouse actions that might change text.

			===Example===
			This text input, pre-populated with the PHP variable $urlnotes, will activate the custom javascript function showhide() when a key is pressed while the user's cursor is inside the text area.
			<nowiki>
			<textarea name="urlnotes" cols="60" rows="10" onkeypress="showhide('updatebutton','block')"><?php echo $urlnotes; ?></textarea></nowiki>


	[[Category:Internet]][[Category:Programming]]		[[Category:Internet]][[Category:Programming]]

Shawn at 17:48, 3 April 2013

2013-04-03T17:48:38Z

← Older revision		Revision as of 10:48, 3 April 2013
Line 9:		Line 9:
	;onfocus:This attribute will activate as soon as the field comes into focus. This would be jumping the gun, because one might select a field without making any changes.		;onfocus:This attribute will activate as soon as the field comes into focus. This would be jumping the gun, because one might select a field without making any changes.
	;onpaste, oncut:These attributes can complement onkeypress to account for mouse actions that might change text.		;onpaste, oncut:These attributes can complement onkeypress to account for mouse actions that might change text.


	[[Category:Internet]][[Category:Programming]]		[[Category:Internet]][[Category:Programming]]

Shawn: Created page with "==Javascript recipes== This is a repository for snippets and methods that help web pages interact with viewers. ===Let a user know a form-element has changed=== Sometimes we'..."

2013-04-03T17:30:19Z

Created page with "==Javascript recipes== This is a repository for snippets and methods that help web pages interact with viewers. ===Let a user know a form-element has changed=== Sometimes we'..."

New page

==Javascript recipes==
This is a repository for snippets and methods that help web pages interact with viewers.

===Let a user know a form-element has changed===
Sometimes we're looking at a form and don't know whether we've changed anything. Javascript allows different methods, including a couple shortcuts that get the job done, if not perfectly.
You can add an attribute to any form-input that makes either a key-press or a change in content activate a function. I like to hide a "submit" button until the content of a form has changed—A reminder that there's something to submit.
;onchange:This attribute will activate a command, given as the value of the attribute, when the content of the input changes. One problem is the action only happens after the focus has left the input field, so one can type into an input and still not see the expected event.
;onkeypress:This attribute will activate as soon as any key is pressed while the input is in focus. This solves the problem mentioned with onchange. The only snag is that it is possible to change a field without the keyboard, for example with the mouse and menu commands.
;onfocus:This attribute will activate as soon as the field comes into focus. This would be jumping the gun, because one might select a field without making any changes.
;onpaste, oncut:These attributes can complement onkeypress to account for mouse actions that might change text.

[[Category:Internet]][[Category:Programming]]