textAssist – a elegant assistant for your users about texts

Download   Demo

textAssist is the smart auto text assistant script with highly customizable options. This script uses the jQuery framework and you can use it on dynamic web pages. textAssist helps web developers in making web sites more usable and user friendly.
With the help of this plugin a web page could be easily assisted for users who selected some texts on it.

Features

• jQuery capabilities.
• Highly Flexible and Customizable.
• Highly User Interface Design.
• Multilanguage support.
• Customizable through css.
• Extremely simple configuration.
• Auto Assist.
• Auto adjustment.
• Customizable items.
• Items could be builded from JSON hash.
• Unlimited items.
• Items can contain HTML tags.
• Customizable actions.
• Works in all browsers.

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="textassist.css" media="screen">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="textassist.min.js"></script>

2. HTML

<div class="container" id="container">
 <h1 class="logo">textAssist<span>A powerful and elegant assistant for your users about texts. Select some Words, URLs and Emails from below.</span></h1>
 <h3>Proin ullamcorper congue mauris.</h3>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam velit justo, malesuada at, egestas vitae, lacinia nec, mauris. Duis auctor, nisl et venenatis dapibus, turpis risus tempus dolor, at vehicula metus enim et neque. Mauris sed lectus. Maecenas tempor, augue quis tincidunt imperdiet, dolor ante mattis est, sit amet vulputate libero arcu quis turpis. Sed varius, neque sit amet ornare ullamcorper, massa orci vestibulum purus, sit amet ultricies enim purus nonummy nibh. Nullam ultrices. Nam odio. Vestibulum posuere magna. Suspendisse potenti. Cras vitae nunc non tortor euismod rhoncus. Etiam nonummy. Aenean sodales. Suspendisse tempus, mi ac consequat venenatis, lorem sapien scelerisque lacus, sit amet sagittis nunc ante non turpis. Nunc ornare.</p>
</div>

3. JAVASCRIPT

$(document).ready(function(){

 function isValidURL(url){
  var RegExp = /^(([\w]+:)?\/\/)?(([\d\w]|%[a-fA-f\d]{2,2})+(:([\d\w]|%[a-fA-f\d]{2,2})+)?@)?([\d\w][-\d\w]{0,253}[\d\w]\.)+[\w]{2,4}(:[\d]+)?(\/([-+_~.\d\w]|%[a-fA-f\d]{2,2})*)*(\?(&?([-+_~.\d\w]|%[a-fA-f\d]{2,2})=?)*)?(#([-+_~.\d\w]|%[a-fA-f\d]{2,2})*)?$/;
  return RegExp.test(url);
 }

 function isValidEmail(email) {
  var RegExp = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
  return RegExp.test(email);
 }

 $('body').textAssist({
  items: [
   {
    title: "Go to "{%s}"",
    classN: "goto",
    onShow: function(text, offset) {
     if(!isValidURL(text) || isValidEmail(text)) offset.hide();
    },
    onClick: function(text, offset){
     window.open('http://'+text.replace('http://'));
    }
   },
   {
    title: "Mail to "{%s}"",
    classN: "mailto",
    onShow: function(text, offset) {
     if(!isValidEmail(text)) offset.hide();
    },
    onClick: function(text, offset){
     window.location.href = 'mailto:'+text;
    }
   },
   {
    title: "Search for "{%s}"",
    onClick: function(text, offset){
     return false;
    },
    classN: "search",
    href: "http://google.com/search?q={%s}",
    target: "_blank"
   },
   {
    title: "Wikipedia (en)",
    classN: "wikipedia",
    href: "http://en.wikipedia.org/w/index.php?title=Special:Search&search={%s}",
    target: "_blank",
    onShow: function(text, offset) {
     if(isValidEmail(text) || (text.length > 50)) offset.hide();
    }
   },
   {
    title: "Translate",
    classN: "translate",
    href: "http://translate.google.com/?q={%s}",
    target: "_blank",
    onShow: function(text, offset) {
     if(isValidEmail(text)) offset.hide();
    }
   },
   {
    divider: true,
    onShow: function(text, offset) {
     if(isValidEmail(text)) offset.hide();
    }
   },
   {
    title: "Map with Google",
    classN: "map",
    href: "http://maps.google.com/maps?q={%s}",
    onShow: function(text, offset) {
     if(isValidEmail(text)) offset.hide();
    }
   },
   {
    divider: true,
    onShow: function(text, offset) {
     if(isValidEmail(text)) offset.hide();
    }
   },
   {
    title: "Email",
    classN: "email",
    href: "mailto:someone@some.domain?body={%s}",
    onShow: function(text, offset) {
     if(isValidEmail(text)) offset.hide();
    }
   }
  ]
 });

});