Javascript CSS!

[Dante]

So - I know java-scriptisn't my forte, for the most part I leave it alone and would rather play with other languages. Unfortunately, the only way to acquire my users screen resolution seems to be with java-script and so I have to figure out a way to flip between style sheets developed for high and low resolution alike via this method. Thing is - it's not exactly working and it's an extremely simple program so it's driving me crazy. Particularly, it finds the css file I'm looking for, but it doesn't load the background images >_< - just the other formatting.

Just for details, here's what I tried to do,

When I started, the first thing I tried of course, was to just write tag with the css file in the header.

Code: Select all

   //Screen width
   screenWidth = screen.width;
   
   //Root string values
   rootString = "css/web/verRes/";
   defaultRootString = "css/web/";

   //Select which screen resolution css files to utilize
   if( (screenWidth >= 1030) && (screenWidth < 1060) ) //1050
   {
      fileName = rootString + "1050" + "/default.css\" />";
   }
   else if ( (screenWidth >= 960) && (screenWidth < 1030) ) //1024
   {
      fileName = rootString + "1024" + "/default.css\" />";
   }
   else if ( (screenWidth >= 850) && (screenWidth < 960) ) //900
   {
      fileName = rootString + "900" + "/default.css\" />";
   }
   else if ( (screenWidth >= 785) && (screenWidth < 850) ) //800
   {
      fileName = rootString + "800" + "/default.css\" />";
   }
   else if ( (screenWidth >= 744) && (screenWidth < 785) ) //768
   {
      fileName = rootString + "768" + "/default.css\" />";
   }
   else if ( (screenWidth >= 650) && (screenWidth < 744) ) //720
   {
      fileName = rootString + "720" + "/default.css\" />";
   }
   else if (screenWidth < 650) //600
   {
      fileName = rootString + "600" + "/default.css\" />";
   }
   else //Default value (large wide screen)
   {
      fileName = defaultRootString + "/default.css\" />";
   }
   
   document.writeln("<link rel=\"stylesheet\" media=\"screen\" type=\"text/css\" href=\"" + fileName);

The problem with that was that it loaded the css for everything else, but ignored all the locations of my background images. Why background images? I don't know.That stated, I thought I might get better luck using a more 'traditional' approach that I found on the net:

Code: Select all

   //Screen width
   screenWidth = screen.width;
   
   //Root string values
   rootString = "css/web/verRes/";
   defaultRootString = "css/web/";

   //Select which screen resolution css files to utilize
   if( (screenWidth >= 1030) && (screenWidth < 1060) ) //1050
   {
      fileName = rootString + "1050" + "/default.css";
   }
   else if ( (screenWidth >= 960) && (screenWidth < 1030) ) //1024
   {
      fileName = rootString + "1024" + "/default.css";
   }
   else if ( (screenWidth >= 850) && (screenWidth < 960) ) //900
   {
      fileName = rootString + "900" + "/default.css";
   }
   else if ( (screenWidth >= 785) && (screenWidth < 850) ) //800
   {
      fileName = rootString + "800" + "/default.css";
   }
   else if ( (screenWidth >= 744) && (screenWidth < 785) ) //768
   {
      fileName = rootString + "768" + "/default.css";
   }
   else if ( (screenWidth >= 650) && (screenWidth < 744) ) //720
   {
      fileName = rootString + "720" + "/default.css";
   }
   else if (screenWidth < 650) //600
   {
      fileName = rootString + "600" + "/default.css";
   }
   else //Default value (large wide screen)
   {
      fileName = defaultRootString + "/default.css";
   }
   
   var fileref = document.createElement("link");
     fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
     fileref.setAttribute("href", fileName);

     var headID = document.getElementsByTagName("head")[0];
     headID.appendChild(fileref);

Unfortunately, this does the same exact thing. Proper formatting, but the images don't show up in the backgrounds and variable images sizes (which I painstakingly re-sized and formatted in PSP 7) are the main reason for resizing these things (everything else I could do with ems and %s).

So - has anyone ever run into this one before in designing dynamic CSS files.. and if so, how did you figure out how to get your background images back?

Thank you,
Dante

[Kaligraphic]

Unless you're trying to improve display on mobile devices, I'd recommend making your layout a bit less resolution-dependent. You've got different CSS files for 768px and 720px screen widths. Do those last 48px really make that big of a difference? Do the next 42px to the 800px wide stylesheet really change that much? If so, you'll be horrified to learn that many people don't use their full screen width for their browsing. It's actually quite common to have a browser window with a substantially smaller usable size than the full screen resolution. Likewise, zoom functions may scale your background to an unintended size.

Also, make sure you're not assuming a particular aspect ratio. It's easy to rely on width detection, assume 4:3 aspect ratio, and build on height you don't have on 16:9 or 16:10. Likewise, you may assume widescreen, and end up letterboxing on a 4:3 monitor.

Use one stylesheet for all resolutions, specify a reasonable default background image size, and for modern browsers, take a look at background-size (css3.info). If you still need to use different background resolutions, consider that you don't need to change out the whole stylesheet. You can change the background-image property directly from Javascript.

There's also the old "stretch an image across the screen, nail it down with z-index, and pretend it's a real background" trick, too, if you're feeling old school.

[Dante]

No they don't change that much - I was even a bit embarrassed when I realized that I had edited for all of those variations (by the time I realized what I was doing though, it was already too late). As a whole, I tried to size just about everything in ems, as I've read that it's the best for cross-browser compatibility.

I currently use a REALLY widescreen monitor and designed the site so that it would work just fine on different ratios and for the most part it even works fine at different screen resolutions. Jumping from my current resolution to 800x600 cuts my available space by 55% though, which results in a web banner that eats up 40% of the webpage that normally takes up a meager 20% .

I normally would have utilized background-size, but as I soon found out, CSS3 isn't widely supported by all browsers as of yet (if only other browsers could be as diligent as Firefox). Likewise, I'd of even tried to add the images in as <img>s, 'faking' the background. But the latter part tends to result in positioning problems and then I'm using the native browser scaling system. With the current method, I was able to scale them as pixels alone, or via bilinear or bicubic sizing methods in a graphics program and I was also able to choose how many colors they'd use (the max color schema on the larger ones is limited to 7 web-safe colors, while the smaller ones naturally use more colors to perform anti-aliasing).

Actually, why am I describing it, here's what it currently looks like (results will vary depending upon browser and screen resolution - but everything shows up as it lacks the Javascript )

http://tensor-industries.com/PandaCoder/base.html

EDIT: And... that didn't work either. Well, I've found a whole bunch of ways that don't work. I can't even dynamically create the images for the navigation bar (the biggest issue when you reach 800x600 for the screen resolution - the page becomes essentially unreadable).

[Dante]

Well - I've gotten the navigation images to change. Apparently the trick that all the sites were ignoring was that you had to load the images in the header first (which makes sense as you're disconnected from the website afterwards).

Once you load those as images into Javascript, you can then access their src value which you can pass on as a location for the new images. Using this, I was able to dynamically change my navigation button sizes.

Javascript

Code: Select all

//Program: bgImgSelector
//Date: 09/08/2011

//Set of cached images
var homeNavIMG = new Image();
var aboutNavIMG = new Image();
var projectsNavIMG = new Image();
var resumeNavIMG = new Image();
var contactNavIMG = new Image();

//Determine the width of the screen
var screenHeight= screen.height;

//Set the root values
var rootString = "images/navigation/varRes/";
var defaultRootString = "images/navigation/";

//Set up all SRCs
homeNavIMG.src = cacheImages("Home");
aboutNavIMG.src = cacheImages("About");
projectsNavIMG.src = cacheImages("Projects");
resumeNavIMG.src = cacheImages("Resume");
contactNavIMG.src = cacheImages("Contact");


//cached image src locater
function cacheImages(filName)
{
   //Select which screen resolution css files to utilize
   if ( (screenHeight >= 850) && (screenHeight < 950) ) //Hi Res
   {
      fileLoc = rootString + "900/" + filName + ".png";
   }
   else if ( (screenHeight >= 675) && (screenHeight < 950) ) //Med Res
   {
      fileLoc = rootString + "768/" + filName + ".png";
   }
   else if (screenHeight < 675) //Low Res
   {
      fileLoc = rootString + "600/" + filName + ".png";
   }
   else //Default Xtra Hi Res
   {
      fileLoc = defaultRootString + filName + ".gif";
   }
   
   return fileLoc;
}

function loadNavImages()
{
   //Set up all navigation images
   document.getElementById("home").src = homeNavIMG.src;
   document.getElementById("about").src = aboutNavIMG.src;
   document.getElementById("projects").src = projectsNavIMG.src;
   document.getElementById("resume").src = resumeNavIMG.src;
   document.getElementById("contact").src = contactNavIMG.src;
   
   return false;
}

Just opening this code up in the header and running loadNavImages() using an onLoad event caller in the Body changes the images as I need them. Too bad the API for changing background images isn't exactly the same. I've been trying to pass cached background image into my files via something like this

[INDENT]document.getElementById("bodyTag").style.backgroundImage = 'url(' + backgroundIMG.src + ')';[/INDENT]

Once again, the images just dissapear, which tells me that it's not finding the images I've placed in there. Anyways, it felt great to get that to finally work - I spent the last couple of days just banging my head and making absolutely no progress what-so-ever. Then BANG it just works O_o. Just a bit more and I'll have a fully dynamic webpage that caters to my users every whim... to the best of my ability.

Hopefully going to find something new and fun soon,
-Dante

[Slater]

Have you looked into 3rd party javascript plugins to help with this? I've worked with GWT and Wicket and both have User Agent management that allows you to detect what resolution the user's browser is. I'm sure there are a few Javascript libraries out there that can do most of the heavy lifting for you.

[Dante]

Hmm... I haven't ever thought of that, always figured I'd need to build my own code for it - but if it is out there, there's no use for me to reinvent the wheel.

[Kaligraphic]

Why the change to height instead of width?

[Dante]

Why the change to height instead of width?

Because I realized that 600px was the height parameter and not a width parameter. I'm measuring the external screen-size though, so the browser add-ons shouldn't matter much.I just want it to fall in the general vicinity of my users resolution, as long as it renders in way that looks professional, I'm not going to go bezerk about perfection.

[Dante]

And I got it! Ok, so it took a ton of work but I finally figured out a way to do what I was looking for. For the other background images, and for the other CSS styles, I had to select each element by ID and then flip it's ID or Class name to that of an element with the proper values that I was looking for.

It's a bit long-winded to be certain, but it does the trick nicely. The results (now much more screen-resolution compliant with j-script enabled) can be seen here:

http://tensor-industries.com/PandaCoder/Base.html