473,225 Members | 1,187 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,225 software developers and data experts.

detect screen change stylesheet

I have a perl script that i use to render a html page. In that page i
call out a stylesheet. If the user has a 800x600 display the fonts are
really too big.

Since screen resolution is a function of the client and I have this
javascript ot detect the srecc size:
function ck_res()
{
if ( (screen.width != 1024) && (screen.height != 768) )
{
alert(" This graphic is best viewed at 1024 x 768 ! ");
// use a different stylesheet
}
}

How would I go about changing the style sheet that is being called on
the page?

Mike

Jul 20 '05 #1
7 14498
Michael Hill <hi****@ram.lmtas.lmco.com> writes:
I have a perl script that i use to render a html page. In that page i
call out a stylesheet. If the user has a 800x600 display the fonts are
really too big.
....
How would I go about changing the style sheet that is being called on
the page?


Before answering, I would first suggest that you just don't set the font
size in the style sheet. No matter what resolution, monitor size, and
browser size, the user is likely to have set up his browser, so that
the default font fits him. If you just use the default font size, the
font will be satisfactory to the user. Even if he has bad eyesight and
a 24pt font on a 18 inch monitor at 800x600.

Now, if you insist on having different stylesheets, I recommend having
a default stylesheet that is always loaded, and separate stylesheets
that are added with Javascript, and which overload only what they need
to. That way the page will also work without javascript.

<script type="text/javascript">
if (screen.width <= 800) { // or some other arbitrary condition
document.write("<style type='text/css' src='lowres.css'><\/style>");
}
</script>

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #2
See comments below, Mike

Lasse Reichstein Nielsen wrote:
Michael Hill <hi****@ram.lmtas.lmco.com> writes:
I have a perl script that i use to render a html page. In that page i
call out a stylesheet. If the user has a 800x600 display the fonts are
really too big.
...
How would I go about changing the style sheet that is being called on
the page?


Before answering, I would first suggest that you just don't set the font
size in the style sheet. No matter what resolution, monitor size, and
browser size, the user is likely to have set up his browser, so that
the default font fits him. If you just use the default font size, the
font will be satisfactory to the user. Even if he has bad eyesight and
a 24pt font on a 18 inch monitor at 800x600.


Yes I have a default style sheet being loaded now that specifies many
attributes about that tag, the color, etc...

So yes if the user has his browser set-up to use his fonts, then it will
over-ride those I am using. But it doesn't over ride the size I am using
does it?

For example:
If a user is using 1024x768 I'd like to use font size 14, but if they are
using 800x600 then use 12. I would do this by something like you script
below, i.e.

<script type="text/javascript">
if (screen.width <= 800)
{ // or some other arbitrary condition
document.write("<style type='text/css' src='lowres.css'><\/style>");
}
else
{
document.write("<style type='text/css' src='default.css'><\/style>");
}
</script>

Doesn't this sound like a good practice?

Now, if you insist on having different stylesheets, I recommend having
a default stylesheet that is always loaded, and separate stylesheets
that are added with Javascript, and which overload only what they need
to. That way the page will also work without javascript.

<script type="text/javascript">
if (screen.width <= 800) { // or some other arbitrary condition
document.write("<style type='text/css' src='lowres.css'><\/style>");
}
</script>

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'


Jul 20 '05 #3
Michael Hill <hi****@ram.lmtas.lmco.com> writes:
Yes I have a default style sheet being loaded now that specifies many
attributes about that tag, the color, etc...

So yes if the user has his browser set-up to use his fonts, then it will
over-ride those I am using. But it doesn't over ride the size I am using
does it?
My browser does. I have a CSS rule in my user style sheet that says
body {font-size:100% !important;}
That means that any font size change you try on the body element will
fail, and I get my preferred font size.
For example:
If a user is using 1024x768 I'd like to use font size 14, but if they are
using 800x600 then use 12.
What if they are using 800x600 on a 10 inch screen?
What if they are using 1025x768 on a 28 inch screen?
What if they are near sighted and want larger fonts?
What if ... you catch the drift! You can never predict how the user
wants their fonts, or which fonts will even be readable for them.
The factors are not only screen resolution, but also screen size,
eyesight and preferences.
<script type="text/javascript">
if (screen.width <= 800)
{ // or some other arbitrary condition
document.write("<style type='text/css' src='lowres.css'><\/style>");
}
else
{
document.write("<style type='text/css' src='default.css'><\/style>");
}
</script>

Doesn't this sound like a good practice?


No. But I will claim that changing the font size is never good practice,
so I'm hard to convince.

If you *also* have a non-JS-inserted style sheet that makes the page
usable for people without javascript, then adding finishing touches
like the above will do what you ask for.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #4

"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message
news:he**********@hotpop.com...
Michael Hill <hi****@ram.lmtas.lmco.com> writes:
<snip>
What if they are using 800x600 on a 10 inch screen?
What if they are using 1025x768 on a 28 inch screen?
What if they are near sighted and want larger fonts?
What if ... you catch the drift! You can never predict how the user
wants their fonts, or which fonts will even be readable for them.
The factors are not only screen resolution, but also screen size,
eyesight and preferences.


Ok, so alot of "bad" things I am doing here, what do you do?

<script type="text/javascript">
if (screen.width <= 800)
{ // or some other arbitrary condition
document.write("<style type='text/css' src='lowres.css'><\/style>");
}
else
{
document.write("<style type='text/css' src='default.css'><\/style>");
}
</script>

Doesn't this sound like a good practice?


No. But I will claim that changing the font size is never good practice,
so I'm hard to convince.

If you *also* have a non-JS-inserted style sheet that makes the page
usable for people without javascript, then adding finishing touches
like the above will do what you ask for.

<snip>
Jul 20 '05 #5
In article <3F***************@ram.lmtas.lmco.com>, Michael Hill
<hi****@ram.lmtas.lmco.com> writes:
For example:
If a user is using 1024x768 I'd like to use font size 14, but if they are
using 800x600 then use 12. I would do this by something like you script
below, i.e.


What if the user has 1024X768 but has the browser window set at 800x600?
At the moment, mine is 2048X768 though (dual monitors) where the screen.width
alerts as 2048 but only 1024 is "available" to the browser. And as Lasse
pointed out, 1024X768 on a 24" monitor is a lot different than 1024X768 on a
15" monitor. Give the user the picture/page and let them decide what font size
they want to see. You will save yourself hours and hours of grief.

--
Randy
Jul 20 '05 #6
"Michael Hill" <hi****@charter.net> writes:
Ok, so alot of "bad" things I am doing here, what do you do?


I don't set the font size. If I do, I use percentages or em's, so
the new font size is relative to the default font size. And then
I try to make a page design that doesn't break if the fonts are
particularly large or small.

Ofcourse, I am *not* a graphical designer :)
Try changing the font size on <URL:http://www.infimum.dk/> (in Danish,
so you won't worry about the contents :)). The design and decoration
(ugly as it might be) scales to fit the font, not the other way around.

It is not perfect in IE, probably due to limitations in its CSS
support, but it looks as designed in Opera and Mozilla.

(We are getting off-topic for this group. Is there a web design group
this discussions should be moved to?)
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #7
Bravo to all who voted for relative font sizes! I use a 60" Mitsubishi
television set and the fixed font sites out there drive me nuts! There are
tons of them (many big names surprisingly.) Disheartening really. The Web
is basically a disaster area.

"HikksNotAtHome" <hi************@aol.com> wrote in message
news:20***************************@mb-m28.aol.com...
| In article <3F***************@ram.lmtas.lmco.com>, Michael Hill
| <hi****@ram.lmtas.lmco.com> writes:
|
| >For example:
| >If a user is using 1024x768 I'd like to use font size 14, but if they are
| >using 800x600 then use 12. I would do this by something like you script
| >below, i.e.
|
| What if the user has 1024X768 but has the browser window set at 800x600?
| At the moment, mine is 2048X768 though (dual monitors) where the
screen.width
| alerts as 2048 but only 1024 is "available" to the browser. And as Lasse
| pointed out, 1024X768 on a 24" monitor is a lot different than 1024X768 on
a
| 15" monitor. Give the user the picture/page and let them decide what font
size
| they want to see. You will save yourself hours and hours of grief.
|
| --
| Randy
Jul 20 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

157
by: Dennis | last post by:
Is there some way --using, say, DOM or javascript-- to detect the current pixel width and/or height of a relatively sized table or of one of its columns or rows. I'm going to be writing javascript...
48
by: David J Patrick | last post by:
I'm trying to rewrite the CSS used in http://s92415866.onlinehome.us/files/ScreenplayCSSv2.html. using the w3.org paged media standards as described at http://www.w3.org/TR/REC-CSS2/page.html ...
9
by: Steve Wright | last post by:
Hi I'm developing a webpage that needs to include a different stylesheet depending on the screen resolution. I know that I could read the resolution in javascript and then do some sort of...
2
by: JJA | last post by:
I'm trying this technique I found on Digital-Web.com in an attempt to set different stylesheets based on the width of the screen. Even when I resize the screen to my max of 1280x1024 I always get...
6
by: Christopher Glenn | last post by:
I have very basic html skills. My friend who has a wide screen monitor and is using IE7 sent me a jpg screen shot of my home page. I have attached this jpg, but I recall a while back that...
24
by: dE|_ | last post by:
I have started looking into scripts for screen size detect with the intention of using them to pick from a number of CSS style sheets tailored to the size. Is there a good reason why this is not...
0
by: =?Utf-8?B?Y2luZHk=?= | last post by:
I have a web project in NET2.0/VS 2005 C# this question is not about CSS instead why using asp.net 2.0 csharp when I am debugging, the styles defined in the Style Sheets are not appearing on the...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
by: jimatqsi | last post by:
The boss wants the word "CONFIDENTIAL" overlaying certain reports. He wants it large, slanted across the page, on every page, very light gray, outlined letters, not block letters. I thought Word Art...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.