Friday, May 25, 2007

Controlling browser scrollbars

In Firefox, the vertical scrollbar only shows when the page contents do not go beyond the height of the browser window (i.e. you just have a simple 'Hello World' or very little content on your page). On the other hand, the scrollbar always shows if you are using Internet Explorer. For consistency across these (and possibly other browsers as well), you can apply a little bit of CSS.

To make IE behave like Firefox (only show scrollbar when needed), just do this:

html {
   overflow-y: auto;

To always show the scrollbar (to prevent the layout changing when more content-rich pages are loaded on your site):

html {
   overflow-y: scroll;

I also use the same trick to only show scrollbars in <textarea>'s when needed:

textarea {
    overflow: auto;

Tuesday, May 08, 2007

jQuery Plugin: focus fields

focus fields is a plugin for jQuery that adds an outline and background colour to a text input when it is given focus.