WordPress Ajax Mobile Friendly Primer Tutorial
โœ‚๐Ÿƒ๐Ÿพโ€โ™€๏ธ๐Ÿƒ๐Ÿผโ€โ™‚๏ธ
๐Ÿ“–

Wordpress Ajax Mobile Friendly Primer Tutorial

Wordpress Ajax Mobile Friendly Primer Tutorial

Building on yesterdayโ€™s WordPress Ajax Recent Post Preview Primer Tutorial and continuing on with the set up of this blog for Ajax use for a laptop or desktop that recognises the onmouseover event, today we create a way whereby mobile devices can also now access the Ajax functionality, by creating logic for all the same HTML elements, but use ontouchstart and ontouchend events (rather than the non-mobile onmouseover and onmouseout event usage).

Ajax thoughts can be applied to a number of usages, as it is functionality that you may have thought to do by going to a new URL in a new tab or window, but allow the user to do on the same webpage they are on currently. The contextual nature of this can be great for a new user, but may annoy the user who โ€œknows the ropesโ€, so that functionality should have an โ€œoutโ€ which is, in our case, the difference between โ€œshort hoverโ€ and โ€œlong hoverโ€ on non-mobiles, and โ€œshort touchโ€ and โ€œlong touchโ€ on mobile devices.

So, today, with Ajax, we allow for contextual Blog Posting help when the user โ€œlong touchesโ€ some mobile links or โ€œlong hoversโ€ over some non-mobile links on the WordPress Blog webpage.

So some of the features of this Ajax code specific to mobile device issues are:

  • we use the ontouchstart event โ€ฆ rather than the onmouseover event
  • we use the ontouchend event โ€ฆ rather than the onmouseout event

The new WordPress external Javascript code is downloadable as wajaxโšซjs and its changes specific to mobile device usage can be seen via wajaxjs

Hopefully the Ajax today sets your mind to trying some Ajax for mobile or non-mobile yourself.



Previous relevant WordPress Ajax Recent Post Preview Primer Tutorial is shown below.

Wordpress Ajax Recent Post Preview Primer Tutorial

Wordpress Ajax Recent Post Preview Primer Tutorial

Yesterdayโ€™s WordPress Ajax Contextual Help Primer Tutorial set up this blog for Ajax use for a laptop or desktop that recognises the onmouseover event.

Ajax thoughts can be applied to a number of usages, as it is functionality that you may have thought to do by going to a new URL in a new tab or window, but allow the user (on a laptop or desktop (only) โ€ฆ just in our case yesterday and today โ€ฆ only because our code uses the onmouseover event to attach the functionality) to do on the same webpage they are on currently. The contextual nature of this can be great for a new user, but may annoy the user who โ€œknows the ropesโ€, so that functionality should have an โ€œoutโ€ which is, in our case, the difference between โ€œshort hoverโ€ and โ€œlong hoverโ€.

So, today, with Ajax (you know the drill), we allow a preview of a Blog Posting when the user โ€œlong hoversโ€ over a link within the Recent Posts menu.

Yesterday we forgot one feature of the Ajax code which applied yesterday and today (as all the yesterday ones also apply to todayโ€™s):

โ€ฆ and, specifically, today, we have โ€ฆ

The new WordPress external Javascript code is downloadable as wajaxโšซjs and its changes specific to Recent Post Previews can be seen via wajaxjs

Hopefully the Ajax today sets your mind to trying some Ajax yourself โ€ฆ bye for now.


Previous relevant WordPress Ajax Contextual Help Primer Tutorial is shown below.

Wordpress Ajax Contextual Help Primer Tutorial

Wordpress Ajax Contextual Help Primer Tutorial

Yesterdayโ€™s CSS Embossed Text Primer Tutorial set the mind to address an Ajax piece of functionality to help out with contextual help with features local to this WordPress blog, so that the user can use a โ€œlong hoverโ€ (and my apologies to mobile users, here, who do not have an onmouseover event here) to bring up the relevant blog post addressing the change to the WordPress blog that brought about the feature they are hovering over. That HTML element the user hovers over uses the usual HTML element title parameter for the โ€œshort hoverโ€ period, so during that period we do a โ€ โ€ฆ โ€ additional part to the title saying that if they hover longer than usual they can receive this contextual blog posting advice โ€ฆ ie. it is contextual, and it uses Ajax.

So some of the features of this Ajax code are:

The new WordPress external Javascript code is downloadable as wajaxโšซjs

To install this code into the WordPress code we use our old favourite header.php in your themeโ€™s directory via code โ€ฆ



  • <script type='text/javascript' src='//www.rjmprogramming.com.au/wordpress/wp-admin/js/wajax.js'></script>

    โ€ฆ placed in the header section between <head> and </head>

  • โ€ฆ
    function courseCookies() {
    winit(); // Ajax functionality 26/11/2014 โ€ฆ slow hover โ€ฆ not for mobile

    โ€ฆ

    โ€ฆ changed bits are bold above โ€ฆ or if there is no Course Design functionality, then you just need something like <body onload=" winit(); "> (rather than just <body>)

To give it a try, and you are on a laptop or desktop you could try hovering over the blogโ€™s title for longer than usual โ€ฆ hope it leads to ideas you may be able to use.


Previous relevant CSS Embossed Text Primer Tutorial is shown below.

CSS Embossed Text Primer Tutorial

CSS Embossed Text Primer Tutorial

Sometimes it is good to give a 3D embossed effect (with text shadowing) to some text HTML elements for the purpose of attracting the userโ€™s attention and giving that 3D effect for vibrancy.

Today weโ€™ve applied some CSS to do this in a number of combinations:

Hope you enjoy todayโ€™s tutorial.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

This entry was posted in Ajax, eLearning, Event-Driven Programming, Tutorials and tagged , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *