Select Theme stylesheet based on clients screen resolution

**GoGetSome** · 02-29-2008, 09:26 PM

Hello, I attmepting to define and use a specific stylesheet within a theme when rendering a page based on a users screen resolution. I have two themes each with several stylesheets such as: 1024x768.css and 800x600.css. Additionaly, the theme folder contains a javascript file named stylesheetsByResolution.js (see code below) , skin file and an images folder. The java detects the clients screen resolution and is supposed to render the page as defined in the selected stylesheet. So, if the users screen resolution was 1024x768 then the 1024x768.css for the appropriate theme would be used.
With the code I'm using the proper theme is displayed, but the css that is used is the last css document in the theme folder for the appropriate theme and not the correct one for the users screen resolution. The .js and css workss works perfectly if themes are not used.
I have read around trying to find someone doing this and have not found a solution. How can I render a specific css for a specific theme based on the users screen resolution ???
Here is the code I'm working with:
In the <head> of the page I use the following code to get the resolution and select the css to use:<scripttype="text/javascript"src="App_Themes/<%#"Theme"%>/styleSheetsbyResolution.js"></script>
Here is the styleSheetbyResolution.js:
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 > 1280) {
document.write('<link rel="stylesheet" type="text/css" href="1600x1200.css">');
}
if (winW <= 1280) {
document.write('<link rel="stylesheet" type="text/css" href="1280x1024.css">');
}
if (winW <= 1024) {
document.write('<link rel="stylesheet" type="text/css" href="1024x768.css">');
}
if (winW <= 800) {
document.write('<link rel="stylesheet" type="text/css" href="800x600.css">');
}
if (winW <= 640) {
document.write('<link rel="stylesheet" type="text/css" href="800x600.css">');
}
In the code behind I get the users theme and set the page theme in the preint and send the theme to the script with a function. For clarity, I will use this for now:
PublicFunction SetTheme(ByVal Theme AsString) AsString
Theme = "green"
Return ThemeEndFunction
ProtectedSub Page_PreInit(ByVal sender AsObject, ByVal e As System.EventArgs) HandlesMe.PreInit
Page.Theme = "green"
EndSub

02-29-2008, 09:26 PM	#1 (permalink) Select Theme stylesheet based on clients screen resolution
GoGetSome Novice Talker Posts: 5 Name: Scott Baldridge Location: Nashville, TN Talkupation:	Hello, I attmepting to define and use a specific stylesheet within a theme when rendering a page based on a users screen resolution. I have two themes each with several stylesheets such as: 1024x768.css and 800x600.css. Additionaly, the theme folder contains a javascript file named stylesheetsByResolution.js (see code below) , skin file and an images folder. The java detects the clients screen resolution and is supposed to render the page as defined in the selected stylesheet. So, if the users screen resolution was 1024x768 then the 1024x768.css for the appropriate theme would be used. With the code I'm using the proper theme is displayed, but the css that is used is the last css document in the theme folder for the appropriate theme and not the correct one for the users screen resolution. The .js and css workss works perfectly if themes are not used. I have read around trying to find someone doing this and have not found a solution. How can I render a specific css for a specific theme based on the users screen resolution ??? Here is the code I'm working with: In the <head> of the page I use the following code to get the resolution and select the css to use:<scripttype="text/javascript"src="App_Themes/<%#"Theme"%>/styleSheetsbyResolution.js"></script> Here is the styleSheetbyResolution.js: 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 > 1280) { document.write('<link rel="stylesheet" type="text/css" href="1600x1200.css">'); } if (winW <= 1280) { document.write('<link rel="stylesheet" type="text/css" href="1280x1024.css">'); } if (winW <= 1024) { document.write('<link rel="stylesheet" type="text/css" href="1024x768.css">'); } if (winW <= 800) { document.write('<link rel="stylesheet" type="text/css" href="800x600.css">'); } if (winW <= 640) { document.write('<link rel="stylesheet" type="text/css" href="800x600.css">'); } In the code behind I get the users theme and set the page theme in the preint and send the theme to the script with a function. For clarity, I will use this for now: PublicFunction SetTheme(ByVal Theme AsString) AsString Theme = "green" Return ThemeEndFunction ProtectedSub Page_PreInit(ByVal sender AsObject, ByVal e As System.EventArgs) HandlesMe.PreInit Page.Theme = "green" EndSub