UTF-8 special char bookmarklet, twitter Keys reloaded
Note: due to a recent update in the flash player (version 10), this bookmarklet doesn’t work anymore. A swf was used here to emulate the copy to clipboard function for non IE browser. This no longer works and makes the bookmarklet useless. A solution would be to replace each symbole by a flash animation.
A few days ago was pointed by a friend to a blog post on The next web that was getting a lot of attention from the twitter community. They came up with a javascript bookmarklet that display a table of utf-8 symbols so you can copy them into your twitter post.
I was looking for an idea to illustrate a previous post on bookmarklet and I though I could make something similar as The Next Web but with my own touch.
And here it is, the KeyU8 bookmarklet (note: you have to drag the previous link in your bookmark bar in order to use it anywhere).
Features:
- Display in the same window
- One click copy-to-clipboard
Rather than creating a popup window like Next Web, I choose to use the DOM and append all elements in the actual page.
All of this is easily done with javascript. You can even appended a stylesheet link to style it. The next step was to enable copy to clipboard when you click on one symbol. Just on a symbol then click on the text area and paste. Making it working in browser other than IE was quite easy, thanks to this cross browser method, using a Flash script: http://javascript.internet.com/forms/clipboard-copy.html
Please note that this bookmarklet does not work at all on IE. I’ve tested it on Firefox and Chrome where it seems to work fine.
Here is the script used:
{
/*If already open, close it*/
if(document.getElementById(‘tweetKeys’))
{
closeKeys();
return;
}
/*create a variable that point to the body tag of the page*/
var objBody = document.getElementsByTagName(‘body’).item(0);
/*Same for the head tag*/
var head = document.getElementsByTagName(‘head’).item(0);
/*create an element
to link to the stylesheet*/
var css = document.createElement(‘link’);
css.setAttribute(‘type’, ‘text/css’);
css.setAttribute(‘id’, ‘tweetStyle’);
css.setAttribute(‘rel’, ’stylesheet’);
css.setAttribute(‘href’, ‘http://www.yoursiteisvalid.com/keyU8/style.css’);
/*append the
element created to the head object (head tag)*/
head.appendChild(css);
/*create a div element to hold the keys*/
var objPanel = document.createElement(‘div’);
objPanel.setAttribute(‘id’,‘tweetKeys’);
/*append the div created to the body*/
objBody.appendChild(objPanel);
/*create a link to close the div holder*/
var close = document.createElement(‘a’);
close.setAttribute(‘id’,‘close’);
close.innerHTML = ‘close’;
close.onclick = function(){closeKeys();};
objPanel.appendChild(close);
/*create an array with all the keys we want to display. If you want to add more symbols that’s where you have to insert them*/
var keys = new Array(‘♥’, ‘♠’, ‘♤’, ‘✩’, ‘★’, ‘❦’, ‘☪’, ‘☂’, ‘✏’, ‘♝’, ‘❀’, ‘☭’, ‘☮’, ‘☼’, ‘☚’, ‘♘’, ‘✾’, ‘☯’, ‘✝’, ‘☥’, ‘✈’, ‘☎’, ‘☤’, ‘✉’, ‘✇’, ‘☁’, ‘☂’, ‘☾’, ‘☄’, ‘✂’, ‘☺’, ‘☻’, ‘☹’, ‘☠’, ‘©’, ‘®’, ‘™’, ‘∞’, ‘ø’, ‘¶’, ‘≠’, ‘%’, ‘£’, ‘$’, ‘€’, ‘…’, ‘µ’, ‘§’, ‘¿’, ‘♬’, ‘♫’, ‘♪’, ‘❥’, ‘✵’);
max = keys.length;
/*create a unordered list and appand it to the div holder*/
var list = document.createElement(‘ul’);
objPanel.appendChild(list);
/*process the array of symbols*/
for(i=0 ; i
Loading ...
