JavaScript web design tips

Discussion in 'Javascript' started by annon, Apr 25, 2004.

  1. annon

    annon Guest

    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>");
    annon, Apr 25, 2004
    #1
    1. Advertising

  2. "annon" <> writes:

    > 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:


    <URL:http://jibbering.com/faq/#FAQ4_30>


    > 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
    --
    Lasse Reichstein Nielsen -
    Opening JS Windows <URL:http://www.infimum.dk/HTML/JSwindows.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, Apr 25, 2004
    #2
    1. Advertising

  3. JRS: In article <c6fp3s$joe$>, seen in
    news:comp.lang.javascript, annon <> posted at Sun, 25
    Apr 2004 08:24:39 :
    >
    >
    >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.

    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
    <URL:http://jibbering.com/faq/> Jim Ley's FAQ for news:comp.lang.javascript
    <URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
    <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
    Dr John Stockton, Apr 25, 2004
    #3
  4. annon

    Grant Wagner Guest

    annon wrote:

    > 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 <>

    * 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
    Grant Wagner, Apr 28, 2004
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ravi
    Replies:
    0
    Views:
    381
  2. Joe Hughes
    Replies:
    1
    Views:
    482
    Douglas Adams
    Jul 19, 2005
  3. number7
    Replies:
    2
    Views:
    452
  4. XxFireDragonxX

    Tips for CSS/XHTML design?

    XxFireDragonxX, Dec 19, 2005, in forum: HTML
    Replies:
    3
    Views:
    364
  5. Replies:
    1
    Views:
    3,059
    Arne Vajhøj
    Jul 31, 2012
Loading...

Share This Page