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:
Pop it up.

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:
« Back 1 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 >
Re-Vision.com

projects:
Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
US
Along the Mississippi River
The Work of Antoni Gaudí
Graffiti

places:
Morocco 2023
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Paris, France
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007
Rome, Italy 2006

archive:
Graphics, sounds, and other ancient
items from the dawn of the Web.

FWIW:
Biography

©
Jay Boersma