Wednesday, 10 November 2010 23:58 |
After a friend of mine tried out the website on his google Android mobile phone and we ended up with all of the edit boxes in a very narrow but tall column, I realised that there was another major browser out there with problems... Google's Chrome!
The main problem was with the Flow Panel - Chrome needed the properties "float: left;" where Firefox and IE used "display: inline;" to achieve the same thing. I also ended up having to specify minimum widths with the property "min-width: 1.85em" and replace empty cells with " " and use the property "empty-cells: show".
Once I sorted all that out so that it worked in Chrome and still worked in Firefox/IE, I had learned an important lesson: Do all this sort of stuff in CSS, not in your code. It is much simpler when it comes to playing about with what different browsers need - your code can assign the style to your widgets and after that you only need to change your CSS file when trying things out.
I also took this opportunity to tidy up the behaviour of the solver tool when selecting a letter with the mouse - if you select a letter and then press another letter then the first letter is replaced. I also implemented the backspace key sensibly. I also added support for the cursor keys; left arrow and right arrow in the solver and also the up/down arrows in the submission tool.
Generally the net effect of the various keypress changes here is to make it far less necessary to use the mouse - also an issue when using a small screen such as on a mobile phone...
|