jQuery Trick #1: Focus and Select issue in Chrome & Firefox

In this post I am going to explain about a trick that would help us to resolve a focus and select issue, which I recently found in Google Chrome (version 29.0.1547.76 m) and Firefox (version 23.0.1). This is a browser-specific issue and it’s kind of weird that it didn’t occurred in  Internet Explorer 10

Issue

Let’s say we have a requirement like as soon as a user focus anywhere inside a textbox, it would automatically select the whole text present inside the textbox. For this demo, our HTML markup is very simple. We have input text box which has a value already set for the demo purpose only. 

HTML:

<input id='myInput' type="text" value="This is a sample text." />

Now, we can achieve the above requirement using the power of jQuery like:

JS:

$('#myInput').focus(function () { $(this).select(); })

This is a quite a simple code but still for a wider audience, let me explain about it in few lines:-

1. Code in the first line above is used to attach a focus event handler to the input text-box with ID as  myInput
2. Code in the second line is used to select the entire text field using the  .select()  method. Actually, here we are triggering the “select” JavaScript event manually, by applying the  .select() without an argument.

Expected Result:
Now our expected result is as soon as user focus anywhere inside a textbox, it would automatically select the whole text. With the jQuery code above, it works fine in other browsers but not in Chrome and Firefox. In Chrome/Firefox, as soon as user focus anywhere inside a textbox the whole text get selected and then un-selected. It happens very fast, so might even thinks that nothing happens at all. I have created a demo for it, which you can test and see for yourself. 

Demo:

• Demo on jsFiddle #1
  ( Here’s a demo which demonstrate the issue. )

Trick

The trick here to resolve this issue is to  prevent  the default action of the  "mouseup"  JavaScript event, by using the following code: 

JS:

$('#myInput').mouseup(function (e) { e.preventDefault(); });

Demo:

• Working Demo on jsFiddle #2
  ( Getting the expected result now. )

This happens since in some browsers  mouseup event is raised before the  focus event but in Chrome or Firefox  mouseup  event is raised after the  focus  event causing the “Focus and Select” issue. But by preventing the default action of  mouseup  event from triggering, we make sure nothing like that happens in Chrome or Firefox too.

That’s it! If you have any comments or suggestion about this post, I would really appreciate it.
Happy Coding

Continue

Awesomeness of "Watch Folders" in Photoshop Elements Organizer

Watch Folders : This functionality is a little hidden in Elements Organizer (File>Watch Folders) and not many know about it usefulness. It is one quick way to get media into your Organizer catalog without bothering about manually importing into it.

To use it, just make the parent folder (of all your photo folders) as the watch folder and it auto imports the media  into your Organizer catalog. As soon as any new picture is added to your watch folder in windows explore or to any child of your watch folder, it would be auto-imported to your Organizer catalog.

For example, mostly all my pictures are dumped to one of following three folders (shown in screenshot).  So i have made all three as my watch folders. Hence I never need to import any media to my Organizer catalog.

Awesomeness is added if you say exchange photos or receive photos through dropbox. You can add dropbox as your watch folder. Hence all media comes to your Organizer catalog automatically.

Continue

String Concatenation

This section is unique because we often use concatenation techniques for code readability and organisation benefits in addition to business logic purposes. In other words, we tend to intentionally sacrifice application performance in favour of prettier code. I’ll stick to this notion to demonstrate the speed differences. Common concatenation principles include:

foo = foo + bar;
foo += bar;

The first one will turn out to be faster in all browsers, by a small margin (only Safari 5 will double the performance). That’s good to know, sure, but there’s more to come.
How many times have you seen something like this bit of code:

Ext.create('MyView', {
    tpl: [
        '<div class="heading">',
            '<div class="firstname">',
                '{firstname}',
            '</div>',
            '<div class="lastname">',
                '{lastname}',
            '</div>',
        '</div>'
    ].join()
});

I created an array of strings and used Array.prototype.join to combine them into one. Of course, it’s much prettier than combining with a + sign, and the code is more readable, too.

[].join() is, naturally, slower in all browsers but Chrome. Just as the evaluation test above, Chrome is able to employ advanced caching techniques to deliver faster results for repeated actions. In other words, in real life [].join() will always be slower.

Let’s rewrite that statement, persist the prettiness, and increase the performance:

Ext.create('MyView', {
    tpl: ''.concat(
        '<div class="heading">',
            '<div class="firstname">',
                '{firstname}',
            '</div>',
            '<div class="lastname">',
                '{lastname}',
            '</div>',
        '</div>'
    )
});

Instead of creating a new array, filling it up with strings and then joining it, I simply created an empty string and used String.prototype.concat method to append arguments to it. Visually it doesn’t make a huge difference, the code is as pretty as it was. However, the latter performs significantly faster than any other form of concatenation.

Continue