Click effect for jQuery

Today I’ve been playing for a while with javascript. The truth is that I haven’t found what I was looking for, but let’s assume that this is because I’m a programmer and not a designer.

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.

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.

, , ,

jQuery 1.4.1 is out

Some weeks after the release of jQuery 1.4, now the first bug fix release for this fantastic javascript framework is out.

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

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


jcontroller: A small and simple controller for javascript

It’s been a long time since the last post, so I’ve though Hey! I’m loosing users, I cannot let that happen, let’s get something from any project I’ve done recently, so I can do a post :p

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 JavaScriptMVCJamal
  • 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:

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:

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

, ,

Firebug 1.5 crashes on Ubuntu 64-bit

This morning I got an update message from Firefox for updating firebug to the latest 1.5 version. I’ve installed it, but when I tried to click on the icon…. booooom!! Firefox window has dissapeared.

According to this post in the Firebug blog, the crash will be solved on future versions of Firefox (3.5.8).

Just in case you are here because you have the same problem, here are a couple of solutions that work:

Google Chrome for Linux

Today I’ve received an e-mail from Google telling me that they launched the new beta for linux of their browser Google Chrome.  It’s been a while since they first launched a version for Windows.

As you might expect, I’ve downloaded and installed this brand new version of Chrome for Linux and I installed on my Ubuntu 64-bit laptop.

The truth is that it caused me a great impression, when I launched google-chrome command, the browser just appeared in a fraction of a second. I though Opera was quite amazing at rendering the browser, but now I think Chrome is even faster.

The next thing I tried is the typing test of ARTypist, and it worked amazingly well. I know it uses internally a lot of javascript, and it all works great.  Even the CSS displays properly well, and since several months ago I haven’t tried to run ARTypist on Chrome :)

Finally, after visiting another couple of web sites I realized flash worked as well without me having to install any plugin. I don’t know if it has detected the flash plugin was already installed (probably), but it’s great having it working on all pages. At the first sight, it seems the browser seems it’s working well :)

Right now I’m not planning to change Firefox by Chrome, but at least I can test my webs on Chrome without having to open a virtual machine with Windows.

, , , ,

TCPDF: excelent library for generating PDF in PHP

The other day I was looking how to create PDF files in PHP.

The first thing that came to my mind was the PDFlib extension included in PHP since version 4. The problem with this library is that  I thought it was kind of low-level, and I didn’t had any idea on where to start.

In fact, the list of functions of PDFlib is quite big, and probably you can do about anything, but I did not want to be writing a hundred of lines to do a simple PDF, I just wanted to put a background image and write some lines in there.

Anyway, I decided to continue looking more information about this library and I end up finding a library called TCPDF, which is totally free, and seemed a lot more complete and simple. I really don’t know if it’s better or not than the PDFlib, but at least TCPDF has lots of examples. There are super-simple examples of about any aspect of the PDF, so doing your first PDF is a matter of copy-pasting from several examples. Really easy!

The truth is, that I did my FIRST prototype in about 15 minutes. Not bad at all. With this TCPDF library you can generate the PDF as if it was like a HTML file. You can pass the text using HTML tags (even CSS), and then the library internally converts that to the PDF, so you don’t have to think much about generating the PDF.

The only “problem” I see with this library is that the size of the zip file you have to download is around 10MB, which are around 16 MB once uncompressed. Anyway, almost all the size of the library comes from several fonts it includes, documentation and examples. If you remove the documentation and you keep only those fonts you are going to use, this library could be minified to 1 MB only.  Although for web development I think it does not worth to make it smaller. The size does not matter.

For more information about this library you can take a look at www.tcpdf.org

, ,

Transfer a twitter application from one user to another

If you have a twitter account maybe you have played with twitter API, or even you have made a twitter application for integrating the “Sign in with Twitter”, or maybe you have created an application for something else.

Anyway, these days I’ve been working in integrating the Sign in with Twitter and Sign in with Facebook in the typing web (I haven’t released the new changes yet). I’ve been thinking that it will be a good idea to create a user called “artypist” in twitter to post the news of the web, so once I created that user I though it will be a good idea as well to move my ARTypist application from my user (amniotic) to the new artypist user. The only problem I found is that there is no option in twitter that says “Transfer this application to another twitter user”.

After this, my first though was removing the application and creating it back on the other user. This was not possible !  Twitter does not allow to remove applications once created…

A couple of minutes later I got another idea… And this new idea worked!!

To transfer a twitter application  (say APP) from one user (A) to another user (B) the only thing you need to do is to log in twitter as A, then edit the application settings and rename it to APP2, then logout and log in as B, and now you can create the application APP again. As the name has been “released” it can be used by another application :D

I hope this helps somebody!

, ,

[SOLVED] The kvm-qemu virtual machine ignores shutdown and reboot

These days I’ve been playing with KVM (Kernel-based Virtual Machine). All started with a kernel upgrade and VMWare Server stop working, and getting lots of errors when executing vmware-config.pl while recompiling the modules.

Anyway, what matters is that I’ve migrated a couple of virtual machines from VMWare Server 2 to qemu-kvm.

One of the virtual machines ignored me completely when I pressed the “Shutdown” and “Reboot” buttons in the Virtual Manager. The virtualized/guest machine was a Ubuntu Server.

After searching in Google for a while I found a solution! Fortunately it was an easy solution, although I had to search for a while. The package acpid was missing.

The problem was solved after installling acpid package.

$ sudo apt-get install acpid

After installing this, the ’shutdown’ and ‘reboot’ buttons worked perfectly!

Just in case you have the same problem when virtualizing a Windows machine (yes, I had the same problem), the problem is in the configuration of the virtual machine. The solution I’ve found is to edit the configuration and between <feature> and </feature> add <acpi/> and <apic/>. After doing this you will probably have to reinstall windows, or repair it using the installation CD or iso (I think there is another way of doing this without reinstalling, but you will have to use Google this time).

Finally, I just want to mention that the Virtual Manager in linux surprised me, it’s simple but quite functional. It’s not as functional  as virsh command for editing virtual machine configurations, but you can do the basic, and install new virtual machines from the Virtual Manager GUI which is always a good thing.

, , , , , , ,

How to get the UUID of a disk or partition in Ubuntu

Sometimes it can be very useful, and even necessary, to know the UUID (Universally Unique Identifier) of a disk or partition in Linux.

Nowadays the configuration for mounting disk partitions on linux (the file /etc/fstab) uses the UUID instead of the device name (/dev/hda1, /dev/sda1 …).

If you need to know which is the UUID of a particular device you can run the blkid command. E.g:

$ sudo blkid /dev/sda1
/dev/sda1: UUID="8b6ec31c-1f41-49f3-82da-d2ab0f0fa312" TYPE="ext3"

If you don’t like this command, or you think you cannot remember it, there is another way of knowing the UUID. If you have udev in your system (I think is udev the one that updates the list), you can go to  /dev/disks/by-uuid/ folder and run a list command (ls). E.g:

$ ls -l /dev/disks/by-uuid/
lrwxrwxrwx 1 root root 10 2009-11-19 07:56 8b6ec31c-1f41-49f3-82da-d2ab0f0fa312 -> ../../sda1
lrwxrwxrwx 1 root root 10 2009-11-19 07:56 626adc53-3478-4eb1-9f68-dc0b6f9308e7 -> ../../sda2
lrwxrwxrwx 1 root root 10 2009-11-19 07:56 9cfc5c6d-f343-411e-ac59-31eee6b12a9b -> ../../sda3

The advantage of this command is that we don’t need administrator privileges, and it’s easier to remember :)

, , ,

Emulate short tags in PHP when short_open_tag = off

Yesterday I was playing with PHP 5.3. It seems that the default configuration comes with short_open_tag disabled :(

The short open tags is what allows to write code like this <?=”algo”?> instead of having to write <?php echo “algo”?>. Something REALLY INTERESTING, it makes PHP code really clear when looking at templates from my point of view.

I think PHP people has not made the right choice here. From what I understood, they disabled this because of the ambiguity when parsing XML documents, which starts by <?xml. I’ll better stop talking.

Anyway, everything is because I have a class called jview which loads the PHP view templates in my system, and lots of the templates (if not all) use this tags, so I wanted to keep writing the code like that without changing the short tags in the template files. You can think on WordPress templates to get an idea of how my templates look like.

Just to make an example of the whole problem, have a look at the following PHP code:

<?php echo "hello"?> <?= "world"?>

When short_open_tags is enabled, the PHP output is:

hello world

But when short_open_tags is disabled, then PHP produces this ugly output:

hello <?= "world"?>

BTW, I had two alternatives for solving this problem:

  • Copy the template file into a temporal file, replace all ‘<?=’ by ‘<?php ‘, include the temporal file as a PHP file, and finally remove the file
  • Make a PHP interpreter in PHP where I replace ‘<?=’ by ‘<?php ‘

If you know me, you know I’ve chosen the second option ;D

It only took me 20 minutes!! Less than I expected!

Here is the code:

  function include_emulating_short_tags ($viewFile)
  {
    // Alternate method for making <?= valid
    $raw = file_get_contents ($viewFile);
    $raw = str_replace ('<?=', '<?php echo ', $raw); 

    $html = '';
    $phptokens = @token_get_all ($raw);

    $mode    = 'text';
    $phpcode = '';
    foreach ($phptokens as $ptoken)
    {
      if (($mode == 'text') && is_array ($ptoken) && ($ptoken[0] === T_OPEN_TAG)) {
        $mode = 'php';
        continue;
      }

      if (($mode == 'php') && is_array ($ptoken) && ($ptoken[0] === T_CLOSE_TAG)) {
        ob_start();
        eval ($phpcode . ';');
        $html .= ob_get_contents();
        ob_end_clean();

        $mode    = 'text';
        $phpcode = '';
        continue;
      }

      if ($mode == 'text') {
        $html .= is_array ($ptoken) ? $ptoken[1] : $ptoken;
      }
      else {
        $phpcode .= is_array ($ptoken) ? $ptoken[1] : $ptoken;
      }
    }

    if (($mode == 'php') && ($phpcode !== '')) {
      ob_start();
      eval ($phpcode);
      $html .= ob_get_contents();
      ob_end_clean();
    }

    return $html;
  }

At the end, the variable $html returned, contains the HTML code that will otherwise be flushed to standard output. This way, you can do with the output whatever you want.

Finally, if we use include_emulating_short_tags when short_open_tags=0 with the original example, the output will be “hello world”, what I wanted :D . I can see a couple of inconveniences (that could be work-arounded by writing something more elaborate), but for practical uses, it works perfectly well.

, , ,

prev posts