Article: Leveraging Your Flash Development with Silverlight
You're not giving up Flash any time soon (and we don't blame you.) But if you could get your Flash application working in Silverlight, why wouldn't you? We show you the tools and techniques required to have your rockin' Flash application rolled for Silverlight. Learn more here.
»
Article: What Does it Take to Build the Best RIA?
With the proliferation of Rich Interactive Application (RIA) platform choices out there, you no longer have to take a one-size-fits-all approach to developing your next RIA application. Knowing the strengths (and weaknesses) of each platform can help you to decide the best RIA for your next application.
»
I've seen this effect used in a couple of places. It's a really neat look so I thought a tutorial would be in order. I grabbed some blips of code and played with it to set it up so that it's an easy grab from a tutorial. You can alter this and pretty it up to your heart's content. All I'm passing along here is the basic code and how it all works. OK? OK! Let's take a look at the effect:
This text will be copied onto the clipboard when you click the button below. Try it!
Click the button below the shaded area and then paste it to a text editor. Ta da! Cool effect. If I had been able to do this from the beginning, I could have set every tutorial up like this. Well, maybe I wouldn't have. This effect requires the use of a command available only in IE 4.0 or better, "execCommand()".
It's an Internet Explorer-only statement that allows the browser to execute a command, thus the name. In this case, we're executing a copy. But you'll see the code for that later. Let's talk about what's happening with the visible items first.
I've got a shaded block with text sitting inside. The shading is only there for presentation purposes. It's to show that what is inside of the colored area is what will be copied to the clipboard.
You can't see it yet, but there is also a Textarea box that's hidden. When you click on the button, the program copies the text to the Textarea box and also to the clipboard.
Let's take a look at the code that puts these elements to the page.
The Text To Be Copied
<SPAN ID="copytext" STYLE="height:150;width:162;background-color:pink"> This text will be copied onto the clipboard when you click the button below. Try it! </SPAN>
<TEXTAREA ID="holdtext" STYLE="display:none;"> </TEXTAREA>
<BUTTON onClick="ClipBoard();">Copy to Clipboard</BUTTON>
Follow this from the top. I have a SPAN surrounding text. That SPAN is given the ID "copytext". Whatever is within the SPAN commands is what will be copied. You'll also note I popped in an inline STYLE attribute in order to set the SPAN to a specific height, width, and background color. That's not required. I just did it for looks.
Next is a Textarea box that's been made invisible through an inline STYLE attribute. It has been given the ID, "holdtext" because it is there simply to hold the text while copying.
In case you're wondering, I tried the script changing out NAME for ID and the JavaScript wouldn't recognize it. I also tried numerous other hidden elements including the traditional INPUT TYPE="hidden". No dice. It really doesn't matter though because this works well.
Finally, a basic button is in place simply to trigger the JavaScript that performs the copy. Yes, you can go with the traditional FORM button equal. That doesn't matter. The button only triggers the function, "ClipBoard()".
The script uses a lot of commands proprietary to Internet Explorer 4.0 and above. You'll want to be careful changing out any text you think might be a simple variable name. Except for the two names we assigned, "holdtext" and "copytext", and "Copied" within the script itself, everything else carries with it actions past just a name. That's why the script is so functional yet is so small. From the top...
The function is named ClipBoard(). It is triggered when the button is clicked. The text that appears within (innerText) the TextArea box (holdtext) is created by taking the text from within (innerText) the SPAN (copytext).
Parameters are set around that text (holdtext.createTextRange()) and the text is given a name (Copied).
Next, the text (Copied) is copied to the clipboard using the IE execCommand to copy.
That's about it in a nutshell.
What If There Is Code?
The script, as it is currently written, copies whatever text is within the SPAN tags. If there is code, like a <BR> command created to display using & commands, those will copy right along. If you've got formatting in the text and you only want the user to copy the text, then you need to add a command that will remove that formatting. Luckily, there's an execCommand that will do that for you. It's important that you place it in the script before the copy process.
I made the new line bold so it would stick out a little more. That line will remove any formatting associated with the copied code so just the text will copy.
Multiple Copies On One Page
As with any time a JavaScript sits on a page, if you post multiples of that JavaScript, you need to make a point of changing out the variables that attach the visible elements with the JavaScript.
In this case that includes the name of the function, the ID of the SPAN, the ID of the hidden Textarea box, and the variable name you give in the script itself to represent the text. I used "Copied".
That's That
This is a great effect and it will work with voluminous amounts of text or just a few words. This script goes to the concept of interacting with the user. Instead of asking the user to copy and paste, now you can help then along in the process by doing at least the copy for them.
Add htmlgoodies.com to your favorites Add htmlgoodies.com to your browser search box IE 7 | Firefox 2.0 | Firefox 1.5.xReceive news via our XML/RSS feed
IE 7
Firefox 2.0
