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

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

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.

Doing this task with jQuery is really easy:

$('#FormID').each (function(){
  this.reset();
});

The thing is, that the code above iterates through each element of the form, and calls to the DOM “reset” javascript method. In fact, the “reset” function does not exist in jQuery.

It would be much more simple to do something like $(“#FormID”).reset(). Fortunately creating that function in jQuery only will take a minute of programming:

jQuery.fn.reset = function () {
  $(this).each (function() { this.reset(); });
}

Using the code above, reseting a form would be just one call (as desired):

$("#FormID").reset();

May be using the name “reset” is too generic to be applied to any object (it will only work on forms), but I think it has a lot of sense to name it ‘reset’. But anyway, feel free to call it “resetForm” if you feel more comfortable.

Interesting links:

• Getting started with jquery: interesting to have a look at it
• Clearing form data: how could you erase all the data in a form (this is not about reseting the form, this is actually about clearing the form)