Focusing Control On Postback Using JavaScript

Postbacks can be annoying. Especially when you have a long page of content with a form at the bottom and on button click causes the page to skip back to the top of the page.

For a user who is not used to a site, this can be incredibly annoying and disorientating simply due to the fact the page has moved to a different position. This isn't so much of an issue if you happen to have a webpage that is low on content and a form will always be in clear view.

But there is quite a nice easy way to get back to a specific area of a page by using the following line of JavaScript will be added in the page after a postback has occurred.

if (Page.IsPostBack)
{
    ScriptManager.RegisterStartupScript(this, typeof(string), "PostbackFocus", "window.location.hash = 'feedback-form'", true);
}

By placing this code in your Page_Load method, the user will be taken to an anchor point placed within the page. In this case, a <div> with an ID attribute of "feedback-form".

CSS Link Hover Issue in Internet Explorer 7 & 8

I came across a really strange issue yesterday whilst testing a site build in Internet Explorer 6, 7 and 8. For some reason, my anchor link text was not accepting a hover state colour change even though I set the required styles within my style sheet. All other browser accepted the hover styling without any issue.

I decided to create another site in Visual Studio and added the same styling to my links and it worked. After comparing the difference between the original and new style sheet, the only difference was:

/* Original Stylesheet */
body
{
    font-family: Arial;
}

 

/* New Stylesheet */
body
{
    font-family: Arial, sans-serif;
}

 

By simply adding “sans-serif” to the font family allowed the hover styles to work correctly in all browsers. I have no idea why making this change resolved my issue.