Twitter Feed Popout byInfofru

Background-Position in FireFox

23. March 2010 AngryCoder CSS , Javascript Comments (0)

Like me if you are trying to get the background-position style working in Mozilla FireFox and still un able to find the problem check how you gave the value there.

Basically, Background-Position can accept value in two parts “x” and “y”. For example, 

background-position : "x y"

Of course, “x” represent the X axis where as “y” represent Y axis. Now you can define the value of both the axes in the following way. 

Method Example
In Word center top
top left
In Pixels 10px 200px
In Percentage 15% 300%

 

So, if you ever wish to use Background-Position in firefox, use the Percentage method, nothing else gonna work.

Following is the workable in Firefox

background-position: 0% 10%

Following is the JavaScript style

objDiv.style.backgroundPosition="0% 10%"

Integrating CSS Control Adapter With Menu Control

2. March 2009 AngryCoder asp.net , CSS Comments (0)

This is on the request of some of my readers to show how effective Asp.net menu control is by using CSS Control Adapter. Most of the folks either have no idea of what CSS Adapter is or have some problem in integrating that with their applications.

So, In this post I will brief you guys how can we use CSS Adapter to format the design of Asp.net Menu Control. Before we start, let me dig out why would somebody use CSS Adapter and what does that do ?

Have you ever notice by viewing the source of your page what asp.net runtime engine generate when you use any Data list, or in our case Menu Control.
It generates Table based layout, which is of course really difficult to design and not consider a good practice in the new web standards. To overcome that issue CSS Control Adapter is the answer. It will rendered div and unorderlist (UL) instead of table which can easily be redesign using CSS. It means, you can now have standardized approach to create web based controls. If you want to see what CSS Control Adapter provide you, Click Here and notice the HTML Snippet given at bottom. 

Ok, to start off lets download the source code and open the project. By the time I am writing this post only VS 2005 version of CSS Control Adapter is available. But that is  not an issue, If you are using VS 2008, simply convert the project. Even if you don’t want to open the project it still have no problem as we only need to copy paste some stuff from here.

Create A Web Application or Web Site Project in which you want to implement Menu Control. right click on your project and add special folder called App_Browser. Now Right Click on the newly created folder and Add Browser File and Name it “CSSFriendlyAdapters.browser”.

You can either write the following stuff in it or Just Copy / Paste this from CSS Control Adapter Project which you have downloaded before.

   1: <browsers>
   2:   <browser refID="Default">
   3:     <controlAdapters>
   4:       <adapter controlType="System.Web.UI.WebControls.Menu"
   5:                adapterType="CSSFriendly.MenuAdapter" />
   6:   
   7:     </controlAdapters>
   8:   </browser>
   9:  
  10:   <browser id="W3C_Validator" parentID="default">
  11:     <identification>
  12:       <userAgent match="^W3C_Validator" />
  13:     </identification>
  14:     <capabilities>
  15:       <capability name="browser"              value="W3C Validator" />
  16:       <capability name="ecmaScriptVersion"    value="1.2" />
  17:       <capability name="javascript"           value="true" />
  18:       <capability name="supportsCss"          value="true" />
  19:       <capability name="supportsCallback"     value="true" />
  20:       <capability name="tables"               value="true" />
  21:       <capability name="tagWriter"            value="System.Web.UI.HtmlTextWriter" />
  22:       <capability name="w3cdomversion"        value="1.0" />
  23:     </capabilities>
  24:   </browser>
  25: </browsers>

If you see the browser file available in CSS Control Adapter project you will realize that under ControlAdapter tag there are several other ControlType specified. But in our case as we are only using Menu Control so we have removed the un wanted stuff.

Now once you have done this, you need to add reference to the CSS Adapter. You can find the assembly in CSS Control Adapter Project.

Lets create a page and drop and Menu control. See the following snippet.

 

   1: <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" CssSelectorClass="SimpleEntertainmentMenu">
   2:      <Items>
   3:          <asp:MenuItem Text="Item 1" Value="Item 1">
   4:              <asp:MenuItem Text="Item a" Value="Item a">
   5:                  <asp:MenuItem Text="Item a - a" Value="Item a - a"></asp:MenuItem>
   6:              </asp:MenuItem>
   7:              <asp:MenuItem Text="Item B" Value="Item B"></asp:MenuItem>
   8:          </asp:MenuItem>
   9:          <asp:MenuItem Text="Item 2" Value="Item 2">
  10:              <asp:MenuItem Text="Item a" Value="Item a"></asp:MenuItem>
  11:          </asp:MenuItem>
  12:      </Items>
  13:  </asp:Menu>


Now we need to create a CSS file and linked that with the page we have created. The CSS File should like as below

   1: .SimpleEntertainmentMenu ul.AspNet-Menu /* Tier 1 */
   2: {
   3:     width: 13em; /* This is more than (6em x 2) because we want to leave room for borders around the <li> elements that are selected */
   4: }
   5:  
   6: .SimpleEntertainmentMenu ul.AspNet-Menu ul  /* Tier 2 */
   7: {
   8:     width: 6em;
   9:     top: 100%;
  10:     left: 0;
  11:     font-weight:bold;
  12: }
  13:  
  14: .SimpleEntertainmentMenu ul.AspNet-Menu ul ul  /* Tier 3+ */
  15: {
  16:     top: 0%;
  17:     left: 6em;
  18:     font-weight:normal;
  19: }
  20:  
  21: .SimpleEntertainmentMenu li /* all list items */
  22: {
  23:     width: 6em;
  24:     background: #efefef;
  25: }
  26:  
  27: .SimpleEntertainmentMenu li:hover, /* list items being hovered over */
  28: .SimpleEntertainmentMenu li.AspNet-Menu-Hover
  29: {
  30:     background: Black;
  31: }
  32:  
  33: .SimpleEntertainmentMenu a, /* all anchors and spans (nodes with no link) */
  34: .SimpleEntertainmentMenu span
  35: {
  36:     color: Black;
  37:     padding: 4px 2px 4px 8px;
  38:     border:1px solid #cccccc;
  39:     background: transparent url(arrowRight.gif) right center no-repeat;
  40: }
  41:  
  42: .SimpleEntertainmentMenu li.AspNet-Menu-Leaf a, /* leaves */
  43: .SimpleEntertainmentMenu li.AspNet-Menu-Leaf span
  44: {
  45:     background-image: none !important;
  46: }
  47:  
  48: .SimpleEntertainmentMenu li:hover a, /* hovered text */
  49: .SimpleEntertainmentMenu li:hover span,
  50: .SimpleEntertainmentMenu li.AspNet-Menu-Hover a,
  51: .SimpleEntertainmentMenu li.AspNet-Menu-Hover span,
  52: .SimpleEntertainmentMenu li:hover li:hover a,
  53: .SimpleEntertainmentMenu li:hover li:hover span,
  54: .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
  55: .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
  56: .SimpleEntertainmentMenu li:hover li:hover li:hover a,
  57: .SimpleEntertainmentMenu li:hover li:hover li:hover span,
  58: .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
  59: .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span
  60: {
  61:     color: White;
  62:     background: transparent url(activeArrowRight.gif) right center no-repeat;
  63: }
  64:  
  65: .SimpleEntertainmentMenu li:hover li a, /* the tier above this one is hovered */
  66: .SimpleEntertainmentMenu li:hover li span,
  67: .SimpleEntertainmentMenu li.AspNet-Menu-Hover li a,
  68: .SimpleEntertainmentMenu li.AspNet-Menu-Hover li span,
  69: .SimpleEntertainmentMenu li:hover li:hover li a,
  70: .SimpleEntertainmentMenu li:hover li:hover li span,
  71: .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li a,
  72: .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li span
  73: {
  74:     color: Black;
  75:     background: transparent url(arrowRight.gif) right center no-repeat;
  76: }
  77:  
  78: .SimpleEntertainmentMenu .AspNet-Menu-Selected /* this tier is selected */
  79: {
  80:     border: solid 1px #00ff00 !important;
  81: }
  82:  
  83: .SimpleEntertainmentMenu .AspNet-Menu-ChildSelected /* a tier below this one is selected */
  84: {
  85:     border: solid 1px #ff0000 !important;
  86: }
  87:  
  88: .SimpleEntertainmentMenu .AspNet-Menu-ParentSelected /* a tier above this one is selected */
  89: {
  90:     border: solid 1px #0000ff !important;
  91: }
  92:  
  93: #EntertainmentMessage
  94: {
  95:     padding-top: 2em;
  96:     clear: both;
  97: }

 

Well that is pretty self describing, as I have already mention that the CSS Control adapter will rendered Divs and Unorder lists instead of table for Menu Control. Here we are simply specifying the style for Menu element on different level.

Once you have complete with the creation of CSS file, you need to link this with your page and for that 

   1: <link rel="stylesheet" href="/CSS/SimpleMenu.css" type="text/css" />

I have created the CSS File under CSS folder, which can be some thing else in your case.

That is it, it is pretty simple yet effective to use CSS Control Adapter with your asp.net application because it can give standardized HTML as output which is easy to design.
You can download the VS 2008 project file.

Disable Control When Asp.net AJAX is in progress

6. February 2009 AngryCoder .net , asp.net , DHTML Tricks , AJAX , CSS Comments (0)

If the AJAX call to the server take too much time, then there is a possibility that user might press some other buttons or some other event occurred which will cause your AJAX call to stop and make a new request.

To overcome this situation, I decided to have div on the top of the page so that while AJAX call is in progress user cannot do any thing else.

So I simply Drag and Drop a Update Progress Control and write the following stuff. 

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <ProgressTemplate>
        <div id="Progress">Please wait ......</div>
       <div id="bgDiv"></div> 
    </ProgressTemplate>
</asp:UpdateProgress>

And add the following style on head section of the page. 

   1: <style>
   2:     #bgDiv {
   3:       position:absolute;
   4:       top:0px;
   5:       bottom:0px;
   6:       left:0px;
   7:       right:0px;
   8:       overflow:hidden;
   9:       padding:0;
  10:       margin:0;
  11:       background-color:black; 
  12:       filter:alpha(opacity=50);
  13:       opacity:0.5;
  14:       z-index:500;
  15:     }
  16:     #Progress
  17:     {
  18:         position: absolute;
  19:         background-color:Red;
  20:         width: 300px;
  21:         z-index: 600;
  22:     }
  23:  
  24:  
  25:     </style>

There we go whenever AJAX call made, a background div will appear and on top of that we have our message "Please wait"

Here is the snapshot

image

Different Style for IE7 and Firefox in CSS

6. January 2009 AngryCoder DHTML Tricks , CSS Comments (0)

Well, I with my designer Atiq was trying to set the a div which is working fine in IE7 but when it comes to Firefox, it was asking us to give the margin-top:10px. when we put that, the div comes down in IE7. So, in this situation we need to specify two different styles for these two browsers.

I don't want to use that, which can also be done using the following HTML.

   1: <!--[if IE 7]><link rel="stylesheet" type="text/css" href="IE7styles.css" /><![endif]-->

But I don't want to create two css files for this work. Somehow, I want to mage it in the name same CSS. So what I did is so I use Child Selector Command and Star HTML Hack.

Child Selector Command is not understandable by IE, hence whenever it gets something like this .... IE Ignores the style. So I decided to specify Firefox stuff here. it looks like as follows 

   1: html>body #ContainerCodeQuestionAnser
   2: {
   3:     position:absolute; z-index:50;background-color:#FFFFFF;width:auto;
   4:     height:20px;margin-left:10px;overflow:hidden;top:10px; /*top is for firefox*/
   5:     }

In contrast, Star HTML Hack is not understandable by any other browser except IE. So IE Stuff Goes here. 

   1: * #ContainerCodeQuestionAnser
   2: {
   3:     position:absolute; z-index:50;background-color:#FFFFFF;width:auto;
   4:     height:20px;margin-left:10px;overflow:hidden;
   5:     }

That's it ... the design looks really good.......