In trying to take it one step further I'd like the function to
execute only when the window width changes.
The code only needs slight modification:
this.onload = function() {
var width = document.body.clientWidth;
document.body.onresize = function() {
if (document.body.clientWidth != width)
location.reload();
};
};
First I should illustrate what I'm trying to do.
Opera has a preliminary implementation of CSS3 media queries, this
allows dissolving a multi column layout for narrower window widths.
Currently the CSS media query isn't reevaluated on a window resize,
it requires a reload [...]
Has that been reported to Opera? I don't know if the query /must/ be
re-evaluated, but it certainly should be.
[snip]
After a glance in a JS book
Based upon informed third-party opinion, most books on scripting are
rubbish, unfortunately. I've never read any myself, but the other
regulars in c.l.javascript can just about recommend "JavaScript: The
Definitive Guide, 4th Edition"[1] (and some may only consider that the
least bad, rather than good).
and not hindered by a proper understanding of JS & the DOM
I tried:
<script type="text/javascript">
window.innerWidth.onresize = function() {
location.reload(false);
};
[snip]
Even if that onresize property persisted (see below), the innerWidth
property is not an element, it would not receive events, and so the
function would never be executed.
<off-topic>
The innerWidth property of the global object is simply a number (where
implemented) and has no members, nor can it be assigned any.
To illustrate the latter point, consider:
var number = 10;
number.property = 'value';
alert(typeof number.property);
The alert will contain 'undefined', not 'string'. The reason is that
only objects have properties. Though one may use methods with
primitives, what goes on behind the scenes is a little complex than it
may otherwise appear. For example,
var message = 'Hello %s!';
alert(message.replace('%s', 'World'));
message is a string primitive, but the code would still display 'Hello
World!'. What is actually happening is that in using dot notation, the
left-hand operand is implicitly converted to an object, similar to:
Object(message).replace(...)
which is equivalent (in this instance) to:
(new String(message)).replace(...)
The same thing occurs when trying to create a property on a primitive,
but because the implicitly created object is only temporary, the new
property disappears along with the object itself.
In the code you posted, a Number object will be created using the
innerWidth property, and a reference to a function object will be
assigned to a new property, onresize. However, because there are no
references to it, this Number object will be marked for garbage
collection, and the function object will soon follow suit.
</>
Hope that helps,
Mike
[1] Recommended books, c.l.javascript FAQ
<
http://www.jibbering.com/faq/#FAQ3_1>
