David Turner

JavaScript Text Selection Demo

Referencing external sites is an important aspect of what I want to do for my Major Project. The easiest way that I have identified for handling this cross-browser, is to make use of a JavaScript Bookmarklet.

This demo exists as an example of how some elements of the site can be quite easily collected using simple JavaScript.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Header Level 2

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Header Level 3

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

  • Aliquam tincidunt mauris eu risus.

    #header h1 a { 
    display: block; 
    width: 300px; 
    height: 80px; 
}

What to Expect

This is used as a demo to show cross browser text collection. Select some text, click the link below, and you should get some popups telling you:

  1. Text Selected
  2. Current Page URL
  3. Current Date/Time

These are set up as JavaScript Alerts purely for ease of demonstration of what I'm working on. If I develop it further I will be using it in less... annoying... methods.

Make the Magic Happen

Credits

  1. Code Example by Willy Duitt over on Coding Forums. Whilst his post is pretty old (dating from 2004) it proved relevant in making text selection work in our old friend Internet Explorer, which seems to be about as old as time itself.
  2. HTML-Ipsum by Chris Coyier for the sample text.
  3. Markdownify by Milian Wolff for letting me be lazy in terms of converting HTML-Ipsum into Markdown.