Resolution trouble, the bad sort

TVPR · 05-20-2004

Right, erm, I think I've ruined things for myself, but you all know the Lyesmith 3.0 thread I started? I bet you do. I've been attention-craving about it ever since it started. However, now, version 4 of the site is about done. But it's huge. As in, massive. I thought I was clever, but was horribly wrong. So, this is the problem:

How can I eliminate the need for scrolling? It's far too wide now. Is there any way to read the client computer's resolution, and adjust its view accordingly? I think that has been done some places, I don't know. Take a look at the site, you'll see what's the problem... :/

**Man1c M0g** · 05-20-2004

Ahhhhh, I had similar problems with my design for http://www.right-turn-productions.com. In the end I solved it by having an invisible loader page which then analyzed the size of the browser window, and passed a mySQL variable to the main design, which then selected formatting appropriately. I've posted the resolution-setting javascripting below for your viewing pleasure.

Code:

<script language="Javascript"><!--

if (screen.width <= 800) {
document.location = "interface.php?res=low";
}

if (screen.width > 800) {
document.location = "interface.php?res=high";
}

//-->
</script>

malboroman · 05-20-2004

as far as the scrolling is concerned... you can turn it off by using this piece of code in the 'body' tag...

Code:

<body scroll="no">  </body>

TVPR · 05-20-2004

Thanks a whole screaming bunch, the both of you!

However, M0g: I don't have MySQL - but I do have PHP4 - on my host, so I don't know if I can do it. Also I'm really unfamiliar with php... So, erm, what do I have to do? Make new pages etc? I'm totally blank. And I really hope I don't have to make one separate version for the lower-res-than-1280 users... As I sliced the picture in 81 slices. And it took some time. And I love your tut's

**Man1c M0g** · 05-22-2004

Ahhhh, don't worry TVPR, the technique I use only involves PHP code, and no mySQL. Anyway, what you need to do is pop the resolution detecting code above in a file called index.html. This will then call a file called interface.php, which includes the following code:

Code:

<?
// PHP Variables for different page sizes (each defined according to type)

// If low rez
if ($res == 'low') {
    $centercell = "374";
    $bgfile = "images/bg1.jpg";
    $iframesize = "240";
    $menusize = "";
    
// If high rez 
} elseif ($res == 'high') {
    $centercell = "574";
    $bgfile = "images/bg2.jpg";
    $iframesize = "440";
    $menusize = "410";
    
// If blank or invalid input - defined as copy of low rez
} else {
    $centercell = "374";
    $bgfile = "images/bg1.jpg";
    $iframesize = "240";
    $menusize = "";
}

?>

Then include your design HTML in the interface.php file as normal. In bits you want to be variable sizes, replace the pixel height/width with the variable above that depends on resolution with:

Code:

<? echo($VARIABLENAME); ?>

i.e. so you get <td width="100%" height=<? echo($centercell); ?>>, etc.

This isn't the simplest way of doing it, nor the most elegant, but it works an absolute charm and allows variable sizes without the use of alternating style-sheets, totally-seperate low-resolution pages, etc.

TVPR · 05-22-2004

Copied and pasted

However, I'll simply stick to my current setup, a separate page for low-res users... Pop your res below 1152, and visit my site, you'll see

I used the code tidbit you originally posted for an autodetect thingie, and uploaded yesterday or so - right before I posted the LS.net v4.1 topic.

Order · 05-23-2004

Yes, the standard size for web design is still 800x600, and it is always safe to design for that, but allow for bigger resolutions at the same time..