On Nov 17, 10:46 pm, Remi Grumeau <[email protected]> wrote:
> But this make two files to update/upgrade/theme… which is a nightmare on
> medium to big projects.
> Not to say that too much http requests is bad for mobile signal.
>
> window.onorientationchange = function() {
> {
> switch(window.orientation)
> {
> case 0:
> document.body.setAttribute('orient', 'p');
> break;
>
> case 90:
> case -90:
> document.body.setAttribute('orient', 'ls');
> break;
> }
> }
That can be written more concisely as:
document.body.setAttribute('orient', (window.orientation == 0)?
'p' : 'ls');
However, using custom attributes in HTML documents is not a good idea.
If you wish to use HTML5 (which is still a draft, it is not a standard
yet), then custom data attributes can be used, but they must start
with "data-".
In this case, it would be far better to use a class, say "landscape"
and add or remove it from the body element depending on the value of
window.orientation, so (assuming the avilability of generic add/
removeClass functions):
window.onorientationchange = function() {
if (window.orientation == 0) {
removeClass('landscape');
} else {
addClass('landscape');
}
}
It would also be prudent to check for suitable values for the
orientation property before adding the listener.
> and then use in the same CSS
> body { background: #fff; }
> body[orient="ls"] { background: #000; }
> or
> body > #element { width: 320px; }
> body[orient='ls'] > #element { width: 480px; }
or
/* default for portrait */
body {
background: #ffffff;
}
/* for landscape */
body.landscape {
background: #000000;
}
--
Rob
--
You received this message because you are subscribed to the Google Groups
"iPhoneWebDev" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/iphonewebdev?hl=en.
