Example

First of all here's an example to show you it working. If you are reading this in an RSS reader you will need to click through to view this in a web browser for it to work.

Type some text into the above FCKEditor instance and the word count above it will change as you type.

The HTML

The only HTML required is the container for the word count:

<div id="word_count"></div>

The Javascript code

Here's the Javascript to make the word count functionality work:

function FCKeditor_OnComplete(editorInstance) {
   
    fckeditor_word_count(editorInstance);
    editorInstance.Events.AttachEvent('OnSelectionChange', fckeditor_word_count);
   
}

function fckeditor_word_count(editorInstance) {

    var matches = editorInstance.GetData().replace(/<[^<|>]+?>|&nbsp;/gi,' ').match(/\b/g);
    var count = 0;
    if(matches) {
        count = matches.length/2;
    }

    document.getElementById('word_count').innerHTML = count + " word" + (count == 1 ? "" : "s") + " approx";

}

FCKeditor_OnComplete() is triggered by the FCKEditor itself when it's finished loading. The function defined above calls my fckeditor_word_count function to initialise the word count container with the current number of words and then attaches an event to the editor instance so whenever the selection is changed it calls the word count function again.

The word count function gets the HTML from the FCKEditor instance, strips out the HTML tags and non-breaking spaces and then matches word boundaries (this is covered in my previous post about word counting).

Finally, the word_count container is updated with e.g. "0 words approx", "1 word approx", "2 words approx" etc.

Browsers tested

I have tested the above code in IE6, IE8, FF1, FF3.5, Chrome 2. It worked in all of them testing with 9000 words generated from lipsum.com.

On my speedy machine with lots of RAM with the newer browsers there was really no difference between having the word counting on and off with 9000 words; on a virtual machine with 256MB on the older browsers it got fairly sluggish with 9000 words when word counting so it will pay to be careful enabling a function like this if you are editing large documents on older computers, because of the regular expressions being run on every keypress.

Note that as per the FCKeditor documentation "in IE, this event [OnSelectionChange] does not fire on every keystroke, but only on some random keystrokes."

Screenshot example of resize grip

The following screenshot shows the resize grip; I've highlighted it with a red circle.

The user can make the textarea larger but cannot size it back down below the original size.

CSS to disable resizing

The CSS to disable resizing for all textareas looks like this:

textarea {
    resize: none;
}

You could instead just assign it to a single textarea by name (where the textarea HTML is <textarea name="foo">):

textarea[name=foo] {
    resize: none;
}

Or by id (where the textarea HTML is <textarea id="foo">):

#foo {
    resize: none;
}

Validation errors

The above is only supported by the webkit browsers. If you run it through a CSS validator (such as the W3C CSS validator) you'll get a warning like this:

Property resize doesn't exist in CSS level 2.1 but exists in [css3] : none

Example

Here's a couple of examples. These won't work if you are reading this in a feed reader so you'll need to click through to read this post in a web browser.

The HTML

Here's the HTML form:

<form>

<div id="example1_count" style="display:none"></div>
<textarea id="example1" rows="5" cols="50" class="word_count">a b c</textarea>

<div id="example2_count" style="display:none"></div>
<input id="example2" type="text" size="50" class="word_count" />

</form>

Note that the textarea and input have the class "word_count" and need to have id="...". The area that contains the word count is the same id plus "_count". The divs containing the count are initially hidden (this would be better defined in a style sheet) and are made visible by the initialization code.

The jQuery / Javascript

When the document is ready all inputs with class word_count have an initial word count done to them and the word_count() function is bound to the keyup event. I tried this with the change event but that only fires when the user clicks/tabs out of the field.

$(document).ready(function() {

    $('.word_count').each(function() {
        var input = '#' + this.id;
        var count = input + '_count';
        $(count).show();
        word_count(input, count);
        $(this).keyup(function() { word_count(input, count) });
    });

});

function word_count(field, count) {

    var number = 0;
    var matches = $(field).val().match(/\b/g);
    if(matches) {
        number = matches.length/2;
    }
    $(count).text( number + ' word' + (number != 1 ? 's' : '') + ' approx');

}

The word counts seem to be quite accurate using the \b word boundary, although in all browsers I tested .length returns twice the actual number, hence the division by 2.

The result from .match() are returned into a variable instead of just getting .length to prevent Javascripts errors being triggered in the browser if there are no matches.

The only issue I have found is if the user uses their mouse to copy and paste, select and delete, etc then the word count isn't updated. I couldn't find a satisfactory way to fix this.

Browsers tested

I have tested the above code in IE6, IE7, IE8, FF1, FF3.5, Chrome 2. It worked in all of them. I tested with 9000 words generated from lipsum.com and it all worked nicely.

Please note there will be a second on-topic post (a jQuery one to do with counting words in a textarea or input field) later on today.

To achieve a tenfold gain like this requires a 21.15% increase month on month of pageviews and 21.65% month on month growth for RSS subscribers. As shown in the table below I'm getting it right with the RSS subscribers and I think the growth is realistic but I think it pretty unlikely I'll get to the 600k pageviews mark by the end of the year.

Traffic's been growing by around 15k pageviews per month since the start of the year so I've adjusted the "required" column for pageviews to a growth of 15k per month which results in 250k pageviews per month in December. I think this is more realistic.

I'll update this again after the third quarter of the year, at the end of September.

1. Some restrictions on dimension and metric combinations have been relaxed. You can now query most content and visitor level dimensions together, for example ga:pagePath and ga:source is now a valid combination. Please see the updated reference guide for these new combinations: http://code.google.com/apis/analytics/docs/gdata/gdataReferenceDimensionsMetrics.html#explore2Pair

2. The total number of rows that can be asked for in one request has been increased to 10,000. The default is still 1000, but can now be increased by setting the "max-results" query parameter.

3. The Account Feed now returns two new data elements for each table id (currency and timezone)
<dxp:property name='ga:currency' value='USD'/>
<dxp:property name='ga:timezone' value='America/Los_Angeles'/>

4. We're now enforcing that data queries must include at least one valid metric.

5. All previous deprecation changes have taken effect.

End of post from Google Groups.

I will check in the next few days to make sure none of these changes affect my Google Analytics API PHP Class and post any updates if there need to be any. I don't think off the top of my head that anything should need to be changed other than some of the documentation and examples.

Example directory

The examples below look at a directory with the following, the same example directory as used in the read through directory post:

bar.txt       A regular file
baz           A directory
foo.txt       A regular file
link2foo.txt  A symbolic link to foo.txt

Simple example

To find all the files in the directory /path/to/directory with a .txt file extension, you can do this:

$files = glob("/path/to/directory/*.txt");

The $files array contains the following from the example directory:

Array
(
    [0] => /path/to/directory/bar.txt
    [1] => /path/to/directory/foo.txt
    [2] => /path/to/directory/link2foo.txt
)

If no files matched the pattern then the array will be empty.

Example using braces

There are flags which can be passed as a second optional parameter. One of these is GLOB_BRACE which means that e.g. {jpg,gif,png} will be expanded to match jpg, gif and png which can be useful if you need to look for a particular set of files by their extension, in this example for image files.

If the example directory also had the files 1.jpg, 2.gif and 3.png then you can do this to get glob to return just the image files:

$files = glob("/path/to/directory/*.{jpg,gif,png}", GLOB_BRACE);

print_r($files) would echo:

Array
(
    [0] => /path/to/directory/1.jpg
    [1] => /path/to/directory/2.gif
    [2] => /path/to/directory/3.png
)

Further reading

This serves as an introduction to using glob() to find files with PHP. Read the glob manual page for more details and for information about the other flags.

Please note there will be a second post later on today with regular on-topic content.

25 most popular articles in June 2009

The following were the top 25 most accessed articles on this blog in June 2009, along with the original post date. The list is compiled using my PHP Class for the Google Analytics API to get the unique pageviews for posts in the month. Last month's rank is shown in square brackets after the post title, or [-] if it wasn't in the top 25 last month.

Note that unique pageviews means it's only counted once for each visitor so if someone views the page multiple times it's still only counted once for that user. If I sorted by pageviews the list would be slightly different with the Google Analytics API and PHP post in second position because people refer back to that page multiple times.

1. How to get and set form element values with jQuery [1] (November 13th 2008)
2. Howto Restart Apache [2] (December 22nd 2004)
3. Using the HTTP_REFERER variable with PHP [4] (April 18th 2008)
4. How to check and uncheck a checkbox with jQuery [5] (November 14th 2008)
5. Delete All Data in a MySQL Table [3] (July 16th 2004)
6. Setting cookies with jQuery [-] (June 9th 2009)
7. Cross Table Update with MySQL [7] (March 1st 2004)
8. Open firewall ports for MSN Messenger and ICQ [8] (February 13th 2004)
9. Install yum with rpm on CentOS [11] (October 16th 2007)
10. Windows Vista Black Screen After Login - Resolved [14] (June 26th 2008)
11. jQuery: show plain text in a password field and then make it a regular password field on focus [-] (June 2nd 2009)
12. How to check an MD5 hash on a file [9] (January 19th 2004)
13. The Google Analytics API and PHP: A series [6] (April 28th 2009)
14. Windows Vista Black Screen After Login [17] (May 29th 2008)
15. Upper case and lower case strings with MySQL [16] (July 29th 2008)
16. Formatting Dates and Times with MySQL [13] (July 17th 2004)
17. Loading content with jQuery AJAX - using a loading image [15] (February 3rd 2009)
18. Test if a file exists with the BASH shell [19] (August 27th 2008)
19. Backup/export bookmarks with Mozilla Firefox 3 [22] (June 24th 2008)
20. The user is not associated with a trusted SQL Server connection [20] (June 21st 2008)
21. Describe table structure with MS SQL Server [-] (July 23rd 2008)
22. Create RSA and DSA Keys for SSH [18] (March 5th 2004)
23. Style an HTML form input with CSS and jQuery [-] (July 26th 2008)
24. PHP Error Class 'SoapClient' not found [21] (September 25th 2007)
25. Always show a vertical scrollbar in Firefox, Chrome, Safari and Opera [-] (June 20th 2009)

Visitor numbers

I get the visitor numbers from Google Analytics and saw an increase of 12.9% in visits and 11.7% in pageviews between May and June. The following table shows visits and pageviews for the six months from January 2009 to June 2009.

RSS Subscribers

I use Feedburner/Google to serve my RSS feed and give an indication of visitor numbers. I curently have around 310 RSS subscribers, 70 more than last month.

Changes made this month

I've switched out the ad next to the Google Adsense block for a Buy Sell Ads square and added an advertising block utilising the same service in the right sidebar. If you are interested in advertising here please see my ads page on Buy Sell Ads.

Edit the MySQL configuration file my.cnf which is usually located on a *nix box at /etc/my.cnf or /etc/mysql/my.cnf and add the following line under the [mysqld] section to change the default to 3:

ft_min_word_len = 3

If the ft_min_word_len value is already in the file then change the number to the minimum length required.

After making this change the MySQL server must be restarted for it to take effect. It is not possible to change the size with a set query (e.g. "SET ft_min_word_len = 3" which will result in the error "#1193 - Unknown system variable 'ft_min_word_len'").

Now that the minimum word length has changed, and new or updated records will use the new minimum word length, but existing records will not be affected. To rebuild the full text index on a column for an example table called my_table, run this query:

REPAIR TABLE my_table QUICK;

I have seen comments by some people who have suggested that on large tables it may be faster to drop the index and create it again depending on the size, and also that the repairing it may mean the query cache is not flushed whereas dropping and re-indexing will solve this.

Note however that if you drop the index and then re-create it you may get SQL query errors on your website. As always it is advisable to test this sort of thing out on a development server configured in the same way as a production server before doing it to the production server to ensure you don't have any issues.

Please note there will be a second post later on today with regular on-topic content.

The posts made in June 2009 are as follows, broken down into categories. Note that some posts appear in more than one category so appear below more than once.

Apache

• Password protection with Apache and .htaccess (22 Jun 2009)

Applications

• Setting the country with Microsoft Bing (03 Jun 2009)
• Canon Easy Photoprint and CD LabelPrint Errors on Windows 7 (09 Jun 2009)

HTML and CSS

• Styling select, optgroup and options with CSS (06 Jun 2009)
• How to do a strikethrough with CSS (13 Jun 2009)
• Always show a vertical scrollbar in Firefox, Chrome, Safari and Opera (20 Jun 2009)
• Grey out a webpage (26 Jun 2009)

Javascript

• jQuery: show plain text in a password field and then make it a regular password field on focus (02 Jun 2009)
• Use append() to add text/html to an element with jQuery (05 Jun 2009)
• Setting cookies with jQuery (09 Jun 2009)
• Get all cookies with Javascript (12 Jun 2009)
• Specify custom styles with FCKeditor (14 Jun 2009)
• Trimming strings with Javascript (16 Jun 2009)
• Clear a form with jQuery (19 Jun 2009)
• Prevent "Red Title" showing in FCKEditor style drop down box (21 Jun 2009)
• Accessing form elements by name with jQuery (23 Jun 2009)
• Grey out a webpage (26 Jun 2009)
• jQuery Facebox dialog with greyed out background (27 Jun 2009)
• Select the FCKEditor language - full example (28 Jun 2009)
• Make jQuery Facebox loading screen auto-center (30 Jun 2009)

Miscellaneous Postings

• AccessoryGeeks June Coupons (04 Jun 2009)
• Yeah, what is a browser anyway? (18 Jun 2009)
• Follow me on Twitter and Facebook (18 Jun 2009)

MySql

• Selecting substrings with MySQL using LOCATE and SUBSTRING (03 Jun 2009)
• Find which tables use INNODB with MySQL (10 Jun 2009)
• Use one file per table with MySQL's INNODB storage engine (17 Jun 2009)
• MySQL "Incorrect key file for table" error (24 Jun 2009)

PHP

• List of PHP email libraries (01 Jun 2009)
• Articles about how to use PHP's IMAP Functions (01 Jun 2009)
• Get the included files with PHP (04 Jun 2009)
• Paging through result data from the Google Analytics API PHP Class (08 Jun 2009)
• Calculating a page's bounce rate with the Google Analytics API (11 Jun 2009)
• PHP's trim() function (11 Jun 2009)
• Google Analytics API PHP Class data method parameters (12 Jun 2009)
• Autoloading with PHP's SPL library (15 Jun 2009)
• Reading through a directory with PHP (18 Jun 2009)
• Sending a username and password with PHP CURL (22 Jun 2009)
• Prevent a view rendering with the Zend Framework (25 Jun 2009)
• Sending a username and password with PHP file_get_contents() (29 Jun 2009)

VMWare

• Connect a USB device with VMWare Server 2 (05 Jun 2009)
• VMWare Infrastructure Web Access Address and Port (07 Jun 2009)

The second part of this monthly roundup, tomorrow, will look at the most popular posts read on the blog in June and some other stats. The next day will see a quarterly summary to see how my aims to date this year are going.

This blog is currently getting around 150k+ pagviews per month and is currently getting around 5% to 10% growth each month. The statistics for the last 30 days and last six months are available below. These are automatically updated each day from Google Analytics using my PHP Class for the GA API and do not include my own visits, which are filtered out.

If you would like to advertise on my blog please click through here to my listing on Buy Sell Ads.

The problem

Here's a couple of screenshots to illustrate what I'm talking about.

The first shows the loading screen. It looks reasonably centered on the particular width the browser is but depending how wide the window is it appears more to the left or right.

The second screenshot shows the dialog after it's loaded. At this point it is centered and if you compare this screenshot with the one above you can see they're in different positions. Unless the dialog loads instantly it will appear in one position and then shift when loaded. If it does load instantly then there may be a slight flicker as it moves after it is displayed.

The solution

There's a section of code in the facebox.js file which looks like this:

$('#facebox').css({
  top:    getPageScroll()[1] + (getPageHeight() / 10),
  left:    385.5
}).show()

Change it to look like this:

$('#facebox').css({
  top:    getPageScroll()[1] + (getPageHeight() / 10),
  left:   ($(window).width() - $('#facebox').width()) / 2
}).show()

Even if you change the width of the #facebox element in the stylesheet it will still auto-center on the page because it's calculating the position based on the width of the box determined programatically.

In the example below, $url is the web address you want to get data from, and $username and $password are the login credentials.

$context = stream_context_create(array(
    'http' => array(
        'header'  => "Authorization: Basic " . base64_encode("$username:$password")
    )
));
$data = file_get_contents($url, false, $context);

If the login details were incorrect, or you were attempting to access a password protected location and didn't pass any credentials at all, you'll see an error like this:

Warning: file_get_contents(...): failed to open stream: HTTP request failed! 
HTTP/1.1 401 Authorization Required in ... on line 4

In future posts in this series I'll look at how to pass other headers along with a file_get_contents() request, for example how to send a form post. Again I would mention that it's probably better and easier to do this with CURL but if you must then it's possible with file_get_contents().

The code does not contain the necessary work to save it to the database; it just shows how to have all the elements in your page.

A working example (using FCKEditor 2.6.2) can be found here.

And here is the code behind that page:

<html>
<head>
<title>FCKEditor Change Language Example</title>
<script language="javascript">

function FCKeditor_OnComplete(editor) {
   
    var select = document.getElementById("languages");
    for(lang in editor.Language.AvailableLanguages) {
        select.options[select.options.length] =
          new Option(editor.Language.AvailableLanguages[lang], lang);
    }
    select.value = editor.Language.ActiveLanguage.Code;
  
}

function change_language(lang) {
    window.location.href = window.location.pathname + "?lang=" + lang ;
}

</script>
</head>

<body>

<select id="languages" onchange="change_language(this.value);">
</select>
<?php

require_once('fckeditor/fckeditor.php');

$oFCKeditor = new FCKeditor('html');
if(isset($_GET['lang'])) {
    $oFCKeditor->Config['AutoDetectLanguage'] = false ;
    $oFCKeditor->Config['DefaultLanguage'] = $_GET['lang'] ;
}
else {
    $oFCKeditor->Config['AutoDetectLanguage'] = true ;
    $oFCKeditor->Config['DefaultLanguage'] = 'en' ;
}
$oFCKeditor->Create();

?>

</body>
</html>

Yesterday I posted how to grey out a web page which is useful when showing a Javascript dialog box and in this post show how to do the same when using the jQuery Facebox plugin. The Facebox plugin makes dialog boxes that look like the ones in Facebook.

By default the Facebox plugin just positions the dialog box in the window and doesn't change the background at all; by making the background greyed out it gives more focus to the popup.

Example

First of all, an example to show you what I mean. Click the "Open Facebox Dialog" button below and the Facebox dialog box will open and the web page will become greyed out thanks to an opaque layer that will be made visible.

Note that if you are viewing this post in an RSS reader you'll need to click through to view it in a web browser to make the above button work.

The code

You'll need to get the Facebox plugin and then can use the following Javascript code to make the above work:

$("body").append("<div id='opaque' style='display: none;'></div>");

$(document).bind('loading.facebox', function() {
    $("#opaque").show();
});
$(document).bind('close.facebox', function() {
    $("#opaque").hide();
});
$(document).bind('afterReveal.facebox', function() {
    // this is a fix for IE6 which resets the height to 100% of the window height
    $("#opaque").height($(document).height());
});

The opaque div is appended to the document in the jQury code above (or you could alternatively code it into the HTML, but this saves having to do it) and then showing and hiding the opaque layer is bound to the facebox dialog as it loads and closes.

The afterRevel.facebox binding is a fix for IE6 which changes the height of the opaque div after the facbox div is loaded; the fix changes it back to the full document height.

CSS for #opaque

The CSS required for the #opaque layer is as follows:

#opaque {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 99;
    display: none;
    background-color: black;
    filter: alpha(opacity=40);
    opacity: 0.4;
}

You can adjust the opacity values and background-color to suit yourself to make the opaque layer more or less dark.

A simple way to achieve this is to have an opaque/transparent div which takes up 100% of the window and has a z-index so it appears above everything except for the inline popup. The example presented here works in IE 6.0+, FF 1.0+, Opera 9.0+ (I haven't tried it it in older versions), Chrome 2.0+, and Safari 3.2 + 4.0 on Windows (I haven't tested it in older versions of Safari but it may work)

The CSS for doing this is as follows:

#opaque {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
    background-color: black;
    filter: alpha(opacity=30);
    opacity: 0.3;
}
* html #opaque {
    position: absolute;
}

The extra position: absolute at the end is to make it work in Internet Explorer 6.

The opacity of the div is set with "filter: ..." for Internet Explorer and "opacity: ..." for the other browsers. The lower the number the more opaque the layer. You can experiment with different background colors and opacity levels to make the "greyed out" webpage colored how you want it.

Then all you need in the webpage itself is the following empty div:

<div id="opaque"></div>

It can go anywhere in the web page and can also be added using Javascript.

Note that if you attempt to validate the CSS against a CSS validator that it will fail the "filter: ..." part because it's an Internet Explorer thing and not part of any standard, and it may warn about the "opacity: ..." part because it's only available officially from CSS v3.

See an example of this working here and tomorrow's post will have a more comprehensive example using an actual popup window.

In the action simply add the following line of code and it will not render the view:

$this->_helper->viewRenderer->setNoRender(true);

All you need to do is to repair the table by running the following SQL command, where "mytable" is the name of the table that gave the error:

REPAIR TABLE `mytable`;

You can run this from e.g. the MySQL CLI or phpMyAdmin. From phpMyAdmin select the table, then "Operations" from the navigation tabs in the right frame above the table info; then "Repair Table" from the "Table maintenance" options at the bottom of the page.

Example form

Here's a snippet of a form for the following examples with first_name and last_name fields in a form.

<form ... >
    ....
    <input type="text" name="first_name" value="" />
    <input type="text" name="last_name" value="" />
    ....
</form>

Selecting by name

To select the "first_name" text input form element do this:

$("input[name=first_name]");

For example to display the value in an alert window do this:

alert( $("input[name=first_name]").val() );

To speed up the process so your jQuery code doesn't have to traverse the entire DOM looking for the element you could define the <form> itself with an ID (e.g. <form id="myform">) and do this:

alert( $("#myform input[name=first_name]").val() );

Deprecated @

Prior to jQuery 1.3 you could do this:

$("input[@name=first_name]")

However the @ syntax was deprecated in jQuery 1.2 and removed in jQuery 1.3, so don't use it when using jQuery 1.2 and up.

If the following example, $url is the url to connect to and $username and $password contain your authorization details:

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_USERPWD, "$username:$password");
curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
$output = curl_exec($ch);
$info = curl_getinfo($ch);
curl_close($ch);

The "curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);" line is not actually necessary but it means the HTML from the web page returned goes into the $output variable rather than echoed out to standard output.

Likewise you don't necessarily need to do "$info = curl_getinfo($ch);" but it does contain useful information about the HTTP status and so on. Doing print_r($info) from the above example on the script I used for writing and testing this post outputs the following:

Array
(
    [url] => http://www.testing.local/auth/
    [content_type] => text/html;charset=UTF-8
    [http_code] => 200
    [header_size] => 208
    [request_size] => 100
    [filetime] => -1
    [ssl_verify_result] => 0
    [redirect_count] => 0
    [total_time] => 0.022493
    [namelookup_time] => 0.000279
    [connect_time] => 0.000475
    [pretransfer_time] => 0.000487
    [size_upload] => 0
    [size_download] => 732
    [speed_download] => 32543
    [speed_upload] => 0
    [download_content_length] => 732
    [upload_content_length] => 0
    [starttransfer_time] => 0.022389
    [redirect_time] => 0
)

Getting the http_code from the information is useful so you know if it successfully connected to the page before parsing any of the return data.