Text Scrambler Plugin

Share

Want to see the Text Scrambler in action? You can find that here.

Want to cut to the chase and download a copy of your own so that you can go play? Here you go.

This plug-in is written in plain ol’ vanilla JavaScript and is not dependent on any other libraries (such as jQuery).

There are just two things you need to do to include the Text Scrambler on your web page:

  1. Include the HTML markup for the controls and the containers that hold them and the scrambled text
  2. Include the JavaScript plug-in that does all the heavy lifting

1. HTML Markup

Somewhere within the body of your page, you’ll need to include markup similar to the example below. You can customize the text if you like – and if you delve into the script itself, you’ll see that you can change the names of the controls too. There are also plenty of hooks for CSS, so that you can customize the appearance.

[html]
<textarea name=”inputContainer” id=”inputContainer” cols=”30″ rows=”10″ placeholder=”Enter some content here, then press the button below.”></textarea><br><br>

<button id=”actionDoIt”>Do it!</button> <button id=”actionReset”>Reset</button><br><br>

<textarea name=”outputContainer” id=”outputContainer” cols=”30″ rows=”10″ placeholder=”And it wlil apaepr sbarmelcd here.”></textarea>
[/html]

2. Include the JavaScript plugin

You’ll need to host the script itself somewhere – then adjust the path/to the file to reflect that location

[html]
<script src=”path/to/randomizer.js”></script>
[/html]

3. Enjoy!

Share

Morse Decode Plugin

Share

morseWant to see Morse Decode in action? You can find that here.

Want to cut to the chase and download a copy of your own so that you can go play? Here you go.

This plugin is written in plain ol’ vanilla JavaScript and is not dependent on any other libraries (such as jQuery).

There are just two things you need to do to include the Morse Decoder on your web page:

  1. Include the HTML markup for the controls and the containers that hold the output and text
  2. Include the JavaScript plugin that does all the heavy lifting

1. HTML Markup

Somewhere within the body of your page, you’ll need to include markup similar to the example below. You can customize the text if you like – and if you delve into the script itself, you’ll see that you can change the names of the controls too. There are also hooks for CSS, so that you can customize the appearance.

[html]
<textarea name=”inputContainer” id=”inputContainer” cols=”30″ rows=”5″ placeholder=”Enter some content here, then press the button below.”></textarea><br><br>

<button id=”actionDoIt”>Do it!</button> <button id=”actionReset”>Reset</button><br><br>

<textarea name=”outputContainer” id=”outputContainer” cols=”30″ rows=”5″></textarea>
[/html]

2. Include the JavaScript plugin

You’ll need to host the script itself somewhere – then adjust the path/to the file to reflect that location

[html]
<script src=”path/to/demorse.js”></script>
[/html]

3. Enjoy!

Share

Morse Encode Plugin

Share

morseWant to see Morse Encode in action? You can find that here.

Want to cut to the chase and download a copy of your own so that you can go play? Here you go.

This plugin is written in plain ol’ vanilla JavaScript and is not dependent on any other libraries (such as jQuery).

There are just two things you need to do to include the Morse Encoder on your web page:

  1. Include the HTML markup for the controls and the containers that hold the text and output
  2. Include the JavaScript plugin that does all the heavy lifting

1. HTML Markup

Somewhere within the body of your page, you’ll need to include markup similar to the example below. You can customize the text if you like – and if you delve into the script itself, you’ll see that you can change the names of the controls too. There are also hooks for CSS, so that you can customize the appearance.

[html]
<textarea name=”inputContainer” id=”inputContainer” cols=”30″ rows=”5″ placeholder=”Enter some content here, then press the button below.”></textarea><br><br>

<button id=”actionDoIt”>Do it!</button> <button id=”actionReset”>Reset</button><br><br>

<textarea name=”outputContainer” id=”outputContainer” cols=”30″ rows=”5″></textarea>
[/html]

2. Include the JavaScript plug-in

You’ll need to host the script itself somewhere – then adjust the path/to the file to reflect that location

[html]
<script src=”path/to/morse.js”></script>
[/html]

3. Enjoy!

Share

Web Toys

Share

jack-in-the-boxOn the old version of JDHorn.com I had a web toys page where I hosted a variety of utilities that I created in ASP ( a microsoft web programming technology) – just for fun (hence the toys designation).

Anyhow, when I took the old site offline in August of 2013, I vowed to recreate the functionality of those toys in JavaScript on my new website, and have since done so for quite a few of them.

It takes time to get these online, so as I do, I’ll update the Web Toys page.

Be sure to check them out!

Share