Javascript Copy Text To Clipboard

Issues arise when you want to copy text to the clipboard using javascript. Firefox provides a security measure which prevents you from doing it so a workaround has to be made for it to happen. I am using IE7 for my IE testing and in this version, it also has a security feature although less strict than Firefox. Whenever you browse to a new page that has a copy to clipboard function, a popup window prompts you asking if you want to allow the webpage to access your clipboard. Normally, you would choose no. But instances may require you to like if the site you are accessing is yours or related to your needs and you have the utmost trust that the script won’t harm your PC or something. Anyway, to provide copy to clipboard functionality using Javascript, I found this function in this site does the job by using a little .SWF file. You can download the file there or if you want to use Google App Engine, the code function below will do. It also works in Safari, IE, and Opera.

function copyToClipboard(text) {
	var flashId = 'flashId-HKxmj5';
 
	/* Replace this with your clipboard.swf location */
	var clipboardSWF = 'http://appengine.bravo9.com/copy-into-clipboard/clipboard.swf';
 
	if (!document.getElementById(flashId)) {
		var div = document.createElement('div');
		div.id = flashId;
		document.body.appendChild(div);
	}
 
	document.getElementById(flashId).innerHTML = '';
	var content = '<embed src="' +
	clipboardSWF +
	'" FlashVars="clipboard=' + encodeURIComponent(text) +
	'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
 
	document.getElementById(flashId).innerHTML = content;
}

Javascript innerHTML Demons

I had thought that using the property innerHTML on an HTML tag via Javascript works the same way in Internet Explorer and Mozilla browsers. As I don’t use IE now because it sucks ever since vesion 7 was released, I wasn’t aware the results vary in IE and Firefox. If my boss is not using IE, then I would never have known about this. If we want to get the contents of, say

<span id=”content”>This is a content</span>

we do it in Javascript via document.getElementById(’content’).innerHTML. If the content of span is just ordinary text, then you wouldn’t have problems in both browsers. The issue arises if your tag would contain HTML tags within them like

<span id="content"><font size="3">This is a content</font></span>

When you do document.getElementById('content').innerHTML, the results vary in

IE: <FONT size=3>This is a content</FONT>
Firefox: <span style=”font-size: small;”>This is a content</span>

Notice that in IE, apostrophe characters are taken out in the output string and the tag name is converted to uppercase. Firefox though, retains the same case and characters as how it was written in the HTML file. You would have to do cross browser checks in your Javascript if you want to do string manipulations in your code. Sigh, why can’t they just get along in the same page.

Javascript Remove HTML Tags

I found a handy Javascript function by Robert Nyman where you can remove HTML TAGS of of a text. It works well in both IE and Mozilla browsers so no problem for the user to worry about cross-browser issues. Thank you Robert, this saves us a bundle of time creating our own functions for this sort of need.

function removeHTMLTags(text) {
	var strInputCode = text;
	/*
	This line is optional, it replaces escaped brackets with real ones,
	i.e. < is replaced with < and > is replaced with >
	*/
	strInputCode = strInputCode.replace(/&(lt|gt);/g, function (strMatch, p1) {
		return (p1 == “lt”)? “<” : “>”;
	});
 
	var strTagStrippedText = strInputCode.replace(/<\/?[^>]+(>|$)/g, “”);
	//alert(”Output text:\n” + strTagStrippedText);
	// Use the alert below if you want to show the input and the output text
	// alert(”Input code:\n” + strInputCode + “\n\nOutput text:\n” + strTagStrippedText);
	return strTagStrippedText;
}

Simile Timeline

I came upon this great tool to create timelines in your web pages, called Timeline by Simile. It is a DHTML-based AJAX widget for visualizing time-based events. All you need to do is to supply data in an XML file, tweak a little configuration according to your preference (if you’re typical about looks and presentation) and it does the rest for you. To use the Timeline project, you just need to load its Javascript source file with this.

<script src=”http://simile.mit.edu/timeline/api/timeline-api.js” type=”text/javascript”></script>

If you want to have full control of the scripts so that you can use your own images in place of bullets and others, make sure you have these 4 Javascript source files: bundle.js, labellers.js, timeline.js, timeline-api.js. The project’s site is still hosted in an mit.edu site (although they’ve provided a link for its new homepage), so it probably was a project by students for their thesis or something. Great job they did. This would surely help a lot of people who want to add timelines to their web pages. It’s not that hard to learn and understand how to use Timeline although you may get stuck for a bit in configuring the Timeline to include hours per day if in case you have more than one event in a day, you would want that certain day to display hours so that the presentation would be specific and in detail. Go check out this neat tool and start creating your very own timelines.