Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #21555 > unrolled thread

Re: fixed position sidebar and small screen/mobile devices?

Back to article view | Back to comp.lang.javascript

This discussion starts older than the indexed window; earlier articles aren't shown. The article labeled Started by below is the oldest one visible, not the original post.

Contents

  Re: fixed position sidebar and small screen/mobile devices? David Mark <dmark.cinsoft@gmail.com> - 2011-02-11 06:26 -0800
    Re: fixed position sidebar and small screen/mobile devices? John Stumbles <john.stumbles@ntlworld.com> - 2011-02-11 16:23 +0000

#21555 — Re: fixed position sidebar and small screen/mobile devices?

On Feb 11, 7:44 am, John Stumbles <john.stumb...@ntlworld.com> wrote:
> I've made my first serious foray into css with a web layout that has
> 'position: fixed' side and top bars likehttp://yaph.org.uk/test/layout-fixed.html

Sounds serious!  :)

> so that the site is always visually identified, and users have ready
> access to the menu (in the side or top bar) without having to scroll back
> to the top if the content is large.

(too large for the viewport)

>
> However on an Android (and possibly other mobile devices, or if one
> resizes a conventional desktop-based browser down to a small enough
> window) the user can't scroll away from the fixed elements to view the
> content.

Fixed elements or not, they should still be able to scroll the
document.  Some mobile devices (e.g. iPhone) show only a portion of
the viewport at a time though.

Perhaps you mean they can't scroll to see the entire vertical sidebar
(as the content is not large enough to permit scrolling)?

> Using absolute positioning on the side and top bars likehttp://yaph.org.uk/test/layout-absolute.htmlmakes it usable in small
> browser windows,
> and I can easily enough test which browser the user is on
> and switch between the two likehttp://yaph.org.uk/test/layout-test.php

No, you can't.

>
> Here's a 'real' site I'm working on:http://reading-skeptics.org.uk/home/
>
> I don't want to make the side and top bars percentages of the screen
> dimensions as the menu text would wrap and look a right dog's dinner.
>
> Hard-coding HTTP user agents into my PHP script is going to be fun to
> maintain ;-(

You certainly can't browser sniff on the server.

> Could I finding out the screen dimensions and switch from
> fixed to absolute positioning below a certain threshold?

Yes, you could find out the viewport dimensions, but you are barking
up the wrong tree.  You should use CSS media queries to adapt your
layout.  And it seems unlikely that switching between fixed and
absolute for the sidebars will be the best solution.

> Maybe in
> javascript? But I'm even more of a tyro at js: I can just about say
> document.write! (I know many users browse with js switched off e.g. using
> NoScript (I do so myself) but if the site rendered OK without js and was
> just better with it that would be OK.

It would be OK, but it would be much better if you kept scripting out
of your layout.

[toc] | [next] | [standalone]

#21560

On Fri, 11 Feb 2011 06:26:49 -0800, David Mark wrote:


>> However on an Android (and possibly other mobile devices, or if one
>> resizes a conventional desktop-based browser down to a small enough
>> window) the user can't scroll away from the fixed elements to view the
>> content.
> 
> Fixed elements or not, they should still be able to scroll the
> document.  Some mobile devices (e.g. iPhone) show only a portion of
> the viewport at a time though.
> 
> Perhaps you mean they can't scroll to see the entire vertical sidebar
> (as the content is not large enough to permit scrolling)?

I don't have a 'droid but someone with an HTC Hero tells me if he scrolls
sideways to get to the content pane, after a second or so the sidebar
repositions itself over it. If I resize a desktop-based browser window
small enough the fixed side and top bars do get in the way so maybe that's
what he's getting.

> You certainly can't browser sniff on the server.

With PHP I can pick up the user agent e.g.
<?php
    if (preg_match("/Android/", $_SERVER["HTTP_USER_AGENT"],
    $matches)) {
        # do whatever
    }
?>

The HTTP_USER_AGENT for the problem unit is:

Mozilla/5.0 (Linux; U; Android 2.1- update1; en-gb; HTC Hero Build/ERE27)
AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

> It would be OK, but it would be much better if you kept scripting out
> of your layout.

That's what I'd rather do. Thanks.

-- 
John Stumbles

Fundamentalist agnostic

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web