Wednesday, March 17, 2010

Compatibility View

Sometime it so happens that the critical functionality, of the Web Applications, works fine on the lower versions than IE 8. Well there is an option provided with IE 8 called Compatibility View which lets user to view the pages in IE 7 style. Compatibility View mode would be OFF by default whenever user browses through the Application in IE 8. In fact Compatibility View button would be visible next to the Address bar clicking on which turns the Compatibility mode ON. I personally do not recommend this option as it seems little overwhelming for user to click on Compatibility View button every time.

To overcome such situations a Meta tag <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> has to be added at very beginning inside the <head> tag. When we add this tag, Compatibility View button itself would not be visible. And at the same time pages would be rendered in IE 7 style. It's not advisable to add meta tag in each and every pages of site, its tedious too. We can add tags, as given below, inside <system.webServer> tag of configuration file to apply Compatibility View for entire site.

<httpProtocol>

<customHeaders>

<clear/>

<add
name="X-UA-Compatible"
value="IE=EmulateIE7" />

</customHeaders>

</httpProtocol>


 

Till now it's fine as long as we are hosting our site on IIS 7. In case we host our site in IIS 6 then the setting that we have added in configuration file will go on toss. This is because IIS 6 understands the tag <system.web> and not <system.webServer>. To overcome this what we can do is add meta tag dynamically into the master page on pre render event. The code for the same is as below.

Page.Header.Controls.AddAt(0, new
HtmlMeta { HttpEquiv = "X-UA-Compatible", Content = "IE=EmulateIE7" });

Well, let me inform you one more thing that the above set above behavior directly though Web server.

Refer http://msdn.microsoft.com/en-us/library/cc817572.aspx for web server IIS.

Refer http://msdn.microsoft.com/en-us/library/cc817573.aspx for web server Apache.


 

For complete details refer http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx

Friday, March 5, 2010

Fake Ajax – an alternate to AJAX

Friends, this is something interesting and exciting too. Excuse me if it's not new to you. Fake Ajax is all about giving effects to your web pages when user enters and exists your web pages. The point to note here is that while doing this it avoids blink that use to happen when user moves around the pages just like we do in Ajax. It's alternate to Ajax (not every time – mind it!) For your kind information, there is no rocket science into it. All you have to do is adding META tag into your web page.

You might have wondered why I have highlighted above words "when user enters and exists your web pages". The reason is that it is the heart of the fAjax. The effects that you are going to give would be visualized only when user enters / exits the web page and not in post back events. Again it might not work in browsers other than IE. Try it out on other browsers ..

BEST FOR STATIC WEB SITE J

List of some of the META tags you can use is as below.

Page Enter-Blend (2 sec.)

<meta http-equiv="Page-Enter" content="blendTrans(Duration=2.0)">

Page Exit-Box In (2 sec.)

<meta http-equiv="Page-Exit" content="revealTrans(Duration=2.0,Transition=0)">

Site Enter-Box Out (2 sec.)

<meta http-equiv="Site-Enter" content="revealTrans(Duration=2.0,Transition=1)">

Site Exit-Circle In (2 sec.)

<meta http-equiv="Site-Exit" content="revealTrans(Duration=2.0,Transition=2)">

Circle Out

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=3)">

Wipe Up

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)">

Wipe Down

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=5)">

Wipe Right

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=6)">

Wipe Left

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=7)">

Vertical Blinds

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=8)">

Horizontal Blinds

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=9)">

Checkerboard Across

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=10)">

Checkerboard Down

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=11)">

Random Dissolve

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=12)">

Split Vertical In

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=13)">

Split Vertical Out

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=14)">

Split Horizontal In

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=15)">

Split Horizontal Out

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=16)">

Strips Right Down

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=17)">

Strips Right Up

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=18)">

Strips Left Down

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=19)">

Strips Left Up

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=20)">

Random Bars Horizontal

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=21)">

Random Bars Vertical

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)">

Random

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=23)">


I have created sample demo application which you can download from below link. (See meta tags in Master page).

https://docs.google.com/leaf?id=0B7GR79ykCFHUOGE2N2NmNzEtODBmNi00N2I2LThlMTktYjUzMTU0ZjBiMDg2&hl=en

Your comments / feedback are welcome as usual.