JavaScript 10 Nifty Tricks
Featuring:
A grab bag of JavaScripting tricks
Here are some neat windowing and other tricks I have learned in the course of a web
development project.
1)Need to startup a window at a certain size - incorporate the following
code snippet in your head block:
var width; var height; width=700; height=360; <script languuage="javascript"> resizeTo(width,height); </script >Or equivalently add the following code to the onload= in your <body> tag:
<body onload="resizeTo(700, 360);" > which is what we are doing.
2)Need to change the background color on entry and exit from a link -
Hover the mouse over this Text then remove it
This is the code required:
<a href="#" onMouseOut="document.bgColor='cccccc'"
onMouseOver="document.bgColor='red'".>Hover the mouse ...</a>
So you can probably guess what code is at work in this block of text. Yep we have used a <span> with onMouseOut, and onMouseOver.
3)Want to change the background image for your page ?
So guess what we did here? Yep added a <span> with onMouseOver and onMouseOut
The critical code is: onMouseOut="document.body.background='page1.gif'"
4)Here is how to highlight rows of a table:
| Table tag | will accept onMouseOver, onMouseOut tags |
| TR Row tag | will accept onMouseOver, onMouseOut tags |
| TD Column tag | will accept onMouseOver, onMouseOut tags |
Notice that the TD tag overrides the TR color choice.
5)Send an Alert message depending on some browser status
sometimes it is necessay to warn the user that
some functions will be curtailed depending on the status of the browser and its
capabilities. Another onLoad function:
onLoad='var javaok = navigator.javaEnabled() ? alert("Java is enabled your
browser "):
confirm("Have you enabled Java in your browsers Edit | Preference settings");'
6)Need to add info directly from the DOM settings?
Here is a listing of the Navigator/Browser settings for your browser:
7)How to process a jump to list of hyperlinks
8)How to use textarea to contain coding outside a form
In the textarea below we show how to do the previous jump to list of hyperlinks:
9)How to change an image onMouseOver and back onMouseOut
The trick is to know that you can name an image tag. <img name="myimi"
src=..>"
10)Just a simple demo - getting a text field to display in the status bar