Archive for the ‘jQuery’ Category

ImgAreaSelect 1.0.0-rc.1

Friday, September 27th, 2013

I’m happy to announce that the release candidate for version 1.0 of imgAreaSelect is now available for download on GitHub and jQuery Plugins.

The code has actually been sitting in the repository since August 11th, but there were a few unresolved issues with the test suite on mobile browsers that I had to sort out — and I finally found a window of free time big enough to do that.

Adding support for mobile browsers was the most requested feature, and I’m glad it’s there at last (especially considering how painful it was to develop and test). The plugin was tested to work in Safari on iOS, the stock browser on Android 2.x and 4.x, and the mobile versions of Firefox, Chrome, and Opera on Android 4.x — which I think is good enough to say we have it covered.

This version is still strong in terms of backwards compatibility — while it is intended to be used with jQuery 2.x, it works just as well with jQuery 1.9, 1.8, and 1.7. Hell, it even pretty much works in IE6 — sounds perverted these days, doesn’t it? However, don’t take it for granted that it will stay that way in upcoming 1.x releases, as my plan is to focus on jQuery 2.x and the browsers that it supports.

That’s it for now — before I drop the “rc.1″ part and do a proper 1.0 release, I need to update the plugin homepage and documentation, and generally wrap things up. I also hope to get some early feedback, especially from people using the plugin in mobile web apps, so be my guest and try it out!

Another Update on imgAreaSelect

Sunday, March 31st, 2013

Here’s a little update on the development of imgAreaSelect version 1.0 with mobile browsers support, since people are inquiring about it every now and then.

I had a plan to release the glorious version 1.0 mid-March, and for a while it seemed everything was going in the right direction — I fixed my iOS testing setup (which is a VM running Mac OS X and the iOS device simulator), resolved some issues that came up, and found the plugin to be working nicely in both iOS and Android 2.x stock browsers. Then, for the first time I tried it in Android 4′s browser, and was greatly disappointed to see it being broken and pretty much unusable.

I’m not sure what is the cause of the issues, but it seems to be related to how touch/mouse events work in the newer Android browsers, and I’m slightly worried that fixing the problems might require a significant refactoring of the event handling code in the plugin. And it doesn’t help that debugging JavaScript on mobile devices is still a pain (though, I’m having some hopes that remote debugging might improve the situation).

All in all, I can’t say how much longer it’s going to take me to fix that and make a release. Nevertheless, I’ll keep working on it and will let you know how it goes.

TinyTimer – a jQuery Timer Plugin

Friday, March 29th, 2013

Here’s a slightly late announcement of a new jQuery plugin that I’ve made. Its name is TinyTimer and it’s a countdown (or countup) timer that you can put on a web page to show, for example, the number of days left until the next predicted doomsday or another significant event. Here’s how it might look:

There already are dozens of plugins that do this — my goal was to build something really tiny (not larger than 1024 bytes when minified), but still feature-rich. The list of features includes:

  • Counting down to or up from a specific date/time
  • Flexible formatting of displayed time
  • API functions to pause/resume the timer
  • Callback functions for every tick and countdown end

The plugin is published on jQuery plugins and on GitHub. For usage instructions, refer to the README file in the repository. As usual, I’m looking forward to your feedback.

SelectList 0.6.1

Tuesday, March 12th, 2013

A few days ago, I have put a new minor version of selectList up on GitHub and on jQuery Plugins site, and today I’ve also made it available for download here on my website.

This version is actually identical to the previous one (0.6.0), the only difference is that now the zipped distribution package on jQuery Plugins comes with the minified version, in addition to the full source code. I realized that, since the package is basically a snapshot of the GitHub repository, the minified file was not included, because I wasn’t keeping it under version control (it was only available in the distribution zip archives here on my site). Now that’s fixed, and you’ll be getting the full package from jQuery Plugins.

SelectList 0.6

Tuesday, February 19th, 2013

I released a new version of selectList, the multiple selection jQuery plugin. This version introduces jQuery 1.9 support, and you can get it from the project homepage, jQuery plugins (did I mention I’m happy the plugins site is back?), or from GitHub.

By the way, this release is the first one that I made with Grunt, the JavaScript build tool. My previous, homebrew solution for building jQuery plugins involved shell, Perl scripts, and Java, all duct taped together with a Makefile — and was exactly as horrible as it sounds. Grunt made the build process a lot more straightforward, and, hey, it’s all JavaScript now! If you’re a JavaScript developer, I wholeheartedly recommend you give Grunt a shot.

ImgAreaSelect 0.9.10

Wednesday, January 23rd, 2013

By popular demand, I’m releasing a new version of imgAreaSelect, with added support for the latest and hottest release 1.9 of jQuery. There was a number of significant changes in jQuery (made in preparation for the upcoming 2.0 version), like the removal of jQuery.browser, which turned out to be incompatible with the plugin.

Thanks to everyone who provided feedback, especially to Shane Shipston, who identified the problems with the new jQuery — this helped me roll out this update pretty quickly.

By the way, I noticed the jQuery Plugins website is back — I hope I’ll have enough free time in the next couple of days to get my plugins up on it.

ImgAreaSelect 0.9.9

Tuesday, November 27th, 2012

I have finally released the new version of imgAreaSelect, numbered 0.9.9, which is intended to be the last version in the 0.x line (the next one is going to be a glorious 1.0 release).

The new version fixes a few minor issues, and is tested to work with the latest version of jQuery (1.8.3). As always, lots of thanks to all the people that sent me feedback and helped me with debugging.

I also promised to give you an update on the mobile version of the plugin. Well, it’s in a somewhat stalled state. I can’t get back to really working on it, because my beloved testing environment went broken — specifically, I can no longer test on an iOS browser. Since I don’t own any iOS devices, I used to do testing on an iPhone/iPad simulator, on Mac OS X running on a VirtualBox virtual machine. But, on my new system, I can’t get the VM to work. I spent countless hours reconfiguring the machine, creating new instances and reinstalling the OS, but so far nothing worked.

Anyway, I’m still determined to get back on it and get the mobile version to a release state, so either I’m going to get this bloody VM to work soon, or I might just end up getting an Apple device (gasp!). I also considered building a Hackintosh, but this might lead to the same problems that I’m having with the VM — ain’t nobody got time for that.

Update on ImgAreaSelect

Wednesday, September 26th, 2012

I’ve received numerous e-mails in the past couple of days asking me when the new version of ImgAreaSelect will be released. I wanted to make that happen this last weekend, but, well, precious technology failed me. My laptop, which I’ve been using as a development workstation for the past few months, started overheating really badly, up to the point of becoming unusable. I’m waiting to get it fixed, and until then I have to use an old netbook that’s only good for e-mail and web browsing, so I have to take a little break from development.

Actually, I was going to take a break anyway — I’m on a short hiking trip from today until the end of the week. But, I hoped to roll out the new version of ImgAreaSelect before leaving for the trip, and the overheating trouble thwarted that plan.

The good news is, I managed to push some code to GitHub before the problems started. The current version in the master branch is the release candidate for 0.9.9, and it fixes one major issue with IE 9 and jQuery 1.8. I also created a separate branch for the mobile variant, and the code in that branch has basic support for touch events.

For now, please get those versions from GitHub, and I’ll make proper releases when I get back from the trip and sort out the problem with my laptop. I’ll keep you posted.

JQuery valHooks

Friday, August 24th, 2012

In selectList version 0.5, I made use of an interesting feature of jQuery, called valHooks. It’s used internally in jQuery (since version 1.6) and there’s not much documentation on it, but it can be very useful for plugin authors.

Valhooks allow you to change the way the jQuery method .val() works for certain elements, giving you control over how element values are set and retrieved. You define a function and assign it to a specific element type, and whenever .val() is called on that element type, your function is invoked to process the call.

Let’s take a look at an example — the code below is a very simple jQuery plugin that makes use of a get valhook to convert the value of an input field before it is retrieved. In practical terms, it allows you to enter an expression representing the number of bytes, with the ability to parse quantifiers like “kB” for kilobytes or “MB” for megabytes, and automatically translate them into bytes. So, “1k” or “1kB” becomes “1024″, “1M” or “1MB” becomes “1048576″, and so on.

(function ($) {
    // jQuery plugin definition
    $.fn.bytesInput = function () {
        $(this).filter('input[type="text"]').each(function() {
            $(this).data('bytesInput', true);
        });
        return this;
    };

    var origHook;

    // There might already be valhooks for the "text" type
    if ($.valHooks.text)
        // Preserve the original valhook function
        origHook = $.valHooks.text.get;
    else
        // Make room for a new valhook
        $.valHooks.text = {};

    $.valHooks.text.get = function (el) {
        // Does this element have our data field?
        if (!$(el).data('bytesInput'))
            // No -- check if there was a valhook function already defined
            if (origHook)
                // There was, so go ahead and call it
                return origHook(el);
            else
                // No previous function, return undefined to have jQuery
                // take care of retrieving the value
                return undefined;

        // Try parsing the expression
        if (matches = el.value.match(/(\d+)\s*([kKmMgG]?)[bB]?/)) {
            switch (matches[2].toLowerCase()) {
                case 'k':
                    // Kilobytes
                    return matches[1] * 1024;
                case 'm':
                    // Megabytes
                    return matches[1] * 1048576;
                case 'g':
                    // Gigabytes
                    return matches[1] * 1073741824;
                default:
                    // Just bytes
                    return matches[1];
            }
        }
        else
            // Can't parse the expression -- just return the current value
            return el.value;
    };
})(jQuery);

The example is pretty straightforward, and if you’re familiar with how jQuery plugins work, you should have no trouble understanding it. One specific thing that might be worth pointing out is how the .data() method is used to distinguish the special input field from other inputs (for which the .val() method should work the usual way). The plugin initialization function attaches data to the element at the "bytesInput" key — the get valhook function then checks for the presence of that key, and only does its thing if the key is there. Otherwise, it either falls back to the original valhook function (if there was one), or returns undefined, which makes jQuery process it in the traditional manner. This way the plugin can be used with other plugins or pieces of code that set their own valhooks for input elements, and not interfere with them.

If you’d like to see the above example in action, I put it up on jsFiddle.

SelectList 0.5.1

Saturday, August 18th, 2012

I have just released a new version of selectList. It turned out the previous release that I announced a couple days back had a bug that broke the jQuery .val() method for regular (non-selectList) select elements and made it impossible to set their values. This release fixes that.

The bug was spotted and reported by James White — thanks!

I also used this as an opportunity to test the plugin with the latest 1.8 release of jQuery, and all the tests passed with flying colors (yay!), so version 1.8 is now bundled with the plugin.

  • Archives

  • Categories

  • Meta

  • Latest Tweets


    Warning: Illegal string offset 'last_access' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 334

    Warning: Illegal string offset 'time_limit' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 334

    Warning: Illegal string offset 'last_access' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 336

    Warning: Illegal string offset 'twitter_api' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 234

    Warning: Illegal string offset 'user_token' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 262

    Warning: Illegal string offset 'user_secret' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 263

    Warning: Illegal string offset 'consumer_key' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 264

    Warning: Illegal string offset 'consumer_secret' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 265

    Warning: Illegal string offset 'twitter_username' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 270

    Warning: Illegal string offset 'show_retweets' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 272

    Warning: Illegal string offset 'exclude_replies' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 275

    Warning: Illegal string offset 'twitter_data' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 282

    Warning: Illegal string offset 'twitter_data' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 350

    Warning: Illegal string offset 'twitter_data' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 351
    Twitter outputted an error:
    .
    Warning: Illegal string offset 'time_format' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 484
  • Follow odyniec on Twitter