INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS
Come Join Us!
Are you a
Computer / IT professional?
Join Tek-Tips now!
- Talk With Other Members
- Be Notified Of Responses
To Your Posts
- Keyword Search
- One-Click Access To Your
Favorite Forums
- Automated Signatures
On Your Posts
- Best Of All, It's Free!
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.
Partner With Us!
"Best Of Breed" Forums Add Stickiness To Your Site
(Download This Button Today!)
Feedback
"...I really enjoy your site. You have a lot of helpful and friendly experts who contribute so willingly. Thank you for past (and future) technical advice..."
Geography
Where in the world do Tek-Tips members come from?
|
DHTML
|
Swap the CSS file based on screen size
Posted: 3 Dec 03
|
I wrote an application and developed it assuming that 1024 screen width was common as it turns out my customer used a mix of resolutions. If I had thought about it makes perfect sence. This ugly fact reared its head when I demonstrated an Alpha version of their application and the infocus projector only had 800x600 screen resolution and 20% of my app was off the screen! and my face was VERY red.
So bad on me, a hard lesson learned and here was the fix.
<html>
<link href="manager.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
if (screen.width < 1024)
link = document.getElementsByTagName( "link" )[ 0 ];
link.href = "manager800.css";
</script>
<head>
this sample assumes a screen width 1024. If it is lower then 1024 it loads a stlye sheet designed for a width of 800.
I make heavy use of CSS for layouts and avoid use percentage layouts if text wrapping is going to be a problem. Rather then switch my design to lowest resolution I decided to extend it to three different screen widths: 800, 1024, 1280+. This allowed me to adjust the layout and font selection for different screen sizes and switch the CSS files dynamically on the fly.
Anyhow I hope this helps you and spares you my pain. Thanks to Tek-tips in helping me resolve this quickly. |
Back to Javascript FAQ Index
Back to Javascript Forum
|
|
 |
|
Join Tek-Tips® Today!
Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.
Here's Why Members Love Tek-Tips Forums:
Talk To Other Members- Notification Of Responses To Questions
- Favorite Forums One Click Access
- Keyword Search Of All Posts, And More...
Register now while it's still free!
Already a member? Close this window and log in.
Join Us Close
