View online demo.
This article will tell you about a technique through which you can make intelligent ASP.NET websites which will automatically detect the resolution of the visitor's desktop and generate a resolution optimized mark-up of a page, not forcing the visitor to keep the resolution of his/her desktop according to the website's best view resolution.
It is unpredictable for a website to be dynamic in visual appearance for multiple resolutions. Typically, graphic designers design the page graphics and the elements optimized for a certain screen resolution. Visitors having varying resolutions different from that recommended for the website will experience a less comfortable view of the pages.
These are three basic things that we are using to achieve this task. I am assuming that you are a bit familiar with the following:
- ASP.NET simple data binding
- CSS for dynamic behaviour of pages on different resolutions
Client resolution detection
if ((screen.width == 1280) && (screen.height == 1024))
Storing client and server resolution values
ClientResolution, which is later accessed at the server side script for comparisons. We use the
Request object for accessing the
ClientResolution value at the server side. Resolution set on the server is kept in a hidden server control named
if ((screen.width == 1280) && (screen.width == 1024))
var thisform = document.Form1 ;
if (clientRes != "")
The CSS file for setting up different resolution settings for controls
In our example, I am using CSS classes which contain the attribute definitions of the controls. There is a separate set of attribute definitions in our CSS file for each resolution.
/* following three css classes will be used for 1024x768 resolution*/
Binding control properties with values according to the client resolution
Now that the page has been posted to the server, we now need to adjust our page elements according to the visitor's captured resolution settings. As you can guess, a page can be composed of web server controls as well as HTML controls. We can pretty easily access the properties of web server controls on the server side script (e.g.,
txtInput.Text), but we cannot access the HTML control properties on the server side. HTML controls are static page elements and are not accessible using server side code.
Now, in order to dynamically set the values of the attributes of the HTML page elements, we are using ASP.NET simple data binding to bind singular values to the attributes. The property (the one that gets and sets the value for the variable) from the server side script returns the value for the control's attribute. This gives the dynamic looks for the static HTML elements of the page.
<asp:textbox id=TextBox1 runat="server"
CssClass="<%# TB %>" Width="262px"> </asp:textbox>
<input class="<%# BT %>" id=Button1 type=button
value=button Text="me too !"> ...
Below, is an example of the property
BT (for button control) returning the different CSS classes on conditional checks:
public string BT
if (! Page.IsPostBack )
else if( Request.Form["ClientResolution"] == "1280Res")
else if( Request.Form["ClientResolution"] == "1024Res")
else if( Request.Form["ClientResolution"] == "800Res")
This is just a very basic example where I have demonstrated changing the size, colors, width, height, source etc. of the page elements at different resolutions, both for server controls and HTML controls. You can take your imagination towards countless possibilities after getting the basic idea.
In the sample code, I am just demonstrating the different looks of a page on three different resolutions (1280x1024, 1024x800, 800x600). Of course, you can add settings for as many resolutions as you want.
You may be having a thought that each page would check for the client resolution on each page request, which would be less efficient. Well, what we can do here is, we can put this check on the initial page request, and set up the resolution value in a session variable, and avoid checking for it at each page request.