mreigle Posted January 27, 2006 Posted January 27, 2006 This is the strangest problem I've had in a long time. It seems like i'm doing everything right! (although, that's usually the case i guess...) I'm trying to implement a JavaScript that offers a different stylesheet to visitors with different screen resolutions and for the last 3 hours I have not been able to get it to work. Everything seems perfect. I even got 3 different scripts off of the net from different places that all do the same exact thing and have the same effect. I even stole a script from a site that had the same script, just to be sure that I had one that was functional. I saw it working with my own eyes. Yes, I have JavaScript enabled in my browser. There are no problems with the stylesheet. The site looks fine when I use the style sheet without the JavaScript. Here is EXACTLY what I have DIRECTLY after my <head> tag: <script language="JavaScript" href="http://www.preciousbedding.com/window_size.js"> I've tried both local form and remote form for the href value. I've checked my log files and there are requests for window_size.js. Here is the EXACT content of window_size.js (it is in the same exact directory as the style sheet and index.php, the page I am trying to implement the script on [public_html]): <!-- 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="1600.css">'); } if (winW <= 1280) { document.write('<link rel="stylesheet" type="text/css" href="http://www.preciousbedding.com/stylesheet.css">'); } if (winW <= 1024) { document.write('<link rel="stylesheet" type="text/css" href="http://www.preciousbedding.com/stylesheet.css">'); } if (winW <= 800) { document.write('<link rel="stylesheet" type="text/css" href="http://www.preciousbedding.com/stylesheet.css">'); } if (winW <= 640) { document.write('<link rel="stylesheet" type="text/css" href="640.css">'); } --> With this setup, my entire index.php page is just a blank white. All of the source code shows up when you do "view source", but the page doesn't show up in IE6. You can see it in action: www.preciousbedding.com --let me know if you get something different... I'm using 1024 to test the script. I've changed the values for the 1280, 1024, and 800 resolutions all to stylesheet.css (the original that came with osCommerce, I'm SURE it works) in the hopes that for some reason the script was identifying my browser to be a resolution that it really wasn't. No luck there. Once again, the stylesheet.css is in the same directory as the JavaScript file and the index.php file. I've tried the remote-form href's in the JavaScript file also. I've also tried directly placing the JavaScript directly into the index.php file instead of using a remote .js file. No luck there (i did all of the above to the script when it was directly placed into the index.php file also). Can anyone, for the love of god, think of anything that I have missed? I _REPEAT_ Can ANYONE, for the LOVE of GOD, think of ANYTHING, that I have MISSED??? Even if it's a wild shot, please throw it at me. Please, if you love Jesus, you will do this. Thanks! PS: I don't suppose there's a PHP script that can check screen resolution and offer up a different stylesheet, is there? I'm a half-ass programmer... more of an "implementer".
241 Posted January 27, 2006 Posted January 27, 2006 Have you tried <script language="JavaScript" src="window_size.js"> No longer giving free advice. Please place deposit in meter slot provided. Individual: [=] SME: [==] Corporation: [===] If deposit does not fit one of the slots provided then you are asking too much! Is your Osc dated try Phoenix raising oscommerce from the ashes.
mreigle Posted January 27, 2006 Author Posted January 27, 2006 Have you tried <script language="JavaScript" src="window_size.js"> Sure did. :)
241 Posted January 27, 2006 Posted January 27, 2006 <= would need to be == I believe so as to be if (screen.width == 1600) { document.write('<link rel="stylesheet" type="text/css" href="1600.css">'); } No longer giving free advice. Please place deposit in meter slot provided. Individual: [=] SME: [==] Corporation: [===] If deposit does not fit one of the slots provided then you are asking too much! Is your Osc dated try Phoenix raising oscommerce from the ashes.
mreigle Posted January 27, 2006 Author Posted January 27, 2006 <= would need to be == I believe so as to be if (screen.width == 1600) { document.write('<link rel="stylesheet" type="text/css" href="1600.css">'); } Changed them to =='s and still the same thing... Any more ideas?
Guest Posted January 27, 2006 Posted January 27, 2006 In the main page use: <script language="JavaScript" src="http://www.preciousbedding.com/window_size.js" type="text/javascript"></script> you need to terminate the script In the .js file remove the --> and <!-- at the end and beginning of the file. Then the page should comeup, I tried it here.
mreigle Posted January 27, 2006 Author Posted January 27, 2006 In the main page use: <script language="JavaScript" src="http://www.preciousbedding.com/window_size.js" type="text/javascript"></script> you need to terminate the script In the .js file remove the --> and <!-- at the end and beginning of the file. Then the page should comeup, I tried it here. The page now comes up, but it's not using the stylesheet.css. HMMMMMMMMMMMM...... the url for stylesheet.css is http://www.preciousbedding.com/stylesheet.css. I'm sure it exists. I'm sure it's typed correctly because when I cope the URL to the address bar it shows up. I've tried both local and remote URLs for its reference in the .js file. The .js file now looks like this: 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="1600.css">'); } if (winW == 1280) { document.write('<link rel="stylesheet" type="text/css" href="stylesheet.css">'); } if (winW == 1024) { document.write('<link rel="stylesheet" type="text/css" href="stylesheet.css">'); } if (winW == 800) { document.write('<link rel="stylesheet" type="text/css" href="stylesheet.css">'); } if (winW == 640) { document.write('<link rel="stylesheet" type="text/css" href="640.css">'); }
mreigle Posted January 27, 2006 Author Posted January 27, 2006 I seem to have fixed the problem. Here are the new contents for window_size.js: if ((screen.width>=1280) && (screen.height>=1024)) { //alert ("1280 X 1024"); document.write ("<link REL=STYLESHEET TYPE='text/css' HREF='stylesheet.css'>"); } else if ((screen.width>=1024) && (screen.height>=768)) { //alert ("1024 X 768"); document.write ("<link REL=STYLESHEET TYPE='text/css' HREF='stylesheet.css'>"); } else if ((screen.width>=800) && (screen.height>=600)) { //alert ("800 X 600"); document.write ("<link REL=STYLESHEET TYPE='text/css' HREF='stylesheet.css'>"); } Of course, I'm going to be using a different stylesheet for the different resolution. I just used the same one here to make sure it worked. Thanks everybody.
New 
Recommended Posts
Archived
This topic is now archived and is closed to further replies.