Category Archives: Web Development

Mobile Website Page Load Issues – Don’t use document.ready or even ‘pageinit’, use ‘pageshow’

jQuery is a fantastic API that allows you to build websites with tasty ui components.  jQuery mobile is an extension of this techology, which is a framework for building mobile websites.

When using jquery, often you need to use the document.ready() event to find out when a page has been loaded to activate components of a page, for example a slideshow component to begin fade transitions between images.

Recently I was developing a mobile site for a client and had to implement a slideshow on product pages but I found that using document.ready() worked the first time a sub page of the site was loaded but when other pages were browsed the slideshow stopped working. This is because the way pages are loaded within mobile sites are slightly different. Pages are loaded within the websites scaffolding using a technology called ajax to prevent unnecessary data being transferred to the device. This means the document.ready() event is only called once.

I tried using the pageinit and pagecreate events after going through various help sites such as stackoverflow and the jquery forums but the slideshow would not work no matter what I tried even though these events were being called on every page.  The problem with these I believe is that they are invoked the first time a page is loaded.

In the end I tried the pageshow event.  My site is built using the jquery framework and it is a single page system and so I named the pages within the site with an id=#thepage.  I set up an event listener for the pageshow event on this id and called a load function which performed my set up code and everything works fine.

Maybe this will help someone from going bald like I nearly did trying to find a solution :-)

$('#thepage').live('pageshow',function(event)
 {
 load();
 });

Internet Explorer no Longer Top Browser

For as long as I have been checking statistics for websites, which is over 15 years now, Internet Explorer has always been the most used browser worldwide, without exception.  In fact maybe 7-8 years ago I would estimate it had well over 90% of the market share.

In recent years, several competitors have come along, Firefox & Chrome in particular.  Of course Safari has always featured because of the Apple following, however the champion of the ages has always been Internet Explorer (even with all the flak it received over the years because of its interpretations of internet standards, particularly CSS). That is until now.

The game is up.  Their rule is over. The monopoly has ended.

For the first time in my professional career there is a new king of the hill, a new champion of the ages and that is Google Chrome!!!

Following are the statistics from Google Analytics for one of my websites (www.slang.ie – Irish Slang Dictionary) from this morning, the 19th of April 2012.

Internet Explorer No Longer Top Browser

Internet Explorer No Longer Top Browser - Stats from Slang.ie

Slang.ie yields a good sample set because of it’s generic nature.  Most people find the site through search and come from various devices and locations (approximately 50% from Ireland).

As you can see from the Pie Chart above, Internet Explorer has fallen to second place behind Chrome which now has a significant 27% market share.

Internet Explorer is only marginally ahead of Safari (which is available on ipods, iphones, imacs, macbooks etc. etc.), by less than 1%

Firefox comes in next at almost 16%, which is 6% lower than Safari and this is followed by Android browsers significantly lower at 5.42%.

Compare this with the same period 3 years ago:

As you can see from the above Internet Explorer and Firefox are the biggest losers with IE down a whopping 50% from 48% of the total to 24% with Safari and Chrome gaining most significantly up almost 300% and 250% respectively. Based on this growth it may not be long before Safari is top dog???

I can’t really stress enough the significance of these changes, we finally have a competitive browser market with some really fantastic alternatives. From a consumer point of view this is very advantageous, because it means these companies will duke it out to provide the best features possible which will result in better security, more efficient downloading, faster browser experience, less bugs and so on.

Which browser do I use? To be honest, all of them. As a web developer I need to test clients websites on as many browsers as possible including mobile browsers.

My current favourite, probably due to habit at this point is firefox.  The reason I like this is down to a tool called firebug which allows me to analyse html and css quickly.  Similar tools are available on the other browsers and I do use them but I’m comfortable with firebug. My biggest gripe with Firefox is that it can eat up memory but again that’s probably down to me being lazy and having 50 tabs open at any given moment.

I do use Google Chrome quite a lot, it’s very clean, which is great for screenshots of websites and it also does not have separate input box for inputting search terms and urls, which makes a lot of sense.  My favourite feature is the incognito search because it allows me to perform searches without it knowing anything about my preferences so that I can get a true indication of a websites position on the search engine results page (SERP).

Obviously on apple devices I use Safari, I’d be lost without it on the iPhone.  I am not currently a macbook or imac owner so I can’t offer much comment on Safari’s features on desktop computers however.

Internet Explorer is by no means dead however, it is still used by a significant number of users and always will I guess.  Recently they have added developers options which are really great, you can view websites as they would look on previous versions of IE and the javascript and css/html analysis features are vastly improved on previous versions.

So which browser will win out in the end?

I guess Google have a nice way of promoting their browser across all devices so if they do produce chrome for all the devices out there they should continue with their trend of market dominance in this area, however don’t count out the others, it’s all to play for at this point.

About the author: Cian Foley is a web developer based in Waterford Ireland, having worked in Telecommunications research for 10 years, Cian brings highly technical knowledge to local businesses wishing to build an online presence. Cian currently runs the UTD Web Design Agency.

Display different website on iphone by detecting the device’s user agent browser

I am currently building a site for a client and they want a slightly different or simplified version of their site on iphone.  In order to achieve this we must detect what is called the “user agent” or the type of device accessing the website through the browsers they are using.

I am building the site in PHP so here’s what I do:

//function to detect if an iphone has accessed the webpage
function isiPhone()
{
  $user_agent = $_SERVER['HTTP_USER_AGENT']; //get the user agent

  if(preg_match('/iphone/i',$user_agent)) //find this string in the UA
  {
    return true; //return true if found
  }
  return false; //otherwise return false
}

If you want to make the function more specific to find user agents from other browsers e.g. preg_match(‘/android/i’,$user_agent) will find android devices.

Once you’ve detected the device you would then redirect the user to a different version of the site for mobile consumption.

Hope this helps :-)

incorrect-captcha-sol recaptcha

I was pulling my hair out regarding this one for ages with the php version of recaptcha

I had everything in the right place, recaptchalib.php included, public private keys set, recaptcha_get_html inside the form. It should have worked.  See code below:

<html>
<head></head>
<body>
<?php
    require_once('recaptchalib.php');              
    $publickey="6LfBHssSAAAAAPxAqPSkddCIXcFIdrl2lrNxJ8da";
    $privatekey="6LfBHssSAAAAACIz-CYPmFpm6sp81S-W-RXingPz";
    $resp = recaptcha_check_answer ($privatekey,
                                    $_SERVER["REMOTE_ADDR"],
                                    $_POST["recaptcha_challenge_field"],
                                    $_POST["recaptcha_response_field"]);
    if ($resp->is_valid)
    {
        echo "Thank you ";
    }
    else
    {
        echo "Invalid recaptcha response: " . $resp->error;            
    }
?>
<table border="0" width="400" align="center">
    <form method="POST" action="">
        <tr><td>Name: </td><td><input type="text" name="name"/></td></tr>
        <tr><td>&nbsp</td><td><?php echo recaptcha_get_html($publickey, null);?></td></tr>
        <tr><td>&nbsp</td><td><input type="submit" value="submit" name="submit"></td></tr>            
    </form>    
</table>
</body>
</html>

When I submitted the form, no matter whether the code was correct or not I kept getting back incorrect-captcha-sol in $resp->error

Turned out in the end that the problem was very simple… I had the table tags outside the form tags instead of the other way around i.e.

<table> <form> <tr><td></td></tr> </form> </table> 

instead of:

<form> <table> <tr><td></td></tr> </table> </form> 

Once I changed to the latter, it began working fine.

Hope this helps someone out there!

Add Spam Protection to a Web Form

Often when submitting to websites you will see that nasty little thing that you have to type two words into to get the form to submit.  These nasty little things may save you receiving a lot of junk requests.

The industry standard as used by Facebook and Google is a technology called recaptcha which can be added to an existing form fairly easily by your web developer.

Here are the steps involved:

  1. Register your website with recaptcha and get public private keys here https://www.google.com/recaptcha/admin/create
  2. Download the software library (here is the php recaptcha link)
  3. Within your web form include the recaptchalib.php file
  4. Echo the function recaptcha_get_html(‘your public key’) within your web form
  5. Put in checks to determine if the code is valid

Here is a simple example:

<html>
<head></head>
<body>
<?php
require_once('recaptchalib.php');
$publickey = "your public key";
$privatekey = "your private key";

$resp = recaptcha_check_answer ($privatekey,
                                    $_SERVER["REMOTE_ADDR"],
                                    $_POST["recaptcha_challenge_field"],
                                    $_POST["recaptcha_response_field"]);

if ($resp->is_valid) 
{
    echo "Success";
} 
else 
{
    echo "Failure";
}
?>
    <form method="post" action="">
<?php echo recaptcha_get_html($publickey, null); ?>
    <input type="submit" value="submit" name="submit" />
    </form>
</body>
</html>

And that’s it, just be sure to call recaptcha_get_html within your form.

 

Prestashop – No Search Results

So you’ve built your amazing prestashop and you’ve imported hundreds of products into the system but alas, when you peform a search, nothing is returned even though you know you’ve entered text present in one of your products.

This one had me stumped for a bit as I assumed that the data would be stored within the system or that prestashop would do some dynamic search on the database records. It turns out prestashop is a little more sophisticated than that and actually indexes all the products in the site to make search results quicker.

To ensure all of your products are indexed go to your backend, click on preferences and then search.

Once in there you will see how many products have been indexed. If you had the same problem as me you will see that 0 products have been indexed. This is because I imported products from a CSV. Manually inserted products are automatically indexed.

Once you are in backoffice->preferences->search you will see something like

Indexed products: 44 / 44.
-> Add missing products to index.
-> Re-build entire index.

You can click either option to re-index your products. Once you don’t have thousands of entries it should take < 1 min to do. You can also set up a cron job to perform this indexing regularly for you. Other options on this screen inclued

  • Ajax search: To automatically fill in your search box, like google
  • Minimum word length
  • Blacklisted words

There are also options here to weight your search results using various factors such as weight, tags etc.

WordPress White Screen of Death (wp-admin blank screen problem)

If anyone out there is experiencing the WordPress white screen of death i.e. when you go to your wordpress wp-admin folder all you see is a blank screen, you may have been hacked.

I had a nasty little hack where link code was being injected into the footer of every rendered page. It was difficult to find as the links that were being injected were injected by an encoded script that had infected several files (especially in my themes folder). I went through each file and deleted the script from them. In this case, if you’re not experienced with code you would be safer to do a full re-install of your blog.

The result of the clean up was that several files had spaces injected into them at the top and bottom of the page. I did a full re-install to restore all the important files in the system and I still was experiencing the blank screen. Obviously wp-config.php wasn’t part of the update and so I cleaned out a blank line on the top of this module and I could finally log back in again.

Hope this helps someone out there.

Note: If you have been hacked, change all of your passwords, database, ftp, wordpress etc. and make sure that all file permissions on your server are set up correctly, be pessimistic.

Top 5 SEO Tips for 2011

Here are my top 5 SEO tips for 2011.

  1. Get a Clear Picture: The very first thing anyone performing SEO should do is get a clear picture of the current situation. The best way to do this is by installing Google Analytics.  After running Analytics for a month you will see some patterns emerging and you can determine how much traffic is coming from search engines.
  2. Filter out seasonal trends: There’s no way you can identify gains and losses unless you figure out the seasonal trends.  You can use a tool such as google trends to do this if you do not have your own data.
  3. Find Opportunities: As with any marketing exercise you need to determine if there is a market.  You need to identify the key phrases that people will use to find your site, but there’s no point in doing this if there is huge competition.  Find the best keyphrase volume you can that has poor returns on the search results page and target that.
  4. Apply Research Effectively: Once you have the keyphrases identified using tip 3, apply the keyphrase to your site naturally in key areas such as titles, headings, links and body text. Don’t over do it. Find out how many times your competitors use it. As always it is no harm to build links to pages.
  5. Measure Results: Using analytics, measure how many hits these keyphrases are generating for you as a percentage against your search engine results position. Tweak your page slightly each month to see if it positively or negatively affects your position. Link building may also affect your position positive and should be an ongoing task.

That’s it.  The basics are simple enough, do them right and you can’t go too far wrong.  It’s that final 20% that’s the most painstaking and most difficult.  Keep at it and you will get ahead of most of your competitors within a realistic time frame.

Putting Euro Symbol in Inner Text HTML using Javascript

Had a problem today whereby I tried to insert a euro symbol into the innertext of a div using javascript.

First I tried the actual euro symbol

e.g.

document.getElementById('theelementid').innerText ="€" + value;

This results in the user agent outputting an unrecognised symbol in place of the euro

Then I tried using the html escape code for the euro symbol:

i.e.

document.getElementById('theelementid').innerText ="&euro;" + value;

But that resulted in the &euro; being displayed verbatim by the browser as the DOM automatically encodes special characters such as the ampersand

Finally, I actually escaped it using the unicode value

i.e.

document.getElementById('theelementid').innerText ="\u20AC" + value;

and it worked like a treat.

:-)

http://www.thejesusalien.com/michael-jackson-is-not-dead-hes-an-ancient-egyptian-princess/

Centering a Website – Cross Browser

Most sites these days are centred and have a fixed with be it 800, 1024 pixels wide or whatever.  If any of you have used divs and css and tried using standard centering you might have, at one stage or another, scratched your head while viewing it on different browsers.

Let’s say we want a webpage with a width of a nice round 1000 pixels. To do this we might create a new div within the body tag called page:

<body>
<div class="page">Content goes here<br/><br/><br/><br/><br/></div>
</body>

In order to centre this on IE7 and less we simply set the width in the div and in the body tag set text-align to center i.e.

body
{
 text-align: center;
}
.page
{
 width: 1000px;
 text-align: center; /*don't forget to reset alignment for child elements*/

}

On IE8+, Firefox and other browsers this is not correct behaviour however and they will left align the inner div, therefore we need to centre the inner div using the margin tag by setting it to margin: 0 auto e.g.

body
{
 text-align: center;

}
.page
{
 margin: 0 auto;
 text-align: left;
 width: 1000px;
 background-color:red;

}

By specifiying margin: 0 auto and by setting the div’s width, the browser can calculate how much distance to place between the left side of the div and the left margin of the browser window.

So there you have it, simple and effective and cross browser compatible.