about

Biography:

Location: Dayton, OH
College: Cedarville University, Cedarville, OH
Degree: B.A. Management Information Systems (2002)
Certifications: Microsoft Certified Professional (MCP) 2002

Interests:

Music, Playing Guitar, Working on Cars, Home Improvement, Photography, Computers, Website Programming, Driving in the snow, NHL Hockey, Sand Volleyball, Settlers of Catan board game

Favorites:

Foods: Lasagna, Carrot Casserole, Chicken Parmesan
Sports: Hockey, Football, Volleyball, Soccer
Desserts: Peanut Butter Pie, Peanut Butter Passion ice cream
TV Shows: 24, The Office, Heroes, Mythbusters, Top Gear, Fifth Gear, Modern Marvels, Seinfeld, Simpsons


Contact Me:
Use this area to send me a note or message:
Name:
Email:
Comments:
Security Code:

fun stuff

Fun links you should probably check out:


Fun games you might want to play:


photo gallery

code samples

Current Code Samples:


Future Code Samples:

  • CAPTCHA form-protection of images using PHP and GD 2.0 library
  • Resizing images using PHP and the GD 2.0 library
  • Rotating images using PHP and the GD 2.0 library
CODE TUTORIAL: IE6 & Mozilla Firefox Cursor Grab Test
Here is a sample page that uses an HTML TEXTAREA field for input. Many times, folks would like to allow end users to add some HTML formatted text to their input, whether bold text or italics or even super and subscript. This HTML form and JavaScript code will work just fine in both IE6 and Firefox, collecting the cursor selection or cursor caret position and performing the necessary action.

This is a sample of this code in action:


HTML Toolbar:

Insert at cursor caret
Apply to text selection


Live Preview Area:




Here's the code you'll need to set this up on your webserver:
HTML CODE: "cursor-grab-test.html"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Javascript Multiple Character Selection for IE and Mozilla Browsers</title>
</head>

<script type="text/javascript" src="cursor-grab-test.js"></script>

<style type="text/css">
BODY, HTML { font-size:11px; font-family:verdana; }
INPUT.button { font-size:10px; }
</style>

<body>
<form name="AddReview" method="post">
<h1>HTML Toolbar:</h1>
<table border="0" cellpadding="2" cellspacing="2" style="font-family:verdana; font-size:10px;">
  <tr>
    <td>Insert at cursor caret</td>
    <td><input type="button" OnClick="tag('hr')" class="button" value="<hr>"></td>
    <td colspan="6"><input type="button" OnClick="tag('br')" class="button" value="<br>"></td>
  </tr>
  <tr>
    <td>Apply to text selection</td>
    <td><input type="button" OnClick="tag('a')" class="button" value="weblink"></td>
    <td><input type="button" OnClick="tag('strong')" class="button" value="bold"></td>
    <td><input type="button" OnClick="tag('em')" class="button" value="italics"></td>
    <td><input type="button" OnClick="tag('u')" class="button" value="underline"></td>
    <td><input type="button" OnClick="tag('s')" class="button" value="strikethrough"></td>
    <td><input type="button" OnClick="tag('sup')" class="button" value="superscript"></td>
    <td><input type="button" OnClick="tag('sub')" class="button" value="subscript"></td>
  </tr>
</table>
<textarea name="Article" id="ta" cols="70" rows="25" onChange="ShowUpdate(this.value)" onKeyUp="ShowUpdate(this.value)" onMouseUp="ShowUpdate(this.value)">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nec orci. Curabitur commodo ligula id risus. Etiam at velit sed tellus imperdiet interdum. Vivamus eu nisl et urna sagittis pharetra. In rhoncus consequat metus. Vestibulum massa. Aliquam rutrum adipiscing sapien. Nam non massa. Suspendisse imperdiet dui sodales leo. Cras a quam sit amet orci congue molestie. Sed massa. Quisque posuere est sed erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Nullam non justo. Maecenas eros ante, rhoncus et, vestibulum vel, ullamcorper quis, lorem. Integer diam tortor, iaculis et, ultricies id, pellentesque vitae, lacus.

Nulla dolor. Vestibulum consectetuer gravida sem. Aliquam egestas pellentesque magna. Mauris gravida placerat dolor. Nam pretium ornare risus. Sed placerat odio sit amet ipsum. Suspendisse molestie. Nullam ut est. Duis volutpat. Phasellus et nisi in felis condimentum adipiscing. Integer sed tellus et sapien bibendum scelerisque. Morbi justo tellus, faucibus sed, accumsan in, volutpat non, sem. Nullam porttitor, ligula iaculis volutpat congue, eros sapien tincidunt libero, eu lobortis erat nisl vitae odio. Aliquam non dui a arcu posuere imperdiet.

Morbi lectus lorem, ultricies id, scelerisque nec, rhoncus eu, libero. Ut dui. Duis sed enim eu metus scelerisque tristique. Quisque magna. Nullam viverra convallis tellus. Quisque ante. Morbi aliquam libero eu justo. Mauris consectetuer, dolor a gravida lobortis, orci nibh sodales tellus, vel rutrum lacus mauris vel massa. Donec pellentesque arcu ac neque. Nam varius, justo sed pellentesque iaculis, nunc lacus volutpat tortor, a fermentum nunc velit eu neque. Ut a nibh eu mi feugiat gravida.</textarea>
<br>
<br>
<h1>Live Preview Area:</h1>
<div id="outputHTML" style="width:550px; background-color:#ffffff; border-width:1px; border-style:solid; border-color:#000000;"></div>
</form>

</body>
</html>

Here is the JavaScript code that does the work in both IE6 and Firefox. Feel free to improve on it if you'd like, I'm sure there are many things that could be added or modified to make things run more smoothly.
JavaScript CODE: "cursor-grab-test.js"
<script type="text/javascript">
function tag(newTag)
{
  var URLLink = "";
  //  If newTag is an <a href> link, we need to ask for the URL to use
  if (newTag == "a")
  {
    URLLink = prompt("What is the URL where this link should go?", " ");
  }
  //  IE support for inserting HTML into textarea
  if (document.selection)
  {
    // get selected text
    var sel = document.selection;
    var rng = sel.createRange();
    
    input = document.all["Article"];
    input.focus(input.caretPos);
    input.caretPos = document.selection.createRange();
    
    if (sel.type == "Text") //  If the selected object is of type text, store it
    {
      text = rng.text;
      
      if ((newTag != "hr") && (newTag != "br")) //  If tag needs to appear before and after selected text
      {
        //  Insert brackets around the newTag, and insert it before and after the selected text.
        rng.text = "<" + newTag;
        if (URLLink != "")
        {  rng.text += " href=\""+URLLink+"\" target=\"_blank\"";   }
        rng.text += ">" + text + "</" + newTag + ">";
      }
      else //  If tag only needs to appear after selected text.
      {
        //  Insert brackets around the newTag, and insert it only after the selected text.
        input.caretPos.text = "<" + newTag + ">";
      }
    }
    else //  If tag only needs to appear once after selected text.
    {
      //  If tag only needs to appear after selected text.
      input.caretPos.text = "<" + newTag + ">";
      input.focus();
    }
  }
  //  Mozilla/Netscape/Firefox support for inserting HTML into textarea
  else
  {
    //  init global variables
    ta = document.getElementById("ta");
    start = ta.selectionStart;
    end = ta.selectionEnd;
    
    //  Split before, sel, after and insert tags in between  
    before = (ta.value).substring(0, start);
    sel = (ta.value).substring(start, end);
    after = (ta.value).substring(end, ta.textLength);
    
    //  If tag needs to appear before and after selected text
    if ((newTag != "hr") && (newTag != "br") && (sel.length > 0))
    {
      ta.value = before + "<" + newTag;
      if (URLLink != "")
      {  ta.value += " href=\""+URLLink+"\" target=\"_blank\"";   }
      ta.value += ">" + sel + "</" + newTag + ">" + after;
      
      //  set focus in textarea box
      ta.focus();
      ta.selectionStart = end + 5 + (newTag.length * 2);
      ta.selectionEnd = ta.selectionStart;
    }
    else //  If tag only needs to appear once after selected text.
    {
      var tagStartChar = "<";
      var tagEndChar = ">";
      ta.value = before + tagStartChar + newTag + tagEndChar + after;
      //  set focus in textarea box
      ta.focus();
      ta.selectionStart = end + tagStartChar.length + newTag.length + tagEndChar.length - sel.length;
      ta.selectionEnd = ta.selectionStart;
    }
  }
  URLLink = "";
  //  Update Preview Window
  ShowUpdate(document.AddReview.Article.value);
}
function ShowUpdate(htmlOutput)
{
  //  Add carriage returns into text before output
  while (htmlOutput.indexOf("\n") != -1)
  {
    htmlOutput = htmlOutput.replace("\n", "<br>");
  }
  document.getElementById('outputHTML').innerHTML = htmlOutput;
}
</script>

my subaru wrx

subaru links

home improvement

friendly linkage

copyright © 2002-2008 Justin Tubbs email the webmaster