JavaScript web design tips

[annon]

I've noticed that some problems come up frequently that are of importance in
writing web pages, because they're pretty fundamental points.

For general reference, here are some collected solutions.


1. Opens a new Window at maximum size:

window.moveTo(0,0,screenX=0,screenY=0)
window.resizeTo(screen.availWidth+2,screen.availHeight+6)


2. Defeats Frames (including Hotmail frames):

if (window != top)
top.location.href = location.href


3. Fixes a CSS Bug in Netscape Navigator:

function WM_netscapeCssFix() {
if (document.WM.WM_netscapeCssFix.initWindowWidth !=
window.innerWidth || document.WM.WM_netscapeCssFix.initWindowHeight !=
window.innerHeight) {
document.location = document.location;
}
} function WM_netscapeCssFixCheckIn() {
if ((navigator.appName == 'Netscape') && (parseInt(navigator.appVersion)
== 4)) {
if (typeof document.WM == 'undefined'){
document.WM = new Object;
}
if (typeof document.WM.WM_scaleFont == 'undefined') {
document.WM.WM_netscapeCssFix = new Object;
document.WM.WM_netscapeCssFix.initWindowwidth=window.innerWidth;
document.WM.WM_netscapeCssFix.initWindowheight=window.innerHeight;
}
window.onresize = WM_netscapeCssFix;
}
} WM_netscapeCssFixCheckIn()


4. Preloads images:

if (document.images)
{
pic1= new Image(800,10);
pic1.src="images/image1.gif";

pic2= new Image(15,5);
pic2.src="images/image2.gif";

pic3= new Image(50,450);
pic3.src="images/image3.gif";
}


5. Opens a new Window with all window "furniture":

function openNewWin(url)
{
var atts =
'menubar=yes,toolbar=yes,location=yes,status=yes,scrollbars=yes,resizable=ye
s,directories=yes,menubar=1,toolbar=1,location=1,status=1,scrollbars=1,resiz
able=1,directories=1';
var newWindow = open (url,'_blank',atts);
newWindow.focus ()
}

- and is called in a HTML document (as shown in the examples below) by using
the syntax openNewWin(index.html) or openNewWin(this.href)


6. Opens a new Window in maximum size (no window "furniture"):

function openMaxWin(url)
{
var atts =
'menubar=no,toolbar=no,location=no,status=yes,scrollbars=yes,resizable=yes,m
enubar=0,toolbar=0,location=0,status=1,scrollbars=1,resizable=1';
var newWindow = open (url,'_blank',atts);
newWindow.focus ()
}


7. Opens a small pop-up type Window:

function openPopWin(url)
{
var atts =
'top=0,left=0,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,resi
zable=no,screenX=0,screenY=0,menubar=0,toolbar=0,location=0,status=0,scrollb
ars=0,resizable=0,width=200,height=250';
var newWindow = open (url,'_blank',atts);
newWindow.focus ()
}


8. Opens a new Window in fullscreen:

function fullscreen(url)
{
w = screen.availWidth-10;
h = screen.availHeight-20;
features = "width="+w+",height="+h;
features += ",left=0,top=0,screenX=0,screenY=0";

window.open(url, "", features);
}


9. A link to another page of your site, in a form that will work even with a
browser which does not have Javascript enabled:

<a href="filename.htm" target="_blank"
onClick="window.open(this.href,'','menubar=no,toolbar=no,location=no,status=
yes,scrollbars=yes,resizable=yes');return false;">Click here</a>


10. Returns the date the page was last updated:

function lastupdated()
{
lastmod = new Date(document.lastModified);
var year = lastmod.getYear();
if (year < 2000)
{
year = year + 1900;
}
var day = new Array;
day[0] = "Sunday";
day[1] = "Monday";
day[2] = "Tuesday";
day[3] = "Wednesday";
day[4] = "Thursday";
day[5] = "Friday";
day[6] = "Saturday";
var month = new Array;
month[1] = "January";
month[2] = "February";
month[3] = "March";
month[4] = "April";
month[5] = "May";
month[6] = "June";
month[7] = "July";
month[8] = "August";
month[9] = "September";
month[10] = "October";
month[11] = "November";
month[12] = "December";
function suffix()
{
var d = new Date(document.lastModified).getDate();
var s = "th";
if ((d == 1) || (d == 21) || (d == 31))
{
s = "st";
}
else if ((d == 2) || (d == 22))
{
s = "nd";
}
else if ((d == 3) || (d == 23))
{
s = "rd";
}
return s;
}
var updtime = month[lastmod.getMonth()+1] + " " + lastmod.getDate() + ", "
+ year;
return updtime;
}
document.write("<font class='updatetime'>" + lastupdated() + "</font>");


11. Ways to call a function in a HTML page:

(a) Using onLoad event handler:

<body onLoad="functionName()">


(b) Using onClick event handler:

<a href="filename.htm" onClick="functionName();return false;">Click here</a>

Or to link to an <a name="abc"></a> style link on the same page:
<a href="filename.htm#abc" onClick="window.location.reload()">Click here for
#abc link</a><br>

Or to open a new Window in which all the usual Window "furniture" is wanted:

<a href="index.htm" title="Homepage" onClick="openNewWin(this.href);return
false"><u>Home</u></a>

- which calls the function openNewWin() defined above, and does so by using
the special expression "this.href" which can be used to refer back to the
definition specified for href, ie in this case index.htm.


(c) To automatically load a set of standard scripts from an external .js
file located in the subfolder "/scripts", put this in the page HEAD, ie
before </head>:

<script language=JavaScript src="scripts/filename.js"
type=text/javascript></script>


(d) To print the result from a javascript function in the BODY of a page
(formatted by a CSS style "class" function), add the following in the <BODY>
of the HTML document:

document.write("<font class='classname'>" + functionName() + "</font>");

 

[Lasse Reichstein Nielsen]

I've noticed that some problems come up frequently that are of importance in
writing web pages, because they're pretty fundamental points.

Yes, we have a FAQ for that

For general reference, here are some collected solutions.

Here are some comments

1. Opens a new Window at maximum size:

First suggestion: Reconsider!
Opening new windows is not as safe as it once were, and new popup
blockers appear all the time. For a commerical site, dependency on
Javascript should be avoided.
At least, make it clear that a new, full screen window will appear
before the user clicks the button/link.

Second, the solution proposed doesn't open a new window at maximum
size. It moves and resizes the current window. Don't ever do that.
It's just rude. It will also fail in, e.g., my browser (Opera in MDI mode).

window.moveTo(0,0,screenX=0,screenY=0)

The assignments to screenX and screenY serve no purpose. Actually, the
last two arguments serve no purpose in any browser I know of. Just
make this:
window.moveTo(0,0);
No reason to leave out the final semicolon either.

window.resizeTo(screen.availWidth+2,screen.availHeight+6)

Magic constants are a danger sign. Why +2 and +6? Which browser and
operating system are these constants meant form? Just go for
availWidth and availHeight with no modification. That's what they are
there for.

And again: Resizing user's browser without perission is rude.

2. Defeats Frames (including Hotmail frames):

if (window != top)
top.location.href = location.href

Yes, this is the generic method. I don't like the formatting, though
(yes, I'm a pedant

if (window != top) {
top.location.href = location.href;
}

3. Fixes a CSS Bug in Netscape Navigator:

Which bug? Which version of NN?

if ((navigator.appName == 'Netscape') && (parseInt(navigator.appVersion)
== 4)) {

Ah, Netscape 4. Does this work with both 4.04 and 4.80?
....
So this reloads the page if it is resized.

4. Preloads images:

if (document.images)

Why test for document.images, when all you use is window.Image?

5. Opens a new Window with all window "furniture":

function openNewWin(url)
{
var atts =
'menubar=yes,toolbar=yes,location=yes,status=yes,scrollbars=yes,resizable=ye
s,directories=yes,menubar=1,toolbar=1,location=1,status=1,scrollbars=1,resiz
able=1,directories=1';
var newWindow = open (url,'_blank',atts);
newWindow.focus ()
}

- and is called in a HTML document (as shown in the examples below) by using
the syntax openNewWin(index.html) or openNewWin(this.href)

openNewWin("index.html")

The reason for using this, and not just the equivalent
window.open(url,"_blank")
(or a link with target="_blank", which even works without Javascript)
has been omitted. However, when you want to set the size of the window,
and therefore include the third argument, you will need to add these.

Btw, which browser required the value to be "1" instead of "yes"?

Add standard disclaimer about opening new windows.

6. Opens a new Window in maximum size (no window "furniture"):

function openMaxWin(url)
{
var atts =
'menubar=no,toolbar=no,location=no,status=yes,scrollbars=yes,resizable=yes,m
enubar=0,toolbar=0,location=0,status=1,scrollbars=1,resizable=1';
var newWindow = open (url,'_blank',atts);
newWindow.focus ()
}

No need to add the "=0" and "=no" declarations. That is the default when the
third argument is present. All non-present values are set to off.

7. Opens a small pop-up type Window:

function openPopWin(url)
{
var atts =
'top=0,left=0,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,resi
zable=no,screenX=0,screenY=0,menubar=0,toolbar=0,location=0,status=0,scrollb
ars=0,resizable=0,width=200,height=250';
var newWindow = open (url,'_blank',atts);
newWindow.focus ()
}

Always, always make your popups resizable. If the content fit, the
users are not likely to use it anyway, and for some reason the content
doesn't fit the window, resizeability is essential (or scrollbars of
course).

Positioning the window at top=0,left=0 feels a little odd. I would expect
a popup to happen near the window I use.

8. Opens a new Window in fullscreen:

See comments to solution 1.

function fullscreen(url)
{
w = screen.availWidth-10;
h = screen.availHeight-20;

Magic numbers. Do they correspond to the border width of your
browser's windows on your operating system?

9. A link to another page of your site, in a form that will work even with a
browser which does not have Javascript enabled:

Amen! Always do this!

<a href="filename.htm" target="_blank"
onClick="window.open(this.href,'','menubar=no,toolbar=no,location=no,status=
yes,scrollbars=yes,resizable=yes');return false;">Click here</a>

(Beware of your usenet client, it breaks lines where they should not
be broken.)

You can even change the second argument of the call to window.open to
"this.target".

10. Returns the date the page was last updated:

11. Ways to call a function in a HTML page:


Or to link to an <a name="abc"></a> style link on the same page:
<a href="filename.htm#abc" onClick="window.location.reload()">Click here for
#abc link</a><br>

Why reload the page first?

(c) To automatically load a set of standard scripts from an external .js
file located in the subfolder "/scripts", put this in the page HEAD, ie
before </head>:

<script language=JavaScript src="scripts/filename.js"
type=text/javascript></script>

The type attribute value must be quoted, since it contains the "/"
character, i.e.,
type="text/javascript"
There are four non-alphanumeric characters that are allowed in
un-quoted attribute values. If you can't remember them, always quote
your attribute values (See HTML 4.01 specification, section 3.2.2 for
a reminder, or do as I do: forget and quote everything.

You can safely omit the language attribute. It is deprecated and serves
no purpose when the (required) type attribute is present.

(d) To print the result from a javascript function in the BODY of a page
(formatted by a CSS style "class" function), add the following in the <BODY>
of the HTML document:

document.write("<font class='classname'>" + functionName() + "</font>");

Don't use the font tag. It's deprecated and obsolete. Especially when
you *are* using CSS. Use <span> instead. That is the generic inline
element, which has no visible effect by itself.

Also worth noticing: if this code is contained in a script element of an
HTML page, the "</" will, according to the HTML specification, end the
script element right there. Browsers don't follow the specification, but
there is no need to live dangerously.
Change "</font>" to "<\/font>".


In summary, I'd say that most of this advice is sound, although with too
much weight on opening windows, which is something that should generally
be avoided.

/L

 

[Dr John Stockton]

JRS: In article <[email protected]>, seen in

10. Returns the date the page was last updated:

function lastupdated()
{
lastmod = new Date(document.lastModified);
var year = lastmod.getYear();
if (year < 2000)
{
year = year + 1900;
}
var day = new Array;
day[0] = "Sunday";
day[1] = "Monday";
day[2] = "Tuesday";
day[3] = "Wednesday";
day[4] = "Thursday";
day[5] = "Friday";
day[6] = "Saturday";
var month = new Array;
month[1] = "January";
month[2] = "February";
month[3] = "March";
month[4] = "April";
month[5] = "May";
month[6] = "June";
month[7] = "July";
month[8] = "August";
month[9] = "September";
month[10] = "October";
month[11] = "November";
month[12] = "December";
function suffix()
{
var d = new Date(document.lastModified).getDate();
var s = "th";
if ((d == 1) || (d == 21) || (d == 31))
{
s = "st";
}
else if ((d == 2) || (d == 22))
{
s = "nd";
}
else if ((d == 3) || (d == 23))
{
s = "rd";
}
return s;
}
var updtime = month[lastmod.getMonth()+1] + " " + lastmod.getDate() + ", "
+ year;
return updtime;
}
document.write("<font class='updatetime'>" + lastupdated() + "</font>");

Why call new Date(...) twice?

Why waste space with

var day = new Array;
day[0] = "Sunday";
...
day[6] = "Saturday";

when
var day = ["Sunday", "Monday", "Tuesday",
"Wednesday", "Thursday", "Friday", "Saturday"]
serves (likewise for the month) ?

Why not use YYYY-MM-DD, which is shorter and understandable everywhere?

Why do you not indicate the time zone for which the date applies? It is
necessary for an accurate solution.

If someone in Hawaii and someone in Sydney access the page at the same
instant, such as early afternoon in Hawaii, should they see the same
result?

For suffices, one can use
X = [,'st','nd','rd',,,,,,,,,,,,,,,,,,'st','nd','rd',,,,,,,,'st'][d]
|| 'th'
which is not the only short way.

But why define suffix when it is not used?

Readers should not deduce that "annon" is a spelling customarily used in
English.

 

[Grant Wagner]

I've noticed that some problems come up frequently that are of importance in
writing web pages, because they're pretty fundamental points.

For general reference, here are some collected solutions.

1. Opens a new Window at maximum size:

window.moveTo(0,0,screenX=0,screenY=0)

What implementation of the moveTo() method takes four parameters? And even if it
did, why are you doing assignments and then passing the result of that assigment
to the method?

window.resizeTo(screen.availWidth+2,screen.availHeight+6)

That only works if the visitor to your site happens to be using Windows with
window borders set to whatever you have on your machine that makes those values
work.

Both moveTo() resizeTo() also only work if the visitor isn't using a browser or
browser add-on that prevents moving and resizing of their windows.

5. Opens a new Window with all window "furniture":

Otherwise known as "chrome".

function openNewWin(url)
{
var atts =
'menubar=yes,toolbar=yes,location=yes,status=yes,scrollbars=yes,resizable=ye
s,directories=yes,menubar=1,toolbar=1,location=1,status=1,scrollbars=1,resiz
able=1,directories=1';
var newWindow = open (url,'_blank',atts);
newWindow.focus ()
}

Or leave the third (optional) parameter off and the new window will open with
the chrome of the current window.

- and is called in a HTML document (as shown in the examples below) by using
the syntax openNewWin(index.html) or openNewWin(this.href)

6. Opens a new Window in maximum size (no window "furniture"):

function openMaxWin(url)
{
var atts =
'menubar=no,toolbar=no,location=no,status=yes,scrollbars=yes,resizable=yes,m
enubar=0,toolbar=0,location=0,status=1,scrollbars=1,resizable=1';
var newWindow = open (url,'_blank',atts);
newWindow.focus ()
}

Disabling any single chrome element in the third parameter of window.open()
disables all other chrome elements unless you explicitly enable them. This is
the documented behaviour:

<url:
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/window.html#1202731
/>

"If windowName does not specify an existing window and you do not supply the
windowFeatures parameter, all of the features which have a yes/no choice are yes
by default. However, if you do supply the windowFeatures parameter, then the
titlebar and hotkeys are still yes by default, but the other features which have
a yes/no choice are no by default."

10. Returns the date the page was last updated:

function lastupdated()
{
lastmod = new Date(document.lastModified);

Ew. Assumes document.lastModified is the same in every browser, it isn't.

(d) To print the result from a javascript function in the BODY of a page
(formatted by a CSS style "class" function), add the following in the <BODY>
of the HTML document:

document.write("<font class='classname'>" + functionName() + "</font>");

You indicate you want to use CSS classes, then you use the <font> tag. These two
goals seem to be at odds. If you want to use CSS classes, then use the general
purpose <span></span> tag.

--
| Grant Wagner <[email protected]>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-developer/upgrade_2.html