Web Programming Notes

TinyMCE Character Limit Example

Below is some code illustrating how to detect a character count on a TinyMCE wysiwyg control.  Enforcing the character limit can be done in a number of ways, the most basic being an alert.  The regular expression that removes the HTML tags is optional depending on whether they are relevant in the count.

<textarea style=”width: 600px;height:300px; ”></textarea>
<script>
function characterCount() {
    var text = tinyMCE.selectedInstance.getBody().innerHTML.replace(/(<([^>]+)>)/ig,\”\”);
     if (text.length > 300)
     {
          alert(”Character limit of 300 exceeded”);
     }
}
….
tinyMCE.init({
     theme : “advanced”,
     handle_event_callback : \”characterCount\”
});
….
</script>

The JavaScript class ClippedImage.class.js modifies a standard <IMG> tag by clipping it to some specified dimensions and displaying the full image on the mouseover event.

The solution works well for single images and should degrade gracefully in unsupprted browsers. It has been tested in Firefox 2, IE6 and Opera 9.

View this example for for details on how to implement the expanding clipped image effect. Rollover the image below to see the effect in action:

I produced this in an attempt to replicate a flash style animation a client pointed out to me at: http://www.trafficbroker.co.uk/clients.php

I was able to replicate the general ‘feel’ of the flash version, however a css z-index bug in IE thawted my attempts to correctly make a table of clipped images without some images appeared above others. I may at some point attempt to create a table-like layout using CSS and a single relative container which would solve this issue.

This is the table attempt if anyone cares to offer a solution to the IE6 zIndex bug.

UPDATE

 - Managed to overcome the IE bug by setting explicitly the z-index of each clipped image’s parent element.
 - This is a List example

The JavaScript library TextEffect.class.js can be used to perform various effects on any piece of text within a document.   The 4 effects that have be implemented so far are: disperse, assemble, fade-in and fade-out.  If I can think of more I will add them.

See the example page for a detailed demonstration, or click the test button below:

Computer stores in Perth Western Australia

Test Disperse Method Test Assemble Method

Limitations:

• The tag containing the text cannot contain any markup
• Starts to slow down dramatically with a large amount of text

Features:

• Supported (tested) in IE6, Firefox2 and Opera 9
• More than one ‘TextEffect’ object can exist on a page without interferring with each other.
• Code should be non-intrusive and fail gracefully.

This is another javascript library.  It creates a cross fading slideshow of images from a list of IMG tags and some basic JavaScript.  The code is based on some I found elsewhere some time back.  I will give credit if I can find where!
The script has been tested in Firefox2, IE6 and Opera9.  Have a look at the example page.

The script has the following features:

• Multiple slideshows can co-exist on a single page
• The implementation is accessible meaning it will still render the first image if the slideshow fails
• The code is contained within a single object definition so it won’t interfere will any other JavaScript

How to implement:

1. Include the SlideShow.js file in the head of your document.
2. Create a list of IMG tags (you can put links around them) encased in a DIV tag.  Set the ‘display’ style of all but the 1st image to ‘none’.  Give the DIV tag an id attribute. e.g.
   <div id=”slideshowcontainer_a”>
      <img src=’s1_a.jpg’>
      <img src=’s1_b.jpg’ style=’display:none;’>
      <img src=’s1_c.jpg’ style=’display:none;’>
      <img src=’s1_d.jpg’ style=’display:none;’>
     </div>
3. After the DIV tag place the JavaScript code that will render the slideshow.
   <script>var s1 = new SlideShow(’slideshowcontainer_a’,240,180,{});</script>
   The parameters are ID of DIV tag, width and height (pixels) and options.  For details of options see the example page source.

The ContextMenu script allows you to define a contextmenu to show when any html element is ‘right-clicked’.   The standard browser contextmenu is disabled, but only for the elements that trigger a custom ContextMenu.  The menu shown can differ for each element.

Please view the example.  — or — Right-click on the element below!

Test element 1

• Onthego Tours
• Cooking Holidays

The functionality is:

1. When a designated element is clicked the assigned context menu is displayed
2. When the document is clicked the context menu disappears, which is the same as the browser’s implementation.

To get it working:

1. Include the ContextMenu.class.js file in the HEAD of your document.
2. Create a trigger element that will fire the context menu: e.g.
   <div id=’trigger’>Right-Click Here</div>
3. Create a menu to show e.g.
   <div id=’contextMenu’ style=’display: none; position: absolute;’>…Menu Goes here…</div>
4. Assign the ‘menu’ to the ‘trigger’ with a simple Javascript call.
   <script>var cm = new ContextMenu(’trigger’,'contextMenu’);</script>

The implementation does not rely on any additional js libraries and should not impact on any existing JavaScript code.  It ’should’ fail gracefully.  You can define as many instances of ‘ContextMenus’ as you like on a single page without repeating any unnecessary code.

The script is based on code from various places including:

http://simonwillison.net/2004/May/26/addLoadEvent/ : I applied a similar technique to the document.onmousedown event so that existing handlers are not overwritten.

http://luke.breuer.com/tutorial/js_contextmenu.htm : The basic ideas were taken from here.

The script has been tested in IE6 and Firefox 2

This script is based on one I found at news.bbc.co.uk.  A client pointed it out to me and wanted it on his website. 

Improvements made to original:

• Simpler to implement 
• Links in the ticker will be found by search engines.
• Degrades gracefully
• Does not rely on prototype or any other monolithic JS library.
• Supports as many tickers on a page as you desire
• Code is encapsulated into a single class so it wont interfere with any other javascript libraries you may be using.

How to use it:

1. Download AccessibleTicker.class.js
2. Link to it using standard <script src=”AccessibleTicker.js” mce_src=”AccessibleTicker.js”></script> tag in the head of your html document.
3. Define an empy placeholder anchor tag where the ticker will be located giving it a unique ID attribute: <a id=”your_id”/>
4. Define an unordered list of links <ul> (see below) giving the ul tag a unique ID attribute.
5. Initialize the ticker using the <ul> ID and the <a> id from steps 2 and 3.  In the example I have simply placed the initialization code below the elements themselves.  You can run it on the ‘onload’ event if desired.

Very basic Example code:

<a id=’test1_container’ style=’display: none;’></a>
<ul id=’test1_data’>
<li><a href=’http://google.com’>Google</a></li>
<li><a href=’http://gmail.com’>GMail.. web based email</a></li>
</ul>
<script>
var ticker1 = new AccessibleTicker(’test1_container’, ‘test1_data’);
</script>

See the example page and view the source for more detail.

• Onthego Tours – Tours to Egypt, Russia and More
• Holiday Onthemenu – Cooking Tours to Exotic Locations