Help required with a screen resolution issue

[jvella]

Hi,

I am in the process of creating a website, and as I am teaching myself PHP decided that it would be a good idea to try a few things like resizing the text, changing colour schemes, all of the usual accessibility stuff.

I have a php file called menu.php, (code below) which holds the menu option and also the screen resize options.

They both work, but I am looking for a way to not display the screen resize options if the page is viewed on a mobile device, ie. a PDA or mobile 'phone.

It's the bits in red that I don't want to appear, and I am getting accessing the file using the include function, if that makes any difference.

I would like it to be decided by the screen resolution, ie. if the screen is less than 800 pixels wide don't show the options, but I'm a bit stuck...

Can anyone help please?

Thanks in advance,

John.

 
<ul id="Navigation">
<li><a href="index.php">Home </a></li> <img src="images/seperator.png" border=0> 
<li><a href="about.php">About </a></li> <img src="images/seperator.png" border=0> 
<li><a href="news.php">News </a></li> <img src="images/seperator.png" border=0> 
<li><a href="photos.php">Photos </a></li> <img src="images/seperator.png" border=0> 
<li><a href="projects.php">Projects </a></li> <img src="images/seperator.png" border=0> 
<li><a href="weblinks.php">Web Links </a></li> <img src="images/seperator.png" border=0> 
<li><a href="forums.php">Forums </a></li> <img src="images/seperator.png" border=0> 
<li class="last"><a href="index.php">Contact Me </a></li>

<br />
<hr />
<a href="javascript:fsize(textsize,'px','content');" onclick="changetextsize(0);">[Reduce font size]</a>
<img src="images/seperator.png" width="20px" border=0>
<a href="javascript:fsize(textsize,'px','content');" onclick="changetextsize(1);">[Increase font size]</a>
</ul>

[misson]

First thing, the only legal children of an unordered list (<ul>) are list elements (<li>). Second, browsers already include the ability to change font size and zoom in or out. That being said, there are still good arguments for including the functionality in a page, so here's one way.

The browser doesn't send the screen size to the server, so anything that depends on screen size has to be done client side, which basically means JS. I recommend having the text resizing widget hidden by default and revealed by JS. Since the widget won't work if JS is disabled, it's better to keep it hidden. Of course, if the browser doesn't support CSS at all, the widget will show up.

<style type="text/css">
.hide { display: none; }
</style>
...
<div id="ZoomWidget" class="hide">...</div>
<script type="text/javascript">
if (screen.width > 800) {
    document.getElementById('ZoomWidget').style.display="block";
}
</script>

[jvella]

Hi Mission and thanks for your help

It had occured to me, (before I read your post) that I'd kinda mucked up my menu.php file, and slightly jigged it thus:

<ul id="Navigation">
<li><a href="index.php">Home </a></li> <img src="images/seperator.png" border=0> 
<li><a href="about.php">About </a></li> <img src="images/seperator.png" border=0> 
<li><a href="news.php">News </a></li> <img src="images/seperator.png" border=0> 
<li><a href="photos.php">Photos </a></li> <img src="images/seperator.png" border=0> 
<li><a href="projects.php">Projects </a></li> <img src="images/seperator.png" border=0> 
<li><a href="weblinks.php">Web Links </a></li> <img src="images/seperator.png" border=0> 
<li><a href="forums.php">Forums </a></li> <img src="images/seperator.png" border=0> 
<li class="last"><a href="index.php">Contact Me </a></li>
</ul>
<a href="javascript:fsize(textsize,'px','content');" onclick="changetextsize(0);">[Reduce font size]</a>
<img src="images/seperator.png" width="20px" border=0>
<a href="javascript:fsize(textsize,'px','content');" onclick="changetextsize(1);">[Increase font size]</a>
<hr />

I am slightly confused by what you mean by the term widget. Are you referring to the javascript file called by the href in the bit I want to hide on PDAs, etc?

Sorry if I sound a bit dense, but any more information you could provide would be gratefully received.

Thanks again,

John.

PS. Slightly off topic, but there was a security question to answer before I posted this... "What colour is the sky?" I've just looked out of the window and it's definitely grey, but for some reason the computer thinks it's blue! Have I got an optimistic PC?!? ;)

[misson]

Hi Mission and thanks for your help

It had occured to me, (before I read your post) that I'd kinda mucked up my menu.php file, and slightly jigged it thus:

<ul id="Navigation">
<li><a href="index.php">Home </a></li> <img src="images/seperator.png" border=0> 
<li><a href="about.php">About </a></li> <img src="images/seperator.png" border=0> 
...

Better, but you still have some <img> as children of the <ul>. (Note: I changed the tag from '[code]' to '[html]' to improve readability). You might want to use W3C's HTML validator.

I am slightly confused by what you mean by the term widget. Are you referring to the javascript file called by the href in the bit I want to hide on PDAs, etc?

A "widget" is a UI element that the user interacts with, also called a "control". Buttons, scrollbars, sliders, comboboxes, and radio buttons are all widgets. In this case, it's the text resizer. I'm using the term a little broadly, as a proper widget displays some information about its state so that (from the user's perspective) widget input & output aren't distinguishable. Also, a widget doesn't have a specific function (such as text resizing), it just defines a way of interacting with it, a particular method of control.

PS. Slightly off topic, but there was a security question to answer before I posted this... "What colour is the sky?" I've just looked out of the window and it's definitely grey, but for some reason the computer thinks it's blue! Have I got an optimistic PC?!? ;)

All computers are optimists, excepting Marvin and some web servers.