Cut to the Chase of Blog Posting Mobile Events Tutorial
โœ‚๐Ÿƒ๐Ÿพโ€โ™€๏ธ๐Ÿƒ๐Ÿผโ€โ™‚๏ธ
๐Ÿ“–

Cut to the Chase of Blog Posting Mobile Events Tutorial

Cut to the Chase of Blog Posting Mobile Events Tutorial

On the way to you reading this blog posting there have been numerous intervention points for us, as overseeing programmers โ€ฆ

  • PHP server layer before any client side intervention โ€ฆ
  • PHP header.php interfaces from server side considerations into Javascript client side considerations ahead of document.body onload event โ€ฆ
  • PHP header.php interfaces into Javascript (with its DOM) client side considerations at document.body onload event โ€ฆ
  • PHP header.php interfaces into Javascript (with its DOM) client side considerations after document.body onload event

โ€ฆ and it is in that last layer we dynamically create the โ€œCut to the Chaseโ€ elements you see reading this blog posting. In this way, to change โ€œafter document.body onload eventโ€ client side aspects to โ€œCut to the Chaseโ€ is not hard, even to changing the type of event โ€ฆ

<?php echo โ€


var oncm=' oncontextmenu=';

var oncmt=' or right click or two finger gesture ';

if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {

oncm=' ontouchmove=';

oncmt=' or drag over gesture ';

}


โ€œ; ?>

โ€ฆ some โ€œCut to the Chaseโ€ element Javascript logic points at.

And so, given yesterdayโ€™s โ€œwet lettuceโ€ mobile platform response to the โ€œoncontextmenuโ€ intervention yesterday, weโ€™re changing yesterdayโ€™s โ€ฆ

<?php echo โ€


tworp.innerHTML = tworp.innerHTML.replace("<li>", "<li title='Cut to The Chase ... ... double click " + oncmt + " for blog posting image involvement'" + oncm + "' findthing=\"" + rptdtitle[ieight] + "\"; setTimeout(rcrplater,1000); nothanks=false; ' ondblclick=' findthing=\"" + rptdtitle[ieight] + "\"; setTimeout(dblrplater,1000); nothanks=false; ' onclick=' findthing=\"" + rptdtitle[ieight] + "\"; setTimeout(rplater,1000); nothanks=false; ' class='" + eight[ieight] + "'>");

// ... and ...

xpspana[ximb].innerHTML+=' <div style="display:inline-block;border:3px solid rgba(255,165,0,0.4); background-color:rgba(255,255,0,0.3); " id=cc' + zspare + '><a target=_blank style="cursor:pointer;display:inline-block;text-decoration:none; font-size:12px;" ondblclick="dblrplatern(' + String.fromCharCode(39) + xspare + String.fromCharCode(39) + ');" ' + oncm + '"rcrplatern(' + String.fromCharCode(39) + xspare + String.fromCharCode(39) + ');" href=//www.rjmprogramming.com.au/slideshow.html?title=' + encodeURIComponent(xspare) + ' " title="Cut to the Chase ... double click ' + oncmt + ' for blog posting image involvement ... to (the gist of) ' + (xspare) + '" id=tcc' + zspare + '>&#9986;</a><a target=_blank style="background: rgba(0,255,0,0.3); background: -webkit-linear-gradient(left top, rgba(0,255,0,0.3), rgba(255,255,0,0.3)); background: -o-linear-gradient(bottom right, rgba(0,255,0,0.3), rgba(255,255,0,0.3)); background: -moz-linear-gradient(bottom right, rgba(0,255,0,0.3), rgba(255,255,0,0.3)); background: linear-gradient(to bottom right, rgba(0,255,0,0.3), rgba(255,255,0,0.3)); cursor:pointer;display:inline-block;text-decoration:none;transform: scale(-1, 1); -o-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); font-size:12px;" ondblclick="dblrplatern(' + String.fromCharCode(39) + xspare + String.fromCharCode(39) + ');" ' + oncm + '"rcrplatern(' + String.fromCharCode(39) + xspare + String.fromCharCode(39) + ');" href=//www.rjmprogramming.com.au/slideshow.html?title=' + encodeURIComponent(xspare) + ' " title="Cut to the Chase ... double click ' + oncmt + ' for blog posting image involvement ... to (the gist of) ' + (xspare) + '" id=ttcc' + zspare + '>&#127939;&#127998;&#8205;&#9792;&#65039;&#127939;&#127996;&#8205;&#9794;&#65039;</a><iframe style=display:none; id=icc' + zspare + ' src=></iframe></div>';


โ€œ; ?>

โ€ฆ to improve on yesterdayโ€™s Cut to the Chase of Blog Posting New Arguments Tutorialโ€˜s offerings up at this WordPress blogโ€™s TwentyTen themeโ€™s header.php PHP code.



Previous relevant Cut to the Chase of Blog Posting New Arguments Tutorial is shown below.

Cut to the Chase of Blog Posting New Arguments Tutorial

Cut to the Chase of Blog Posting New Arguments Tutorial

Yes, yesterdayโ€™s Action Item of Blog Posting New Arguments Tutorialโ€˜s work was all about extending what our โ€œCut to the Chaseโ€ functionality is capable of, by adding to any existant โ€ฆ

  • onclick event logic โ€ฆ with โ€ฆ
  • ondblclick event showing of the blog posting tutorial image as well as the action item in a new web browser tab
  • oncontextmenu event (ie. right click or two finger gesture) showing of the blog posting tutorial image as well as the action item in a new web browser window

โ€ฆ and as well as yesterdayโ€™s slideshow.html preparatory work, we needed to change our good olโ€™ WordPress TwentyTen themed header.php (in amongst its Javascript) as below to make this idea a reality โ€ฆ

New Javascript functions โ€ฆ
<?php echo โ€


function dblrplatern(ft) {

window.open("//www.rjmprogramming.com.au/slideshow.html?dc=y&title=" + encodeURIComponent(ft), "_blank");

}



function rcrplatern(ft) {

window.open("//www.rjmprogramming.com.au/slideshow.html?rc=y&title=" + encodeURIComponent(ft), "_blank");

}




function dblrplater() {

if (findthing != "") {

window.open("//www.rjmprogramming.com.au/slideshow.html?dc=y&title=" + encodeURIComponent(findthing), "_blank");

findthing="";

}

nothanks=false;

}




function rcrplater() {

if (findthing != "") {

window.open("//www.rjmprogramming.com.au/slideshow.html?rc=y&title=" + encodeURIComponent(findthing), "_blank");

findthing="";

}

nothanks=false;

}


โ€œ; ?>
โ€ฆ and changes to any โ€œCut to the Chaseโ€ linking elements โ€ฆ for example โ€ฆ
<?php echo โ€


tworp.innerHTML = tworp.innerHTML.replace("<li>", "<li title='Cut to The Chase ... ... double click or right click or two finger gesture for blog posting image involvement' oncontextmenu=' findthing=\"" + rptdtitle[ieight] + "\"; setTimeout(rcrplater,1000); nothanks=false; ' ondblclick=' findthing=\"" + rptdtitle[ieight] + "\"; setTimeout(dblrplater,1000); nothanks=false; ' onclick=' findthing=\"" + rptdtitle[ieight] + "\"; setTimeout(rplater,1000); nothanks=false; ' class='" + eight[ieight] + "'>");

// ... and ...

xpspana[ximb].innerHTML+=' <div style="display:inline-block;border:3px solid rgba(255,165,0,0.4); background-color:rgba(255,255,0,0.3); " id=cc' + zspare + '><a target=_blank style="cursor:pointer;display:inline-block;text-decoration:none; font-size:12px;" ondblclick="dblrplatern(' + String.fromCharCode(39) + xspare + String.fromCharCode(39) + ');" oncontextmenu="rcrplatern(' + String.fromCharCode(39) + xspare + String.fromCharCode(39) + ');" href=//www.rjmprogramming.com.au/slideshow.html?title=' + encodeURIComponent(xspare) + ' " title="Cut to the Chase ... double click or right click or two finger gesture for blog posting image involvement ... to (the gist of) ' + (xspare) + '" id=tcc' + zspare + '>&#9986;</a><a target=_blank style="background: rgba(0,255,0,0.3); background: -webkit-linear-gradient(left top, rgba(0,255,0,0.3), rgba(255,255,0,0.3)); background: -o-linear-gradient(bottom right, rgba(0,255,0,0.3), rgba(255,255,0,0.3)); background: -moz-linear-gradient(bottom right, rgba(0,255,0,0.3), rgba(255,255,0,0.3)); background: linear-gradient(to bottom right, rgba(0,255,0,0.3), rgba(255,255,0,0.3)); cursor:pointer;display:inline-block;text-decoration:none;transform: scale(-1, 1); -o-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); font-size:12px;" ondblclick="dblrplatern(' + String.fromCharCode(39) + xspare + String.fromCharCode(39) + ');" oncontextmenu="rcrplatern(' + String.fromCharCode(39) + xspare + String.fromCharCode(39) + ');" href=//www.rjmprogramming.com.au/slideshow.html?title=' + encodeURIComponent(xspare) + ' " title="Cut to the Chase ... double click or right click or two finger gesture for blog posting image involvement ... to (the gist of) ' + (xspare) + '" id=ttcc' + zspare + '>&#127939;&#127998;&#8205;&#9792;&#65039;&#127939;&#127996;&#8205;&#9794;&#65039;</a><iframe style=display:none; id=icc' + zspare + ' src=></iframe></div>';


โ€œ; ?>


Previous relevant Action Item of Blog Posting New Arguments Tutorial is shown below.

Action Item of Blog Posting New Arguments Tutorial

Action Item of Blog Posting New Arguments Tutorial

Around here, with our WordPress blog postings, we indulge the concepts of โ€ฆ

  • the blog posting title
  • the blog posting text content
  • the blog posting tutorial image
  • the blog posting action item

โ€ฆ that last one sometimes being the same as the penultimate โ€œtutorial imageโ€ concept, but more usually some web application URL or URL to some other place of interest.

And we have an HTML and Javascript web application that treats that โ€œaction itemโ€ as the centre of attention, rather than the usual โ€œblog postingโ€ focus. It is called slideshow.html and we have changed it today for some purposes weโ€™ll go further into with tomorrowโ€™s blog posting. Weโ€™ve added Javascript logic to accept URL ? (GET) arguments โ€ฆ

  • ?dc=
  • ?rc=

โ€ฆ in readiness to add functionality improvements around here.

Perhaps you can see ahead to tomorrow examining thechanged slideshowโšซhtml โ€œaction itemโ€ as the centre of attention web application?

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 eLearning, Event-Driven Programming, iOS, Tutorials and tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

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