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 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

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");
}

This new version seems to have great improvements over jQuery 1.2.6 which was the last release. Following there is a list with the most important features on this version, as you can see on the jQuery blog, son:

• Sizzle: A sizzlin’ hot CSS selector engine. Works really fast for most commonly used selectors
• Live Events: Event delegation with a jQuery twist.
• jQuery Event Overhaul: Completely rewired to simplify event handling.
• HTML Injection Rewrite: Lightning-fast HTML appending.
• Offset Rewrite: Super-quick position calculation.
• No More Browser Sniffing: Using feature detection to help jQuery last for many more years to come.
  

And now a couple of statistics showing the new performance improvements:

As you can see on all the stats, jQuery seems to be the fastest framework out there, and it has improved a lot since previous version.

Now I have to check it myself, so I’m going to change the jQuery version on the web pages I’m developing to see if everything is as good as it seems or it has any drawback.

People interested in the details can check theofficial announcement of release of jQuery 1.3 with much more information

Finally, download the latest version of the script:

• jQuery 1.3 minified
• jQuery 1.3 regular

The problem appears when we are asking about the div X and the parent is hidden. It is a problem because when a div is hidden, all its childs are also hidden, but when we ask jQuery about the div X it doesn’t matter if any of its parents is hidden or not, it will only check the visibility of the div X by itself, which sometimes is fine, but some others is not.

Like I always do, let’s see a couple of examples.

Ejemplo 1:

Let’s start from the beginning. If I’m using the following HTML code:

<div id="DivBlock">Element</div>

Then after executing the following javascript code we will see two alerts, the first one saying “Visible!”, and the second one saying “Not Hidden”.

if ($('#DivBlock').is (':visible')) alert ("Visible!");
if (!$('#DivBlock').is (':hidden')) alert ("Not Hidden");

Up to this point everything work just fine. As you can see, asking if a layer is visible or not in jQuery is quite easy.

Ejemplo 2:

Let’s try something harder.Let’s see what happens if the parent div is hidden:

  <div style="display: none;">
   <div id="DivBlock">Element</div>
  </div>

Again, if we run the same javascript code (that I copied again), you will see that every single browser but Safari will show the alerts, saying that the div is visible, but wait, the element is, in fact, hidden!!.

if ($('#DivBlock').is (':visible')) alert ("Visible!");
if (!$('#DivBlock').is (':hidden')) alert ("Not Hidden");

Oh my god! ¡¡jQuery is doing it wrong!! (forget the dramatism here in fact it seems more a browser implementation issue.

Anyway, fortunately we have a solution for this, and it’s quite easy. If you want to ask if the div X is really visible, you sould ask are X and all its parents visible?, or in other words is it X visible and are all their parents not hidden? which in jQuery translates to:

if ($('#DivBlock').is (':visible') && $('#DivBlock').parents (':hidden').length == 0)
  alert ("Visible!");

The code above should work perfectly in all browsers.

Finally, as an alternative solution, a selector could be created to make it easier to ask from jQuery:

jQuery.extend(
  jQuery.expr[ ":" ], 
  { reallyvisible : "(jQuery(a).is(':visible') && jQuery(a).parents(':hidden').length == 0)" }
);

Using the new selector, asking if DivBlock is really visible will be coded as following:

if ($('#DivBlock').is (':reallyvisible'))  alert ("Visible!");

For more information:

• jquery *really* visible
• jQuery Traversing: parents method
• jQuery Traversing: is method
• jQuery Visible Selector
• jQuery Hidden Selector

The objective for a time picker is to let the user set the time in hours and minutes, in 24-hour format, or even specify  AM/PM . In my opinion, a text input using javascript to validate the hour format (e.g: hh:mm) should be enough in most cases.

Anyway, let’s see the different time-pickers out there, and do some criticism about them :p

NoGray Time Picker

I think this is the one I like the most, it is cool and works as expected. NoGray Time Picker is the number one. This time picker improves the web design without degrade the usability of the web site. This time-picker uses mooTools.

As expected, when you click on the hands of the clock, hands move and you could change hour and minutes easily.  It is a great effect, and all in javascript

Here you could find an example of this time-picker working

Time Picker jQuery plugin

Time Picker is a jQuery plugin. It is basically formed by three select: one for the hour, another for the minutes and the last one for the AM/PM. If you intend to let the user specify the time in intervals of 10 or 15 minutes, then this time picker is for you, but if you want a more accurate time from the user, 60 different items in a select box is too much (although you can do it, anyway).

As you can see, this plugin is very easy to understand by an user, and to implement by a programmer.

Fancy Time Picker

On the other hand we have Fancy Time Picker. This one is not bad at all, but I don’t like it very much. When the table appears there are lots and lots of elements, so much information for an user just to pick up an hour. I think this might scare some users, instead of help them.

You could check the Fancy Time Picker demo on this link.

Clock Pick

Clock Pick is another time picker that I’ve found after looking on Google. It is implemented as a jQuery plugin, and from my point of view the usability is worse with this plugin than without it. I think the idea is not bad, but there is something is not working as one might expect.

Here it is an screenshot of the plugin working:

I think is better if you judge for yourself and you make your own conclussions, so if you want to see the downgrade of ussability, try the real example on this example page

jQuery.ptTimeSelect

ptTimeSelect is another jQuery plugin for picking time. The problem that I see on this time-picker is that there is too much visual information just to select hours and minutes.

You might think:

- “Hey! The numbers have lots of sense. Can’t you see that they are grouped in hours and minutes, and that you can select between AM/PM?”

- “Yes, you are right, they made sense” – I’ll reply – “But, isn’t true that you spent arround 3 seconds in finding that sense? And isn’t true that you work with computeres? Try showing this to your mother, and ask her if she understand anything about this….”

That’s it, for a time picker is too much mess.

jQuery TimePickr

Finally, we have another jQuery plugin called Time Pickr. The idea is not bad, something similar to Clock Pick above: use a navigational menu to select hours and minutes. The problem I see is that is too much for a user. I mean, I could be wrong (and I probably am),  but don’t you think using that long menu is using too much  in the wrong direction?

Conclussion

If I have to use any time-picker for any of my projects, I think I would choose the two time-pickers that appear on top of the list (No Gray Time Picker or jQuery Time Picker), I will discard the rest of them. After thinking for a while, do we have to use so much sofistication just to let the user select time? The idea is to help user for picking up a time, not messing him up, so the time picker you select should be the simple and improve usability, not downgrade it.

As the latest note on this article, you should ask yourself:

Would my parents/grandparents understand on the first sight how it work?

• If you think they will understand, then use it
• If you think they will understand after some seconds, then you have room for improvement, for something more usable
• And if the answer is no, that they won’t understand, then it is better to look for something else

Rounding corners is not difficult, in general, the problem is that you should use some “hacks”,  it is not the same rounding corners using a style on a unique DIV, than using 3 DIVS or create a TABLE with background images in order to emulate this effect.

Unfortunately, as the Internet Explorer (even version 6) is still widely used, doing what I’ve explained on the previous post is not a good practice at all.

Anyway, for practical use, as I’ve said before, there are other easy methods to let people see rounded corners no matter its race, gender, religion, operating system or browser. One of this  methods is using javascript libraries for rounding corners easily.  Fortunately, the web is full of javascript libraries, and rounding corners was once an important topic, so let’s see some options:

• Nifty Corners, and the latest version, Nifty Corners Cube: this was the first widely used solution, it received very good reviews by the time
• jQuery corner plugin, created by Dave Methvin: here you could see a demo using all the parameters. After some time this plugin was updated by Mike Alsup who included even more conrer types  (taking a look to this demo to see all available corners).
• JRC is another plugin for jQuery I’ve found on the internet,  following this link you could see a demo
• MochiKit comes with native support for rounded corners as you could see on this example, somehow is very limited but enough for some purposes
• OpenRico also supports rounded corners natively

Finally, if you do not intend to use javascript for rounding corners (because you are looking for something more sofisticated, or you don’t like doing this kind of things by javascript), then take a look at this article about 25 techniques for rounding corners using CSS

Update: I’ve found ShadedBorder which looks great, and I think this is the one I’m going to use.