Archive for Web Development

07 Nov 2010

Stop IE flickering between pages

No Comments ASP.NET, Web Development

If you hate that slight flicker in IE browser between page transitions then you will find this snippet useful.

When user navigate from one page to another in IE, there is slight “white out” before this transition. Whereas in Firefox and other browsers this page transition is very smooth. IE browser will show blank page for very short duration before showing content of next page. User experience this effect more like flicker on the browser. If your web application has more post backs then it become more annoying to users.

To reduce this flicker in IE, simple add below META tags in HEAD section of your page.

<META http-equiv="Page-Enter" content="blendTrans(Duration=0.05)" />
<META http-equiv="Page-Exit" content="blendTrans(Duration=0.05)" />

By reducing the duration between fading previous content and revealing new content, user experience relatively smooth transition between pages.

This snippet has only impact on IE and not on other browsers.

15 May 2009

Implementing Auto-Logout functionality

1 Comment ASP.NET, Web Development

Here is small javascript snippet you will find useful for your web application. It will automatically logout user after specific time of inactivity.

<script type="text/javascript">
var timer;
var wait=10;
document.onkeypress=resetTimer;
document.onmousemove=resetTimer;
function resetTimer()
{
    clearTimeout(timer);
    timer=setTimeout("logout()", 60000*wait);
}
 
function logout()
{
    window.location.href='Logout.aspx';
}    
</script>

Code is self explanatory. We are using setTimeout method which will call a function (logout function in above case) after specified delay in milliseconds. With that, we also resetting that again and again for every user movement on page.

You just need to drop this code in all pages (except login and unsecured pages) of your application. Master page is good place instead for easy maintenance.

Before login off user from application, you may also like to alert user first. So let’s extend above code further. This gonna be bit tricky as we cannot use simple javascript alert to show this message. Instead we will create a DIV layer in the page and use it for showing alert message. Any user interaction will hide this alert message. After specific time of inactivity, user will navigate to Logout.aspx page where you can provide actual implementation to logout user and clear all session objects.

Here is modified code:

<html>
<head runat="server">
<title>Default Page</title>
<script type="text/javascript">
var timer1, timer2;
document.onkeypress=resetTimer;
document.onmousemove=resetTimer;
function resetTimer()
{
    document.getElementById('timeoutPopup').style.display='none';
    clearTimeout(timer1);
    clearTimeout(timer2);
 
    // waiting time in minutes
    var wait=10;
 
    // alert user one minute before
    timer1=setTimeout("alertUser()", (60000*wait)-1);
 
    // logout user
    timer2=setTimeout("logout()", 60000*wait);
}
 
function alertUser()
{
    document.getElementById('timeoutPopup').style.display='block';
}
 
function logout()
{
    window.location.href='Logout.aspx';
}    
</script>
<style type="text/css">
#timeoutPopup {
    display:none; 
    position:absolute; 
    top:0; right:0; bottom:0; left:0;
    width:30%;
    height:30%;
    margin:auto;
    padding:4px;
    border:solid 1px #999999; 
    background-color:#dddddd;
    text-align:center;
}
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="timeoutPopup">
        Your session is about to expire if there is no additional 
        activity.
    </div>
    </form>
</body>
</html>
17 Jun 2006

Favlets – Must have tools for ASP.NET developers

No Comments ASP.NET, Web Development

Favlets are actually a small JavaScript code prefixed with “javascript:” which are store as URL in hyper link. Interesting thing about Favlets is that you can directly run this script from address bar of your browser and so you can save this script as URL and store it in your Favorites folder, and that’s why these Javascript code is called Favlets.

The beauty of Favlets is that it can access any part of page currently open in your browser. To elaborate that, it means that now you can get any element of existing open page in some variable and then you can use that variable to display its property or to modify its property.

How to install Favlets?
Well, it’s a simple as book marking this page to your favorites. Simply drag any Favlets link in your Link or Favorites folder. Now open any web page in browser and click the Favlets.

Here is the small tutorial on installing Favlets in your browser:
How to use favlets
Bookmarklets – Browser Power
About Bookmarklets

Here is the list of Favlets from my web development tool box:
Source: Slime
View Tables – Creates a thin blue border around every <table> element on the page, and a thin green one around table cells. Useful for figuring out old table layouts.

View Divs – Creates a thin red border around every <div> element on the page. Often useful to see how the browser is handling CSS.

Execute JavaScript Code – The ultimate favelet. Allows you to execute any JavaScript code that you want to.

Display Properties of Object – Displays all of the properties of a given object (for example, document.body, window.navigator, or document.getElementById(‘myelem’)). If there are too many properties to display on separate lines, they are displayed on a single line and separated with “|||.” Exact result is browser-dependant. Useful for debugging scripts.

Source: Favlets
Elements Inspector – Shows the properties of any HTML element on
mouseover. “ESC” key turns the favlet off.

Source: W3C
Validate This Page – This is the basic “Validate This Page” Favelet. It simply submits the URL for the currently viewed page to the Validator for processing. Results appear in the same window.

Source: Squarefree
Read Cookie for Site – Shows cookies stored by the page you’re viewing.

Some Other Links:
About Bookmarklets
Page Data bookmarklets
Blog Remote Posting Bookmarklet
Bookmarklets
Developer Bookmarklets
Bookmarklets
Bookmarklets and other useful things for IE’s Links bar

03 Jun 2006

Measuring attributes of DHTML object every web developers should know

No Comments ASP.NET, Web Development

Here is an informative chart showing and explaining all dimension and location attributes of HTML elements. You will find this chart very handy while positioning or adjusting location of html element using javascript or through stylesheet.


diagram of a sample page showing the DHTML Object Model properties that are related to the dimension and location of elements

Measuring Element Dimension and Location

29 May 2006

Designers, Engage Your Brain

No Comments Design, Web Development

Does a designer require thinking from code behind aspect of the site? Yes, as Mark Boulton suggesting in his article, designers need not to learn any code to design any site but they just need to change the way they conceive different attributes in web sites. Must read!

Designers, Engage Your Brain

About Me

My name is Firoz Ansari, and I'm software professional with passion for technology and design. I provide software solution and consulting services using Microsoft technologies in various business domains. more...

Recent Comments

  • Rac: hi, is there a way that i can implement it in c#? I tired copying the code inside my project but it doesnt ...
  • fasd: to mc: So true. ...
  • slash: I had to hex-quote the special characters to get the link to work on iPhone OS v3.0. Try pasting this into ...
  • William: I must agree. India is definitely moving ahead of all USA in terms of technology and outsourcing things. ...
  • Firoz Ansari: @ashishtandel No. You can’t remove “Web Page Dialog” from the title. You can ...