Archive for December, 2007

Prototype javascript css Tabs

Recently I had to make tabs. Something that has been solved hundreds of times. However I didn’t want to fuck around with a special user interface framework like http://developer.yahoo.com/yui/. Since I use prototype on almost every project since its inception, I decided to just roll out my own solution using the prototype library as a base. It turns out that the implementation was incredibly simple. I have attached a working example for your copy and paste pleasure. The javascript is incredibly simple. The entire javascript programming was less than 25 lines.

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var tablinks = null;
var tabcontent = null;
function handletab(event){
	var element = event.element();
	for(i=0;i<tablinks.length;i++){
		var tabli = tablinks[i].up('li');
		if(tablinks[i]==element){
			tabcontent[i].show();
			tabli.removeClassName('deactivetab');
			tabli.addClassName('activetab');
		}else{
			tabcontent[i].hide();
			tabli.removeClassName('activetab');
			tabli.addClassName('deactivetab');
		}
	}
}
function homepageSetup(){
	tablinks = $$('a.tablink');
	tabcontent = $$('div.tabcontent');
	for(i=0;i<tablinks.length;i++){
		tablinks[i].observe('click',handletab);
		tablinks[i].onclick = function(){return false};
	}
}

Prototype javascript css tabs – blowingthroughlines.com

If you find this article and or code useful feel free to leave a comment. I’d love to hear what you think.

Google maps state zoom and center code

This is exactly what you would think it is. I fucked around with getting these bounding values so you don’t have to. I think you will find this useful if a client says to you, “now how do I jump to a state”. You will need the prototype library for this to work. I use it for element selection. If you know how to get the element in other ways then you likely don’t need me to tell you how to change this code. If you would like to download prototype click here.

make sure you include the prototype library before the code for you map.

First the select box that you will need somewhere on your UI

The javascript you no doubt need, is the zoom to state code. It is basically a large switch statement with sensible latitudes and longitudes for zooming and centering. So here it is

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
function zoomState(){
	var sw;
	var ne;
	switch($('state').value){
		case 'AL':
			sw=new GLatLng(29.11377539511439, -92.7685546875); ne = new GLatLng(35.96022296929667, -80.4638671875);
			break;
		case 'AK':
			sw=new GLatLng(58.17070248348609, -175.166015625); ne = new GLatLng(71.63599288330606, -125.94726562500001);
			break;
		case 'AZ':
			sw=new GLatLng(30.977609093348686, -117.421875); ne = new GLatLng(37.68382032669382, -105.1171875);
			break;
		case 'AR':
			sw=new GLatLng(31.409912194070973, -97.998046875); ne = new GLatLng(38.08268954483802, -85.693359375);
			break;
		case 'CA':
			sw=new GLatLng(30.14512718337613, -127.13378906250001); ne = new GLatLng(43.13306116240612, -102.5244140625);
			break;
		case 'CO':
			sw=new GLatLng(35.55010533588551, -111.6650390625); ne = new GLatLng(41.88592102814744, -99.3603515625);
			break;
		case 'CT':
			sw=new GLatLng(40.75557964275588, -74.24560546875); ne = new GLatLng(42.27730877423709, -71.16943359375);
			break;
		case 'DE':
			sw=new GLatLng(37.361425501905146, -78.321533203125); ne = new GLatLng(40.52215098562377, -72.169189453125);
			break;
		case 'DC':
			sw=new GLatLng(37.142803443716836, -80.101318359375); ne = new GLatLng(40.3130432088809, -73.948974609375);
			break;
		case 'FL':
			sw=new GLatLng(24.86650252692691, -89.4287109375); ne = new GLatLng(32.008075959291055, -77.1240234375);
			break;
		case 'GA':
			sw=new GLatLng(29.286398892934763, -89.296875); ne = new GLatLng(36.12012758978146, -76.9921875);
			break;
		case 'HI':
			sw=new GLatLng(18.656654486539995, -160.499267578125); ne = new GLatLng(22.46180203533398, -154.346923828125);
			break;
		case 'ID':
			sw=new GLatLng(39.061849134291535, -127.17773437499999); ne = new GLatLng(50.54136296522161, -102.568359375);
			break;
		case 'IL':
			sw=new GLatLng(36.79169061907076, -95.009765625); ne = new GLatLng(43.02071359427862, -82.705078125);
			break;
		case 'IN':
			sw=new GLatLng(36.84446074079564, -92.26318359375); ne = new GLatLng(43.068887774169625, -79.95849609375);
			break;
		case 'IA':
			sw=new GLatLng(38.99357205820944, -99.99755859375); ne = new GLatLng(45.02695045318543, -87.69287109375);
			break;
		case 'KS':
			sw=new GLatLng(35.28150065789119, -104.39208984375); ne = new GLatLng(41.64007838467891, -92.08740234375);
			break;
		case 'KY':
			sw=new GLatLng(34.488447837809304, -91.4501953125); ne = new GLatLng(40.91351257612757, -79.1455078125);
			break;
		case 'LA':
			sw=new GLatLng(27.955591004642528, -98.67919921875); ne = new GLatLng(34.88593094075315, -86.37451171875);
			break;
		case 'ME':
			sw=new GLatLng(42.212245162885814, -75.12451171875); ne = new GLatLng(47.945786463687185, -62.81982421875);
			break;
		case 'MD':
			sw=new GLatLng(37.509725842937485, -80.057373046875); ne = new GLatLng(40.66397287638688, -73.905029296875);
			break;
		case 'MA':
			sw=new GLatLng(40.6723059714534, -75.047607421875); ne = new GLatLng(43.683763524273346, -68.895263671875);
			break;
		case 'MI':
			sw=new GLatLng(40.38002840251183, -90.17578125); ne = new GLatLng(46.28622391806705, -77.87109375);
			break;
		case 'MN':
			sw=new GLatLng(40.58058466412761, -105.5126953125); ne = new GLatLng(51.781435604431195, -80.9033203125);
			break;
		case 'MS':
			sw=new GLatLng(29.24806324379655, -95.361328125); ne = new GLatLng(36.08462129606931, -83.056640625);
			break;
		case 'MO':
			sw=new GLatLng(35.40696093270201, -98.7451171875); ne = new GLatLng(41.75492216766298, -86.4404296875);
			break;
		case 'MT':
			sw=new GLatLng(40.58058466412761, -122.12402343749999); ne = new GLatLng(51.781435604431195, -97.5146484375);
			break;
		case 'NE':
			sw=new GLatLng(38.70265930723801, -106.23779296875); ne = new GLatLng(44.762336674810996, -93.93310546875);
			break;
		case 'NV':
			sw=new GLatLng(35.79999392988527, -122.80517578125); ne = new GLatLng(42.114523952464246, -110.50048828125);
			break;
		case 'NH':
			sw=new GLatLng(42.512601715736665, -74.77294921875); ne = new GLatLng(45.43700828867389, -68.62060546875);
			break;
		case 'NJ':
			sw=new GLatLng(37.86618078529668, -77.926025390625); ne = new GLatLng(41.004775422229464, -71.773681640625);
			break;
		case 'NM':
			sw=new GLatLng(30.902224705171417, -111.708984375); ne = new GLatLng(37.614231415424165, -99.404296875);
			break;
		case 'NY':
			sw=new GLatLng(40.212440718286466, -80.88134765625); ne = new GLatLng(46.13417004624326, -68.57666015625);
			break;
		case 'NC':
			sw=new GLatLng(31.9148675032762, -87.1435546875); ne = new GLatLng(38.54816542304656, -74.8388671875);
			break;
		case 'ND':
			sw=new GLatLng(44.49650533109345, -106.80908203125); ne = new GLatLng(50.00773901463685, -94.50439453125);
			break;
		case 'OH':
			sw=new GLatLng(37.35269280367273, -87.978515625); ne = new GLatLng(43.5326204268101, -75.673828125);
			break;
		case 'OK':
			sw=new GLatLng(31.877557643340015, -104.12841796875); ne = new GLatLng(38.51378825951165, -91.82373046875);
			break;
		case 'OR':
			sw=new GLatLng(41.21172151054787, -126.123046875); ne = new GLatLng(47.040182144806664, -113.818359375);
			break;
		case 'PA':
			sw=new GLatLng(37.63163475580643, -83.43017578125); ne = new GLatLng(43.78695837311561, -71.12548828125);
			break;
		case 'RI':
			sw=new GLatLng(41.3500103516271, -72.2186279296875); ne = new GLatLng(42.108411365705855, -70.6805419921875);
			break;
		case 'SC':
			sw=new GLatLng(32.01739159980399, -83.814697265625); ne = new GLatLng(35.398005947151056, -77.662353515625);
			break;
		case 'SD':
			sw=new GLatLng(41.73852846935917, -106.36962890625); ne = new GLatLng(47.517200697839414, -94.06494140625);
			break;
		case 'TN':
			sw=new GLatLng(32.287132632616355, -92.900390625); ne = new GLatLng(38.89103282648846, -80.595703125);
			break;
		case 'TX':
			sw=new GLatLng(24.5271348225978, -112.060546875); ne = new GLatLng(38.341656192795924, -87.451171875);
			break;
		case 'UT':
			sw=new GLatLng(36.29741818650808, -117.44384765625); ne = new GLatLng(42.56926437219384, -105.13916015625);
			break;
		case 'VT':
			sw=new GLatLng(42.36666166373274, -75.706787109375); ne = new GLatLng(45.29807513870794, -69.554443359375);
			break;
		case 'VA':
			sw=new GLatLng(34.397844946449844, -85.4736328125); ne = new GLatLng(40.83043687764923, -73.1689453125);
			break;
		case 'WA':
			sw=new GLatLng(44.99588261816546, -126.58447265624999); ne = new GLatLng(50.45750402042055, -114.27978515625);
			break;
		case 'WV':
			sw=new GLatLng(35.79999392988527, -86.41845703125); ne = new GLatLng(42.114523952464246, -74.11376953125);
			break;
		case 'WI':
			sw=new GLatLng(41.62365539068639, -95.80078125); ne = new GLatLng(47.41322033016902, -83.49609375);
			break;
		case 'WY':
			sw=new GLatLng(39.99395569397331, -113.8623046875); ne = new GLatLng(45.93587062119052, -101.5576171875);
			break;
		default:
			sw=new GLatLng(10.141931686131018, -145.1953125); ne = new GLatLng(59.88893689676585, -46.7578125);
			break;
 
	}
	bound = new GLatLngBounds(sw,ne);
	map.setZoom(map.getBoundsZoomLevel(bound));
	map.panTo(bound.getCenter());
}

Flash Input Text Bug

The other day I was throwing an email form together really quickly, and decided to lay it out on the stage. So added 4 input fields, for name, email, subject, and message, and used those names as the instance names. then i put some labels in them, since i was planning on doing some nice ON_FOCUS text relacement. but before going much farther i needed to check to see if the alignment was right, and tested the movie.
At which point I quite unexpectedly got this error:

Error: Error #2078: The name property of a Timeline-placed object cannot be modified.
	at flash.display::DisplayObject/set name()
	at flash.display::Sprite/flash.display:Sprite::constructChildren()
	at flash.display::Sprite$iinit()
	at flash.display::MovieClip$iinit()

And I hadn’t even imported the form class I had used a dozen times before…

(more…)