|
|
<%@ Page language="c#" Codebehind="default.aspx.cs" AutoEventWireup="false" Inherits="DynamicScreens.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<LINK href="102400RES.css" type="text/css" rel="stylesheet">
</HEAD>
<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");
clientRes="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))
{
clientRes="1024Res";
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))
{
clientRes="800Res";
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 != "")
{
thisform.submit();
}
}
}
//-->
</script>
<form id="Form1" method="post" runat="server">
<asp:image id=Image1 runat="server" CssClass="<%# IMG %>">
</asp:image>
<table cellSpacing="0" cellPadding="0" width="100%" border="0">
<TR>
<TD style="WIDTH: 1038px"></TD>
<TD colSpan="3"></TD>
</TR>
<tr>
<td style="WIDTH: 1038px">
<asp:textbox id=TextBox1 runat="server" CssClass="<%# TB %>" Width="262px">I show different on different resolutions</asp:textbox>
<input class="<%# BT %>" id=Button1 type=button value=button Text="me too !">
</td>
<td colSpan="3"> </td>
</tr>
<tr>
<td colSpan="2"></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="WIDTH: 1041px">
<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"> </td>
</tr>
<tr>
<td style="WIDTH: 1038px"> </td>
<td colSpan="3"> </td>
</tr>
</table>
<!-- 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>
</body>
</HTML>
|
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.
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 !
Submit an article or tip