| |
Web Tips
The following web tips, presented in no particular order, cover a wide range of functions. Some of the tips refer to HTML specifications while others are specifically for Javascript implementation. Be sure to use the appropriate tip in the appropriate way to achieve the desired result.
All annotations will be shown using this color. Do not include the annotations in the web code.
Favorite Icon
Setting a favorite icon in the browser tab
<link REL="SHORTCUT ICON" href="http://www.mysite.ext/logo.ico">
Use a 16 x 16 windows compatible icon and make sure the file exists at the listed URL.
Caching and Refresh
Include metatags in <head> section of the page.
No Cached Page
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
Refresh Tag
<meta http-equiv="Refresh" content="20; URL=http://www.gotopage.com">
This header tag means jump to "http://www.gotopage.com" after 20 second delay. Note the nonstandard quotation syntax which groups the delay and the URL together separated by a semi-colon.
Email Link Tips
Mailto links with subject and message
<a href="mailto:cooldude@mypage.com?subject=Hey there&
body=Howsit goin?>Email Me!</a>
When the link is clicked, a message saying "Howsit goin?" is emailed to cooldude@mypage.com with the subject "Hey there". The default local email program is used for this task.
Frames
Open page and remove frame
<a href="http://mysite.com" target=_top>Open page and remove frame</a>
Standard hyperlink syntax is used.
Make sure page is not shown in a frame
<head>
<script language="JavaScript">
function breakout() {
if (top.location != location)
{top.location.href = document.location.href;}
}
</script>
</head>
<body onload=Javascript:breakout()";>
Windows
Open new window and show page
<a href="http://mysite.com" target=_blank>Open new window and display the page</a>Popup window
window.open('http://mysite.com/page.html','popup','toolbar=no,location=no,
directories=no,status=no,menubar=no,resizable=yes,copyhistory=no,
scrollbars=yes,width=400,height=300');
Javascript Tips
Javascript Comments
<script language="Javascript">
<!-- Start Comment
All the comments fit to print - multiline comment
End Comment-->
// One line comment
</script>
Either or both styles are acceptable.
Javascript Arrays
var arrayname=new Array(10);
Creates an array of 10 elements all named "arrayname". Case is important.
Javascript Text Rollover Color Change and Click-Jump
<head>
<script language=Javascript>
function changein(ptr) {ptr.style.color='red';}
function changeout(ptr) {ptr.style.color='black';}
function go(url) {document.location=url;}
</script>
</head>
<body>
<font onMouseOver="Javascript:changein(this);" onMouseOut="Javascript:changeout(this);" onClick="Javascript:go('http://www.ulm.edu');">This is the rollover wording</font>
</body>
Changes "This is the rollover wording" text color to red whenever mouse moves over the text. When the mouse leaves the text, color changes back to black. If user clicks on text, the browser jumps to "http://www.ulm.edu"
Change Mouse Pointer Appearance
<script language=Javascript>
function setcursor() {
document.body.style.cursor='crosshair';
}
function resetcursor() {
document.body.style.cursor='default';
}
</script>
<body>
<font onMouseOver="Javascript:setcursor();"
onMouseOut="Javascript:resetcursor();">
Crosshair cursor should be shown here
</font>
Change the appearance of the Mouse pointer to reflect a change in context or to generate particular special effects. In the example above, the cursor changes to crosshairs whenever the mouse rests on the text. Moving the mouse off of the text restores the cursor to the default appearance. Various cursor styles are listed below:
- auto
- crosshair
- default
- e-resize, w-resize, n-resize, s-resize, ne-resize, nw-resize, se-resize, sw-resize
- help
- move
- pointer/hand
- text
- wait
External Javascript Inclusion
<script src="externalscript.js" language="Javascript" type="text/javascript"></script>
Includes the Javascript found in file "externalscript.js" at the location of the tag.
  
|
