Hey! This is old! This blog has moved to http://timmywillison.com
So my colleague @blahed said I should write a blog post about this problem I had. I said it would be short post and it would go something like this….”Don’t use Flash”. But I guess I’ll expound.
Let’s put it this way. Flash is like your fist. And IE is like the rusty nail that gives you tetanus and makes you die. Working with one is bad…working with both causes infections in your intestines. And it hurts.
Recently, I needed to embed a swf and all I wanted it to do was play when it became visible and stop when it wasn’t visible. But if you’ve ever had to write an actionscript interface for your swf (for instance play and pause functions you can call from javascript), you may have run into problems with ExternalInterface.addCallback. There is a wonderful post that explains all of the pitfalls when using this function here.
Basically it says you can’t put the swf inside a form (which wasn’t my problem), you should use something like swfobject to embed your swf (which I was through jquery.media), and, here’s the kicker, THE FLASH FILE MUST BE VISIBLE ON THE PAGE. That’s right. If you’re functions aren’t working…it may be because the swf isn’t visible. You might be asking, “Does this go for all browsers?” Of course not dummie, only IE. Instead, I made the swf autoplay whenever it is attached to the DOM and I had to just attach and detach it whenever it should play or stop.
Here’s that jQuery (stopOldMovie starts out as the callback from $.media, then I can call it without params once the movie is saved as loopMovie):
var loopMovie;
/** Append the movie */
function playOldMovie () {
loopMovie.appendTo('#webcam-loop');
}
/** Stops/detaches the movie */
function stopOldMovie ( orig, newDiv ) {
if ( loopMovie === undefined ) {
loopMovie = $(newDiv).detach();
} else {
loopMovie.fadeOut(400, function() {
$(this).detach().show(); // fadeOut applied display:none so .show afterwards to remove this rule
});
}
}
VHF
I was trying to think of problems that people might come across in using this plugin and the first thing that came to mind was placeholders. They are getting more popular these days, especially since they’re so easy now with HTML5. So, it took some work, but password123 1.1 will support any placeholders you put in the html. Like so…
<input type="password" value="password"/>
OR for the HTML5 enchanced…
<input type="password" placeholder="password">
An option allows you turn off the placeholder functionality and just have a regular default value. Another advantage is you can choose to have the placeholder masked or unmasked, and of course the virtues of gracefully unobtrusive javascript are still upheld. I admit I had mentioned the word “placeholders” before, but they were just default values without the focuses and blurs.
As you know, I recently went a little berserk with iPhone-style password fields. I was thoroughly invigorated by the challenge of this seemingly simple idea. I wanted to write a plugin that would conquer and destroy the inadequate dPassword plugin from decaf (see link in previous posts)…mission accomplished my friends. *applause and bashing of heads*
Some fixes and differences from their version:
1. Adding/deleting characters in the middle works
2. Cursor position stays the same when you type or delete in the middle of a password.
3. Cursor position stays the same if you put the cursor somewhere besides the end before the timeout changes the last character.
4. When you do a select-all delete, it will not be buggy.
5. I’ve taken out the interval and debug options. If someone is knowledgeable enough to debug or change the interval, they can go into the code themselves so I don’t have to increase download size for everyone else.
6. You can have default values in the fields if you want. Just do it as you normally would, put it in the html…<input type=”password” value=”placeholder”/> and password123 takes care of it. It was better to do it this way than have an option for all elements because you can keep element-specific placeholders.
demo: http://timmywillison.com/samples/password123/
github: http://github.com/timmywil/password123/
That bug I knew I had with the password fields is now fixed! It was refreshing to veer away from the comfort of jQuery get my hands dirty in raw js.
I thought this was an interesting bug, which was you couldn’t delete a character from somewhere in the middle of your entry and have it be correctly duplicated in the hidden field that actually gets sent with the form. I needed to detect the position of the text cursor, which jQuery doesn’t do at all. The solution turned out to be simple; this is what I ended up with:
// Gets the current cursor position in a textfield
// to determine where to delete a character
getCursorPosition : function(field) {
// IE
if (document.selection) {
field.focus ();
var sel = document.selection.createRange();
sel.moveStart ('character', -field.value.length);
return sel.text.length;
}
// OTHERS
else if (field.selectionStart || field.selectionStart == '0')
return field.selectionStart;
// Something went wrong
else
return -1;
}
All that’s left now is turn it into a plugin and give people options.
See the result at: http://www.timmywillison.com/samples/iphone_passwords/iphone_passwords.html.
DECAF came out with a jQuery plugin last year called ‘dPassword’ for replacing password fields with iPhone-style password fields. However, I find the plugin deficient and buggy. I certainly give them credit for taking a crack at it because this is not a trivial problem to solve. Nevertheless, I find it a little amusing that the live demo on their page is broken.
And that was the best I could find. So, I’m in the process of writing my own. It’s not plugin style yet, but everything is functional.
I handle sending the real password a little differently. I replace the password input field with a hidden input to keep track of the real value. This hidden input gets the same ID and name as the original so this is the one that will get sent with the form. And of course I add the text field that you type in. The text field has a custom ID for any styling that may need to be affixed and is given the same classes as the original password field; it will simply get ignored since it doesn’t have the right id or name. I won’t go through all the magic of changing the values.
There is one known bug: you can’t delete a letter in the middle of the password and have it be represented correctly in the hidden input. I can’t imagine anyone actually does that, but it should probably be able to do that. That will be the next benchmark.
DECAF plugin: http://blog.decaf.de/2009/07/iphone-like-password-fields-using-jquery/.
My demo: http://timmywillison.com/samples/iphone_passwords/iphone_passwords.html.
I needed to post that I wrote a jQuery plugin providing an easy way to customize info windows and pins on a google map.
See http://github.com/timmywil/jquery-google-bubbles for more info.