I wrote my music site in php (not that I needed to; just to see if I could), and I'm noticing that it displays poorly in IE6 and older and in resolutions above 1024x768.
The main page of the site is centered around a large background image, and all the text and menu stuff is on top of it. I'd like to detect the user's screen resolution and, if it's larger than 1024x768, display a larger background image.
Is there a simple way to do this? I've seen some javascript code that supposedly does this, but I don't know squat about js.
Posted by fugu13 (Member # 2859) on :
The only simple ways are using javascript.
Give whatever element you are setting the background image on (presumably using CSS) an id and a class. Set all but the image properties in a selector using the id, and all the image properties in a selector using the class. Also have another class in your CSS that has the larger image properties. (You can forego the id if you set the properties on a unique element, such as body, though it could still be helpful for the javascript).
Perhaps the id is 'content', the original class is 'small', and the new class is 'large'.
Put the following javascript (inside a script tag) into your page. It should be okay in the document head somewhere.
Warning, untested, post here if that doesn't work.
Posted by MrSquicky (Member # 1802) on :
If you are planning to do anything more complicated, you can get the resolution into php by reading it in javascript, writing a cookie, and then reading the cookie in php. This is a pretty standard way of passing informstion between them.
Posted by El JT de Spang (Member # 7742) on :
Thanks, I'll try that. It won't be today, though, cause I don't have ftp access right now.
I'm bookmarking this thread.
Posted by NotMe (Member # 10470) on :
Be careful how large you scale things. If you stretch the body text wider than 1024, you will probably end up with lines that are too long to be readable. Use the extra horizontal space for columns of things like navigation links.
There's also nothing wrong with just not stretching things horizontally, either. Even though my screen is 1680 pixels wide, I almost never have my browser taking up more than two-thirds of the width, because most sites will stretch text across 17".
Posted by fugu13 (Member # 2859) on :
The cookie method would be inferior to ajax or json (edit: via dynamic script tags) in this case, likely (and in most cases).