Archive for April, 2010

Fixing double-encoded UTF-8 data in MySQL

Double-encoded UTF-8 texts (not to mention triple-, quadruple- and so on) are a fairly common problem when dealing with MySQL. This may be due to the fact that the default character set of the connection to the server is Latin-1, but that is not relevant once the data is already corrupt.

Here is how to fix it, in two simple steps, using the mysqldump and mysql commands:

mysqldump -h DB_HOST -u DB_USER -p DB_PASSWORD --opt --quote-names \
    --skip-set-charset --default-character-set=latin1 DB_NAME > DB_NAME-dump.sql

mysql -h DB_HOST -u DB_USER -p DB_PASSWORD \
    --default-character-set=utf8 DB_NAME < DB_NAME-dump.sql

Of course, you should first replace DB_HOST, DB_USER, DB_PASSWORD and DB_NAME with values, corresponding to your database setup.

No Comments

jQuery :hidden/:visible and animation oddities

Beware that in some cases your jQuery animations (e.g. fadeIn(), fadeOut() and others) may not run, because jQuery may think that the DOM node, on which you request the animation, is not visible.

When and how can this be a problem?

In most cases, of course, the DOM node will indeed be invisible and this will not be an issue.

There are, however, some exceptional cases. Suppose you have an absolutely positioned container, with no explicit width and height, which in turn has absolutely positioned child elements. If you, for example, set the opacity of the container to 50%, its absolutely positioned children will also become 50% opaque. If you set the CSS display to none, its children will again be hidden.

However, the container is technically invisible.

That’s because the container’s browser reported outerWidth and outerHeight are both zero, which, for jQuery, means that the element is invisible — see [1] — that’s the way the :hidden and :visible selectors work in jQuery 1.3.2 and newer.

Here comes the problem: if you run any animations on the container — for example fadeOut() — it will be optimized by jQuery and will not execute, due to the fact that jQuery sees the element as not visible (which is correct and the clever thing to do in most cases).

The solution is quite simple — you may just set an (even random) nonzero width or height to the container. As its children are absolutely positioned, it should not affect anything, but your animations will run.


1 Comment