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>

WYMeditor

In an effort to find a decent  web-based editor that produces valid XHTML, I stumbled across WYMeditor.  From the outset, it seems quite good offering an interface that is not completely awful to look at whilst at the same time preventing the user from messing up the HTML.

Extending WYMeditor

Compared to many web-based editors though, the features offered are fairly minimal, which I suppose is in keeping with the project’s general philosophy.  I decided to see how easy it was to extend.  In this case, I wanted to created a “symbol selector” to insert characters like pound and euro.  Not rocket science, but still a useful feature.

Requirements:

1. An additional button that shows the symbol selector
2. When the user clicks a symbol, the character is inserted into the document and the symbol selector is hidden
3. Clicking again on the button hides the selector 

I wanted to use a popup window dialog to match the existing link and image dialogs, however these seem to be hard-coded so I bailed on that idea. Instead I opted for a hidden DIV with each symbol enclosed in a SPAN.  The extensibility offered through plugins seems good, but with only one example, I couldn’t really tell if what I wanted to do fit the ‘plugin’ pattern.  There is an example for creating a button however, so I decided to use that.

jQuery

On closer inspection of the example code, I found that WYMeditor heavily relies on a JavaScript library called JQuery.  Almost like another language to begin with, I eventually found it to be intuitive to use and quite quick to implement.  Essentially it allows you to quickly resolve references to DOM nodes, then apply custom events and manipulate properties in a convienient way.

The Symbol Selector

See the Symbol Selector Demo

I modified the button example and replaced the ‘postInit’ function with the following:

postInit: function(wym) {

    //construct the button’s html
    var html = ”<li class=’wym_tools_newbutton’>”
             + ”<a name=’NewButton’ href=’#'”
             + ” style=’background-image:”
             + ” url(../wymeditor/skins/default/icons.png)’>”
             + ”Do something”
             + ”</a></li>
    
    //construct the symbol selector’s html
    html += ”<div class=’symbolSelector’ style=’position: absolute;display: none;width: 100px;background:white;border:1px solid black;’><span>£</span><span>€</span></div>”;

    //add the button to the tools box
    jQuery(wym._box).find(wym._options.toolsSelector + wym._options.toolsListSelector).append(html);

    //Make the button show/hide the symbol selector
    jQuery(wym._box).find(’li.wym_tools_newbutton a’).click(function() {
        jQuery(wym._box).find(’div.symbolSelector’).toggle();
        return(false);
    });

    //Paste symbol into document when symbol clicked, then hide symbol selector
    jQuery(wym._box).find(’div.symbolSelector span’).click(function() {
        wym.paste(jQuery(this).text());
        jQuery(wym._box).find(’div.symbolSelector’).hide(); 
    });
}    

I had a suggestion from a friend to update my website to include target = _blank for outgoing links.  It kind of makes sense from a marketing point of view since the user is being kept on my site.   Personally, I know how to hold down the ’shift’ key when I click on a link to force a new window to open, but does the target demographic know that they can do that, probably not?  Anyway, the conclusion I have come to is that to unexpectedly open a new window will possibly annoy some people and disappoint others.  Someone made a very valid point on this forum being that to use target = _blank, you are not giving the user a choice.

I have decided to refrain from using target = _blank for the moment hoping that people at least know how to use the ‘back’ button

After months of putting up with an annoying 2 second delay every time I accessed my Linux machine via FTP, I finally looked into the issue and found an incredibly simple solution.

Include the following line in proftpd.conf:

DelayEngine                     off

Apparently it has an inbuilt connection delay by default - for security reasons.  For now I think I will risk it.  Probably should be using FTP over SSH anyway..

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

There seems to be very little in the way of examples that show how to use the Zend framework to connect to a Microsoft SQL Server database, so here is what worked for me:

First up, the Zend Framework Programmer’s Reference Guide is the place to start, it talks about the Zend_Db_Adapter object that can be used to connect to various database types.  Of course the example is for MySQL with little little mention of SQL Server except that ‘Pdo_Mssql’ should be specified as the adapter type and that the PHP extensions ‘pdo’ and ‘pdo_mssql’ are required. 

Step 1 : Compiling PHP with PDO/PDO MSSQL support 

You may need to recompile PHP with support for the forementioned extensions and install FreeTDS (needed to connect to SQL Server):

./configure … –with-pdo –with-pdo-dblib=/usr/local/freetds  –with-mssql=/usr/local/freetds –with-zlib …

note: The location of your FreeTDS installation may differ

Once you have successfully compiled PHP (configure, make, make install etc.) then you should be able to use the Zend Framework to connect to SQL Server.

Step 2 : Install the Zend Framework

If you have not already done so, download and install the Zend Framework according to the install.txt file.  Just decompress the archive and ensure the framework ‘library’ folder is part of the default PHP include directory, one place to set this is in the php.ini file.  Not sure of where your php.ini file is? Call the PHP phpinfo(); command.

Step 3 : Setup you SQL Server database in FreeTDS

Your FreeTDS configuration file freetds.conf stores the database connections and is usually located at /usr/local/freetds/etc/freetds.conf.  Check the FreeTDS documentation for instructions on how to define your connection.

Step 4 : Using the Zend_Db_Adapter object to connect to SQL Server

Use the following code: 

require_once ‘Zend/Db.php’; 

$params = array(
‘host’=>’HOSTNAME’,
‘username’=>’USERNAME’,
‘password’=>’PASSWORD’,
‘dbname’=>’YOUR_FREETDS_DB_NAME’,
‘pdoType’=>’dblib’ //You may want to try ‘mssql’ or ‘freetds’ here?
);

$db = Zend_Db::factory(’Pdo_Mssql’, $params);

$test = $db->fetchOne(”SELECT somefield FROM sometable”);

print $test;

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