Copy data to clipboard using javascript

Having been a programmer for more than 8 years now, I feel I still cannot grasp the functionalities that would make the end-users happy. These might be a mere few lines of code from a technical perspective, but these might very well make the end-users very happy.

I came across one of such incident recently. One of the user of my application was an elderly person who had to type in so many numbers from one system to a third-party system (among many tasks). So, we added a “Copy” icon for her to copy those numbers on a button and simply paste them in the other system. I was really amazed by her gratification. And it made me realize no matter who complex algorithm or architecture we design for our customers, it won’t matter until it helps them in one way or the another.

Okay. Enough of the background. Let’s get to the technical nitty-gritty now. I was surprised how hard it was to find a suitable method to copy “stuffs” to the clipboard. Of course, I came across several javascript libraries such as clipboard.js and zeroclipboard which claims to do the job in few simple steps. But I didn’t want to use any extra javascript libraries. After devouring stackoverflow for a significant amount of time, I came across a solution that just use pure javascript.

The following javascript function ‘copyData()’ uses ‘document.execCommand(‘copy’)‘ to copy the currently ‘highlighted’ data to the clipboard. ‘execCommand()‘ is an Internet Explorer-based statement that allows the browser to execute a command specified as its argument. As you can see below, we have a hidden textarea , which will hold the text to be copied passed as argument to the function ‘copyData()’. The ‘data’ will be placed in the hidden textarea and is highlighted and then will be copied to the clipboard.

Continue reading

Advertisements

Preserve log upon navigation in Chrome DevTools

It’s been quite a few weeks since I contributed my last post. For the past couple of days, I was working on an UI story and have spent most of  my work hours debugging the client-side scripts. It was then, that I came across an important tip which I am going to share today.

Problem:

While debugging the client-side scripts for any web application, we tend to navigate to various pages through several links. I encountered a javascript error when clicking a link and then, whoosh!! I was sent off to another page, before I even had the chance to glance at the error. (P.S. I was using Chrome developer tool then).

No matter how much I strained my brain or how hard I squinted at the screen, there simply wasn’t enough time for me to read out the error. 😦 Continue reading

Twitter Bootstrap : My salvation for UI hell

In my 5+ years experience in .NET development, I could never make myself fond of creating those “pretty” .aspx pages. But I need not stress myself over this anymore. Thanks to the Twitter Bootstrap – “A full featured CSS framework with added javascript plugins, html scaffolding and components”.

As per Wikipedia, “Twitter Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and other interface components, as well as optional Javascript extensions.”

Originally, Bootstrap was developed by Mark Otto and Jacob Thomson at Twitter as a framework to encourage consistency across internal tools. Seeing this framework as a potential tool for accelerated project development, it gained popularity and was released as open-source in August, 2011 and has been the most popular GitHub development project as of February 2012.

It is really east to get started with bootstrap. One just needs to download the compiled and minified version available at http://twitter.github.io/bootstrap/assets/bootstrap.zip . The following files will be added to the project.

Image

Once this is done, just include these CSS and JS files in your HTML or aspx file to make it a boostrapped file.

Image

There are a couple of sample templates that help create the needed layout in a snap, available @ http://twitter.github.io/bootstrap/getting-started.html#examples .

This framework has helped me create “pretty” HTML pages on a fly, without worrying about any CSS hassles, literally saving me the UI hell.

Reference: http://twitter.github.io/bootstrap/index.html