Different style sheets for screen resolution?

[bigdiogi]

Found several threads related to this issue, only one of which was very helpful. In fact used the same script!

Found a javaScript to call different style sheets based on detected screen resolution. Made copies of basic style sheet with only one difference - each specifies a different sized header image since everything but the pic resizes dynamically. Named them style_1024.css and style_1280.css.

Made a jscript_css loader.js file as follows -

var winW = 0, winH = 0;

if (parseInt(navigator.appVersion)>3) {
 if (navigator.appName=="Netscape") {
  winW = window.innerWidth-16;
  winH = window.innerHeight-16;
 }
 if (navigator.appName.indexOf("Microsoft")!=-1) {
  winW = document.body.offsetWidth;
  winH = document.body.offsetHeight;
 }
}
if (winW <= 1600)  {
  document.write('<link rel="stylesheet" type="text/css" href="includes/templates/mostly_grey/jscript/style_1280.css">');
}
if (winW <= 1280)  {
  document.write('<link rel="stylesheet" type="text/css" href="includes/templates/mostly_grey/jscript/style_1280.css">');
}
if (winW <= 1024) {
  document.write('<link rel="stylesheet" type="text/css" href="includes/templates/mostly_grey/jscript/style_1024.css">');
}

and uploaded it to jscript directory of my template. Noticed when viewing page source and html_header.php that evidently style sheets are loaded BEFORE javascript files when building the page. Edited html_header.php and inverted the order, checking page source appears to have worked. Now shows javascripts before css files. BUT...

Still loads all the files in my css directory. I understand needs more than one style sheet. But is there no way to load ONE "basic" style sheet based on resolution? Right now it is loading the javaScript to check resolution, style.css, style_1024.css, and style_1280.css. NOT what I had in mind!

Maybe not possible? Better way to handle this issue? Just want a logo image that spans the page at the most common resolutions, without horizontal scroll bar.

[kuroi]

You're slightly missing the point of the script that you're using.

It's designed to load the stylesheet that you want once it's done its check. However, you've named the stylesheets to take advantage of Zen Cart's auto-loading for stylesheets.

If you rename your stylesheets so that Zen Cart ignores them, then you can return the css and javascript to it's normal order and allow your script to load the stylesheet needed.

[bigdiogi]

I miss the point quite often. This is not news!

Did/do not understand the significance of the naming convention of stylesheets in Zen Cart. But deleted the standard sheet and renamed the ones I needed the script to load and it is indeed working the way I'd hoped now. Thanks for pointing me in the right direction.

[janissaire]

Screen resolution (Displays) is 72 dpi no matter what you use.

example - if you have an image 600 dpi - that's great for printing but if you view it online even though you saved it at 600 dpi you are actually only seeing it at 72 dpi.

If you don't belive me pick a part of the screen and count the dots