A typical example of leading zeroes is when you want to show the current time and you want the time to be formatted like hh:mm. There is no problem when it’s 12:40, but when is five minutes past one, you get 1:5, which is not what you would expect. You want it formatted like 01:05. The same happens with dates and in several other situations.

Yesterday I found the best solution I’ve seen for this problem. Before that, let’s see possible solutions.

Usually, needing only one zero, I would do something like:

h = (h < 10) ? ("0" + h) : h;

This is not bad at all, but is not elegant. The problem is, what if we want it to be formatted with 3 digits? Then, using the same schema, we can end up with something like:

h = (h < 100) ? ( (h >= 10) ? ("0" + h) : ("00" + h) ) : h;

Man, this is ugly and unreadable!! Maybe it will improve with an if/else, but it will be bad anyway. Probably if you need to do something like that, you will create a function that will handle this problem and then, you will call that function saying you want h padded with 3 zeros. But there is another solution that does not require you to use or create such a funciton…

Have a look for two digit and three digit:

("0" + h).slice (-2);  // devolverá "01" si h=1; "12" si h=12
("00" + h).slice (-3); // "001" si h=1; "012" si h=12;"123" si h = 123

I don’t know what are you thinking after seeing this solution, but I got flashed when I saw it. Just amazing!

Let’s explain what’s going on. The code above only concatenates the “00″ with the number we want to format (e.g: “00″ + 12 = “0012″) and then, we get the last three digits using the slice string function (that’s why you have a -3). Guess what? The last three characters are “012″ which is the string we want.

Of course this solution is not only limited to leading zeroes, you can use it with leading spaces, or whatever character you want.

Sources:

• Padding zero in Javascript
• Little tricks: string padding in Javascript of Eneko Alonso blog (originally seen here)

Update: Milan Adamovsky has created a web page http://jsperf.com/zero-padding where you can check the performance issues of several functions to pad with zeroes, and you can try it directly in your browser

After being tired of looking for this, I finally decided to do it myself, and honoring the blog I called it manso framework, mansofk for firends.

I got all that functionality in just 1.5 KB!!

The main features are:

• Easy to rename the framework to avoid collissions (with other frameworks or other versions of mansofk)
• Chaining support
• Dynamic load of external elements
  • Supports loading external CSS files upon request
  • Supports loading external JS files upon request
• Simple DOM manipulations
  • Select elements by ID
  • Add new HTML on an element
  • Replace the HTML of an element
• Support CSS manipulations
  • Get the current property of an element
  • Change the property of an element
  • Change several properties at once
• Simple CSS animations
  • Supports several attributes at once
  • Several parameters, supports changing the duration or the frames per second
  • You can choose the linear function and the cubic function
• Event support
  • bind
  • unbind
• AJAX calls
  • Using GET and POST
  • Support parsing XML data
  • Supports parsing JSON data
  • Supports getting plain text
• Super lightweight
  • 3.3 KB minified
  • 1.5 KB gzipped!

You are all free to use this framework for whatever you want, but don’t blame at me if it fails (although bugs are welcome).

Following you have the minified version using Google Closure Compiler and the development version:

• mansofk-1.0.min.js (3.3 KB for using in production, gzipped is just 1.5KB)
• mansofk-1.0.js (11KB for using during development)

So…  that’s it!  I think it would be great to give you a demo, but right now I’m out of time, so I leave it for another day.

Uploadify is a wonderful plugin for jQuery that allows you to upload several files at once,  it does the uploads transparently  using flash (take a look at the demo on this link).

In fact, the great advantage I see is not to be able to upload several files at once, this can be done by javascript with no extra plugins, the great advantage is the progress bar it shows to the user, which is great for obvious usability reasons (user looking a screen where nothing happens… not good :p).

Apart of uploading files, you can also upload any other variables or data (take a look to scriptData). This can be really useful if you want, for example,to send the data in another form at the same time a file is being uploaded.

The great disadvantage of uploadify, is that each file is sent in a separate request. This means that if you are uplading 30 files, each file is sent in a separate HTTP request. Please note that the problem here is not the speed, because you can easily make uploadify sends several files at once, in parallel, the problem appears if you have to send form data on the first request only… The fact that are different requests makes things a little more difficult to handle on the server, but anyway, this only happens on specific cases…

Anyway, I recently used uploadify in a project where users should be logged in, in order to upload files. The thing is, when I first tried uploadify, it didn’t work… files were being apparently uploaded, but they were not stored in the server. I tried again and again, and the same problem… Finally I discovered why.

Uploadify does not send cookies, and because of that, it cannot send session information on the request, so the server does not know that the user sending the files is registered, it thinks it’s an annonymous user. The good thing, is that once I realiced what was the problem, the solution was quite simple.

The solution to keep the session using uploadify is the same as when the client cannot store cookies. Basically is just adding session name and identifier at the end of the URL, as a GET request.

In PHP, adding session to the URL would be something like:

$url = $url . '?' . session_name() . '=' . session_id();

Once I did that, the application was working with uploadify

Anyway, what I was trying to do is to create some kind of click effect. Ok, let me try again. What I wanted to do, is that when someone clicked on a link, that some kind of circle/rectangle/whatever expanded disappearing. Let’s try with an example. Have you seen those TV ads for games for the Wii? At the beginning there are like three or four circles that disappear. Something like that, but less sophisticate is what I wanted to do.

After trying several things, even after playing with images, I come up with a solution that is quite aproximated, although still needs something extra I don’t know how to do.

• See the click effect in a live demo (demo)
• Download the jQuery plugin jSimulateClick

The example has two interesting parts.

The first part is where the effect is associated to the elements of class ‘clickable-round’. When you click on any ‘clickable-round’ element, a circle will appear and diffuminate:

$('.clickable-round').click (function (event) {
 $(event.currentTarget).jSimulateClick (event.pageX - 1, event.pageY - 1, 'round');
});

The other interesting fragment associated the event to the elements that contain the class ‘clickable-square’. When you click on any of those elements, the effect will be quite similar to the previous one, but instead of drawing a circle, a square that will go from one pixel to the width and height of the clicked object will appear.

$('.clickable-square').click (function (event) {
  $(event.currentTarget).jSimulateClick (event.pageX - 1, event.pageY - 1);
});

If you want to play with the plugin, my advice is that you start playing with the border width, border color, the duration, or even the size of the circle/rectangle…

You can use this javascript for any personal or commercial application, or do whatever you want with it.

Finally, I would appreciate any comment for improving the effect.

The new version fixes several bugs, and includes some improvements.

Download jQuery 1.4.1 and have a look at the release notes.

The thing is that I recently noticed that the javascript I’ve been writing lately becomes messy after some time, after the page and the javascript grows a little bit, there are more events, … If you understand what I’m saying then it’s a good time for you too to change.

So I’ve said to myself: “hey! (I always start talking to myself with “Hey”), so Hey! You can do a couple of things, one intelligent and one really dumb”

• The intelligent: You can go and get a great controller that is fully documented, tested by the community, and start cleaning the mess. For example using a plugin for jQuery (CorMVC),  or even a framework like JavaScriptMVC o Jamal
• Or do the dumbest thing, that is, cerate it yourself

The smart reader probably have guessed the stupid I should be a couple of paragraphs before.

Anyway, here it is. I’m glad to introduce jcontroller and his little brother the jcontroller minified version (compressed using yuicompressor).

This controller has it’s own tests (not included), but basically all those tests are passed in Firefox, Chrome e Internet Explorer. Hold on a second!… Wait I’m going to try something… here it is, it also works on Opera. So it seems it’s working fine with the major browsers (I presume it will also work well in Safari, although I haven’t tried it).

What is jcontroller all about?

Basically it’s like any controller that uses the MVC(Model-View-Controller),  it’s just a way to have kind of pretty code instead of a big mess of code

What about the Model or the View?

Are you kidding? What kind of stupid question is that? Well, is not stupid at all… But in fact, the view is controlled by your browser, and the model… well I have a jdata class, but I’m not ready to share it (this class it’s been working for long long time, but I would have to explain some concepts before sharing, so assume there is nothing else).

jcontroller Example

Now I’m going to show you an example, so you can do whatever you want with it. But before showing you the example, I want to say a few words about the keys of the example:

• The controller is initiated by the ‘init’ method. If you name your controller “controller” then you should call “controller.init()”
• The controller will call ‘_init’ method at the beginning, so you might want to define it.
• The functions on your controller that start by ‘_’ are private and cannot be called by users (except _init, _default and _clear which have a special meaning)
• When the controller loads, automatically looks at the hash part of the URL and calls the proper handler.
• (ignore this paragraph now) Right now everything works for anchors for the same page, like <a href=”#whatever”> but you can implement your own trigger by returning your own function on the ‘_init’ method
• (ignore also this paragraph) You can define as many controllers as you want, each controller will be independent of the others, BUT if the controllers are triggered by the same elements, expect them to execute their actions at the same time.

Here are the links for the example:

• Example
• Example#message-1
• Example#message-2

The example is really simple. It’s that simple that I feel stupid for writing it, but anyway, have a look at it and you will start to understand the capabilities of jcontroller.

Note: Right now jcontroller uses jQuery, but I don’t think it takes more than 10 minutes to change it by any other framework.

Finally, here are the links (again) to jcontroller, so you can download them again:

• jcontroller.js (6.6 KB)
• jcontroller.min.js (1.2 KB)
• Si lo comprimes con gzip son sólo 552 bytes :p

So, nothing else to say. If you like it, you can use it as you wish (commercially, personally, academically, *ally). If you don’t like it, then I encourage you to print the jcontroller.js in paper and then break it in a hundred pieces, you will probably feel better (you can also leave a constructive message, but just after calming down).

Constructive comments and suggestions are always welcome, and destructive comments are ignored.

Cheers

The list of most important changes are:

• Elements are now returned in document order.
• .live() can now prevent bubbling.
• :visible/:hidden are now significantly faster.
• As are all the width/height methods.
• Selectors are much faster in Internet Explorer.
• appendTo/etc. have had a slight API tweak.

Now update your files

Links:

• Download jQuery 1.3.2 minified
• Download jQuery 1.3.2
• Read the official jQuery blog announce

The truth is this code is not for daily use, but it’s quite interesting to see the possibilities of javascript (well in fact I was looking for this because I need it, but it’s not the usual).

In the example on that page, the functions getSelectionStart and getSelectionEnd are used. The first one, as one might realize, says where is the cursor on the input or textarea, while the other tells where ends the selection (and a selection exists when getSelectionStart() != getSelectionEnd()).

Following the javascript functions I was talking about:

function getSelectionStart(o) {
 if (o.createTextRange) {
   var r = document.selection.createRange().duplicate();
   r.moveEnd('character', o.value.length);
   if (r.text == '') return o.value.length;
   return o.value.lastIndexOf(r.text);
 }
 else {
    return o.selectionStart;
 }
}
 
function getSelectionEnd(o) {
 if (o.createTextRange) {
 var r = document.selection.createRange().duplicate();
 r.moveStart('character', -o.value.length);
 return r.text.length;
 } else {
   return o.selectionEnd;
 }
}

Anyway, this post is about detecting if the user has Firebug active, and which version is using. Básically the first technique is just looking if there exists a DIV whose identifier is _firebugConsole, and then check the  FirebugVersion in order to get the version.

Following javascript code (using jQuery) detects wether firebug is active or not, and shows an alert with the running version:

if ($("#_firebugConsole").length) {
alert ("Firebug version " + $("#_firebugConsole").attr ("FirebugVersion") + " is active");
}

Converting previous code to any other javascript framework is really easy, even you can use document.getElementById.

The other way for detecting Firebug is checking wether window.console.firebug has been defined:

if (window.console && window.console.firebug) {
alert ("Firebug is active");
}

The thing is you cannot get the response once you do a cross-domain request (unless you use some tricks like a PHP proxy, …), so the code I developed does not know which is the PageRank obtained, however it can show the PageRank number in the right position, and that’s exactly what my script does.

Following there is an iframe where you can set whatever web-page you want, and it will show it’s pagerank (if any). I promise it only uses javascript.

Check this demo in a new window

What the script does is compute a set of checksums of the webpage given, and then update some fields in a form and send it to Google using GET method; after that the result is loaded in an iframe. The thing is the iframe could not be manipulated (even read), even if you do the request using typical ajax methods, it won’t work either.

The hack, trick, or whatever you want to call it, is that the PageRank appears just after a predefined string (“Rank_1:1:”), so what the script does is just estimate which is the position where the PageRank number should appear, and then move the iframe so the PageRank is the only number shown.

I know doing this in javascript is very… in fact I don’t know the exact English word I have to use here, but let’s say it is not a nice solution.

Following there is the script that computes the checksums and creates the form for querying Google getpagerank.js. You can also check pagerank.html to take a look on how the script is integrated in a webpage.

Finally, if you want to embed the webpage on your blog, or whatever, here it is a method to do so:

¿What do you think? ¿is it good? ¿is it crap?

On the next couple of days I will explain how to do cross-domain requests using javascript and send information from one server to another.