Tips for Twits

Hi all its us again, In the past few months we’ve been asked many a times to help improve the progressbar code. We’ve also been referenced by several websites as THE progressbar to use. In all, we felt we owed it to you guys to make it better.

So here we are, after all those emails and bug reports, we finally got down to it. Always good to take a couple of months to have a fresh prespective of things. We ripped out the old code and made it much better and more extensible than its predecessors. So much that we decided it was enough to qualify as a major revision.

Let see whats been done…

• Cleaned up the code, yes its lighter, cleaner faster. (Still lacks documentation though)
• Callbacks! Everyone’s favourite
• Max values, you can now set it to be 150/2000 instead of just a percentage
• Text formats. Show 75/100 or 75% by toggling the textFormat accordingly
• Steps, how many steps to get to your target value
• Step Duration, how long each step lasts
• Webkit (Chrome/Safari) compatibility. More like, Webkit Hacks

Once again, many a thanks for all those who have so generously provided the feature requests as well as bug fixes every now and then. And thanks for all your patience in waiting for this new release.
If its working for you, drop us a comment and tell us where we can see your stuff!

Download the new jQuery progressbar here: jQuery progressbar
or view the demo here

In our work we like to create Google Maps links for our client’s (offices, stores, etc). However, the larger our clients presence, the more random links there are bound to be. When it comes to using Google Map’s javascript API to control the map, thats still perfectly fine. But how do I create a google maps link that only shows 1 entry? Turns out, there are several ways to do this:

1. Manipulate the request such that it only shows your entryHow? For example, searching for “Holland, Singapore” will lead us to about 1,356 results. See here. So lets tweak it a little:
   • Append &mrt=yp to the url – That returns us all the business listings. (852 results)
   • Append &start=16 to the url – That skips the first 16 results (Shows results 17-26 of 852)
   • Append &num=2 to the url – That returns us only 2 results (Only shows 2 results)

   For a more complete listing of Google Maps Parameters, consult mapki.com. Kudos to those guys for compiling that list. Really useful stuff
   So there you have it, a simple way to link your business such that its the only entry there. However this method is relatively dangerous. Why? Cause you’ve got no idea of the exact ordering that Google maps may return. Today you could be entry 17, surely not in a year (hopefully for the better). As such, this is not the recommended solution.

2. Use the address with your long/lat coordinates to generate your entry.
   • First get your GPS coordinates, there are a number of ways to do this. Check our this link
   • Then create your link via the following structure: http://www.google.com/maps?&ie=UTF8&hl=en&q=[urlescaped address]&ll=[GPS lat,long]&z=[Zoom]&iwloc=A
   • Still too troublesome? We’ve created a simple tool for our clients to use. Save yourself some time. Try it!

   Done! Whats the downside to this? You can only show the address for the business. Because searching by business names returns us way too many results. So instead, we have to search for an address, Google interprets this as an address and only returns 1 result (which is the whole point of geocoding). At this point its easy to the map to what we need. We’d use this typically for this nifty little “Find us on a map” links (instead of embedding the actual map on your site).

Once again, if you’d rather embed Google maps directly into your site via the JS, then your options are much more open.
Good luck! Let us know if it works for you, of if you find a better way of doing things!

Thanks for all the comments and feedback! By popular request i’ve added the multi-colored progress bar and fixed some bugs. The new multi-colored bar changes from red to orange and then to green at configurable intervals. Check out the demo!

Since the last update this endeavour has seen comments claiming that it works and sometimes that it doesnt. I’ve tested the demo across Safari, Opera, IE6/7, Firefox and Chrome. Havent found any problem. For those of you who have problems, please do email me the problem.

Download the new jQuery progressbar here: jQuery progressbar
or view the demo here

Theming a file input field has always been notoriously hard. Thanks to the guys who wrote the Ext UploadDialog script, theres now a better and more aesthetically pleasing way to create a file upload. I tried using their script wholesale but ran into some problems with the layout. So i kinda hacked and extracted their Ext.ux.BrowseButton code.

So now you can use it simply with:

	new Ext.ux.BrowseButton({
		input_name: "uploadfile1",
		text: "Select a file"
		onInputFileChange: function() {
			alert("you chose " + this.getInputFile().dom.value);
		}
	})
 
	new Ext.ux.TBBrowseButton({
		input_name: "uploadfile2",
		text: "Select another file"
	})

The first chunk of code creates a Browse Button (File Input) control as with the name uploadfile1. and the second chunk of codes creates a ToolBar Browse Button with the name uploadfile2.

Hypothetically you should be able to add a ToolBar button but i havent quite gotten a ToolBar Browse Button to fit aesthetically well inside a form. Let me know if you all come up with any examples that do!

Meanwhile, 3 cheers for the guys who wrote the Ext UploadDialog script!!!

Download the jQuery progressbar here: EXT Browse Button
or view the demo here

This code has been downloaded quite abit so i thought i’d put in some effort to improve it. I found some free time this evening to clean up the code. The original code is a couple of months old and its my first jquery plugin. I didnt quite understand what i was doing then.I made the code less resource intensive and more configurable.

The progress bar can now be controlled externally. click on the demo link below to see what i’m talking about. I’ll know of at least 1 bug in the script if its fully tested, will try to fix this within the week. Meanwhile if you have any ideas for improvements, please leave a comment!

Download the jQuery progressbar here: jQuery progressbar
or view the demo here

I really liked the mootools progressbar at http://www.webappers.com/progressBar/ but i’m so against the idea of having 2-3 libraries in a single system. Since i always use jQuery, i tried to port the progressBar over. The problem is, jQuery unlike most of the other libraries doesnt quite work with objects. So its not that easy to return and manage an object to perform actions like “add 5%”, “fill to 95%”, etc. Honestly i’m not sure where else to use such a comprehensive progress bar other than a file upload utility.

So for what its worth, i made a simple progress bar in jQuery that parses a percentage string and animates the loading.

Download the jQuery progressbar here: jQuery progressbar
Or view the demo: here

I encountered a interesting display bug when working with EXTJS recently. The following code renders well in FF 2 and above but not in IE6.

var form = new Ext.form.FormPanel({
	baseCls: 'x-plain',
	labelWidth: 140,
	url: 'abc/def.php',
	defaultType: 'textfield',
	items: [{
		fieldLabel: 'Name',
		name: 'name',
		anchor:'100%'  // anchor width by percentage
	}, {
		xtype: 'textarea',
		fieldLabel: 'Description',
		name: 'description',
		anchor: '100% -30'  // bug in IE6
	}]
});
 
var window = new Ext.Window({
	title: 'Some Window',
	width: 500, height: 300, 
	layout: 'fit',
	plain: true,
	buttonAlign: 'center',
	items: form
});
 
window.show();

brian.moeskau from the EXTJS forums was kind enough to answer this problem. The fix is a piece of code that primes the width of the controls to prevent it from overflowing out of the window/panels. The code is as follows

Ext.override(Ext.form.Field, {
    adjustWidth : function(tag, w){
        tag = tag.toLowerCase();
        if(typeof w == 'number' && !Ext.isSafari){
            if(Ext.isIE && (tag == 'input' || tag == 'textarea')){
                if(!Ext.isStrict){
                    return this.inEditor ? w : w - 3;
                }
                if(tag == 'input' && Ext.isStrict){
                    return w - (Ext.isIE6 ? 4 : 1);
                }
                if(tag == 'textarea' && Ext.isStrict){
                    return w-4;
                }
            }else if(Ext.isOpera && Ext.isStrict){
                if(tag == 'input'){
                    return w + 2;
                }
                if(tag == 'textarea'){
                    return w-2;
                }
            }
        }
        return w;
    }
});

I hope this will solve other people’s problems too!