Monday 27 October 2008

Prevent the Browser Scrollbar Causing Centred Content Jumping

With current trends in website design with fixed width content, leaning towards centred, rather than left aligned, content jump is being seen more often.

This is when the content grows past the bottom of the window, cauing the browser scrollbar to appear, which causes the centre position of the page to move, which in turn causes the content to quickly jump a few pixels to the left. How annoying, especially when you have spent ages getting anything else looking exactly right.

This is not a problem in IE, as the scrollbar is always displayed.

Good news is we can work around this by forcing all browsers to always display the scrollbar, like IE does. When the content is contained within the page the scrollbar will be visible, but disabled.

Simply add the following CSS to your pages and the jumping stops.

html {
overflow-y: scroll;
}

Done..

Tuesday 14 October 2008

Java Output Formatted Date String Using SimpleDateFormat

This is another quickie simple example, as it took me ages to find what exactly what I was looking for. :-)

Using Java, I wanted to output the current date as a string, in a particular format. However (with limited knowledge) looking at the obvious starting point of java.util.Date, I couldn't find anything other than the default output.

I now know that this is because java.util.Date doesn't do this, you need to use another class, such as java.text.SimpleDateFormat.

So to output the date as year month day EG "2008-10-14"...
...
SimpleDateFormat formatNow = new SimpleDateFormat("yyyy-MM-dd");
System.out.println("=Now=> "+formatNow.format(new Date()));
...

See here for all the format options.

Done.

Monday 13 October 2008

Javascript to Change the Cursor Style

Changing the cursor with Javascript is pretty easy.

document.body.style.cursor = 'wait';

Changes the cursor to the wait/busy style.

document.body.style.cursor = 'default';

Changes the cursor back to the pointer.

There are several different styles you can use, however if your aiming to be compatable with older browsers you may want to do some testing.

The styles are:
  • auto
  • crosshair
  • default
  • pointer
  • help
  • move
  • text
  • wait

And the resize styles:
  • e-resize
  • w-resize
  • n-resize
  • s-resize
  • ne-resize
  • nw-resize
  • se-resize
  • sw-resize
Cursor Styled.

Thursday 9 October 2008

Javascript Function That Returns A Select Label

This is a little example function to return the label of an html select form element, which is simple but not as immediately obvious as getting the value.

<html>

<head>
<script>
function getSelectLabel(obj)
{
return obj.options[obj.selectedIndex].text;
}
</script>
</head>

<body>

<h1>Get Select Label</h1>

<form name="testForm">

<select name="testSelect">
<option value="r">Red</option>
<option value="g">Green</option>
<option value="b">Blue</option>
</select>

<br/>
<br/>

<input type="button" onclick="alert(getSelectLabel(document.testForm.testSelect));" value="Get Label"/>
<input type="button" onclick="alert(document.testForm.testSelect.value);" value="Get Value"/>

</form>

</body>

</html>

I've also added a second button to display the value for reference.
Done...