Click here to Skip to main content
13,085,936 members (93,142 online)
Click here to Skip to main content
Articles » Web Development » ASP.NET » Samples » Downloads


48 bookmarked
Posted 13 Apr 2006

Automatic style changes of ASP.NET controls as per client's screen resolution

, 13 Apr 2006
How to automatically send a resolution optimized markup of a web page to the client PC.
<%@ Page language="c#" Codebehind="default.aspx.cs" AutoEventWireup="false" Inherits="DynamicScreens.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
		<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
		<meta content="C#" name="CODE_LANGUAGE">
		<meta content="JavaScript" name="vs_defaultClientScript">
		<meta content="" name="vs_targetSchema">
		<LINK href="102400RES.css" type="text/css" rel="stylesheet">
	<body bottomMargin="0" leftMargin="0" topMargin="0" onload="detectClientResolutionAndChange()"
		rightMargin="0" marginheight="0" marginwidth="0">
		<script language="javascript">

// this javascript function gets the client resolution and copares it with server side resolution setting and postback to synchronize the 2 resolutions. 
// this function is called through 'onload' property of 'body' tag 
function detectClientResolutionAndChange() 
	//this variable will hold the current resolution of the client's desktop
	var clientRes="";
		//compare and save client's desktop resolution so it can be sent 
		//to server through post for changing page according to that resolution
		if ((screen.width == 1280) && (screen.height == 1024)) 
			document.getElementById("ClientResolution").setAttribute("value", "1280Res");
		//compare and save client's desktop resolution so it can be sent 
		//to server through post for changing page according to that resolution
		if ((screen.width == 1024) && (screen.height == 768))
			document.getElementById("ClientResolution").setAttribute("value", "1024Res");
		//compare and save client's desktop resolution so it can be sent 
		//to server through post for changing page according to that resolution
		if ((screen.width == 800) && (screen.height == 600))
			document.getElementById("ClientResolution").setAttribute("value", "800Res");
		//Now that client resolution is captured and stored in clientRes variable 
		//Lets compare it with resolution setting page sent by server. If both are not same
		//post on server for changing according to the client's res. 
		//On initial page request, 1280*1024 resoltuion setting page is sent, to client
		if (document.getElementById("ServerResolution").getAttribute("value") != clientRes)
			var thisform = document.Form1 ;
			//the html hidden input 'resolution' which i declared below, will tell server side code about the client's resolution			
			if (clientRes != "")

		<form id="Form1" method="post" runat="server">
			<asp:image id=Image1 runat="server" CssClass="<%# IMG %>">
			<table cellSpacing="0" cellPadding="0" width="100%" border="0">
					<TD style="WIDTH: 1038px"></TD>
					<TD colSpan="3"></TD>
					<td style="WIDTH: 1038px">&nbsp;
						<asp:textbox id=TextBox1 runat="server" CssClass="<%# TB %>" Width="262px">I show different on different resolutions</asp:textbox>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
						&nbsp;<input class="<%# BT %>" id=Button1 type=button value=button Text="me too !">&nbsp;
					<td colSpan="3">&nbsp;&nbsp;&nbsp;</td>
					<td colSpan="2"></td>
					<td style="WIDTH: 1041px">&nbsp;
						<asp:label id=Label1 runat="server" CssClass="<%# LB %>">Hi folks. This is the page which will demonstrate you the automatic resolution detection on client PC and generating client resolution relevant markup of the page. This page will show different behaviors on 1280x1024, 1024x768 and 800x600 resolutions automatically. Of course we can do it for as many resolution types as we may wish, for now, just for demonstration, I have kept these most commonly used resolutions to demonstrate example. Notice that the size and color of this text, dimensions and background color of TextBox and Button controls appears differently according to the resolution of the client's screen. Just press 'go' or 'refresh' button of browser to reflect changes if you change the resolution of your desktop while page is opened. You can customize much more than this online example as changes are CSS dependant.</asp:label></td>
					<td colSpan="3">&nbsp;&nbsp;&nbsp;</td>
					<td style="WIDTH: 1038px">&nbsp;</td>
					<td colSpan="3">&nbsp;&nbsp;&nbsp;</td>
			<!-- this hidden input will hold the desktop resolution of the client--><asp:checkboxlist id="CheckBoxList1" runat="server"></asp:checkboxlist><input id="ClientResolution" type="hidden" name="ClientResolution">
			<A href="javascript:alert('Your resolution is '+screen.width+'x'+screen.height);">Click 
				for your screen resolution</A> <INPUT id="ServerResolution" type="hidden" name="Hidden1" runat="server"></form>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.


This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)


About the Author

Faheem Iqbal
Web Developer
Pakistan Pakistan
Faheem is a .net web developer and freelancer working for a canadian development centre named Acumen Prescience. He enjoys playing video games, listening to linkin park, and having good sincere buddies. He has also worked on AJAX and hopes that Microsoft gets some common sense one day and provide developers with AJAX technology in its development platforms !

You may also be interested in...

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.170813.1 | Last Updated 13 Apr 2006
Article Copyright 2006 by Faheem Iqbal
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid