With the ever increasing mobile and tablet domination the market, more and more users are visiting websites with touch devices. It is becoming more important to have both a mobile site and tablet optimisation of your desktop site. <\/p>\n
One of the main things we need to focus on is event handling. Take a mouse event example for instance; we have a drop-down menu with mouse over events to trigger the drop-down. A user with a tablet will touch your menu item and instead of seeing further options, they will instead be redirected to the page they touched. <\/p>\n
This can have a seriously negative impact on conversion and heavily increase bounce and exits. <\/p>\n
In this tutorial we will write a simple jQuery function that prevents a mouse events default action and provides listeners for touchstart and touchend events.<\/p>\n
\/\/\/\/\/\/\/\/\/<\/span>\n\/\/\/ Our Function<\/span>\n\/\/\/\/\/\/\/\/\/<\/span>\nfunction<\/span> tabletTouch(<\/span>)<\/span> {<\/span>\n \n\t\/\/\/\/\/\/\/\/\/<\/span>\n\t\/\/\/ Settings Object<\/span>\n\t\/\/\/\/\/\/\/\/\/<\/span>\n\tvar<\/span> settings =<\/span> {<\/span>\n\t\tobjHoverItem:<\/span> '.hoverItem'<\/span>,<\/span>\n\t\tobjClickItem:<\/span> '.clickItem'<\/span>\n\t}<\/span>\n \n\t\/\/\/\/\/\/\/\/\/<\/span>\n\t\/\/\/ Scan For Touch Device<\/span>\n\t\/\/\/\/\/\/\/\/\/<\/span>\n\tif<\/span> (<\/span>"ontouchstart"<\/span> in<\/span> document.documentElement<\/span>)<\/span> {<\/span>\n\t\t\/\/Set our event strings to be touch events<\/span>\n\t\tstrClick =<\/span> 'touchend'<\/span>;<\/span>\n\t\tstrOver =<\/span> 'touchstart'<\/span>;<\/span>\n\t\t\/\/A string that determines which device we are using<\/span>\n\t\tstrDevice =<\/span> 'Touch Device'<\/span>;<\/span>\n\t}<\/span>\n\telse<\/span> {<\/span>\n\t\t\/\/Set our event strings to be mouse events<\/span>\n\t\tstrClick =<\/span> 'click'<\/span>;<\/span>\n\t\tstrOver =<\/span> 'mouseover'<\/span>;<\/span>\n\t\t\/\/A string that determines which device we are using<\/span>\n\t\tstrDevice =<\/span> 'Normal Device'<\/span>;<\/span>\n\t}<\/span> \n \n\t\/\/\/\/\/\/\/\/\/<\/span>\n\t\/\/\/ Some simple test events<\/span>\n\t\/\/\/\/\/\/\/\/\/<\/span>\n \n\t\/\/Mouseover event<\/span>\n\t$(<\/span>settings.objHoverItem<\/span>)<\/span>.bind<\/span>(<\/span>strOver ,<\/span> function<\/span>(<\/span>e)<\/span>{<\/span>\n \/\/Prevent any default actions <\/span>\n e.preventDefault<\/span>(<\/span>)<\/span>;<\/span>\n\t\talert<\/span>(<\/span>'This is a "Hover" event with a '<\/span> +<\/span> strDevice)<\/span>;<\/span>\t\t\t\t\t\t\t\t\t\t\t\t \n\t}<\/span>)<\/span>;<\/span>\n \n\t\/\/Click event<\/span>\n\t$(<\/span>settings.objClickItem<\/span>)<\/span>.bind<\/span>(<\/span>strClick ,<\/span> function<\/span>(<\/span>)<\/span>{<\/span>\n\t\talert<\/span>(<\/span>'This is a "Click" event with a '<\/span> +<\/span> strDevice)<\/span>;<\/span>\t\t\t\t\t\t\t\t\t\t\t\t \n\t}<\/span>)<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n\nThis script is pretty self explanatory. We simply run a function to test the device of the user. We then define some string events for the later bind handlers to use in order to provide the desired interaction.<\/p>\n
And that is that. Very simple and very effective. Let me know your thoughts below.<\/p>\n
Happy Coding!! <\/p>\n",
"excerpt": "With the ever increasing mobile and tablet domination the market, more and more users are visiting websites with touch devices. It is becoming more important to have both a mobile site and tablet optimisation of your desktop site. One of the main things we need to focus on is event handling. Take a mouse event [...]",
"date": "2012-04-28 12:11:17",
"modified": "2012-04-28 22:05:03",
"categories": [
{
"id": 7,
"slug": "javascript",
"title": "JavaScript",
"description": "",
"parent": 4,
"post_count": 5
},
{
"id": 8,
"slug": "jquery",
"title": "jQuery",
"description": "",
"parent": 4,
"post_count": 4
},
{
"id": 4,
"slug": "tutorials",
"title": "Tutorials",
"description": "",
"parent": 0,
"post_count": 7
}
],
"tags": [],
"author": {
"id": 1,
"slug": "hcj",
"name": "Hank Chizl Jaw",
"first_name": "",
"last_name": "",
"nickname": "Hank Chizl Jaw",
"url": "",
"description": ""
},
"comments": [],
"attachments": [],
"comment_count": 0,
"comment_status": "open"
},
{
"id": 64,
"type": "post",
"slug": "define-current-page-location-with-javascript-tutorial",
"url": "http:\/\/hankchizljaw.co.uk\/tutorials\/define-current-page-location-with-javascript-tutorial\/22\/04\/2012\/",
"status": "publish",
"title": "Define Current Page Or Location With Javascript (Tutorial)",
"title_plain": "Define Current Page Or Location With Javascript (Tutorial)",
"content": "
This is a small and extremely powerful bit of JavaScript. I searched for far too long to find something this useful when all I wanted to do was reference a part of a url to find out where I was on a website.<\/p>\n
This is especially useful if you want to call a specific bit of functionality for a specific page and nowhere else (eg. a form validator on a contact page). It works in all browsers and for me it is a really solid solution that is really easy to implement.<\/p>\n
The Code<\/h2>\n\nif (window.location.href.indexOf("the-page-you-want") >= 0) {\r\n \/\/Do something funky\r\n}<\/pre><\/div><\/div>\n\nThe possibilities are endless with this sort of trick. Comments below<\/p>\n",
"excerpt": "This is a small and extremely powerful bit of JavaScript. I searched for far too long to find something this useful when all I wanted to do was reference a part of a url to find out where I was on a website. This is especially useful if you want to call a specific bit [...]",
"date": "2012-04-22 13:50:01",
"modified": "2012-04-23 11:31:14",
"categories": [
{
"id": 7,
"slug": "javascript",
"title": "JavaScript",
"description": "",
"parent": 4,
"post_count": 5
},
{
"id": 4,
"slug": "tutorials",
"title": "Tutorials",
"description": "",
"parent": 0,
"post_count": 7
}
],
"tags": [],
"author": {
"id": 1,
"slug": "hcj",
"name": "Hank Chizl Jaw",
"first_name": "",
"last_name": "",
"nickname": "Hank Chizl Jaw",
"url": "",
"description": ""
},
"comments": [],
"attachments": [],
"comment_count": 0,
"comment_status": "open"
},
{
"id": 62,
"type": "post",
"slug": "get-posts-from-category-name-wordpress-snippet",
"url": "http:\/\/hankchizljaw.co.uk\/tutorials\/get-posts-from-category-name-wordpress-snippet\/21\/04\/2012\/",
"status": "publish",
"title": "Get Posts From Category Name WordPress (Snippet)",
"title_plain": "Get Posts From Category Name WordPress (Snippet)",
"content": "
A useful trick I always use when working with WordPress is calling on posts from a named category. Although pages are really good these days, but I still prefer to use WordPress for what it is strongest at, organising posts.<\/p>\n
Most of the time you are going to want a small loop to act as a feed placed on your website. The beauty of this snippet is that I can place it anywhere and it is incredibly clean and light.<\/p>\n
Basically all you need to do is provide the category name(cat_name) and how many posts you want to show and bob’s your uncle.<\/p>\n
The Code<\/h2>\n\n<?php<\/span> query_posts(<\/span>'category_name=cat_name&showposts=5'<\/span>)<\/span>;<\/span> ?><\/span>\n <?php<\/span> while<\/span> (<\/span>have_posts(<\/span>)<\/span>)<\/span> :<\/span> the_post(<\/span>)<\/span>;<\/span> ?><\/span>\n <h3><?php<\/span> the_title(<\/span>)<\/span>;<\/span> ?><\/span><\/h3>\n <p><?php<\/span> echo<\/span> substr<\/span>(<\/span>get_the_content(<\/span>)<\/span>,<\/span> 0<\/span>,<\/span>450<\/span>)<\/span>.<\/span>"[...]"<\/span>;<\/span> ?><\/span><\/p>\n <a href="<?php<\/span> the_permalink(<\/span>)<\/span>;<\/span> ?><\/span>">Read More<\/a> \n <?php<\/span> endwhile<\/span>;<\/span> ?><\/span><\/pre><\/div><\/div>\n\nThe eagle eyed amongst you all may have noticed my alternative content call. Its a simple string trim based on characters rather than words. I personally prefer this but you can put in whatever you like and it will still work.<\/p>\n
Happy coding! <\/p>\n",
"excerpt": "A useful trick I always use when working with WordPress is calling on posts from a named category. Although pages are really good these days, but I still prefer to use WordPress for what it is strongest at, organising posts. Most of the time you are going to want a small loop to act as [...]",
"date": "2012-04-21 23:49:03",
"modified": "2012-04-23 11:34:52",
"categories": [
{
"id": 9,
"slug": "php",
"title": "PHP",
"description": "",
"parent": 4,
"post_count": 2
},
{
"id": 4,
"slug": "tutorials",
"title": "Tutorials",
"description": "",
"parent": 0,
"post_count": 7
},
{
"id": 5,
"slug": "wordpress",
"title": "Wordpress",
"description": "",
"parent": 4,
"post_count": 2
}
],
"tags": [],
"author": {
"id": 1,
"slug": "hcj",
"name": "Hank Chizl Jaw",
"first_name": "",
"last_name": "",
"nickname": "Hank Chizl Jaw",
"url": "",
"description": ""
},
"comments": [],
"attachments": [],
"comment_count": 0,
"comment_status": "open"
},
{
"id": 59,
"type": "post",
"slug": "slide-out-tab-jquery-tutorial",
"url": "http:\/\/hankchizljaw.co.uk\/tutorials\/slide-out-tab-jquery-tutorial\/21\/04\/2012\/",
"status": "publish",
"title": "Slide Out Tab jQuery Tutorial",
"title_plain": "Slide Out Tab jQuery Tutorial",
"content": "
A slide out tab is very useful for concealing content to make it optional, rather than in your face. It is very easy to achieve and can really heighten your end-users experience.<\/p>\n