screen resolution question - revisited again...

adavis

I know this has been done and done, but I didn't see anyone address my specific question. What I want to do is to built my css on the fly. Is that at all possible? Right now, I use a js to direct to one of 5 css files. It works okay, but every time I need to add a new style, I have to do it 5 times. Here's what I have right now:

<!-- default css -->
<link rel="stylesheet" type="text/css" href="0800.css">
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
if (screen.width == 640)  { 
  document.write('<link rel="stylesheet" type="text/css" href="style-0640.css">'); 
}
if (screen.width == 800)  { 
  document.write('<link rel="stylesheet" type="text/css" href="style-0800.css">'); 
}
if (screen.width == 1024) { 
  document.write('<link rel="stylesheet" type="text/css" href="style-1024.css">'); 
}
if (screen.width == 1280) { 
  document.write('<link rel="stylesheet" type="text/css" href="style-1280.css">'); 
}
if (screen.width == 1600) { 
  document.write('<link rel="stylesheet" type="text/css" href="style-1600.css">'); 
}
//  End -->
</script>

What I want to do is to build variables (mainly font sizes ) with the javascript and then plug those into the values into the styles and then not have an external call to the .css file. Since I only have one header file, it would be a lot less work than changing/adding to 5 style sheets every time I want to change something. Here are a few entries in my style sheet:

.txtBL12    { color: #000000; font-size: 12px; }
.txtMR12    { color: #660033; font-size: 12px; }
A.aBlMr12        { COLOR: #0000FF; text-decoration: none; font-size: 12px; }
A.aBlMr12:hover  { COLOR: #660033; text-decoration: underline; }

So... is there any way to set a variable (say font size) in javascript and then use that in the style???

xblue

I think it should be possible to have all the style definitions that aren't supposed to change in one external style sheet, and those that change directly in the html output, something like

if (screen.width == 640) {
document.write('<style>...</style>');
}

however I'm much more into php than javascript, so perhaps a javascript forum might be the better place for this?

adavis

I too am weak in javascript and much stronger in PHP. I've got a perl friend that I need to ask. If it can be done in Perl, I think I can replicate in PHP. But, what I had in mind was something like:

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
if (screen.width == 640)  { document.write('<? $font12 = "10px"; ?>'); }
if (screen.width == 800)  { document.write('<? $font12 = "11px"; ?>'); }
if (screen.width == 1024) { document.write('<? $font12 = "12px"; ?>'); }
if (screen.width == 1280) { document.write('<? $font12 = "13px"; ?>'); }
if (screen.width == 1600) { document.write('<? $font12 = "14px"; ?>'); }
//  End -->
</script>
<style type="text/css">
.txtBL12    { color: #000000; font-size: <?=$font12?>; }
.txtMR12    { color: #660033; font-size: <?=$font12?>; }
A.aBlMr12        { COLOR: #0000FF; text-decoration: none; font-size: <?=$font12?>; }
A.aBlMr12:hover  { COLOR: #660033; text-decoration: underline; }
</style>

xblue

ummm, I doubt that it can be done in perl or any other serverside language, at least not until the page is re-submitted, simply because the resolution is not sent along with the page request as far as I know, so php or perl cannot access it.

hope that makes some sense to you, and best luck.

adavis

I got this to work, but only with javascript, no PHP:

<html>
<head>
<title>Untitled</title>
<SCRIPT LANGUAGE='JavaScript'>
<!-- Begin
var font12;
if (screen.width == 640)  { font12 = '10px'; }
if (screen.width == 800)  { font12 = '11px'; }
if (screen.width == 1024) { font12 = '12px'; }
if (screen.width == 1280) { font12 = '13px'; }
if (screen.width == 1600) { font12 = '14px'; }
document.write ('<style type="text/css">');
document.write ('.txtBL12 { color: #000000; font-size: '+font12+'; }');
document.write ('.txtMR12 { color: #660033; font-size: '+font12+'; }');
document.write ('A.aBlMr12 { COLOR: #0000FF; text-decoration: none; font-size: '+font12+'; }');
document.write ('A.aBlMr12:hover { COLOR: #660033; text-decoration: underline; }');
document.write ('</style>');
document.write (font12);
//  End -->
</script>
</head>
<body>
<div align="center">
 <table border="1" cellpadding="3" cellspacing="0">
  <tr><td class="txtBL12">Test Black font 12</td></tr>
  <tr><td class="txtMR12">Test Maroon font 12</td></tr>
  <tr><td><a href="http://www.google.com/" class="aBlMr12">Test Link</a></td></tr>
 </table>
</div>
</body>
</html>

my screen width was 1024 so I got a 12px displayed.