JavaScript web design tips

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • annon

    JavaScript web design tips

    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,sc reenY=0)
    window.resizeTo (screen.availWi dth+2,screen.av ailHeight+6)


    2. Defeats Frames (including Hotmail frames):

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


    3. Fixes a CSS Bug in Netscape Navigator:

    function WM_netscapeCssF ix() {
    if (document.WM.WM _netscapeCssFix .initWindowWidt h !=
    window.innerWid th || document.WM.WM_ netscapeCssFix. initWindowHeigh t !=
    window.innerHei ght) {
    document.locati on = document.locati on;
    }
    } function WM_netscapeCssF ixCheckIn() {
    if ((navigator.app Name == 'Netscape') && (parseInt(navig ator.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.innerWi dth;
    document.WM.WM_ netscapeCssFix. initWindowheigh t=window.innerH eight;
    }
    window.onresize = WM_netscapeCssF ix;
    }
    } WM_netscapeCssF ixCheckIn()


    4. Preloads images:

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

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

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


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

    function openNewWin(url)
    {
    var atts =
    'menubar=yes,to olbar=yes,locat ion=yes,status= yes,scrollbars= yes,resizable=y e
    s,directories=y es,menubar=1,to olbar=1,locatio n=1,status=1,sc rollbars=1,resi z
    able=1,director ies=1';
    var newWindow = open (url,'_blank',a tts);
    newWindow.focus ()
    }

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


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

    function openMaxWin(url)
    {
    var atts =
    'menubar=no,too lbar=no,locatio n=no,status=yes ,scrollbars=yes ,resizable=yes, m
    enubar=0,toolba r=0,location=0, status=1,scroll bars=1,resizabl e=1';
    var newWindow = open (url,'_blank',a tts);
    newWindow.focus ()
    }


    7. Opens a small pop-up type Window:

    function openPopWin(url)
    {
    var atts =
    'top=0,left=0,m enubar=no,toolb ar=no,location= no,status=no,sc rollbars=no,res i
    zable=no,screen X=0,screenY=0,m enubar=0,toolba r=0,location=0, status=0,scroll b
    ars=0,resizable =0,width=200,he ight=250';
    var newWindow = open (url,'_blank',a tts);
    newWindow.focus ()
    }


    8. Opens a new Window in fullscreen:

    function fullscreen(url)
    {
    w = screen.availWid th-10;
    h = screen.availHei ght-20;
    features = "width="+w+",he ight="+h;
    features += ",left=0,top=0, screenX=0,scree nY=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,loc ation=no,status =
    yes,scrollbars= yes,resizable=y es');return false;">Click here</a>


    10. Returns the date the page was last updated:

    function lastupdated()
    {
    lastmod = new Date(document.l astModified);
    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.l astModified).ge tDate();
    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.getMont h()+1] + " " + lastmod.getDate () + ", "
    + year;
    return updtime;
    }
    document.write( "<font class='updateti me'>" + lastupdated() + "</font>");


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

    (a) Using onLoad event handler:

    <body onLoad="functio nName()">


    (b) Using onClick event handler:

    <a href="filename. htm" onClick="functi onName();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.reloa d()">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="openNe wWin(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=JavaSc ript 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='classnam e'>" + functionName() + "</font>");



  • Lasse Reichstein Nielsen

    #2
    Re: JavaScript web design tips

    "annon" <annon@no.spam. com> writes:
    [color=blue]
    > I've noticed that some problems come up frequently that are of importance in
    > writing web pages, because they're pretty fundamental points.[/color]

    Yes, we have a FAQ for that :)
    [color=blue]
    > For general reference, here are some collected solutions.[/color]

    Here are some comments

    [color=blue]
    > 1. Opens a new Window at maximum size:[/color]

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

    [color=blue]
    > window.moveTo(0 ,0,screenX=0,sc reenY=0)[/color]

    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.
    [color=blue]
    > window.resizeTo (screen.availWi dth+2,screen.av ailHeight+6)[/color]

    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.
    [color=blue]
    > 2. Defeats Frames (including Hotmail frames):
    >
    > if (window != top)
    > top.location.hr ef = location.href[/color]

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

    if (window != top) {
    top.location.hr ef = location.href;
    }
    [color=blue]
    > 3. Fixes a CSS Bug in Netscape Navigator:[/color]

    Which bug? Which version of NN?
    [color=blue]
    > if ((navigator.app Name == 'Netscape') && (parseInt(navig ator.appVersion )
    > == 4)) {[/color]

    Ah, Netscape 4. Does this work with both 4.04 and 4.80?
    ....
    So this reloads the page if it is resized.
    [color=blue]
    > 4. Preloads images:
    >
    > if (document.image s)[/color]

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

    [color=blue]
    > 5. Opens a new Window with all window "furniture" :
    >
    > function openNewWin(url)
    > {
    > var atts =
    > 'menubar=yes,to olbar=yes,locat ion=yes,status= yes,scrollbars= yes,resizable=y e
    > s,directories=y es,menubar=1,to olbar=1,locatio n=1,status=1,sc rollbars=1,resi z
    > able=1,director ies=1';
    > var newWindow = open (url,'_blank',a tts);
    > newWindow.focus ()
    > }
    >
    > - and is called in a HTML document (as shown in the examples below) by using
    > the syntax openNewWin(inde x.html) or openNewWin(this .href)[/color]
    openNewWin("ind ex.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.
    [color=blue]
    > 6. Opens a new Window in maximum size (no window "furniture" ):
    >
    > function openMaxWin(url)
    > {
    > var atts =
    > 'menubar=no,too lbar=no,locatio n=no,status=yes ,scrollbars=yes ,resizable=yes, m
    > enubar=0,toolba r=0,location=0, status=1,scroll bars=1,resizabl e=1';
    > var newWindow = open (url,'_blank',a tts);
    > newWindow.focus ()
    > }[/color]

    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.
    [color=blue]
    > 7. Opens a small pop-up type Window:
    >
    > function openPopWin(url)
    > {
    > var atts =
    > 'top=0,left=0,m enubar=no,toolb ar=no,location= no,status=no,sc rollbars=no,res i
    > zable=no,screen X=0,screenY=0,m enubar=0,toolba r=0,location=0, status=0,scroll b
    > ars=0,resizable =0,width=200,he ight=250';
    > var newWindow = open (url,'_blank',a tts);
    > newWindow.focus ()
    > }[/color]

    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.

    [color=blue]
    > 8. Opens a new Window in fullscreen:[/color]

    See comments to solution 1.
    [color=blue]
    > function fullscreen(url)
    > {
    > w = screen.availWid th-10;
    > h = screen.availHei ght-20;[/color]

    Magic numbers. Do they correspond to the border width of your
    browser's windows on your operating system?
    [color=blue]
    > 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:[/color]

    Amen! Always do this!
    [color=blue]
    > <a href="filename. htm" target="_blank"
    > onClick="window .open(this.href ,'','menubar=no ,toolbar=no,loc ation=no,status =
    > yes,scrollbars= yes,resizable=y es');return false;">Click here</a>[/color]

    (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.targe t".
    [color=blue]
    > 10. Returns the date the page was last updated:[/color]

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

    [color=blue]
    > 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.reloa d()">Click here for
    > #abc link</a><br>[/color]

    Why reload the page first?
    [color=blue]
    > (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=JavaSc ript src="scripts/filename.js"
    > type=text/javascript></script>[/color]

    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.
    [color=blue]
    > (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='classnam e'>" + functionName() + "</font>");[/color]

    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 - lrn@hotpop.com
    Opening JS Windows <URL:http://www.infimum.dk/HTML/JSwindows.html>
    'Faith without judgement merely degrades the spirit divine.'

    Comment

    • Dr John Stockton

      #3
      Re: JavaScript web design tips

      JRS: In article <c6fp3s$joe$1@n ews7.svr.pol.co .uk>, seen in
      news:comp.lang. javascript, annon <annon@no.spam. com> posted at Sun, 25
      Apr 2004 08:24:39 :[color=blue]
      >
      >
      >10. Returns the date the page was last updated:
      >
      >function lastupdated()
      >{
      > lastmod = new Date(document.l astModified);
      > 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.l astModified).ge tDate();
      > 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.getMont h()+1] + " " + lastmod.getDate () + ", "
      >+ year;
      > return updtime;
      >}
      >document.write ("<font class='updateti me'>" + lastupdated() + "</font>");[/color]

      Why call new Date(...) twice?

      Why waste space with[color=blue]
      > var day = new Array;
      > day[0] = "Sunday";
      > ...
      > day[6] = "Saturday";[/color]

      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','r d',,,,,,,,'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.demo n.co.uk/js-index.htm> jscr maths, dates, sources.
      <URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

      Comment

      • Grant Wagner

        #4
        Re: JavaScript web design tips

        annon wrote:
        [color=blue]
        > 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,sc reenY=0)[/color]

        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?
        [color=blue]
        > window.resizeTo (screen.availWi dth+2,screen.av ailHeight+6)[/color]

        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.
        [color=blue]
        > 5. Opens a new Window with all window "furniture" :[/color]

        Otherwise known as "chrome".
        [color=blue]
        > function openNewWin(url)
        > {
        > var atts =
        > 'menubar=yes,to olbar=yes,locat ion=yes,status= yes,scrollbars= yes,resizable=y e
        > s,directories=y es,menubar=1,to olbar=1,locatio n=1,status=1,sc rollbars=1,resi z
        > able=1,director ies=1';
        > var newWindow = open (url,'_blank',a tts);
        > newWindow.focus ()
        > }[/color]

        Or leave the third (optional) parameter off and the new window will open with
        the chrome of the current window.
        [color=blue]
        > - and is called in a HTML document (as shown in the examples below) by using
        > the syntax openNewWin(inde x.html) or openNewWin(this .href)
        >
        > 6. Opens a new Window in maximum size (no window "furniture" ):
        >
        > function openMaxWin(url)
        > {
        > var atts =
        > 'menubar=no,too lbar=no,locatio n=no,status=yes ,scrollbars=yes ,resizable=yes, m
        > enubar=0,toolba r=0,location=0, status=1,scroll bars=1,resizabl e=1';
        > var newWindow = open (url,'_blank',a tts);
        > newWindow.focus ()
        > }[/color]

        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:

        />

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

        [color=blue]
        > 10. Returns the date the page was last updated:
        >
        > function lastupdated()
        > {
        > lastmod = new Date(document.l astModified);
        >[/color]

        Ew. Assumes document.lastMo dified is the same in every browser, it isn't.
        [color=blue]
        > (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='classnam e'>" + functionName() + "</font>");[/color]

        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 <gwagner@agrico reunited.com>

        * Client-side Javascript and Netscape 4 DOM Reference available at:
        *


        * Internet Explorer DOM Reference available at:
        *
        Find official documentation, practical know-how, and expert guidance for builders working and troubleshooting in Microsoft products.


        * 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-deve...upgrade_2.html


        Comment

        Working...