Webwork
/
JavaScript Tool Kit #1

A collection of short, simple JavaScript snippets that do various useful things.

Pop-up Window - Text

One of the most useful of all JavaScripts, this one will pop up a new window of whatever size you want.

Source:
<a href="javascript:;"
onclick="window.open('popup-window.html', 'newwnd',
'width=300, height=150, left=50, top=150, status=0, scrollbars=0, resizable=0')">
Pop it up.</a>
Web page:

Popup Window Options:

Pop-up Window - Button

Source:
<form>
<input type="button" value="Pop it up" onclick="window.open('popup-window2.html', 'newwnd', 'width=550, height=450, left=200, top=100, status=0, scrollbars=0, resizable=0')" />
</form>
Web page:

Pop-up Window - Styled Button

Source:
<form>
<input type="button" value="POP IT UP" onclick="window.open('popup-window3.html', 'newwnd', 'width=550, height=400, left=200, top=100, status=0, scrollbars=0, resizable=0')" style="color: #999999; font: normal 12px/11px 'trebuchet ms', sans-serif; color: #fff; background-color: #789; padding: 5px 10px 5px 10px; border-top: #abc solid 3px; border-left: #abc solid 3px; border-right: #345 solid 3px; border-bottom: #345 solid 3px; " />
</form>
Web page:

Alert Message

Source:
<script language="JavaScript"> function alertUser() { alert("I'm not unmindful of man's seeming need for some kind of faith. Basically I'm for anything that gets you through the night, be it prayer, tranquilizers or a bottle of Jack Daniel's.\n --Frank Sinatra, February, 1963") } </script>

<a href="javascript:;" onMouseOver="alertUser()">Roll over this.</a>
Web page:
Roll over this.

Back Button

Source:
<a href="javascript:window.history.back();">
&laquo; Back 1 Page</a>
Web page:

Pull-Down Navigation Menu

Source:
<script language="javascript" type="text/javascript"> function autonavdemo() { if (document.navdemo.destination.options[document.navdemo.destination.selectedIndex].value) { top.location = document.navdemo.destination.options[document.navdemo.destination.selectedIndex].value } } </script>

<form name="navdemo" id="navdemo">
<select name="destination" onchange="autonavdemo()">
<option value="">Select a topic</option>
<option value="http://www.re-vision.com/webwork/p14styling-basic-tags/index.html">Styling Basic HTML Tags</option>
<option value="http://www.re-vision.com/webwork/p18text-formatting/index.html">Font and Text Styles</option>
<option value="http://www.re-vision.com/webwork/p22floating-content/index.html">Floating Content</option>
<option value="http://www.re-vision.com/webwork/p26shorthands/index.html">CSS Shorthands</option>
<option value="http://www.re-vision.com/webwork/p27wireframes/index.html">Wireframes</option>
</select>
</form>
Web page:

E-mail Link

Source:
<script language="JavaScript" type="text/JavaScript">
function mailpageurl() {
mail_str ="mailto:?subject=JavaScript Tools from Webwork";
mail_str += "&body=I think you'll find this useful.%0D%0A%0D";
mail_str +="Click here to read it (or copy this url and paste it into your browser):%0D%0A%0D";
mail_str +=location.href;
mail_str +="%0D";
mail_str +="%0D";
location.href = mail_str }
</script>

<a href="javascript:mailpageurl()">Email this page.</a>
Web page:
Email this page.
Previous | Webwork Table of Contents | Next >