adjusting to resolution

[peterward]

hi, im designing a site which uses layers to keep the layout. all styling and positioning values are stored in a common css file. my problem is that my site is far too big for an 800x600 resolution window for example. how can i get round this? my first idea is to have javascript detect the resolution, and then load the appropriate stylesheet, which will have position values which are suitable for the resolution. this would save me having to have for example 3 pages for different resolutions. there are a couple of problems, however:

1) i dont know how to have javascript dynamically choose which stylesheet to use;

2) how could i incorporate dynamically choosing which version of an image to use? for example, its not a problem when the image is the background of a layer, because i can use a different sized image for each stylesheet where the background is specified, but since normal images dont have anything to do with the css file, they wont b changed.

is it possible to somehow make the image files set according to the css file, or alternatively, to have the javascript which detects the resolution, pass a variable which is inserted into the image name, e.g. image_<var>.jpg, with <var> being set by the resolution, e.g. 800x600 resolution would set var to 800, and so on?

thanks in advance!

pete.

[trib4lmaniac]

u could write out the css link dynamically with write() depending on he resolution...

<script type="text/javascript">
<!--
var sW=screen.width;
switch(sW)
{
case 640:
var UserRes='LOW';
document.write('&lt;link rel="stylesheet" type="text/css" href="low-res.css"&gt;');
break;

case 800:
var UserRes='MED';
document.write('&lt;link rel="stylesheet" type="text/css" href="med-res.css"&gt;');
break;

case 1024:
var UserRes='HI';
document.write('&lt;link rel="stylesheet" type="text/css" href="hi-res.css"&gt;');
break;

case 1152:
var UserRes='WIDE';
document.write('&lt;link rel="stylesheet" type="text/css" href="wide-res.css"&gt;');
break;

default:
var UserRes='DEF';
document.write('&lt;link rel="stylesheet" type="text/css" href="default.css"&gt;');
break;
}
//-->
</script>

You could also do images a similair way depending on whatever UserRes had been set to.

if(UserRes=='LOW')
{
document.write('<img src="low.gif">')
}
else if(UserRes=='MED')
{
document.write('<img src="med.gif".................

Hope that helps :thumbsup:

[peterward]

thanks tribal, that is pretty much perfect! one question though... will ur suggestion for the images not require that that piece of code is repeated every time there is an image in the text?

[Vladdy]

Hmmm.
So users with javascript disabled will get neither a stylesheet nor images....
Also, what does screen.width has to do with the size of the browser window awailable???

[peterward]

Hmm, what would you suggest instead then Vladdy?

[Vladdy]

Make your layout so that it adjusts (within a reason) to user's browser size and font size.
Make sure that you have no horizontal scroll bar at ~750px width (default font setting) and you do not have to scroll your content at ~600px - for example if you have side column(s) for navigation (or whatever) user with 640px screen width would have to scroll horizontally once to get content into view, but then can read the content using only vertical scroll bar.
Users with high resolution screen rarely maximize their browser window - it is hard to read back and forth across entire screen. For that reason simply set the maximum width of your body element to Xem and center it within html element - this will allow your page to expand only so far.
As a result, you can have one page with single set of graphics that will look adequate in all desktop resolutions.
For other devices - do not use any bg graphics at all.

[peterward]

The problem is that I'm doing a site something like www.golds.co.uk (although a lot better designed I hope!), and that site fits fine if you are browsing with 800x600, but when you are using 1600x1200 (like I am), its really a very small corner of the screen. Would I not be as well to use javascript, and have some sort of page which tells people who havent got javascript turned on how to do so, because the menu of my page is done in javascript anyway. You can have a look at the basic frame I have uploaded to www.wardsolicitors.co.uk. I stress though that its in a very early development state, which explains why one of the menu items is named "Bones"! :D

The main thing about the current page is that it looks fine on my computer, but readjusted to 1280x1024 you need to scroll a tiny bit to see the whole menu bar (on the assumption the page is full screened, which I know is often not the case), and on resolutions below that, it just gets worse. Really I would like to find some happy medium so that I didn't have to use javascript, but on the other hand, I'm not too keen on having 1 size fits all.

I'm just rambling really, but if you have any ideas??

**Just as an afterthought... since the page is basically going to be done using CSS, would it be unwise to assume that because a persons browser is capable of supporting CSS2, it is capable of supporting javascript? Because its really not going to be feasible for me to provide an alternative for CSS incapable browsers, unless someone has a very nifty trick! :)

[peterward]

btw, just wanted to add that I am also going to do a text menu in noscript tags for anyone who doesnt have java...

[Vladdy]

That is a pretty bad design to emulate.
No reason to make your navigation JS dependent: www.vladdy.net/Demos/CSSNav.html
Design your graphics so that page flexibility is taken into account and then design your CSS accordingly - the hardest part of doing flexible designs is changing your mindset:
www.vladdy.net/Demos/WardSolicitorsVK.html
:thumbsup:

[bradyj]

Just two cents, I'm 1600x1200 and I never use a full screen -- your 800x600 looked fine on my screen as is. I've got too many windows open otherwise... anything bigger might take too much of my real estate.

[trib4lmaniac]

Hmmm.
So users with javascript disabled will get neither a stylesheet nor images....
Also, what does screen.width has to do with the size of the browser window awailable???

He did ask for it to be set via the resolution, not the browser size. Unless I'm very much mistaken resolution is screen.height/width :D

Yes pete you would have to write out the script for each img, and it would be best to include <noscript> after each one displaying a noscript image/css file.

[trib4lmaniac]

By the way it would be SO much easier if you had a server side language!

[peterward]

Well, I've not really got started on it, so i could... only problem is, I'm not really versed in any server side languages! :( What would be the best language to do it in though?

[peterward]

No reason to make your navigation JS dependent: www.vladdy.net/Demos/CSSNav.html

doesnt that navigation bar require javascript to make it work in IE anyways? :confused:

[mindlessLemming]

doesnt that navigation bar require javascript to make it work in IE anyways? :confused:

View the source of the demo page that vladdy kindly provided. It's just some simple CSS and one line of html.
:thumbsup:
"Happiness is a web that doesn't need javascript"

[peterward]

I read in another post which included a link to Vladdy's menu that it needs a little javascript to make it work, so i decided to try the menu with javascript disabled, and it stopped working...

If it won't work without js, am I not just as well to use my original js menu and include <noscript> tags for people with js turned off?

[mindlessLemming]

:o:o:o
Whoops! I was talking about the other link he provided...
That's what I get for posting after midnight with only 3 hours sleep in the last 2 days....

//retires for the night.

[ronaldb66]

Being on the other side of the world and thus still - relatively - awake, I didn't see any JavaScript in Vladdies example, just a bit of IE behaviour whachamacallit to correct IE's lack of :hover support on other elements then a. For compliant browsers, all the dynamics are done through CSS pseudo-classes.
Then again, opinions about pop-out menus tend towards not being very user-friendly, so you might want to reconsider using them anyway.

[peterward]

Wouldn't you reckon the javascript is contained in the htc file? I've not looked at it, so I couldn't say, but I'm assuming that since Vladdy said in one thread that it takes a little js to make it work, that that's what it is.

Any ideas for an alternative navigation structure? The thing I like about the popout menus is that you don't have to browse through several levels of pages to find what it is you're looking for...

[Vladdy]

doesnt that navigation bar require javascript to make it work in IE anyways? :confused:

Just for IE you do need a simple HTC file.
If IE users with JS disabled concern you, have default styling for IE such that displays the menu lists expanded in a tree form, and then use body onload to change styling to pop-up form...

[peterward]

How do I do that?

[firepages]

Vladdys menu is very groovy (and fast) , especially in IE , but does anyone else have an issue using it in Moz or Firefox , with both of those I found it impossible to get past the first sub level as the menu dissapeared almost immediately ?

err but my point/question was , whilst I think that people with JS turned off probably read the wrong tech columns ... is there not a way to load a style sheet , but if javascript IS on , to then override that stylesheet with the preffered stylesheet ?

frankly accessability is not an issue in corparate intranets etc so the need does arise , I dont see why I should pander to the needs of a spotty lynx user for much of my work for instance.

In other works the accessability/compliance or bust line taken here so often needs to be seen with such in light , at the end of the day a paying client gets what a paying client wants , I have clients who would have a fit if a page was not stretchy and did not fill every pixel of the screen & others who prefer whitespace every time , and almost ALL would not accept links to external sites opening in anything else but another window ....

pipers & tunes !

[mindlessLemming]

and almost ALL would not accept links to external sites opening in anything else but another window ....

Click
"Yeah but where did my site go?"
"It's against accessibility guidlines too..."
"I don't care! Where did MY site go??"

So very true.