Mike Oliver

Mike,

> I'm having difficulty trying to create an element with my page become
> visible when the window has been resized.
> 
> The layer on the right is only visible when the window is large enough.
> Most of my trouble when doing this is trying to constantly monitor the
> document.body.clientWidth value.

Do not just monitor document.body.clientWidth - it is not cross browser.

See http://www.howtocreate.co.uk/tutorials/javascript/browserwindow for more
details.

Anyway, what you are trying to do is very simple. Create the element, give
it an id, and set the display:none; style on it. Then use this script
(configure the ID and width) and it will be made visible when the window is
at least the minimum amount wide:

if( window.onresize ) { window.resizeMonStore = window.onresize; }
window.onresize = function () {
    var theEl = 'mydiv'; //the ID you used
    var minWidth = 900; //the minimum width to show it
    if( document.getElementById ) {
        theEl = document.getElementById(theEl);
    } else if( document.all ) {
        theEl = document.all[theEl];
    } else { return; }
    if( !theEl ) { return; }
    var myWidth = 0, myHeight = 0;
    var de = document.documentElement;
    var db = document.body;
    if( window.innerWidth ) {
        myWidth = window.innerWidth;
    } else if( de && de.clientWidth ) {
        myWidth = de.clientWidth;
        myHeight = de.clientHeight;
    } else if( db && db.clientWidth ) {
        myWidth = document.body.clientWidth;
    }
    theEl.style.display = ( myWidth > minWidth ) ? 'block' : 'none';
    if( window.resizeMonStore ) { window.resizeMonStore(); }
};
if( window.onload ) { window.loadMonStore = window.onload; }
window.onload = function () {
    window.onresize();
    if( window.loadMonStore ) { window.loadMonStore(); }
};


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/

Mike,

> Wow, that's perfect! Thanks so much.

:) no problem - happy you like it

> I'll credit your script when it's published, are there any particular
> credit notes you'd like me to include?

A minor quote from my emails page:
"any scripts I send you by email or any other medium are subject to the same
terms and conditions as any other script on this site."

So normally (for internal/intranet sites) that would mean writing something
like this either at the top of the script, or on a site policy page:

Show-on-resize script provided for free by http://www.howtocreate.co.uk
See http://www.howtocreate.co.uk/jslibs/termsOfUse.html for terms of use

Or for commercial websites:
Show-on-resize script provided for free by http://www.howtocreate.co.uk
Customers are not charged for use of this script
See http://www.howtocreate.co.uk/jslibs/termsOfUse.html for terms of use


Cheers

Tarquin

Mike,

The easiest thing to do is to use a server side script to include whatever
HTML you want. In php, this is as easy as:

<?php include('menufile.txt'); ?>

Other server side languages like Perl, JSP or ASP will offer similar
functionality. If you are already using .html files, you should be able to
tell the apache web server to process them as PHP files using a .htaccess
file:
AddType application/x-httpd-php .php .html

Ask your hosting service for more details of what they have available.

I do _not_ recommend using a client side script, since navigation is one of
the vital parts of a web page, and it absolutely must be available even if
script is not (for browsers that do not support the required advanced
scripting, and for search engines).

Tarquin