Thursday, December 31, 2009

Enjoy your holidays. Forget all the odds of 2009 and plan meaningful life for 2010!

Wherever you spend your holidays this year-end, enjoy it with all your heart. And please accept my warm invitation to spend your holidays of New Year 2011 in Nepal – a world of its own! We are celebrating 2011 as Nepal Tourism Year – 2011. My kind request to add this year into your calendar so that your won’t miss what this mysterious country has to offer you – from Natural beauty to the Mt. Everest, from Hindu’s holy Pashupatinath to Buddhist’s holy Lumbini- the birth place of Lord Buddha, from the miraculous flora and fauna to the diversity of social and cultural property!

Friday, December 18, 2009

Web masters find it attractive to mark or indicate some text in a page as special part. For example a featured product in a shopping cart would hold a finished featured icon image at its side. Similarly we see New image icon blinking at the side of some product or text. It is sometimes better by far to use such animated images to draw user's attention. How would you do this using jquery? The simple answer is that- toggle the image based on its display status, in a regular interval.

There exists a simple method in jquery plugin that accomplished this task:

In the page, I have added an image in a column of a table. Please use your own image (perhaps some 'New' image, as in the image above). Note the javascript setInterval() method that calls the function imageFlickr() every 300ms. In the method, we have the line:

$("#newImage").toggle();

The $(selector).toggle(interval) method toggles the show/hide property of the element. In the code, I haven't used the interval argument of toggle method. The interval in milliseconds defines the fade-in or fade-out speed of the element. Try this once and you will see great effect:

$("#newImage").toggle(200);

You are warmly welcome to share your experiences. You can start discussion by adding comments from the form below. You can help spreading out the words by bookmarking this article to any of your favourite bookmarking site!

This shows that there is no more type="submit" attribute, rather onclick="javascript:__doPostBack('btnOK','') has been added.

So you have successfully stopped the page postback now!

2. Prevent enter key press in all the textboxesOne another way to stop the page postback is to prevent enter key press in any of the textboxes. We can use jquery to easily perform the task. This way:

<script type="text/javascript">

$(function(){

$(':text').bind('keydown',function(e){ //on keydown for all textboxes

if(e.keyCode==13) //if this is enter key

e.preventDefault();

});

});

</script>

On page load, all the textboxes in the form are bound to the keydown event to a function. In the function we check if the key pressed in the ‘enter key’. If so, we prevent the further bubbling of the event. Hence it prevents the page postback.

Note: You will need to reference the latest jquery file in the page to use the second technique.

3.0 Conclusion We looked at two ways to prevent page postback on enter-key press in a textbox in asp.net web page. Both the techniques work well. But I would prefer the first one since this would save the extra client side manipulations in the user’s machine.

4.0 Looking towards hearing from you! You are warmly welcome to share your experiences. You can start discussion by adding comments from the form below. You can help spreading out the words by bookmarking this article to any of your favourite bookmarking site!