Blog Series RSS FeedFollow gutgames on TwitterTwitter Feed



Other Posts in AJAX Controls

  1. ASP.Net AJAX Extender - List Search Box
  2. ASP.Net AJAX Controls - Text Box Extender
  3. ASP.Net AJAX List Extender
  4. ASP.Net AJAX - Submit Extender
  5. Adding Animations to Your ASP.Net AJAX Extenders
  6. Fish Eye Extender
  7. Preventing inadvertent loss of information in ASP.Net
  8. Resolution based CSS Selector for ASP.Net
  9. Fader Extender for ASP.Net
  10. Search Highlighter Extender for ASP.Net
  11. Form Clear Extender
  12. CheckBoxList Select All Extender and Spore
  13. Progress Bar AJAX Extender for ASP.Net
  14. Character Counting Extension
  15. Submit Once Extension
  16. Adding Images to a List Box using Server Controls
  17. Text Scrolling with ASP.Net and AJAX
  18. TextArea Resizing Extender for ASP.Net and .Net is a Failure
  19. Web Page Screen Shot for ASP.Net
  20. Fixed Header Extender for GridView in ASP.Net

Resolution based CSS Selector for ASP.Net

7/7/2008

Usually when you create a style for a website you make sure that it shows well at multiple resolutions, multiple browsers, etc. However sometimes, there's nothing you can do to force certain things onto a 640x480 display. For instance, my website stays rather static in the middle of the screen and is optimized for 1024x768 resolution on up. I'm rather lazy so I'm not going to go and make it look fantastic for 800x600 or 640x480 displays, plus very few programmers use those resolutions today (and that's really the only group of people that would bother coming here) so the pay off would be small. Most people are making websites for the average person though and need to worry about such things. So what do we do?

Well there are actually two cases that we need to worry about:

  1. People using mobile devices (Blackberry, etc.)
  2. People using a regular web browser.

The first instance is rather easy to detect. Simply use the Request.Browser.IsMobileDevice to determine if it is a mobile device that is making the request and set the theme/CSS appropriately for those instances. The second instance is a bit trickier. We have Request.Browser.ScreenPixelsWidth and ScreenPixelsHeight, but I've never been able to have it give me accurate information. So that leaves us with javascript to find out the information: 

   1: if(screen.width==800)
   2: {
   3:       document.getElementsByTagName("link")[0].href="800CSSFile.css";
   4: }

OK, so it's actually quite easy to find out the information. So you can simply go in and add something like that to each file, or you can add the control that I've created below:

ResolutionCSSChangerExtender.cs

   1: using System;
   2: using System.Web.UI.WebControls;
   3: using System.Web.UI;
   4: using System.ComponentModel;
   5: using System.ComponentModel.Design;
   6: using AjaxControlToolkit;
   7:  
   8: [assembly: System.Web.UI.WebResource("AJAXControls.ResolutionCSSChanger.ResolutionCSSChangerBehavior.js", "text/javascript")]
   9:  
  10: namespace AJAXControls.ResolutionCSSChanger
  11: {
  12:     [Designer(typeof(ResolutionCSSChangerDesigner))]
  13:     [ClientScriptResource("AJAXControls.ResolutionCSSChanger.ResolutionCSSChangerBehavior", "AJAXControls.ResolutionCSSChanger.ResolutionCSSChangerBehavior.js")]
  14:     [TargetControlType(typeof(Control))]
  15:     public class ResolutionCSSChangerExtender : ExtenderControlBase
  16:     {
  17:         // TODO: Add your property accessors here.
  18:         //
  19:         [ExtenderControlProperty]
  20:         [DefaultValue("")]
  21:         public string CSSFiles
  22:         {
  23:             get
  24:             {
  25:                 return GetPropertyValue("CSSFiles", "");
  26:             }
  27:             set
  28:             {
  29:                 SetPropertyValue("CSSFiles", value);
  30:             }
  31:         }
  32:  
  33:         [ExtenderControlProperty]
  34:         [DefaultValue("")]
  35:         public string ScreenWidths
  36:         {
  37:             get
  38:             {
  39:                 return GetPropertyValue("ScreenWidths", "");
  40:             }
  41:             set
  42:             {
  43:                 SetPropertyValue("ScreenWidths", value);
  44:             }
  45:         }
  46:     }
  47: }

ResolutionCSSChangerBehavior.js

   1: using System;
   2: using System.Web.UI.WebControls;
   3: using System.Web.UI;
   4: using System.ComponentModel;
   5: using System.ComponentModel.Design;
   6: using AjaxControlToolkit;
   7:  
   8: [assembly: System.Web.UI.WebResource("AJAXControls.ResolutionCSSChanger.ResolutionCSSChangerBehavior.js", "text/javascript")]
   9:  
  10: namespace AJAXControls.ResolutionCSSChanger
  11: {
  12:     [Designer(typeof(ResolutionCSSChangerDesigner))]
  13:     [ClientScriptResource("AJAXControls.ResolutionCSSChanger.ResolutionCSSChangerBehavior", "AJAXControls.ResolutionCSSChanger.ResolutionCSSChangerBehavior.js")]
  14:     [TargetControlType(typeof(Control))]
  15:     public class ResolutionCSSChangerExtender : ExtenderControlBase
  16:     {
  17:         // TODO: Add your property accessors here.
  18:         //
  19:         [ExtenderControlProperty]
  20:         [DefaultValue("")]
  21:         public string CSSFiles
  22:         {
  23:             get
  24:             {
  25:                 return GetPropertyValue("CSSFiles", "");
  26:             }
  27:             set
  28:             {
  29:                 SetPropertyValue("CSSFiles", value);
  30:             }
  31:         }
  32:  
  33:         [ExtenderControlProperty]
  34:         [DefaultValue("")]
  35:         public string ScreenWidths
  36:         {
  37:             get
  38:             {
  39:                 return GetPropertyValue("ScreenWidths", "");
  40:             }
  41:             set
  42:             {
  43:                 SetPropertyValue("ScreenWidths", value);
  44:             }
  45:         }
  46:     }
  47: }

All you need to do is call it with a list of screen widths you're interested in and a list of CSS files separated by commas and it will do the rest. That's it, really nothing to it. Anyway, download the code, give it a try, and happy coding.

Comments

 





 


Recent Posts

Personal Data Management
Start of a project that I will be working on that will attempt to put the vast majority of my personal online life into one location.
Craig’s Utility Library 3.1 Released
New version of Craig's Utility Library has been released.
Small Changes, Big Speed Ups
This post talks about a basic change that I did to the bitmap extensions that gave me a large increase in speed.
Craig’s Utility Library 3.0 Released
Craig's Utility Library 3.0 has been released
Building an DI Container
This post shows the basic code that is being used for the IoC container in the utilities library.

Recent Comments

Adjusting Contrast of an Image in C#
Roey - It is better to use ColorMatri...
Enabling JSONP in WCF
BLop - Just to inform :"Cross doma...
Viewstate Compression When Using AJAX
Tahri Akram - I'm using compressing/decompre...
Creating a Zip File in C#
Nicholas Carey - Why not use DotNetZip from htt...
Major Rework Happening
mark foley - Hi!Your site is amazing. ...
DISCLAIMER

The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

© Copyright 2010