$( '#inputId' ).watermark( 'Required information' );

That is fine but I don’t really want to separately to each field, particularly if I have already populated the placeholder for each field.  So being lazy I have written a little bit of jQuery which takes the existing placeholder for each field and adds it as a watermark.

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.watermark.min.js"></script>

<script type="text/javascript">
   $(document).ready(function () {
       /*
        * Set watermarks on input fields; IE8 & IE9 don't support placeholders
        * This routine extracts the placeholder text from the HTML input statements and 
        *    passes it to the jQuery watermark plugin
        * so we don't have to separately maintain the watermark text
        */
         $('[placeholder]').each(function () {
           var placeholderText = $(this).attr('placeholder');
           $(this).watermark(placeholderText);
       });
   });
</script>

Obviously this requires that you have included jQuery and the jQuery watermark plugin earlier in your code as I have in the example but now every input field that I add a placeholder to
<input type="text" placeholder="Put some text in here" name="textField" />
will display that placeholder text whether the user is running the latest version of Chrome or an antique version of Internet Explorer.

I hope you find this useful.

My son got a Hudl tablet for Christmas and has been very pleased with it but in the last couple of days he hasn’t been able to connect to Google Play to update or download Apps.

I had a look and was a bit confounded, he was right; it wouldn’t connect to the Play Store or to any Google service but it was connected to the internet via Wifi and I was able to use the web browser (Google Chrome) to surf the internet.   Fortunately with a short search I found this article on Android Central

The answer is simple (at least in this case); Check the date and time on the device!  The security settings on the Google services don’t like incorrect dates.  I’m not sure why my son’s Hudl had the wrong date and time on it, it may be a hangover from a recent trip, but setting it to pick up the network time corrected the date and time instantly.   I was immediately able to access the Play store, I didn’t even have to reboot.

The Hudl Tablet

A very brief review of the Hudl.  We have been very pleased with them,  they are very good value for money and seem able to cope with anything our boys have wanted to do.  The only things I would comment on are;

• The camera is ok but it doesn’t have a flash which limits its usefulness a bit.
• It doesn’t work properly with older WEP wifi accees points.  Annoyingly it doesn’t tell you this, it just sits there trying to connect and failing.  Connecting to WPA or WPA2 is fine, but we have a second access point which is quite old and only supports WEP; the Hudl won’t connect to this.
  We have had this problem with a Windows 8 laptop too so I think it is time for us to upgrade our (rather old) access point but I do hate being forced into an upgrade.

The Sort

Because I was using CodeIgniter for this site I put the following function in helpers/MY_array_helper.php so I can use it from other parts of the site. But it would work just as well if defined locally.

function assoc_array_sort($a, $b, $key, $sequence = 'ASC')
{
/*
* Simple function for sorting between 2 values
* Designed to be called within the function called by usort or uasort
*
* $key is the key for the associative array so if we want to compare values of $array['my_key']
* $key would be set to 'my_key'
*
* Default sequence is ASC but can reverse sort by passing DESC instead
*/
if (strtoupper($sequence) == 'DESC') {
  $lower = 1;
  $higher = -1;
} else {
  $lower = -1;
  $higher = 1;
}

if ($a[$key] == $b[$key]) {
  return 0;
  } else if ($a[$key] < $b[$key]) {
    return $lower;
    } else {
      return $higher;
    }
}

Calling the Sort

The array I needed to sort is called $memberships so the call is;

uasort($memberships, 'membership_sort');

$this->load->helper('array');   // load array_helper so we can use the sort in MY_array_helper

function membership_sort($x, $y)
        {
            /*
             * Use assoc_array_sort to determine sequence
             *   but where values match call again for the next variable to be checked.
             * This should give us an array in order
             * - committee_sequence
             * - committee_name
             * - role_sequence
             * - role-name
             */
            $ret_var = assoc_array_sort($x, $y, 'committee_sequence','ASC');
            if ($ret_var == 0) {
                $ret_var = assoc_array_sort($x, $y, 'committee_name','ASC');
                if ($ret_var == 0) {
                    $ret_var = assoc_array_sort($x, $y, 'role_sequence','ASC');
                    if ($ret_var == 0) {
                        $ret_var = assoc_array_sort($x, $y, 'committee_name','ASC');
                    }
                }
            }
            return $ret_var;
        }

I am sure there are cleverer ways to do this, I would welcome feedback telling me of better ways, but hopefully this will be useful to somebody.

The problem is that if all@example.com isn’t currently redirected to a real email address anyone who sends a message to the client will get bounce message.

A message that you sent could not be delivered to one or more of its
recipients. This is a permanent error. The following address(es) failed:

  all@example.com
    (ultimately generated from info@example.com)
    No Such User Here"

A black hole e-mail address is an e-mail address which is valid (messages sent to it will not generate errors), but to which all messages sent are automatically deleted, and never stored or seen by humans. These addresses are often used as return addresses for automated e-mails.
(Wikipedia)

I have found a couple of examples of such things on the internet but they didn’t suit my hosting setup, a reseller account with Hostgator.

There are black hole email services where you send messages you don’t want but I wasn’t happy forwarding a client’s messages to another party. Great for junk mail but I wouldn’t want to send real mail to an unknown recipient.

The cron job solution

With some help from Jason C at Hostgator this is my first solution. If you don’t have CPanel it is a pretty good solution.

1. Set up a new email account for (in my case) blackhole@example.com
2. Use an FTP program (in my case Filezilla) to find the path to where the incoming emails are being stored. I found them at;mail/example.com/blackhole/new/
3. Set up a cron job to execute the following command;rm mail/example.com/blackhole/new/*I set it to run every 15 minutes (*/15) which is probably excessive but it depends on how quickly the messages build up.

Pretty simple in the end, just required a bit of thought.

The CPanel Solution

The solution above had been running ok for a few weeks when my client got an automated email;
The following users are near or have exceeded their individual mail quota:
It seems that CPanel doesn’t realise that the emails have been deleted so it doesn’t update the quota, there are nightly quota update jobs which should correct the issue but they don’t seem to work.

But Michael H at Hostgator pointed me in the direction of an another solution (Hostgator support is pretty good but as with most organisations it does depend on who you talk to).

CPanel does offer an alternative to the cron job solution, the User Level Filter, this was something I hadn’t come across before. So now I have set up user level filter to simply delete all messages coming into the blackhole mailbox. I have yet to see if this fixes the quota issue, as both are run by CPanel you would hope that it would but you never know.

1. My development machine where I do all the coding and initial testing.  Windows XP running Apache as part of  a  XAMPP setup.  All my local domain names are called something like “local.example.com”
2. My testing machine which is designed to be as similar as possible to the live setup, I can access the server from other machines on the LAN to enable testing in different browsers.  Ubuntu server running Apache.  All the domain names are called something like “staging.example.com”
3. The live webserver which is run by Hostgator in Texas.  Apache again and of course the domain names are something like “example.com”.

I use Git to manage the code and to push changes from one environment to another.

Different environments often require slightly different configurations but I prefer to put conditional statements in my configuration files so that the same file works in all environments. That way I don’t have to modify the configuration before promoting it to production. It is just too easy to accidentally push a development module to production and overwrite the correct configuration on the live site.

Configuration in PHP

It isn’t difficult to do this with a PHP module, I just use a switch statement on the value of $_SERVER[‘SERVER_NAME’] and use this to define the various configuration variables. The default value is always the production settings so if I get something wrong I don’t damage the live site.  Something like this;

switch ($_SERVER['SERVER_NAME']) {
case 'local.example.com:
$environment = 'local';
break;
case 'staging.example.com:
$environment = 'staging';
break;
default:
$environment = 'live';
break;
}

Configuration in .htaccess

Apache’s .htaccess files are a bit more complicated.  For instance Hostgator requires you to specify if you want to use PHP 5.3 rather than their default of 5.2, also I sometimes want to password protect a new site until it is ready for its proper debut.  To do this I added the following code to the .htaccess file;

#
# Use PHP 5.3 rather than default of 5.2
#
AddType application/x-httpd-php53 .php
#
# Until we are ready to go live this site is password protected
#
AuthType Basic
AuthName "New website"
AuthUserFile "/home/username/.htpasswds/public_html/passwd"
require valid-user

Defining an Apache Environment Variable in Windows

The tricky bit is getting the environment variable set up in my development and testing environments. Fortunately I found a useful post by Nerivon on StackOverFlow, it saved me a lot of messing around. I had to tweak Nerivon’s technique slightly for XAMPP but it worked perfectly.

1. First I stopped Apache
2. Then I went into SCM from the XAMPP control panel, this opens the Windows Services Management Console
3. I found the Apache2.2 service and checked out it’s properties. Specifically I wanted the “Path to executable” value."C:\xampp\apache\bin\httpd.exe" -k runservice
4. Then I opened a command window with RUN / CMD so I got a DOS prompt.
5. In that window I entered this command; "C:\xampp\apache\bin\httpd.exe" -D "DEV" -k configThat is the “path to executable” from above but an extra parameter “-D DEV” which defines my new DEV variable and with the last parameter “runservice” replaced with “config”
6. Then I restarted Apache and tested the change, it worked!

Oddly when I look at the properties in SCM they are exactly the same as they were, no sign of the extra parameter, and I can’t find it in the registry either. I don’t know how it works but it does seem to do the job.

Caveat

Well it worked ok for a few days then I made some changes to my Apache set-up and restarted it but normally, not as a service. It lost my environment variable! I was able to repeat the instructions above and restart the service again and all was well again but it looks like this isn’t a perfect solution.
If anyone has a better solution I’d like to hear it, in the meantime this will do but I will keep this blog entry handy to remind me what to do when it goes wrong again.

Defining an Apache Environment Variable in Linux

Unsurprisingly setting my DEV variable up on the Linux server was a lot simpler. Again I found help on the web, Jenny and Lih had useful article about using IfDefine for different environments.
I edited /etc/apache2/envvars and added the following line to the end of the file;
export APACHE_ARGUMENTS='-D DEV'

Update Feb 2014: In later versions of Apache the export APACHE_ARGUMENTS line already exists but has an empty value and is commented out; in this case just modify the line to match the line above.

I stopped and restarted Apache and tested the site, it worked!  But be aware that a simple reload isn’t sufficient, you o need to stop and start it to load the new argument.

All Done

Both my local environments set the DEV variable so my block of code would be ignored there whereas the live environment doesn’t set it so executes the extra code. Perfect.
I could have set up different variables for the different environments but I don’t need to at present so I have taken the simple option of just setting and checking one variable.

Setting the timezone for Apache

Fortunately it is easy to tell Apache to use a different timezone, just add the following line to your .htaccess file.

SetEnv TZ Europe/London

This works nicely to set the timezone for the webserver and the programs that run within it, including PHP. This means that the PHP date and time functions will return the date/time as UK time rather than the server time.

Getting mySQL to use the right time

The only problem is that Apache doesn’t control mySQL, in fact on a shared hosting arrangement it isn’t possible to set mySQL’s timezone. I would be changing it for all the customers on my server which would suit me fine but may not make them happy.

This means that using a mySQL function like NOW() generates a Texas timestamp rather than a London timestamp which isn’t what I want. There are a number of solutions to this problem, Richard Lord has written a good, clear post about possible solutions on his blog.

What I want is something that uses the timezone from Apache but stores the date in a mySQL format so I can use mySQL date comparisons when I retrieve the data later on. Fortunately the answer is quite straightforward; Where I would use NOW() to generate a timestamp I use the PHP function:

date('Y-m-d H:i:s')

This uses the current date from Apache (which is set to the London timezone) but converts it to the mySQL DATETIME format so that you can use mySQL’s date processing functions on the data. Of course if you had calculated some other date in your PHP code you could use the same function but pass your calculated date to the function instead of letting it use the current date/time

date('Y-m-d H:i:s',$my_date)

So the SQL query you construct in PHP might look a bit like this:

$query = 'INSERT INTO filename (
          current_time_stamp,
          my_time_stamp)
          VALUES ("' . 
          date('Y-m-d H:i:s') . '", '" .          // replaces NOW()
          date('Y-m-d H:i:s',$my_date) . '")';    // replaces calculated date

That solved my particular date/time problem, I hope it helps you too.

Making dropdown menus work on the iPhone

After a bit of trial and error and a lot of searching on the internet I discovered that the problem was that the iPhone (and I believe the iPad too) doesn’t honour the :hover  pseudoclass.  I was able to find a solution here and modified my code accordingly.

All I had to do was add onmouseover=””  to the li elements which contained ul elements for the dropdown menus. So;

<li onmouseover="">Top Level item
<ul>
<li>Dropdown item 1</li>
<li>Dropdown item 2</li>
</ul>
</li>

This solved the problem and made the iPhone display the drop down menu when the top level element was touched.  A simple solution to a subtle problem.

But why doesn’t the iPhone work like everything else?

It seems that the reason Apple have done this is because you can’t actually hover on a touchscreen, which sort of makes sense until you think of the consequences.  And if you can’t hover why do they honour the mouseover event which is surely the same thing?

One of the great things about smartphones is that they have good screens and good browsers so you can use the internet  reasonably well from a mobile device.  Unlike earlier attempts at mobile browsing, like WAP, any well designed website will work properly on a smartphone.  You can design websites to take advantage of the smartphone’s extra capabilities but the vast majority of existing websites are navigable without changes.  If only sites designed from scratch for mobile use could actually be navigated by a smartphone they wouldn’t have access to very much at all and would lose one of their main attractions.  Apple have broken this; There must be quite large sections of some sites which are invisible to iPhone users.

And I mean EVERYTHING else!

All our websites are tested very thoroughly in lots of  browsers.  It isn’t possible to test every possible combination but we test in; Internet Explorer versions 6 through 9, Chrome, Firefox, Opera and Apple’s Safari. This issue doesn’t appear in any of them, though of course we are not using a touch screen device with any these. Even on Electric Plum’s iPhone simulator the dropdown menus work fine.

We don’t have a Mac so we can’t use Apple’s IOS simulator, I would be very interested to know if this problem is replicated there. Significantly the problem does not seem to occur on Android phones, only Apple have taken this route. I think they have made the wrong choice.

But I need the facility to upload images to be integrated into the page being edited, CKfinder is a possibility, it integrates well with CKeditor, but it isn’t Open Source.  KCfinder is another possibility;  it  is Open Source but I found it difficult to do exactly what I wanted with it.  What I really wanted was to use class.upload.php which is Open Source and I know from experience does exactly what I want it to do.

The problem was that while I found some useful hints I couldn’t find clear instructions on the whole process of how to integrate class.upload.php with ckeditor.  So after some trial and error here is my solution.

Please note, class.upload.php is a file uploader, it doesn’t offer the file browser facilties that CKfinder and KCfinder provide. I have concentrated on the integration process rather than on the various parameters, both CKeditor and class.upload.php are quite well documented and once you have the upload process working it is just a matter of fine tuning until you get the result you want.

Getting CKeditor to call your custom upload script

I am calling CKeditor with javaScript from within a webpage so my calling code looks like this;

<!-- Set up CKeditor -->
<script src="ckeditor.js" type="text/javascript"></script>

<script type="text/javascript">
    function displayCkeditor(id)
    {
        if(CKEDITOR.instances[id])
        {
            CKEDITOR.remove(CKEDITOR.instances[id]);
        }

        CKEDITOR.replace(id,  {
            filebrowserUploadUrl :      "uploader.php?type=files,
            filebrowserImageUploadUrl : "uploader.php?type=images",
            filebrowserFlashUploadUrl : "uploader.php?type=flash"
        });

    }

</script>
<!-- CKeditor end -->

Creating the Custom Upload Script

And this is the script called by Ckeditor;

<?php
/**
 * uploader.php
 * Use class.upload.php to upload images etc.
 */
include('/includes/class.upload.php');          // where you have put class.upload.php

$msg = '';                                     // Will be returned empty if no problems
$callback = ($_GET['CKEditorFuncNum']);        // Tells CKeditor which function you are executing

$handle = new upload($_FILES['upload']);       // Create a new upload object 
if ($handle->uploaded) {
    $handle->image_resize         = true;
    //
    // Create a small image (thumbnail)
    //
    $handle->image_x              = 150;
    $handle->image_ratio_y        = true;

    $handle->process($_SERVER['DOCUMENT_ROOT'] . '/userfiles/');  // directory for the uploaded image
    $image_url = '/userfiles/' . $handle->file_dst_name;          // URL for the uploaded image
 
    if ($handle->processed) {
         $handle->clean();
    } else {
        $msg =  'error : ' . $handle->error;
    }
}

$output = '<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('.$callback.', "'.$image_url .'","'.$msg.'");</script>';
echo $output;
?>

The important part is the $output echoed back to CKeditor which tells it which function to link up with and the URL of the uploaded file (which will then be inserted into the text being edited). If the upload is successful the $msg field should be empty, otherwise it should contain an error message and the URL should be empty.

The code above is a working outline, obviously a bit more needs to be built in to make it a safe and useful bit of code but I have left it quite simple so that it is clear and useful for others to build on. I hope you find it useful.

Now you can use Event Tracking to track all sorts of things like ClickThrus, Downloads,  PDF reads, Media Plays and pretty much anything else you can think of.    I won’t go into how to implement Event Tracking as Google have a pretty good explanation in their Google Analytics Event Tracking Guide.  Event tracking works very well and lets you track an event in  several different ways by specifying category,  action, label and a value if you want to.

Missing pages in Webmaster Tools

Event tracking has been around for a little while now and I have used it on several newer sites but I never bothered to go back to older sites and replace the PageTracker technique with Event Tracking.  They still worked ok and still collected the information I wanted.  But one day I was checking out a site in Google Webmaster tools and I spotted that there were a lot of Crawl Errors, most of these errors were 404 errors relating to missing pages; dummy pages that I had specified in PageTracker!

Oops! It seems that Google being super clever had tried to follow my PageTracker code even though they didn’t point to real pages.  The links the PageTracker code was attached to still worked fine but Google was trying to find another page based solely on the PageTracker.

SEO Implications?

As far as I could tell this hadn’t hurt the SEO ranking of the site but I decided it was time to update it to use Event Tracking instead of PageTracker.  If Google thought there were a whole lot of 404s on the site that couldn’t be a good thing.  A few months on I haven’t notice any difference in SEO terms  or in traffic but at least I have tidied up all the Crawl Errors and avoided any potential future penalties, Google does like a tidy site.   And of course I can get more information from Event Tracking than I could from PageTracker.