tuesdayDeveloper;

I’m working on a project that I’m building in Google App Engine with Google Web Toolkit. On part of the the page I’m creating I have a number box. The user can type in a number or to the side of the number box there is an up arrow and a down button. In addition to typing and the up and down buttons I also wanted the user to be able to press the up and down button on the keyboard to increment or decrement the box. This was very strait forward—but I hit a small snag. To include this code I added a listener to the box called activeNumber:

101
102
103
104
105
106
107
108
109
110
111
112
113
114

	    activeNumber.addKeyPressHandler(new KeyPressHandler() {
	    	public void onKeyPress(KeyPressEvent event) {
	    		int charCode = event.getCharCode();
	    		int nativeCode = event.getNativeEvent().getKeyCode();
	    		if(charCode == KeyCodes.KEY_UP) {
	    			incrementActiveNumber();
	    		} else if(charCode == KeyCodes.KEY_DOWN) {
	    			decrementActiveNumber();
	    		} else if(charCode == KeyCodes.KEY_BACKSPACE) {
	    		} else if(nativeCode < 48 || nativeCode > 57) {
	    			event.preventDefault();
	    		}
	    	}
	    });

You’ll see that I also wanted to prevent any character (other than numbers) to be entered into the box, any nativeCode that is less than 48 or greater than 57 (0-9) were disabled, but for some reason when I tried it, I could type in an ampersand [&] and an open parentheses [(]. I tried for the longest time to figure out why these characters were allowed. I did a lot of editing in the last if statement, but didn’t seem to be effective until I noticed that when I hit the ampersand, the activeNumber would increment and when I would push the open parentheses it would decrement. It was then that I determined that the KeyCode for the up button is 38 and the down button is 40. I then looked up the key values for the ampersand and the open parentheses, 38 and 40.

How did I fix it? I simply disabled the default for up and down as follows:

101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

	    activeNumber.addKeyPressHandler(new KeyPressHandler() {
	    	public void onKeyPress(KeyPressEvent event) {
	    		int charCode = event.getCharCode();
	    		int nativeCode = event.getNativeEvent().getKeyCode();
	    		if(charCode == KeyCodes.KEY_UP) {
	    			event.preventDefault();
	    			incrementActiveNumber();
	    		} else if(charCode == KeyCodes.KEY_DOWN) {
	    			event.preventDefault();
	    			decrementActiveNumber();
	    		} else if(charCode == KeyCodes.KEY_BACKSPACE) {
	    		} else if(nativeCode < 48 || nativeCode > 57) {
	    			event.preventDefault();
	    		}
	    	}
	    });

Bwa-ha-ha, try to type in an ampersand now!

Post Ratings: (No Ratings Yet)

I must admit that I was extremely confused when I was positioning divs with css today. I had two divs inside of another div. Something like the following.

1
2
3
4

<div id="container">
    <div id="blue">This is the blue div.</div>
    <div id="red">This is the red div.</div>
</div>

The css for the page was as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

div#container {
    width:80%;
    margin-left:auto;
    margin-right:auto;
    border:solid #000000;
    border-width:5px;
}
 
div#blue {
    background-color:blue;
    width:50%;
    float:left;
}
 
div#red {
    background-color:red;
    width:50%;
    float:left;
}

What I expected and what I got were two different things.

Expected:

Actual:

Why did this happen? Well, apparently if you use the float option in css, it doesn’t mean that the divs will still look like they are in the container. The easiest way to fix this is with a   or a <br /> somewhere after the second div, though that also has its consequences. Probably the best way i’ve found is to use a div with a clear attribute:

1
2
3
4

<div id="container">
    <div id="blue">This is the blue div.</div>
    <div id="red">This is the red div.</div>
</div>

With the css for the div:

21
22
23

#clear {
    clear:both;
}

That works quite nicely!

Post Ratings: (No Ratings Yet)

Why isn’t this working?

That was my question for about a week of frustration.

Answer, I had two different variables misspelled. I won’t be making that mistace again.

Post Ratings: (No Ratings Yet)