teddy-risation » Javascript

Implementing sIFR 3

Terry — Mon, 25 May 2009 17:38:39 +0000

When teddy-risation Theta was released a few days ago, I packed a feature that was previously not present in my older themes – text replacement for headers, namely the post and page titles. Eli expressed the difficulty in implementing sIFR3 on a webpage on Twitter, so I thought that it’ll be great if I can share how I did that for my blog in the recent makeover.

Embedding a font

There are other ways to embed a font in a webpage – you can use @font-face in your CSS (it’s part of the CSS3 module) or the Web Embedding Fonts Tool (WEFT) by Microsoft. In my first few years of blogging when I was blatantly unaware of proper typography and appropriate choice of fonts, I used WEFT to embed the font Kristen ITC in many of my blog pages.

However, both methods have their own shortcomings – cross-browser support for @font-face is patchy at best, while WEFT is only recognised by Internet Explorer and not in other major browsers people are currently using to prowl the interwebs.

Dynamic text replacement

Then we have brilliant people developing different methods of text replacement – the idea behind these methods is the same: to replace a block of text of a common font to a block of text with a desired font, either by means of rendering an image or placing a flash movie in the original position of the text block.

Facelift Image Replacement (FLIR), by Cory Mawhorter, is a great way to replace text with images – the javascript scans the page for text blocks to be replace. FLIR finds the ones that you’ve specified. It screams of joy, grabs the text and sends it to a PHP script where it parses whatever text that is in the block. Transparent PNG images are rendered as a result, and they are sent back to the browser for display.

Scalable Inman Flash Replacement (sIFR, version 2 and see the latest version 3), by Mike Davidson and Mark Wubben, and initially conveived by Shaun Inman, uses flash videos to replace selected blocks of text. Javascript checks for Flash installation and then places a flash video file in place. The flash video file loads the font, and starting from 6 point font size, upsizes the font until it fits snugly.

What happens when Javascript is not available? For both FLIR and sIFR, they degrade gracefully and nothing happens – the text still displays, but in the original font-family that you’ve specified in your stylesheet, and nothing is royally screwed up :)

For this tutorial, I will be demonstrating how to get sIFR 3 installed, up and running on your webpage or blog. This tutorial is also helpful for those who’re intending to upgrade from sIFR 2 to sIFR 3 – the Javascript implementation is a little different between the two versions, so upgrading is not as simple as I initially imagined (that’s why I had to pull the Maintenance Mode page up for 2 hours).

sIFR 3: Getting started

*Note: There is a great guide for those who intend to install sIFR 3, but here’s my version of it:

First of all, head over to the sIFR 3 page and grab a nightly build of it – of course, you should get the most recent one. I have r436 installed and everything is running good so far – do note that there will most probably be newer nightlies released after this tutorial is posted, so do keep yourself updated about it. If you’re lazy to update, just stick to the current nightly you’ve donwloaded and it should work just fine.

When you extract the .zip file, you will find four folders. You can either upload them under the folder name /sifr/ to your webpage, o you can reorganize the files in anyway you want, as long as you keep track of the changes in the paths to the javascript files. Do note that the demo pages do not work on your computer (i.e. when loaded locally) due to security restrictions – instead, you will have to upload them to a web directory to view the demo. Thankfully, in order to understand how sIFR 3 is implemented on the page, you can always open the index.html or index.xhtml files with notepad or any other text editor your wish for referrence.

Embedding your own fonts, and additional glyphs if needed

One of the folders will be named /flash/. Open the folder, and you will find a file, sifr.fla. Open it up with Adobe Flash and you’ll see something like this. You don’t see a single thing, but don’t panic – at least you’ll see a box with blue borders. Double click on it, and check the ‘Properties’ tab. If it is not open, you can access it via Windows > Properties > Properties, or with the [Ctrl] + F3 keyboard shortcut.

By this time, some words would have magically appeared within the blue borders. If the border appears to be dotted, click once inside the boundary and the words should appear. Head over to the ‘Properties’ tab, and under the choice of fonts (it’s Verdana by default), select the font you want. To cut down on the size of the flash movie file, you can remove all the text and only add those that you need – for example, if you only need a bold typeface, toggle the button and type one character. The same applies for italic , bold and italic and normal. Depending on the need, you may embed additional glyphs (e.g. accents, common on many other languages) by clicking on the button.

When you’re done, go to File > Export > Export Movie, or press [Ctrl] + [Alt] + [Shift] + [S]. It is recommended that you name the movie with the name of the typeface, to make things easier (very good for people like me with goldfish memory). You arrive at the export options. Here’s a checklist to make sure that it’s correctly exported:

Version, set it to Flash Player 8
Load order, set it to Bottom up
ActionScript version, set it to ActionScript 2.0
Options:
- Protect from import, check
- Omit trace actions, check
- Permit debugging, uncheck
- Compress movie, check

Other options that are not mentioned in the checklist is unne

Loading the right stuff

Between the ... tags, you will have to load the correct javascript files:

For me, since I have placed the files under my WP theme directory, under the /sifr/ folder and I preserved the original folder organisation (so the .js files will all be under the /js/ folder), my path will be /path/to/theme/sifr/js/. For WordPress users, you can use:

Here are the purpose of loading the two files:

sifr.js is the core javascript file of sIFR – it does all the hard work in replacing the text based on selectors that you’ve specified (don’t panic, we’ll get to that later) and unless you understand what the codes inside mean, don’t touch them.
sifr-config.js is the file where requires your attention – it is the configuration file that is the center of the implementation of sIFR.

The reason why two files are separated is for the ease of upgrade – sifr.js will be upgraded as of when needed, while sifr-config.js need not be modified and should be left untouched during an upgrade, unless you have the intention to modify what sIFR replaces on your webpage or there’s a change of typeface.

Dissecting and configuring sifr-config.js

The authors are terribly nice to provide us with a sifr-config.js file that is heavily annotated. Don’t get busy removing those lines because they only weigh a few kb at most – more importantly, they contain vital information in how you should modify the file. For reasons of spacial efficiency, I removed the comments and kept only the crucial lines intact.

1. Defining the font

var futura = { src: '/path/to/futura.swf' };

It is recommended that you use the variable that share the same name as your font. It makes things a little easier. This tells the script where to load the font movie file. I am using a font called Alte Haas Grotesk, so I will modify this line accordingly:

var altehaasgrotesk = { src: '/path/to/altehaasgrotesk.swf' };

To those who are unaware of it, /path/to/ is a dummy path – it doesn’t exist. I used an absolute path because I’m too lazy to figure out the relative path of the font movie file, but you can always use relative paths if you wish to.

2. Activate sIFR

sIFR.activate(altehaasgrotesk);

This line calls for the activation of sIFR. There can only be one sIFR.activate() function – so, if you have multiple movies to load, simply separate the names of their respective variables with a comma. For example, if I chose to load both Futura and Alte Haas Grotesk, I will write:

sIFR.activate(altehaasgrotesk, futura);

Of course, that means that you will have to specify the variable ‘future’, as mentioned in the previous section. There’s no limit on the number of variables you can declare.

3. Font replacement

Now the fun begins – you call for the replacement of certain chunks of text, using CSS selectors (if you’re familiar with CSS, awesome!). If you are clueless of what CSS selectors are, here’s a good article to get you started.

sIFR.replace(altehaasgrotesk, {
selector: '.entry-title, .category-title, .date-title, .search-title, .tag-title',
wmode: 'transparent',
css: [
'.sIFR-root { background-color: #e5e5e5; color: #1a4051; }',
'a { color: #1a4051; text-decoration: none; }',
'a:hover { color: #2d657e; text-decoration: none; }'
]
});

The first line calls for the variable altehaasgrotesk, which represents the source file of the font movie file. Then, you specify what chunks of text should sIFR replace – in this example, I instruct it to replace all the text contained within elements with the class of entry-title, category-title and etc. Yes, it does support single and multiple selectors, and even IDs (e.g. div#post-234 .entry-title). If you’re familiar with CSS, this part shouldn’t be a problem for you.

The third line is necessary if you’re using a model window plugin, e.g. Lightbox, Facebox, or anything that requires overlaying something over the flash movie. Without setting the wmode to transparent, the flash movie will show through regardless of how high you set the overlaying element’s z-index. It may cause some minor display bugs on Mozilla browsers upon scrolling, but so far I’ve encountered none – the ones I encountered were when sIFR 2.0.7 was installed. sIFR 3 seems to fix a lot of it!

The fourth line, we move on to the styling of the replaced text – everything works as per normal like in CSS. The sIFR-root class is the class assigned to the element that wraps around the replaced text. I specified the background colour and text colour here. Now you ask, what if I have a link? Can I modify the colour and the appearance as well? The answer is yes – on a new line, simply add the appropriate styling necessary. If you do not specify anything for the link, the color reverts to blue, and the link is underlined (both are browser defaults).

Do take note of the commas present after each link except for the last, as well as the brackets and the type of it used. A single error can result the texts not being replaced.

4. More CSS styling

In the /css/ folder, there is a lone file sift.css in there. Usually you don’t need any modifcation to the file and I did most of the styling of the replaced text in the sifr-config.js file. Do note that styling of the replaced text, e.g. font size, will have an effect on the appearance of the final sIFR text as well – varying the font size modifies the font size in the sIFR replaced text. Most of the time, the dimensions occupied by the original text and the replaced text are almost the same due to the brilliant calculation algorithm, so when deciding on what font style you’re using, try without sIFR activated first. After you’ve get the desirable font size, activate sIFR and see magic happens :) usually there isn’t much discrepancy, no worries.

Related posts that might interest you:

8 Javascript solutions to common CSS problems

Terry — Mon, 23 Mar 2009 20:34:45 +0000

8 Javascript solutions to common CSS problems

Jean-Baptiste Jung shares 8 ingenious jQuery-based javascript solutions on CatsWhoCode.comto circumvent the common CSS problems. While CSS is a semantically correct way of styling your webpages, not all popular browsers (like IE6, I know this comes very naturally for a designer) support CSS3 and there’s always this problem of cross-browser compatibility. Little do many people know that Javascript can actually fix a myriad of CSS problems – you’ve never thought they go along well together, do you?

From important fixes like the jQuery PNG transparency fix to the absolutely evil IE6-crashing script (so as to scare visitors into switching browsers, or is it more like scaring visitors away? That’s up to you), this article is a must-read for designers and coders alike.

Related posts that might interest you:

Easy Display Switch with CSS and jQuery

Terry — Sat, 21 Mar 2009 17:39:51 +0000

Easy Display Switch with CSS and jQuery

As javascript libraries becomes increasingly popular among designers and website visitors alike, your daily visitors are now expecting more than just static pages – they would be thrilled to see interactive, fluid pages. In 2006 A List Apart published an article on the holy grail of webdesign, which involves coding for fluid layouts in CSS. With the popularity ofÂ javascript libraries like jQuery, Soh Tanaka has written an excellent tutorial on teaching us how to incorporate fluid display options on our pages – allowing visitors to switch between different forms of display (think iTunes libraries). An interesting concept that is actually very simple, and can be easily done with a few lines of jQuery and CSS.

Basically, the technique behind the display switch is simply to style the list containing the gallery items separately – one in the thumbnail form and the other in the detailed listing form. And then you will use jQuery to add/remove a class that is appended to the list, to achieve the different appearance all coded by CSS.

Related posts that might interest you:

Compacting contents using Glider script

Terry — Fri, 20 Feb 2009 23:25:17 +0000

Thanks to Iva for requesting for this tutorial! Finally I have something to add to my long-dormant list of resources. Iva asked me over Twitter whether could I write a tutorial on how I’ve incorporated the famous Coda glider effect on my blog header. The basic function of the glider script is to replicate the effects of the Coda glider. Gliders, like accordions, are very useful in compressing/compacting contents in an area of a fixed size, and animate the process when a visitor switches between the different ‘panels’ (which involves gliding, hence the name).

My previous themes were plagued with the problem of overcrowding, where I attempt to squeeze too much information into too little screen real estate space – resulting in a rather nasty, visitor-unfriendly clutter and confusion. When I redesigned my blog, I kept that problem in mind and I was very impressed when I saw The Wojo Group‘s glider in action. It then led me to discovering the original synthesis of this idea at Coda, and to the Google Code page of Glider.js.

What is glider.js?

Glider.js is a rather lightweight javascript effect that weighs around 4kb uncompressed. So far I’ve not seen much development of the script after it’s previous update in May 2007, but for the moment being, it doesn’t have much issues with most major browsers (including IE6, surprise!). I’ve tested it in Firefox 2 and 3, Safari, Opera, Safari and Chrome, and it excelled in all these browsers. It is downloadable over here.

So are you ready to continue with the tutorial? Goodies after the jump, I promise!

Using the glider

So now let’s move on to the part that lets you implement your own glider. There is a demo link at the end of the tutorial, but it’s always better to read through the details because that’s where the majority of the explaning goes to.

What you will need

Download the Glider.js and if you don’t have, Prototype.js and Scriptaculous.js. Of course, if you’re using WordPress, you don’t have to worry about the latter because they’ve been taken care of by your WordPress installation. It’s safer to check your blog header and see if they’re loaded. If they’re not, you don’t need to actualy download them – you can simply load Google AJAX Libraries to make things easier:

*Note: It’s absolutely important that you load the glider.js file after loading prototype and scriptaculous.

Alternatively, if you prefer to use the google.load function:

For WordPress users who prefer to place their glider.js file in their theme’s JS directory (recommended, and you can use any other names, just be sure to change the ‘/js/’ into something else – ‘/name-of-directory/’), replace the last line above with:

For more information on the Google AJAX Libraries, you can read Jeff’s writeup.

Prior to setting up the glider

Glider.js relies on using classes to identify the individual gliders, so you will have to make sure that the following classes are unused in your layout (except for elements meant for the glider):

scroller
section
controls

*Note to advanced coders: these classes are identified in the javascript file, so if you’re planning to use other classes, do keep track of the changes and replace the class names in the file with relevant ones.

Basically, you will have a

to serve as a window around the content, and then

to wrap around each individual panels (which will be glided over when the event is initiated by a user mouseclick on a link – we’ll come to that later) and then a

to house the control tabs. For some designers, you might want a forward and backward button to be present – if that’s the case, you can make do without the

part. Here’s a summary of what the individual classes serve as:

scroller – serves as a window in which sections will appear, one at a time
section – wraps around contents in individual panels in the glider
controls – wraps around the tabs to allow navigation to any panel in the glider

A very basic layout, as evient in the blog header in the current design, can be seen below:

Basic layout of a glider.

The basic idea is that we will have the scroller to be of the same width of the panels – it will be the ‘window’ in which the each section, or panel, is displayed. For this reason, all sections have to be of the same width. When the animation is not running, you will only see one section/panel in the window, and when you click on the navigation menu, the glider effects kicks in, fetches for the other section located outside of the window (see screenshot above) and repositions the new section in the window. That’s a mouthful! Now take a deep breath and try to digest it *burp*

And this brings us to the next section. Read on!

Step 1 – Adding an overall and a content wrapper

I have a habit of wrapping huge, chunky sections with a wrapper, so for this case, we will be using

...

Now we add in the scroller, and then the content wrapper that wraps around all the individual panels. We will also need to append the script that specifies the glider, after the entire glider element.

...

*Note: If you have a different id for your glider container, you will have to make changes to the script – change the ‘glider’ to ‘your-own-id‘. The same applies if you want to vary the duration of transition/animation.

For the CSS, we want each section to be 500px wide and 200px tall. So we need to make the window of the same size too. In addition, we will make it such that the

is of a very huge width (to contain all the scrollers):

.scroller {
overflow: hidden;
width: 500px;
height: 200px;
}
.content {
width: 10000px;
}

Everything cool so far? Now we move on to the second step.

Step 2 – Adding in the sections

Now we’re done with the wrappers (div-itis alert, yes, but that’s unavoidable). We shall add in the individual sections. Let’s say we want to have 5 sections, each 500px wide and 200px tall:

...
...
...
...
...

*Note to those who are unfamiliar with CSS – ‘id’ and ‘class’ are two different things. A particular id can only appear in the entire document once – although modern browsers render multiple elements of the same id correctly, this should not be seen as valid XHTML. A class can appear multiple times in a document. We will apply a general style for all sections, so we target the class instead of the id.

To fix the dimensions of each section, we will have to turn to CSS for help:

.section {
float: left;
overflow: hidden;
padding: 10px;
width: 480px;
height: 180px;
}

Some really, really important notes:

Float the containers to the left so that they will be arranged horizontally.
Hide potential overflows so that it doesn’t screw up anything, just in case.
The CSS box model: the total, intended height of an element is the sum of all the margins, paddings AND dimensions specificed. So if you want to have a 10px padding for contents in all sections, the width has to be reduced by 2*10px = 20px (because we have left and right paddings) and the same applies for height (because we have top and bottom paddings). For more information, read the Box Model article.

Step 3 – Adding and styling the controls

For the controls, I have used a tabbed structure to arrange the individual links to each section. We will add it outside the scroller but within the entire glider wrapper:

...
...
...
...
...
- Section 1
- Section 2
- Section 3
- Section 4
- Section 5

That’s a whole bunch of code! Basically what we are doing is that we’re adding an unordered list (which is to be styled, later) underneath the ‘window’ (as seen in my blog header) to be the navigation menu. There are five sections, so normally you will need to place five tabs, in five

tags.

Now the styling!

.controls {
overflow: hidden;
width: 500px;
height: 30px;
}
.controls ul {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.controls ul li {
float: left;
width: 20%;
}
.controls ul li a {
display: block;
height: 20px;
line-height: 20px;
padding: 5px 0;
text-align: center;
}

This is what we’ve done for the CSS part:

Disable styles for the unordered list, set margin and padding to zero (just in case you haven’t done so in with a reset stylesheet, and defined its dimensions.
For the list items, we float them to the left to arrange them horizontally. There are 5 list items in total, so each of them take up 20% of the total width.
For the link in each list items, we set its display to block (by default, it’s in inline element) and by applying the box model, set height to 20px such that adding up the vertical paddings will be 30px. We also center the text.

We’re done with the basic structure of the glider! If you’re satisfied, you’re done for good!

Step 4 – Backward and forward buttons

The buttons can be implemented without the tabs, with the tabs or be thrown out of the window. It all boils down to personal preferences. For me, I’ve used a combination of both. So far, we’ve been doing the basic structure without taking the buttons into mind. If we want to, modifications to the structure above have to be made.

In this example, we will be adding buttons to two-sides of the scroller:

Previous
...
...
...
...
...
Next
- Section 1
- Section 2
- Section 3
- Section 4
- Section 5

So, we’ve added the previous and next links to the side of the scroller, and attached the javascript funciton to them to move the sections. We need to refine their appearance using CSS:

.side-nav {
float: left;
width: 20px;
height: 200px;
}
.side-nav a {
display: block;
text-indent: -9999px;
width: 20px;
height: 200px;
}
#nav-previous a {
background: url(images/previous-arrow.png) no-repeat center center;
}
#nav-next a {
background: url(images/next-arrow.png) no-repeat center center;
}

Basically, what we did to the buttons is:

To give them a definite width and height (preferably spanning the height of scroller).
Display links as a block element, indent the text by -9999px so that it’s off the screen but still readable by search engine bots.
Customize background images for each button.

Then replace the styles for certain elements with the new ones below:

.scroller {
float: left;
overflow: hidden;
width: 500px;
height: 200px;
}
.controls {
clear: both;
overflow: hidden;
width: 540px;
height: 30px;
}
.controls ul {
list-style: none;
margin: 0 auto;
padding: 0;
width: 500px;
}

The modifications are necessary because:

We have added two 20px wide buttons on the side, so the overall width has increased to 540px.
The controls are widened to 540px as well, but if you want to keep the menu the same width as the scroller (at 500px), fix width to 500px as well and use automatic left and right margin to center the menu.
Clear the floats above the controls.

We also need to use the clearfix method to making sure that all the list items are cleared properly. Change

.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}

Issues

There are several things that might not work well with this glider script:

If you’re using an older version of Lightbox, you might encounter a javascript error and the glider will not work – neither will the Lightbox. If that’s the case, I recommend you to upgrade to Lightbox 2. If you’re a WordPress user, I highly recommend Lightbox 2.8.0 plugin for WordPress – not only does it work perfectly for me, it allows you to customize your lightbox as well.
If you’re using an in the section that has a scrollbar, there might be a minor graphical glitch in Firefox. I am unable to reproduce the glitch in Safari, Chrome, IE (surprise!) and Opera. It seems to be an issue with Firefox?
Flash movie will show even when the section it is contained in is not in the ‘window’. So the conventional YouTube snippets will cause your Flash Movie to appear towards the left/right of the ‘window’. You will have to add the following lines to the code: within the element, add ; and to the , add wmode="transparent".

Finally, the demo!

Yes, there is a demo file that comes with this tutorial – just follow the link to the demo page. Do not right click and download, as the download manager I’m currently using masks the original URL, so you’ll be downloading a blank file instead. If you want to get the code, just follow the link and save the page that is loaded thereafter.

Download: Glider DemoVersion 1.0 File size: 4 KB 1642 downloads

I hope the tutorial and demo is of good use to you. Have fun! If you have any queries, feel free to leave a comment. Thanks!

Related posts that might interest you:

Using Zeroclipboard for WordPress Comments

Terry — Sun, 15 Feb 2009 14:40:07 +0000

Using Zeroclipboard for WP comments

When Adobe introduced the new Flash 10 a few months back, it led to a rather huge, grand backlash from the online community for breaking various uploading tools on many websites, including WordPress and Flickr, for screwing with SWFUpload. Not only that, it also breaks the default “copy to clipboard” functionality offered by many javascript resource sites on the Internet, frustrating millions out there. The reactions from Internet users, although varied, are more or less the same – they wanted Flash 10 the work the same way as Flash 9 does, when it comes to clipboard copy and uploading.

It’s a fix, not a bug

Adobe didn’t budge for a simple reason – the fix is meant to be a fix and not a bug. The security measure implemented in Flash 10 means that instead of blindly allowing any interactions between javascript and a flash file, users with the new Flash 10 installed have to click on the Flash player itself to initiate any action. A very good way to thawrt malicious scripts from fooling around with loopholes, but also a very good way to break the web (although not as bad as the transition from IE6 to IE7 and now, IE8).

A few months after the introduction of Flash 10, both WordPress and Flickr have came out with genious ways to fix their uploader, so it shouldn’t be a very huge problem to all. That only solves part of the problem – what about copy to clipboard functions? Check it out after the jump:

Using Zeroclipboard

Believe me or not, this tutorial is going to be very simple, given the fact that I’m not that well-versed when it comes to Javascript. I even had to look up for a list of eventhandlers because I’ve forgotten most of them *weak smiles*

The interest in restoring the “copy to clipboard” function was rekindled in me over the weekend when I realized how important is it to offer your commentators an option to copy their comment to their clipboard, just in case anything goes wrong. On the other hand, there are also other reasons why one might want to offer such a feature – for example, copying a permalink, a shortened url, a piece of text and etc. Zeroclipboard is one of the easiest solution to the broken function caused by Flash 10. Having jQuery installed will be handy, so be sure that you have it – if you’re using WordPress, you will most probably not need to worry about that.

More detailed and all-encompassing usage of Zeroclipboard is available at their Google Code ‘Instruction’ page.

Getting started

Obviously, Step 0 is as simple as downloading the library. Upload the following two files from the unzipped directory to a certain directory on your site:

ZeroClipboard.js
ZeroClipboard.swf

Let’s say that we will be uploading it to a theme folder, http://www.domain.com/wp-content/themes/wp-theme/js. Of course some of you have your own ways to organize your files, such as directly uploading them to the js folder located in the root directory, but since I wanted it to be theme-specific, I’ve decided to throw it into my theme’s js folder.

First of all, you will need to have the Zeroclipboard loaded. To specify the directory of the theme currently in use, we can use the following PHP-Javascript hybrid:

Given the example above, will give us http://www.domain.com/wp-content/themes/wp-theme/.

Appending functions

The following lines are to be added between the tags, unless otherwise mentioned.

Since we’re talking about a WordPress blog over here, the javascript file will usually not be located at the root directory of the page you’re viewing. Zeroclipboard comes with a handy function that allows you to specify the exact location of the file:

ZeroClipboard.setMoviePath( 'http://www.domain.com/wp-content/themes/wp-theme/js/ZeroClipboard.swf' );

Now this part is gonna be a mouthful:

You will have to declare and set the value of a variable called ‘clip’, and call for a new client – you will usually need only one unless you want to have multiple instances of the clipboard copy button on the same page.
We also need an event listener such that whenever a certain action occurs to the button, we will copy whatever content that is inside a specified element to the clipboard.
If you want to let the visitor know that the text has been successfully copied to clipboard, you might want to change the value of the button.
Last, but not least, we need to do some gluing fun. Gluing will generate a flash movie of an identical size to the DOM element you’ve specified by the element id.

Summarizing what is in the list above, you arrive at the initialization function:

var clip = null;
function init() {
clip = new ZeroClipboard.Client();
clip.addEventListener('mouseOver', my_mouse_over);
clip.addEventListener( 'onComplete', my_complete );
clip.glue( 'clipboard' );
}

What happens when you hover your mouse over the button? Now that’s something we will be address here:

function my_mouse_over(client) {
clip.setText( document.getElementById('comment').value );
}

Informing the commentator that his/her comment has been successfully copied to clipboard, you don’t want to use an alert box – that’s something that might annoy them. You can change the value of the button so that it displays a success message when the copying is done. A setTimeout function can be added if you want the innerHTML to be reset back to the original ‘Copy to Clipboard?’ text. Also, helping them to refocus back to the comment textfield will be handy too.

function my_complete(client) {
document.getElementById('clipboard').value = "Comment copied";
document.getElementById('comment').focus();
setTimeout ( "resetbutton()", 3000 );
}

Another issue to deal with – the button sticks to the value of “Comment copied” after clicking the button. We need an extra mechanism to make sure that the value is reset to the original value of the button. There are definitely more sophisticated ways to store and then redisplay the original value of the button, but I’m still new to Javascript so we’ll have to do it the idiot-proof way (again):

function resetbutton() {
document.getElementById('clipboard').innerHTML = "Copy to clipboard?";
}

Now this is the optional part. If you’re having a WordPress plugin that changes the position of the button, what should you do? Do note that the absolute positioning of the flash movie over the DOM element (in this case, the button) is done when the page loads. It does not track live changes in the button’s position after the page is loaded. The button on my current theme changes position because I have WP Thread Comment plugin activated – if a commentator chooses to respond to another’s comment, the comment form will be nested in the original comment to facilitate cross referencing.

If that’s the case, we will have to create another function that will reposition the button. I am not very javascript savvy, so I don’t know a simpler way to do it, but my idiot-proof method will be appending the onmouseover eventhandler to the

element. It will instruct to reposition the button when the user hovers around the form (which will be the case when the form dynamically switches position across the page). Thank goodness, they have a reposition function included in the library. All we need to do is call for it:

function hoverreposition() {
clip.reposition();
}

If you combine everything, here’s what you should see:

Possible modifications to this script will be directly inserting the javascript commands into comments.php, and you can even save the file as ZeroClipboard-functions.js and import it using the following code:

If you’re concerned about the weight of the JS file(s), you can always use the Javascript Compressor to help you zip everything up. Now you’re almost done with the javascript part!

Preparing your page

For simplicity reasons, I will be using the default Kubrick theme as our reference.

You have all the essential javascript functions in place. What you need to do now is to load the function to get everything working smoothly by loading the first function into your document body. In addition, you do not want the init function to be loaded when the page doesn’t contain a comment form. Head over to header.php now and search for the tag. Replace it with this:

onload="init()">

Note: If you have comments enabled on your pages as well, you will need to use this instead:

onload="init()">

Of course, there might be instances when you have comment forms elsewhere on your blog – on the index page and etc. There are a whole list of conditional comments available at the WordPress Codex to help you with this.

Modifying comment.php

We’re dealing with copying a comment entered in the WP comment form, so you will probably see the following HTML code (or something similar) in your comments.php file:

...
...

We will now add a new button to the bottom of the comment form such that it will allow your visitor to copy his/her comment to the clipboard. Now you might be thinking, why did I choose to use a block-level element

instead of using ? Here are two simple reason (thanks to the author for replying to my question):

It is not a block-level element, so measuring its actual size is next to impossible
The library cannot propagate mouse events to simulate the mouse down state

The reason is simple – it is almost impossible for the .Don’t forget to call for the resetform function on the submit button:

...
Copy to clipboard?

...

We’re done!

So now you will have a neat new button in your comments section that allows your commentators to copy their comment if they see the need to. I hope you find this tutorial useful! I’m not some javascript guru, so if there’s anyone out there who finds that there are mistakes/problems in this tutorial or there are easier ways to achieve the effect, do drop a comment to notify me. Thanks!

Related posts that might interest you:

Fix for buggy Flickr badge JS

Terry — Fri, 05 Sep 2008 14:34:36 +0000

Yep, you didn’t read it wrongly – the javascript which Flick gave you to insert your personalised Flickr badge is indeed buggy! It just happened over the afternoon – the Flickr badge JS has some new modifications which will potentially affect the layout of your blog.

The crux of the problem

If you have the script, look into the source of the script. The follow is the badge code for my script, after following Veerle’s simple steps of converting the code to make it XHTML valid: