This problem came while I was working on a client’s website. Take this scenario. I have a listing page (similar to a listing page from www.trademe.co.nz or www.ascent.co.nz ). They have a lot of listings. Each listing has a hyperlink going to a detail page which describes more about each listing.
If you have quite a large page of listings, the user has to scroll down the page to find the listing they want to click on. The problem is, when they click on the link and go to the details page, what happens when the click back and they end up back at the top of the page again? This can be quite annoying. It would be “nice” to get the browser to go back to the previous position on the listing page.

The Approach

We achieve this but attach a click event handler to the specific a tags that we want to record the last clicked position from the user before we redirect to the next page. This means when the user goes back to the previous page they will be taken to the exact position on the page. When the click event happens we always override what was in the cookie so that we don’t end up with several pages and positions. We don’t want a user to go to another page they have been to before and set the scroll position, it should only happen to the previous page.

Here is the code

Firstly, add the following JQuery/Javascript code:

You can inject the correct generated javascript code from using the function GetPostBackEventReference between the server tags. Bind a click event to the ASP.NET server control which disables the button and call the autosubmit javascript function to perform a post back on the ASP.NET button control.

References

http://msdn.microsoft.com/en-us/library/ms153112.aspx

This could be turned into a jQuery function or refactored to be better reused, but there is a sample just to get you going.

Since jQuery 1.6, this code did not work and after doing some digging around, I found that you need to use the new method .prop() to get the code functioning correctly again.

Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() only retrieves attributes.

References:

http://api.jquery.com/prop/

1. I had a master page with one main form element
2. I had a submit button in the master page which acts as a search button across the website
3. I had a login page that also has a submit button

Naturally when the user presses the enter key, it naturally takes the first submit button on the webpage as being the default submit button.   Therefore when a user enters their credentials on the login page, they will always be taken to the search page which is defined by the input button on the master page.

I used jQuery to help solve this issue, you need to do two important things:

1) You need to set a default selector on the input button you want to submit, i.e on the login button I put:

2) Use the following code (Note this code can easily be refactored to be more efficient):

It uses jquery for scrolling through the thumbnails using your mouse wheel and various jquery plugins for twitter and flickr.

Check it out!

List of JQuer plugins used:

jQuery Flickr – jQuery plug-in

jQuery mousewheel plugin

jQuery Twitter plugin

jCarouselLite image slider

Also, try out www.timarucity.co.nz which was setup by Verb..thanks to Verb for allowing me to share this idea.

jQuery(‘textarea[maxlength]‘).keyup(function() {
var max = parseInt(jQuery(this).attr(‘maxlength’));
if (jQuery(this).val().length > max) {
jQuery(this).val(jQuery(this).val().substr(0, jQuery(this).attr(‘maxlength’)));
}
if (jQuery(this).parent().find(‘.charsRemaining’).length > 0) jQuery(this).parent().find(‘.charsRemaining’).html(‘You have ‘ + (max – jQuery(this).val().length) + ‘ characters remaining’);
else jQuery(this).parent().append(‘<div class=”charsRemaining”>You have ‘ + (max – jQuery(this).val().length) + ‘ characters remaining</div>’);

});

jQuery(“#tableId”).click(function(event) {
var $target = jQuery(event.target), target = event.target;
if ($target.parents(“a:first”).is(“a.editNote”)) { //Make sure that we have found the right A tag
var id = parseInt($target.parents(“tr:first”).find(“td:first a”).text()); //traverse back through the parents to view the corresponding ID which is in another A tag
callFunction(id);
}
});

This is way better than doing a typical jQuery(“a[id=editNote"].click(function) as this creates a event handler for each A tag.   Using Event Delegation like above only creates one handler which has less overhead on browsers (especially IE).