Blowing Through Lines » javascript http://blowingthroughlines.com Highly addictive code. Wed, 16 May 2012 21:37:42 +0000 en hourly 1 http://wordpress.org/?v=3.3 Show off your chops in the Les Paul birthday doodle http://blowingthroughlines.com/2011/06/09/javascript/show-off-your-chops-in-the-les-paul-birthday-doodle/ http://blowingthroughlines.com/2011/06/09/javascript/show-off-your-chops-in-the-les-paul-birthday-doodle/#comments Thu, 09 Jun 2011 16:30:11 +0000 admin http://blowingthroughlines.com/2011/06/09/javascript/show-off-your-chops-in-the-les-paul-birthday-doodle/
  • Design for many Screens Wish I’d thought of this:  http://mediaqueri.es/ Posted via email from...
  • Music Data Set This is one of those things that I need an...
    • Related posts brought to you by Yet Another Related Posts Plugin.]]>
    Screen_shot_2011-06-09_at_11

    http://google.com

    Posted via email from Bent Paperclips

    Related posts:

    1. Design for many Screens Wish I’d thought of this:  http://mediaqueri.es/ Posted via email from...
    2. Music Data Set This is one of those things that I need an...

    Related posts brought to you by Yet Another Related Posts Plugin.

    ]]>     http://blowingthroughlines.com/2011/06/09/javascript/show-off-your-chops-in-the-les-paul-birthday-doodle/feed/ 0     Oh just pick a time http://blowingthroughlines.com/2009/10/24/javascript/time-pickers/ http://blowingthroughlines.com/2009/10/24/javascript/time-pickers/#comments Sat, 24 Oct 2009 15:00:50 +0000 admin http://blowingthroughlines.com/?p=188 Yet Another Related Posts Plugin.]]> So it’s a difficult problem when you’re designing a form that has a lot of time inputs (the one I’m thinking of has up to 4 including a time range). There is the usual, one time box, and an AM/PM dropdown, but that requires typing then clicking, and feels  too tedious, especially the 3rd time.

    Then there is the huge dropdown of times, which isn’t too bad for just hours, with which you end up with 24 options, but when you add quarter hours you get 100 items in a huge scrolling dropdown (scrolling dropdowns in themselves can be dubious to some users).

    So I did some looking around and found the following options the first of which isn’t the fastest  to use, and doesn’t require the least clicks, but was the most consistent with other elements on the page, and also seemed to have the most development behind it, and I ended up using in my current project.

    1. http://pttimeselect.sourceforge.net/example/ (I think this is the cleanest, and works the best next to the date picker, because it looks the same. though it’s not the fastest or most efficient, but I think it’s the most developed.)
    2. http://milesich.com/tpdemo/ (ok but a little overwhelming possibly to some people because of the + the done button that needs to be pressed)
    3. http://labs.perifer.se/timedatepicker/ (this is probably the simplest option, but like I said, 100 might be a pain for some users)
    4. http://haineault.com/media/jquery/ui-timepickr/page/ (while my wife used it fine on the first try, it wasn’t scientific because I didn’t give her a specific time to set.)
    5. http://www.jnathanson.com/index.cfm?page=jquery/clockpick/ClockPick (OK but a little less intuitive than timepickr)
    6. http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-timepicker/ (kinda ok, like a time only version of the second option, but sideways, I’m not sure how well AM/PM works because there isn’t an example)
    7. http://keith-wood.name/timeEntry.html (neat but totally hard to use until you realize its keyboard-arrow-key driven, oops I gave it away)

    I think my dream selector would actually be more like this most excellent timer widget for OS X that I use almost every day called Minutes. You’d just grab it and spin around until you have the time you want, then let go to set. Anyway when I have a project with a better budget then I’ll maybe make that version…

    No related posts.

    Related posts brought to you by Yet Another Related Posts Plugin.

    ]]>     http://blowingthroughlines.com/2009/10/24/javascript/time-pickers/feed/ 0     SWFAddress, if You Aren’t Using it for All Your Flash, Start to http://blowingthroughlines.com/2009/04/03/javascript/swfaddress-if-you-arent-using-it-for-all-your-flash-start-to/ http://blowingthroughlines.com/2009/04/03/javascript/swfaddress-if-you-arent-using-it-for-all-your-flash-start-to/#comments Fri, 03 Apr 2009 16:30:39 +0000 nilloc http://blowingthroughlines.com/?p=129 Yet Another Related Posts Plugin.]]> We’ve been using SWFAddress for a while now, and while I was cleaning old project files out of Flex I came across my first Flex Test using it. It’s simple, and in fact, SWFAddress has been improved a bunch since this test was made (mostly involving SEO, and fallback links + Google Analytics). Now we’re using it for running our entire navigation schemes for all Flash sites, mini-sites, components, and even in our pitches.

    Check out my example (click anywhere to move the box, then use the back/forward buttons for undo/redo).

    ?View Code ACTIONSCRIPT
    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

    package {
	import com.asual.swfaddress.SWFAddress;
	import com.asual.swfaddress.SWFAddressEvent;
 
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
 
	public class SWFAddress_test extends Sprite
	{
		private var _square:Shape;
 
		public function SWFAddress_test()
		{
			SWFAddress.addEventListener(SWFAddressEvent.INIT, init);
		}
 
		private function init(evt:SWFAddressEvent):void
		{
			SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddressChange);
			stage.addEventListener(MouseEvent.CLICK, gotoAddress);
 
			_square = new Shape();
			_square.graphics.beginFill(0x0);
			_square.graphics.drawRect(0,0,50,50);
			this.addChild(_square);
		}
 
		private function handleSWFAddressChange(evt:SWFAddressEvent):void
		{
			trace(evt.path);
			var address:Array = evt.path.split("/", 3);
			var xLoc:Number = Number(address[1]);
			if(!isNaN(xLoc)) moveSquare(xLoc);
 
		}
 
		private function gotoAddress(evt:MouseEvent):void
		{
			SWFAddress.setValue(this.mouseX.toString());
		}
 
		private function moveSquare(loc:Number):void
		{
			_square.x = loc;
		}
	}
}

    No related posts.

    Related posts brought to you by Yet Another Related Posts Plugin.

    ]]>     http://blowingthroughlines.com/2009/04/03/javascript/swfaddress-if-you-arent-using-it-for-all-your-flash-start-to/feed/ 0     Prototype javascript css Tabs http://blowingthroughlines.com/2007/12/29/javascript/prototype-css-tabs/ http://blowingthroughlines.com/2007/12/29/javascript/prototype-css-tabs/#comments Sat, 29 Dec 2007 21:53:30 +0000 jeff http://blowingthroughlines.com/2007/12/29/flash-as3/prototype-css-tabs/ Yet Another Related Posts Plugin.]]> 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.

    No related posts.

    Related posts brought to you by Yet Another Related Posts Plugin.

    ]]>     http://blowingthroughlines.com/2007/12/29/javascript/prototype-css-tabs/feed/ 0     Google maps state zoom and center code http://blowingthroughlines.com/2007/12/17/javascript/google-maps-state-zoom-and-center-code/ http://blowingthroughlines.com/2007/12/17/javascript/google-maps-state-zoom-and-center-code/#comments Mon, 17 Dec 2007 22:56:00 +0000 jeff http://blowingthroughlines.com/2007/12/17/flash-as3/google-maps-state-zoom-and-center-code/ Yet Another Related Posts Plugin.]]> 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());
}

    No related posts.

    Related posts brought to you by Yet Another Related Posts Plugin.

    ]]>     http://blowingthroughlines.com/2007/12/17/javascript/google-maps-state-zoom-and-center-code/feed/ 3