Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Multiple css 2

Status
Not open for further replies.
mariocapone

mariocapone

Technical User
Dec 8, 2004
5
IT
Hi
its possible to create a javascript for detect screen resolution size, and generate a font style sheet dynamically and automatically.

For example i have 2 css files.
800x600.css
1024x768.css
Its possible, when the screen resolution is 800x600, to load automatically the 800x600.css? How i can?

Thank's in advance

ps, sorry for my poor english
 
Sort by date Sort by votes
Thank you,

found this script

-------------
var s_width ='';
var s_height ='';
s_width=screen.width
s_height=screen.height

if (s_width == "800"){
location.href="page1.htm";
}

if (s_width == "1024"){
location.href="page2.htm";

}

--------------------

i think is good, but i want to change this
line:
location.href="640_x_480.htm"; because i dont want a redirect, i only want load my file 800x600.css (or 1024x600.css)

Thank you very much for your help
 
Upvote 0 Downvote
First of all, try using smaller (or equal) and larger (or equal) than rather than equals in your script. I use 1284 res, your script would just barf at that. Next, you should make sure something happens if the user does not have JavaScript enabled. Again, your script will stop on that. Maybe do something like:
Code: 
<link rel="stylesheet" href="800.css" type="text/css" id="MyStyleSheet" />
<script type="text/javascript">
var s_width ='';
var s_height ='';
s_width=screen.width
s_height=screen.height

if (s_width >= "1024"){
document.getElementById("MyStyleSheet").href = '1024.css';
}
</script>
This is untested.
 
Upvote 0 Downvote
Code: 
<html>
<head>
<link rel="stylesheet" src="noscript.css" id="styles">
<script type="text/javascript">
<!--

var w = screen.width;
var h = screen.height;
var sheet = document.getElementById("styles");

if (w == 1024)
  sheet.src = "1024x600.css";
else if (w == 800)
  sheet.src = "800x600.css";
else
  sheet.src = "default.css";

// -->
</script>
<!-- etc -->

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakespearean sonnet.
 
Upvote 0 Downvote
Upvote 0 Downvote
Funny that you are using my script and giving chessbot a star ;-)
 
Upvote 0 Downvote
Im sorry, my fault...i have used this script
-----------
<link rel="stylesheet" href="800.css" type="text/css" id="MyStyleSheet" />
<script type="text/javascript">
var s_width ='';
var s_height ='';
s_width=screen.width
s_height=screen.height

if (s_width >= "1024"){
document.getElementById("MyStyleSheet").href = '1024.css';
}
</script>
------------(posted by Vragabond)

Thanks also for chessbot, i have tryed the script posted by chessbot, but dont' work properly, but thanks very much anyway.

My last question:
i have tryed to edit your script, but im a newbie, and the script edited by me dont' work.

I have tryed to edit this:

---------
<link rel="stylesheet" href="800.css" type="text/css" id="MyStyleSheet" />
<script type="text/javascript">
var s_width ='';
var s_height ='';
s_width=screen.width
s_height=screen.height

if (s_width = "1024"){
document.getElementById("MyStyleSheet").href = '1024.css';
}

if (s_width = "800"){
document.getElementById("MyStyleSheet").href = '800.css';
}

</script>
-------------
but this script edited by me dont work. I want to add more css files (example 1152x864css ecc.) where is the error?

Anyway, thanks very much all for help me




 
Upvote 0 Downvote
You are assigning value (=) in your ifs not testing it (==). Consider this:
Code: 
<script type="text/javascript">
var s_width = '';
var s_height = '';
s_width = screen.width;
s_height = screen.height;
var style = document.getElementById("MyStyleSheet");

switch (s_width) 
{
  case 800:
    style.href = '800.css';
    break;
  case 1024:
    style.href = '1024.css';
    break;
  case 1152:
    style.href = '1152.css';
    break;
  default:
    break;
}
</script>
This way you can have as many as you want. Default says if it doesn't match any, leave as is.
 
Upvote 0 Downvote
This is good, now i can add more css files. For expample with resolution 800x600 i want fonts 11px....(stored in 800x600.css)

with resolution 1024x768 i want fonts 13px....(stored in 1024x768.css)

i go to test and edit my pages
thank you for you reply, very helpful.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
816
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
643
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
696
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
229
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top