{"id":60160,"date":"2023-07-19T03:01:09","date_gmt":"2023-07-18T17:01:09","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=60160"},"modified":"2023-07-18T20:31:01","modified_gmt":"2023-07-18T10:31:01","slug":"wordpress-list-style-user-emoji-image-list-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-list-style-user-emoji-image-list-tutorial\/","title":{"rendered":"WordPress List Style User Emoji Image List Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/slideshow.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"WordPress List Style User Emoji Image List Tutorial\" src=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/list_emoji_image_list.jpg\" title=\"WordPress List Style User Emoji Image List Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">WordPress List Style User Emoji Image List Tutorial<\/p><\/div>\n<p>When in yesterday&#8217;s <a title='WordPress List Style User CSS Middle Pseudo Class Tutorial' href='#wplsucssmpct'>WordPress List Style User CSS Middle Pseudo Class Tutorial<\/a> we said &#8230;<\/p>\n<blockquote><p>\n<font size=1>(though, come to think of it, there may be another layer of thought before that &#8230; we&#8217;ll see)<\/font>\n<\/p><\/blockquote>\n<p>Well, we saw, and did want to allow for four more feature extensions &#8230;<\/p>\n<ol>\n<li>allow for a comma separated list (that can correspond, optionally, with a comma separated pseudo-class list) &#8230; of &#8230;<\/li>\n<li>a mix of &#8220;list style&#8221; images and\/or emojis &#8230; all &#8230;<\/li>\n<li>rememberable and recallable on a web browser tab via window.<a target=_blank title='Window object sessionStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_sessionstorage.asp'>sessionStorage<\/a> &#8230; or &#8230;<\/li>\n<li>rememberable and recallable on a web browser at any time in any tab via window.<a target=_blank title='Window object localStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp'>localStorage<\/a><\/li>\n<\/ol>\n<p> &#8230; as required.<\/p>\n<p>Here are some examples of use (where adding one + to end of URL uses window.sessionStorage and two ++ to end of URL uses window.localStorage) &#8230;<\/p>\n<ul>\n<li><a id=myaaa contenteditable=\"true\" onmouseover=\"if (this.innerHTML.indexOf('http') == -1) { this.innerHTML+=' ' + 'https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-list-style-image-primer-tutorial\/'.split('#')[0].split('?')[0] + '?listimage=01f371,01f358,01f359,01f35a,01f35b,01f35c,01f35d,01f360,01f362,01f363,01f364,01f365,01f361,01F366,01F367,01F368,01F369,01F36A,01F382,01F370,1F34E,1F350,1F352,1F34A,1F353,1F382,1F368,1F952,1F9C0,1F96A,1F36D,1F967,1F32D,1F9C1,1F349,1F342,128027,1F347,1F34A,1F96D,1F95D,1F955';  }\" style=cursor:pointer;text-decoration:underline; onclick=\"if (this.innerHTML.indexOf(' http') != -1) {   window.open('http' + this.innerHTML.split(' http')[1] + '#myaone','_blank','top=60,left=60,width=600,height=600');  } else { window.open('https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-list-style-image-primer-tutorial\/'.split('#')[0].split('?')[0] + '?listimage=01f371,01f358,01f359,01f35a,01f35b,01f35c,01f35d,01f360,01f362,01f363,01f364,01f365,01f361,01F366,01F367,01F368,01F369,01F36A,01F382,01F370,1F34E,1F350,1F352,1F34A,1F353,1F382,1F368,1F952,1F9C0,1F96A,1F36D,1F967,1F32D,1F9C1,1F349,1F342,128027,1F347,1F34A,1F96D,1F95D,1F955#myaaa','_blank','top=60,left=60,width=600,height=600'); }\">&#8220;Feeling Hungry&#8221;<\/a><\/li>\n<li><a contenteditable=\"true\" onmouseover=\"if (this.innerHTML.indexOf('http') == -1) { this.innerHTML+=' ' + 'https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-list-style-image-primer-tutorial\/'.split('#')[0].split('?')[0] + '?listwimage=30&#038;listimage=31.20e3,32.20e3,33.20e3,34.20e3,35.20e3,36.20e3,37.20e3,38.20e3,39.20e3,\/camel.png';  }\" style=cursor:pointer;text-decoration:underline; onclick=\"if (this.innerHTML.indexOf(' http') != -1) {   window.open('http' + this.innerHTML.split(' http')[1] + '#myaone','_blank','top=60,left=60,width=600,height=600');  } else { window.open('https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-list-style-image-primer-tutorial\/'.split('#')[0].split('?')[0] + '?listwimage=30&#038;listimage=31.20e3,32.20e3,33.20e3,34.20e3,35.20e3,36.20e3,37.20e3,38.20e3,39.20e3,\/camel.png#myaaa','_blank','top=60,left=60,width=600,height=600'); }\">&#8220;Number Emojis and Image&#8221;<\/a><\/li>\n<\/ul>\n<p> &#8230; using &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\nfunction locsess(inldef) {<br \/>\n  var outldef=inldef;<br \/>\n  if (inldef == '') {   \/\/ listimage<br \/>\n    if (decodeURIComponent(('' + window.localStorage.getItem('listimage')).replace(\/^undefined\/g,'').replace(\/^null\/g,'')) != '') {<br \/>\n      outldef=decodeURIComponent(window.localStorage.getItem('listimage')).replace(\/\\%2C\/g,',');<br \/>\n      if (document.URL.indexOf('listimage=') == -1) {<br \/>\n        if (document.URL.indexOf('?') == -1) {<br \/>\n          location.href=document.URL.split('#')[0] + '?' + outldef.substring(1);<br \/>\n          return inldef;<br \/>\n        } else {<br \/>\n          location.href=document.URL.split('#')[0] + '' + outldef;<br \/>\n          return inldef;<br \/>\n        }<br \/>\n      }<br \/>\n    } else if (decodeURIComponent(('' + window.sessionStorage.getItem('listimage')).replace(\/^undefined\/g,'').replace(\/^null\/g,'')) != '') {<br \/>\n      outldef=decodeURIComponent(window.sessionStorage.getItem('listimage')).replace(\/\\%2C\/g,',');;<br \/>\n      if (document.URL.indexOf('listimage=') == -1) {<br \/>\n        if (document.URL.indexOf('?') == -1) {<br \/>\n          location.href=document.URL.split('#')[0] + '?' + outldef.substring(1);<br \/>\n          return inldef;<br \/>\n        } else {<br \/>\n          location.href=document.URL.split('#')[0] + '' + outldef;<br \/>\n          return inldef;<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  return outldef;<br \/>\n}<br \/>\n<br \/>\nfunction list_style_image_check() {<br \/>\n  var hbit=(\" height: \" + (location.search.split('listhimage=')[1] ? ('' + decodeURIComponent(location.search.split('listhimage=')[1].split('&')[0])) : (location.search.split('listwimage=')[1] ? ('' + Math.round(eval(('' + decodeURIComponent(location.search.split('listwimage=')[1].split('&')[0]))) * 5.0 \/ 7.0)) : \" 25\")) + \"px; \").replace(' height:  25px; ','');<br \/>\n  var wbit=(\" width: \" + (location.search.split('listwimage=')[1] ? ('' + decodeURIComponent(location.search.split('listwimage=')[1].split('&')[0])) : ' 35') + \"px; \").replace(' width:  35px; ','');<br \/>\n  var mlit=(\" margin-left: \" + (location.search.split('listwimage=')[1] ? ('-' + decodeURIComponent(location.search.split('listwimage=')[1].split('&')[0])) : ' -35') + \"px; \").replace(' margin-left:  -35px; ','');<br \/>\n  var listimage='', lsbit='&listimage=', mlbit=('' + wbit + hbit.replace('height','font-size') + hbit + mlit).replace(' width:',' display:inline-block; width:');<br \/>\n<br \/> <br \/>\n  if ((document.URL.split('#')[0] + '&').indexOf('listimage=--&') != -1 || (document.URL.split('#')[0] + '&').indexOf('listimage=' + encodeURIComponent('--') + '&') != -1) {<br \/>\n    if (decodeURIComponent(('' + window.localStorage.getItem('listimage')).replace(\/^undefined\/g,'').replace(\/^null\/g,'')) != '') {<br \/>\n      window.localStorage.removeItem('listimage');<br \/>\n    }<br \/>\n    if (decodeURIComponent(('' + window.sessionStorage.getItem('listimage')).replace(\/^undefined\/g,'').replace(\/^null\/g,'')) != '') {<br \/>\n      window.sessionStorage.removeItem('listimage');<br \/>\n    }<br \/>\n  } else if ((document.URL.split('#')[0] + '&').indexOf('listimage=-&') != -1 || (document.URL.split('#')[0] + '&').indexOf('listimage=' + encodeURIComponent('-') + '&') != -1) {<br \/>\n    if (decodeURIComponent(('' + window.sessionStorage.getItem('listimage')).replace(\/^undefined\/g,'').replace(\/^null\/g,'')) != '') {<br \/>\n      window.sessionStorage.removeItem('listimage');<br \/>\n    }<br \/>\n  }<br \/>\n  listimage=location.search.split('listimage=')[1] ? decodeURIComponent(location.search.split('listimage=')[1].split('&')[0]).replace(\/\\+\/g,' ') : locsess(\"\");<br \/>\n  if (listimage.replace(\/\\-\/g,'') != '' && (listimage + '@#$').indexOf('  @#$') != -1) {<br \/>\n    if (decodeURIComponent(('' + window.localStorage.getItem('listimage')).replace(\/^undefined\/g,'').replace(\/^null\/g,'')) != '') {<br \/>\n      window.localStorage.removeItem('listimage');<br \/>\n    }<br \/>\n    lsbit+=encodeURIComponent(listimage.trim());<br \/>\n    if ((location.search.split('midpseudoclass=')[1] ? ('' + decodeURIComponent(location.search.split('midpseudoclass=')[1].split('&')[0])) : \":\") != \":\") {<br \/>\n      lsbit+='&midpseudoclass=' + encodeURIComponent((location.search.split('midpseudoclass=')[1] ? ('' + decodeURIComponent(location.search.split('midpseudoclass=')[1].split('&')[0])) : \":\"));<br \/>\n    }<br \/>\n    if ((location.search.split('listwimage=')[1] ? ('' + decodeURIComponent(location.search.split('listwimage=')[1].split('&')[0])) : '') != '') {<br \/>\n      lsbit+='&listwimage=' + encodeURIComponent((location.search.split('listwimage=')[1] ? ('' + decodeURIComponent(location.search.split('listwimage=')[1].split('&')[0]))  : ''));<br \/>\n    }<br \/>\n    if ((location.search.split('listhimage=')[1] ? ('' + decodeURIComponent(location.search.split('listhimage=')[1].split('&')[0])) : '') != '') {<br \/>\n      lsbit+='&listhimage=' + encodeURIComponent((location.search.split('listhimage=')[1] ? ('' + decodeURIComponent(location.search.split('listhimage=')[1].split('&')[0])) : ''));<br \/>\n    }<br \/>\n    window.localStorage.setItem('listimage', lsbit);<br \/>\n  } else if (listimage.replace(\/\\-\/g,'') != '' && (listimage + '@#$').indexOf(' @#$') != -1) {<br \/>\n    if (decodeURIComponent(('' + window.sessionStorage.getItem('listimage')).replace(\/^undefined\/g,'').replace(\/^null\/g,'')) != '') {<br \/>\n      window.sessionStorage.removeItem('listimage');<br \/>\n    }<br \/>\n    lsbit+=encodeURIComponent(listimage.trim());<br \/>\n    if ((location.search.split('midpseudoclass=')[1] ? ('' + decodeURIComponent(location.search.split('midpseudoclass=')[1].split('&')[0])) : \":\") != \":\") {<br \/>\n      lsbit+='&midpseudoclass=' + encodeURIComponent((location.search.split('midpseudoclass=')[1] ? ('' + decodeURIComponent(location.search.split('midpseudoclass=')[1].split('&')[0])) : \":\"));<br \/>\n    }<br \/>\n    if ((location.search.split('listwimage=')[1] ? ('' + decodeURIComponent(location.search.split('listwimage=')[1].split('&')[0])) : '') != '') {<br \/>\n      lsbit+='&listwimage=' + encodeURIComponent((location.search.split('listwimage=')[1] ? ('' + decodeURIComponent(location.search.split('listwimage=')[1].split('&')[0]))  : ''));<br \/>\n    }<br \/>\n    if ((location.search.split('listhimage=')[1] ? ('' + decodeURIComponent(location.search.split('listhimage=')[1].split('&')[0])) : '') != '') {<br \/>\n      lsbit+='&listhimage=' + encodeURIComponent((location.search.split('listhimage=')[1] ? ('' + decodeURIComponent(location.search.split('listhimage=')[1].split('&')[0]))  : ''));<br \/>\n    }<br \/>\n    window.sessionStorage.setItem('listimage', lsbit);<br \/>\n  }<br \/>\n  if (listimage.replace(\/\\-\/g,'') != '') {<br \/>\n     var contbit=\" content:''; \";<br \/>\n     var dbistuff='';<br \/>\n     var pclass=(location.search.split('midpseudoclass=')[1] ? ('' + decodeURIComponent(location.search.split('midpseudoclass=')[1].split('&')[0])) : \"\");<br \/>\n     var alistimage=listimage.split(',');<br \/>\n     var blistimage=listimage.split('.');<br \/>\n     var iblistimage=0, jlistimage=0;<br \/>\n     var apclass=pclass.split(',');<br \/>\n    <br \/> <br \/>\n     if (eval('' + alistimage.length) &gt; 1) {<br \/>\n     if (apclass[0].trim() == '') {<br \/>\n        if (alistimage[0].toLowerCase().trim().replace(\/\\.\/g,'').replace(\/0\/g,'').replace(\/1\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'').replace(\/a\/g,'').replace(\/b\/g,'').replace(\/c\/g,'').replace(\/d\/g,'').replace(\/e\/g,'').replace(\/f\/g,'') != '') {<br \/>\n        dbistuff+=\"&lt;style&gt;  ul.noclass li:\" + apclass[0] + \":before { content: ''; display: inline-block; height: \" + (location.search.split('listhimage=')[1] ? ('' + decodeURIComponent(location.search.split('listhimage=')[1].split('&')[0])) : (location.search.split('listwimage=')[1] ? ('' + Math.round(eval(('' + decodeURIComponent(location.search.split('listwimage=')[1].split('&')[0]))) * 5.0 \/ 7.0)) : \"25\")) + \"px; width: \" + (location.search.split('listwimage=')[1] ? ('' + decodeURIComponent(location.search.split('listwimage=')[1].split('&')[0])) : \"35\") + \"px; background-image: url('\" + alistimage[jlistimage] + \"'); background-size: contain; background-repeat: no-repeat; margin-left: -\" + (location.search.split('listwimage=')[1] ? (':' + decodeURIComponent(location.search.split('listwimage=')[1].split('&')[0])) : \"35\") + \"px; }   &lt;\/style&gt;\";<br \/>\n        } else {<br \/>\n       blistimage=alistimage[0].split('.');<br \/>\n       \/\/  content:'\\000031\\0020e3';<br \/>\n       contbit=\" content:''; \";<br \/>\n       contbit=\" content:'\\\\\" + ('000000' + blistimage[0]).slice(-6) + \"'; \";<br \/>\n       for (iblistimage=1; iblistimage&lt;blistimage.length; iblistimage++) {<br \/>\n         contbit=contbit.replace(\"';\", \"\\\\\" + ('000000' + blistimage[iblistimage]).slice(-6) + \"';\");<br \/>\n       }<br \/>\n       dbistuff+=\"&lt;style&gt;  ul.noclass li:\" + apclass[0] + \":before { \" + contbit + mlbit + \" }   &lt;\/style&gt;\";<br \/>\n        }<br \/>\n        apclass[0]='nth-child(1)';<br \/>\n     }<br \/>\n     for (jlistimage=0; jlistimage&lt;alistimage.length; jlistimage++) {<br \/>\n     if (apclass.length &lt;= eval(0 + jlistimage)) {<br \/>\n       apclass.push(apclass[0].replace('(1)', '(' + eval(1 + jlistimage) + ')'));<br \/>\n     }<br \/>\n     if (alistimage[jlistimage].toLowerCase().trim().replace(\/\\.\/g,'').replace(\/0\/g,'').replace(\/1\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'').replace(\/a\/g,'').replace(\/b\/g,'').replace(\/c\/g,'').replace(\/d\/g,'').replace(\/e\/g,'').replace(\/f\/g,'') != '') {<br \/>\n       dbistuff+=\"&lt;style&gt;  ul.noclass li:\" + apclass[jlistimage] + \":before { content: ''; display: inline-block; height: \" + (location.search.split('listhimage=')[1] ? ('' + decodeURIComponent(location.search.split('listhimage=')[1].split('&')[0])) : (location.search.split('listwimage=')[1] ? ('' + Math.round(eval(('' + decodeURIComponent(location.search.split('listwimage=')[1].split('&')[0]))) * 5.0 \/ 7.0)) : \"25\")) + \"px; width: \" + (location.search.split('listwimage=')[1] ? ('' + decodeURIComponent(location.search.split('listwimage=')[1].split('&')[0])) : \"35\") + \"px; background-image: url('\" + alistimage[jlistimage] + \"'); background-size: contain; background-repeat: no-repeat; margin-left: -\" + (location.search.split('listwimage=')[1] ? (':' + decodeURIComponent(location.search.split('listwimage=')[1].split('&')[0])) : \"35\") + \"px; }   &lt;\/style&gt;\";<br \/>\n     } else {<br \/>\n       blistimage=alistimage[jlistimage].split('.');<br \/>\n       \/\/  content:'\\000031\\0020e3';<br \/>\n       contbit=\" content:''; \";<br \/>\n       contbit=\" content:'\\\\\" + ('000000' + blistimage[0]).slice(-6) + \"'; \";<br \/>\n       for (iblistimage=1; iblistimage&lt;blistimage.length; iblistimage++) {<br \/>\n         contbit=contbit.replace(\"';\", \"\\\\\" + ('000000' + blistimage[iblistimage]).slice(-6) + \"';\");<br \/>\n       }<br \/>\n       dbistuff+=\"&lt;style&gt;  ul.noclass li:\" + apclass[jlistimage] + \":before { \" + contbit + mlbit + \" }   &lt;\/style&gt;\";<br \/>\n     }<br \/>\n     }<br \/>\n     document.body.innerHTML+=dbistuff;<br \/>\n     <br \/>\n     } else if (listimage.toLowerCase().trim().replace(\/\\.\/g,'').replace(\/0\/g,'').replace(\/1\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'').replace(\/a\/g,'').replace(\/b\/g,'').replace(\/c\/g,'').replace(\/d\/g,'').replace(\/e\/g,'').replace(\/f\/g,'') != '') {<br \/>\n       document.body.innerHTML+=\"&lt;style&gt;  ul.noclass li\" + (location.search.split('midpseudoclass=')[1] ? (':' + decodeURIComponent(location.search.split('midpseudoclass=')[1].split('&')[0])) : \":\") + \":before { content: ''; display: inline-block; height: \" + (location.search.split('listhimage=')[1] ? ('' + decodeURIComponent(location.search.split('listhimage=')[1].split('&')[0])) : (location.search.split('listwimage=')[1] ? ('' + Math.round(eval(('' + decodeURIComponent(location.search.split('listwimage=')[1].split('&')[0]))) * 5.0 \/ 7.0)) : \"25\")) + \"px; width: \" + (location.search.split('listwimage=')[1] ? ('' + decodeURIComponent(location.search.split('listwimage=')[1].split('&')[0])) : \"35\") + \"px; background-image: url('\" + listimage + \"'); background-size: contain; background-repeat: no-repeat; margin-left: -\" + (location.search.split('listwimage=')[1] ? (':' + decodeURIComponent(location.search.split('listwimage=')[1].split('&')[0])) : \"35\") + \"px; }   &lt;\/style&gt;\";<br \/>\n     } else {<br \/>\n       \/\/  content:'\\000031\\0020e3';<br \/>\n       contbit=\" content:'\\\\\" + ('000000' + blistimage[0]).slice(-6) + \"'; \";<br \/>\n       for (iblistimage=1; iblistimage&lt;blistimage.length; iblistimage++) {<br \/>\n         contbit=contbit.replace(\"';\", \"\\\\\" + ('000000' + blistimage[iblistimage]).slice(-6) + \"';\");<br \/>\n       }<br \/>\n       document.body.innerHTML+=\"&lt;style&gt;  ul.noclass li\" + (location.search.split('midpseudoclass=')[1] ? (':' + decodeURIComponent(location.search.split('midpseudoclass=')[1].split('&')[0])) : \":\") + \":before { \" + contbit + \" }   &lt;\/style&gt;\";<br \/>\n     }<br \/>\n  } else if ((location.search.split('midpseudoclass=')[1] ? (':' + decodeURIComponent(location.search.split('midpseudoclass=')[1].split('&')[0])) : \":\") != \":\") {<br \/>\n     var stylestuff='', sparts=document.head.innerHTML.split('ul.noclass li::before {');<br \/>\n     if (eval('' + sparts.length) &gt; 1) {<br \/>\n       for (var isparts=1; isparts&lt;sparts.length; isparts++) {<br \/>\n         stylestuff+=' ' + sparts[isparts].split('}')[0] + ' ';<br \/>\n       }<br \/>\n     }<br \/>\n     if (stylestuff != '') {<br \/>\n       document.body.innerHTML+=\"&lt;style&gt;  ul.noclass li\" + (location.search.split('midpseudoclass=')[1] ? (':' + decodeURIComponent(location.search.split('midpseudoclass=')[1].split('&')[0])) : \":\") + \":before { \" + stylestuff + \" } &lt;\/style&gt;\";<br \/>\n     }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-list-style-user-emoji-image-list-tutorial\/'>WordPress List Style User Emoji Image List Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wplsucssmpct'>Previous relevant <a target=_blank title='WordPress List Style User CSS Middle Pseudo Class Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-list-style-user-css-middle-pseudo-class-tutorial\/'>WordPress List Style User CSS Middle Pseudo Class Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/slideshow.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"WordPress List Style User CSS Middle Pseudo Class Tutorial\" src=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/mid_pseudo_class.jpg\" title=\"WordPress List Style User CSS Middle Pseudo Class Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">WordPress List Style User CSS Middle Pseudo Class Tutorial<\/p><\/div>\n<p>Sorry, but before moving on from yesterday&#8217;s <a title='WordPress List Style Image Primer Tutorial' href='#wplsipt'>WordPress List Style Image Primer Tutorial<\/a> &#8220;ul li&#8221; list style image work, we need to add another hard to remember GET argument arrangement, because between the <font color=blue>::<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;  ul li<font color=blue>::<\/font>before { content: ''; display: inline-block; height: 25px; width: 35px; background-image: url('\" + listimage + \"'); background-size: contain; background-repeat: no-repeat; margin-left: -35px; }   &lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; colons via &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\nfunction list_style_image_check() {<br \/>\n  var listimage=location.search.split('listimage=')[1] ? decodeURIComponent(location.search.split('listimage=')[1].split('&')[0]) : \"\";<br \/>\n  if (listimage != '') {<br \/>\n     document.body.innerHTML+=\"&lt;style&gt;  ul.noclass li<font color=blue>\" + (location.search.split('midpseudoclass=')[1] ? (':' + decodeURIComponent(location.search.split('midpseudoclass=')[1].split('&')[0])) : \":\") + \"<\/font>:before { content: ''; display: inline-block; height: 25px; width: 35px; background-image: url('\" + listimage + \"'); background-size: contain; background-repeat: no-repeat; margin-left: -35px; }   &lt;\/style&gt;\";<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; in the CSS styling, the user can now optionally insert, via &#8220;&#038;midpseudoclass=[middle pseudo class eg. first-child]&#8221; or &#8220;?midpseudoclass=[middle pseudo class eg. first-child]&#8221; a CSS &#8220;ul li&#8221; styling additional consideration.   For this URL &#8220;appendage&#8221; you might consider <a target=_blank href='https:\/\/www.w3.org\/TR\/selectors\/#pseudo-classes'>pseudo-class<\/a> values such as &#8230;<\/p>\n<ul>\n<li>first-child (eg. <a onmouseover=\"if (this.innerHTML.indexOf('http') == -1) { this.innerHTML+=' ' + document.URL.split('#')[0].split('?')[0] + '?listimage=\/camel.png&#038;midpseudoclass=first-child';  }\" id=myaone style=cursor:pointer;text-decoration:underline; onclick=\"window.open(document.URL.split('#')[0].split('?')[0] + '?listimage=\/camel.png&#038;midpseudoclass=first-child#myaone','_blank','top=60,left=60,width=600,height=600');\">&#8220;First Camel&#8221;<\/a>)<\/li>\n<li>last-child (eg. <a onmouseover=\"if (this.innerHTML.indexOf('http') == -1) { this.innerHTML+=' ' + document.URL.split('#')[0].split('?')[0] + '?listimage=\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/0\/07\/Emperor_Penguin_Manchot_empereur.jpg\/175px-Emperor_Penguin_Manchot_empereur.jpg&#038;midpseudoclass=last-child';  }\" style=cursor:pointer;text-decoration:underline; onclick=\"window.open(document.URL.split('#')[0].split('?')[0] + '?listimage=\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/0\/07\/Emperor_Penguin_Manchot_empereur.jpg\/175px-Emperor_Penguin_Manchot_empereur.jpg&#038;midpseudoclass=last-child#myaone','_blank','top=60,left=60,width=600,height=600');\">&#8220;Last Penguin&#8221;<\/a> (thanks to <a target=_blank title='Penguin information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Penguin'>Wikipedia<\/a>))<\/li>\n<li>only-child<\/li>\n<li>nth-child(n) (eg. <a contenteditable=\"true\" onmouseover=\"if (this.innerHTML.indexOf('http') == -1) { this.innerHTML+=' ' + document.URL.split('#')[0].split('?')[0] + '?listimage=\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/3\/35\/Olive_baboon_Ngorongoro.jpg\/220px-Olive_baboon_Ngorongoro.jpg&#038;midpseudoclass=nth-child(4)';  }\" style=cursor:pointer;text-decoration:underline; onclick=\"if (this.innerHTML.indexOf(' http') != -1) {   window.open('http' + this.innerHTML.split(' http')[1] + '#myaone','_blank','top=60,left=60,width=600,height=600');  } else { window.open(document.URL.split('#')[0].split('?')[0] + '?listimage=\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/3\/35\/Olive_baboon_Ngorongoro.jpg\/220px-Olive_baboon_Ngorongoro.jpg&#038;midpseudoclass=nth-child(4)#myaone','_blank','top=60,left=60,width=600,height=600'); }\">&#8220;Fourth Baboon&#8221;<\/a> (thanks to <a target=_blank title='Baboon information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Baboon'>Wikipedia<\/a>))<\/li>\n<li>first-of-type<\/li>\n<li>last-of-type<\/li>\n<li>only-of-type<\/li>\n<li>nth-of-type(n)<\/li>\n<\/ul>\n<p>And later, we make all this more accessible for user usage <font size=1>(though, come to think of it, there may be another layer of thought before that &#8230; we&#8217;ll see)<\/font>.<\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>We decided to allow the image dimensions be arguments <font size=1>(probably just 5 minute ones)<\/font> via &#8230;<\/p>\n<ul>\n<li>&#038;listwimage=[pixelValue]&#038;listhimage=[pixelValue]<\/li>\n<li>&#038;listwimage=[pixelValue]# and listhimage is 5\/7 of this<\/li>\n<\/ul>\n<p> &#8230; via &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\nfunction list_style_image_check() {<br \/>\n  var listimage=location.search.split('listimage=')[1] ? decodeURIComponent(location.search.split('listimage=')[1].split('&')[0]) : \"\";<br \/>\n  if (listimage != '') {<br \/>\n     document.body.innerHTML+=\"&lt;style&gt;  ul.noclass li\" + (location.search.split('midpseudoclass=')[1] ? (':' + decodeURIComponent(location.search.split('midpseudoclass=')[1].split('&')[0])) : \":\") + \":before { content: ''; display: inline-block; height: \" + (location.search.split('listhimage=')[1] ? ('' + decodeURIComponent(location.search.split('listhimage=')[1].split('&')[0])) : (location.search.split('listwimage=')[1] ? ('' + Math.round(eval(('' + decodeURIComponent(location.search.split('listwimage=')[1].split('&')[0]))) * 5.0 \/ 7.0)) : \"25\")) + \"px; width: \" + (location.search.split('listwimage=')[1] ? ('' + decodeURIComponent(location.search.split('listwimage=')[1].split('&')[0])) : \"35\") + \"px; background-image: url('\" + listimage + \"'); background-size: contain; background-repeat: no-repeat; margin-left: -\" + (location.search.split('listwimage=')[1] ? (':' + decodeURIComponent(location.search.split('listwimage=')[1].split('&')[0])) : \"35\") + \"px; }   &lt;\/style&gt;\";<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; so that you can have a <a contenteditable=\"true\" onmouseover=\"if (this.innerHTML.indexOf('http') == -1) { this.innerHTML+=' ' + document.URL.split('#')[0].split('?')[0] + '?listimage=\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/3\/35\/Olive_baboon_Ngorongoro.jpg\/220px-Olive_baboon_Ngorongoro.jpg&#038;midpseudoclass=nth-child(5)&#038;listwimage=90';  }\" style=cursor:pointer;text-decoration:underline; onclick=\"if (this.innerHTML.indexOf(' http') != -1) {   window.open('http' + this.innerHTML.split(' http')[1] + '#myaone','_blank','top=60,left=60,width=600,height=600');  } else { window.open(document.URL.split('#')[0].split('?')[0] + '?listimage=\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/3\/35\/Olive_baboon_Ngorongoro.jpg\/220px-Olive_baboon_Ngorongoro.jpg&#038;midpseudoclass=nth-child(5)&#038;listwimage=90#myaone','_blank','top=60,left=60,width=600,height=600'); }\">&#8220;Fifth Fatter Baboon&#8221;<\/a> or <a onmouseover=\"if (this.innerHTML.indexOf('http') == -1) { this.innerHTML+=' ' + document.URL.split('#')[0].split('?')[0] + '?listimage=\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/0\/07\/Emperor_Penguin_Manchot_empereur.jpg\/175px-Emperor_Penguin_Manchot_empereur.jpg&#038;midpseudoclass=last-child&#038;listwimage=60&#038;listhimage=120';  }\" style=cursor:pointer;text-decoration:underline; onclick=\"window.open(document.URL.split('#')[0].split('?')[0] + '?listimage=\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/0\/07\/Emperor_Penguin_Manchot_empereur.jpg\/175px-Emperor_Penguin_Manchot_empereur.jpg&#038;midpseudoclass=last-child&#038;listwimage=60&#038;listhimage=120#myaone','_blank','top=60,left=60,width=600,height=600');\">&#8220;Last Tall Penguin&#8221;<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-list-style-user-css-middle-pseudo-class-tutorial\/'>WordPress List Style User CSS Middle Pseudo Class Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wplsipt'>Previous relevant <a target=_blank title='WordPress List Style Image Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-list-style-image-primer-tutorial\/'>WordPress List Style Image Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/slideshow.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"WordPress List Style Image Primer Tutorial\" src=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/list_style_img.jpg\" title=\"WordPress List Style Image Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">WordPress List Style Image Primer Tutorial<\/p><\/div>\n<p>Think it might be part of &#8220;the human th<strike>a<\/strike>ing&#8221; to &#8220;make associations&#8221; or &#8220;link things&#8221;.  As such, our &#8220;link&#8221; to yesterday&#8217;s <a title='Cut to the Chase of Blog Posting Mobile Events Tutorial' href='#ccbpmet'>Cut to the Chase of Blog Posting Mobile Events Tutorial<\/a> is WordPress blog TwentyTen them&#8217;s header.php &#8220;thinking&#8221;, but quite a different topic, in that today&#8217;s &#8220;first draft&#8221; and &#8220;terribly user unfriendly&#8221; work today revolves around CSS styling and aesthetics, rather than the event logic discussed yesterday.<\/p>\n<p>In the past we&#8217;ve allowed the styling of &#8230;<\/p>\n<p><code><br \/>\nul li<br \/>\n<\/code><\/p>\n<p> &#8230; ie. &#8220;ul&#8221; element begets &#8220;li&#8221; element bullet point &#8220;looks&#8221; be user controllable &#8230; in terms of emoji usage.  Well, today, we add onto that possibility, the possibility to use an image rather than an emoji, though you could hardly call our &#8220;first draft&#8221; of this in any way easily &#8220;user controllable&#8221; <font size=1>(but appending to a WordPress blog URL ?listimage=[someImageURL] &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\nfunction list_style_image_check() {<br \/>\n  var listimage=location.search.split('listimage=')[1] ? decodeURIComponent(location.search.split('listimage=')[1].split('&')[0]) : \"\";<br \/>\n  if (listimage != '') {<br \/>\n     document.body.innerHTML+=\"&lt;style&gt;  ul li::before { content: ''; display: inline-block; height: 25px; width: 35px; background-image: url('\" + listimage + \"'); background-size: contain; background-repeat: no-repeat; margin-left: -35px; }   &lt;\/style&gt;\";<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; is the &#8220;behind the scenes approach&#8221; called at the document.body onload event header.php is privy to)<\/font>.  We thank <a target=_blank title='Useful webpage' href='https:\/\/stackoverflow.com\/questions\/7775594\/css-list-style-image-size'>this enormously useful website<\/a> for great advice here, and in days to come we improve on that &#8220;user unfriendliness&#8221;.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-list-style-image-primer-tutorial\/'>WordPress List Style Image Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ccbpmet'>Previous relevant <a target=_blank title='Cut to the Chase of Blog Posting Mobile Events Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/cut-to-the-chase-of-blog-posting-mobile-events-tutorial\/'>Cut to the Chase of Blog Posting Mobile Events Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/slideshow.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Cut to the Chase of Blog Posting Mobile Events Tutorial\" src=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/cttc_mobile.jpg\" title=\"Action Item of Blog Posting Mobile Events Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Cut to the Chase of Blog Posting Mobile Events Tutorial<\/p><\/div>\n<p>On the way to you reading this blog posting there have been numerous intervention points for us, as overseeing programmers &#8230;<\/p>\n<ul>\n<li>PHP server layer before any client side intervention &#8230;<\/li>\n<li>PHP header.php interfaces from server side considerations into Javascript client side considerations ahead of document.body onload event &#8230;<\/li>\n<li>PHP header.php interfaces into Javascript (with its DOM) client side considerations at document.body onload event &#8230;<\/li>\n<li>PHP header.php interfaces into Javascript (with its DOM) client side considerations after document.body onload event<\/li>\n<\/ul>\n<p> &#8230; and it is in that last layer we dynamically create the &#8220;Cut to the Chase&#8221; elements you see reading this blog posting.  In this way, to change &#8220;after document.body onload event&#8221; client side aspects to &#8220;Cut to the Chase&#8221; is not hard, even to changing the type of event &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\nvar oncm=' oncontextmenu=';<br \/>\nvar oncmt=' or right click or two finger gesture ';<br \/>\nif (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n   oncm=' ontouchmove=';<br \/>\n   oncmt=' or drag over gesture ';<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; some &#8220;Cut to the Chase&#8221; element Javascript logic <font color=purple>points at<\/font>.<\/p>\n<p>And so, given yesterday&#8217;s &#8220;wet lettuce&#8221; mobile platform response to the &#8220;oncontextmenu&#8221; intervention yesterday, we&#8217;re changing yesterday&#8217;s &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n         tworp.innerHTML = tworp.innerHTML.replace(\"&lt;li&gt;\", \"&lt;li title='Cut to The Chase ... ... double click <font color=purple>\" + oncmt + \"<\/font> for blog posting image involvement'<font color=purple>\" + oncm + \"<\/font>' 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] + \"'&gt;\");<br \/>\n\/\/ ... and ...<br \/>\n      xpspana[ximb].innerHTML+=' &lt;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 + '&gt;&lt;a target=_blank style=\"cursor:pointer;display:inline-block;text-decoration:none; font-size:12px;\" ondblclick=\"dblrplatern(' + String.fromCharCode(39) + xspare + String.fromCharCode(39) + ');\" <font color=purple>' + oncm + '<\/font>\"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 <font color=purple>' + oncmt + '<\/font> for blog posting image involvement ... to (the gist of) ' + (xspare) + '\" id=tcc' + zspare + '&gt;&amp;#9986;&lt;\/a&gt;&lt;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) + ');\" <font color=purple>' + oncm + '<\/font>\"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 <font color=purple>' + oncmt + '<\/font> for blog posting image involvement ...<\/font> to (the gist of) ' + (xspare) + '\" id=ttcc' + zspare + '&gt;&amp;#127939;&amp;#127998;&amp;#8205;&amp;#9792;&amp;#65039;&amp;#127939;&amp;#127996;&amp;#8205;&amp;#9794;&amp;#65039;&lt;\/a&gt;&lt;iframe style=display:none; id=icc' + zspare + ' src=&gt;&lt;\/iframe&gt;&lt;\/div&gt;';<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; to improve on yesterday&#8217;s <a title='Cut to the Chase of Blog Posting New Arguments Tutorial' href='#ccbpnat'>Cut to the Chase of Blog Posting New Arguments Tutorial<\/a>&#8216;s offerings up at this WordPress blog&#8217;s TwentyTen theme&#8217;s header.php PHP code.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/cut-to-the-chase-of-blog-posting-mobile-events-tutorial\/'>Cut to the Chase of Blog Posting Mobile Events Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ccbpnat'>Previous relevant <a target=_blank title='Cut to the Chase of Blog Posting New Arguments Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/cut-to-the-chase-of-blog-posting-new-arguments-tutorial\/'>Cut to the Chase of Blog Posting New Arguments Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/slideshow.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Cut to the Chase of Blog Posting New Arguments Tutorial\" src=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/cttc_more.jpg\" title=\"Action Item of Blog Posting New Arguments Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Cut to the Chase of Blog Posting New Arguments Tutorial<\/p><\/div>\n<p>Yes, yesterday&#8217;s <a title='Action Item of Blog Posting New Arguments Tutorial' href='#aibpnat'>Action Item of Blog Posting New Arguments Tutorial<\/a>&#8216;s work was all about extending what our <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=Cut%20to%20the%20Chase\">&#8220;Cut to the Chase&#8221;<\/a> functionality is capable of, by adding to any existant  &#8230;<\/p>\n<ul>\n<li><i>onclick<\/i> event logic &#8230; with &#8230;<\/li>\n<li><i>ondblclick<\/i> event showing of the blog posting tutorial image as well as the action item in a new web browser tab<\/li>\n<li><i>oncontextmenu<\/i> 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<\/li>\n<\/ul>\n<p> &#8230; and as well as yesterday&#8217;s slideshow.html preparatory work, we needed to change our <i>good ol&#8217;<\/i> WordPress TwentyTen themed header.php (in amongst its Javascript) as below to make this idea a reality &#8230;<\/p>\n<table>\n<tr>\n<th>New Javascript functions &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n function dblrplatern(ft) {<br \/>\n    window.open(\"\/\/www.rjmprogramming.com.au\/slideshow.html?dc=y&title=\" + encodeURIComponent(ft), \"_blank\");<br \/>\n }<br \/>\n<br \/>\n function rcrplatern(ft) {<br \/>\n     window.open(\"\/\/www.rjmprogramming.com.au\/slideshow.html?rc=y&title=\" + encodeURIComponent(ft), \"_blank\");<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function dblrplater() {<br \/>\n    if (findthing != \"\") {<br \/>\n     window.open(\"\/\/www.rjmprogramming.com.au\/slideshow.html?dc=y&title=\" + encodeURIComponent(findthing), \"_blank\");<br \/>\n     findthing=\"\";<br \/>\n    }<br \/>\n    nothanks=false;<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function rcrplater() {<br \/>\n    if (findthing != \"\") {<br \/>\n     window.open(\"\/\/www.rjmprogramming.com.au\/slideshow.html?rc=y&title=\" + encodeURIComponent(findthing), \"_blank\");<br \/>\n     findthing=\"\";<br \/>\n    }<br \/>\n    nothanks=false;<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;\n<\/td>\n<\/tr>\n<tr>\n<th> &#8230; and <font color=blue>changes to<\/font> any &#8220;Cut to the Chase&#8221; linking elements &#8230; for example &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n         tworp.innerHTML = tworp.innerHTML.replace(\"&lt;li&gt;\", \"&lt;li title='Cut to The Chase<font color=blue> ... ... double click or right click or two finger gesture for blog posting image involvement<\/font>' <font color=blue>oncontextmenu=' findthing=\\\"\" + rptdtitle[ieight] + \"\\\"; setTimeout(rcrplater,1000); nothanks=false; ' ondblclick=' findthing=\\\"\" + rptdtitle[ieight] + \"\\\"; setTimeout(dblrplater,1000); nothanks=false; ' <\/font>onclick=' findthing=\\\"\" + rptdtitle[ieight] + \"\\\"; setTimeout(rplater,1000); nothanks=false; ' class='\" + eight[ieight] + \"'&gt;\");<br \/>\n\/\/ ... and ...<br \/>\n      xpspana[ximb].innerHTML+=' &lt;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 + '&gt;&lt;a target=_blank style=\"cursor:pointer;display:inline-block;text-decoration:none; font-size:12px;\" <font color=blue>ondblclick=\"dblrplatern(' + String.fromCharCode(39) + xspare + String.fromCharCode(39) + ');\" oncontextmenu=\"rcrplatern(' + String.fromCharCode(39) + xspare + String.fromCharCode(39) + ');\" <\/font>href=\/\/www.rjmprogramming.com.au\/slideshow.html?title=' + encodeURIComponent(xspare) + '  \" title=\"Cut to the Chase<font color=blue> ... double click or right click or two finger gesture for blog posting image involvement ... <\/font>to (the gist of) ' + (xspare) + '\" id=tcc' + zspare + '&gt;&amp;#9986;&lt;\/a&gt;&lt;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;\" <font color=blue>ondblclick=\"dblrplatern(' + String.fromCharCode(39) + xspare + String.fromCharCode(39) + ');\" oncontextmenu=\"rcrplatern(' + String.fromCharCode(39) + xspare + String.fromCharCode(39) + ');\" <\/font>href=\/\/www.rjmprogramming.com.au\/slideshow.html?title=' + encodeURIComponent(xspare) + '  \" title=\"Cut to the Chase<font color=blue> ... double click or right click or two finger gesture for blog posting image involvement ...<\/font> to (the gist of) ' + (xspare) + '\" id=ttcc' + zspare + '&gt;&amp;#127939;&amp;#127998;&amp;#8205;&amp;#9792;&amp;#65039;&amp;#127939;&amp;#127996;&amp;#8205;&amp;#9794;&amp;#65039;&lt;\/a&gt;&lt;iframe style=display:none; id=icc' + zspare + ' src=&gt;&lt;\/iframe&gt;&lt;\/div&gt;';<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<br \/>\n<\/table>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/cut-to-the-chase-of-blog-posting-new-arguments-tutorial\/'>Cut to the Chase of Blog Posting New Arguments Tutorial<\/a>.<\/p-->\n<hr>\n<p id='aibpnat'>Previous relevant <a target=_blank title='Action Item of Blog Posting New Arguments Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/action-item-of-blog-posting-new-arguments-tutorial\/'>Action Item of Blog Posting New Arguments Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/slideshow.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Action Item of Blog Posting New Arguments Tutorial\" src=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/cut_to_the_chase_tutorial_picture.jpg\" title=\"Action Item of Blog Posting New Arguments Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Action Item of Blog Posting New Arguments Tutorial<\/p><\/div>\n<p>Around here, with our WordPress blog postings, we indulge the concepts of &#8230;<\/p>\n<ul>\n<li>the blog posting title<\/li>\n<li>the blog posting text content<\/li>\n<li>the blog posting tutorial image<\/li>\n<li>the blog posting action item<\/li>\n<\/ul>\n<p> &#8230; that last one sometimes being the same as the penultimate &#8220;tutorial image&#8221; concept, but more usually some web application URL or URL to some other place of interest.<\/p>\n<p>And we have an HTML and Javascript web application that treats that &#8220;action item&#8221; as the centre of attention, rather than the usual &#8220;blog posting&#8221; focus.  It is called slideshow.html and we have changed it today for some purposes we&#8217;ll go further into with tomorrow&#8217;s blog posting.  We&#8217;ve added Javascript logic to accept URL ? (GET) arguments &#8230;<\/p>\n<ul>\n<li>?dc=<\/li>\n<li>?rc=<\/li>\n<\/ul>\n<p> &#8230; in readiness to add functionality improvements around here.<\/p>\n<p>Perhaps you can see ahead to tomorrow examining <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/slideshow.html-------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/slideshow.html-------GETME\">slideshow.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/slideshow.html\">&#8220;action item&#8221; as the centre of attention web application<\/a>?<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d60111' onclick='var dv=document.getElementById(\"d60111\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/action\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60111' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d60116' onclick='var dv=document.getElementById(\"d60116\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/wordpress\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60116' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d60122' onclick='var dv=document.getElementById(\"d60122\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mobile\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60122' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d60128' onclick='var dv=document.getElementById(\"d60128\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/style\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60128' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d60137' onclick='var dv=document.getElementById(\"d60137\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/pseudo-class\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60137' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d60160' onclick='var dv=document.getElementById(\"d60160\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/delimiter\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60160' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>When in yesterday&#8217;s WordPress List Style User CSS Middle Pseudo Class Tutorial we said &#8230; (though, come to think of it, there may be another layer of thought before that &#8230; we&#8217;ll see) Well, we saw, and did want to &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-list-style-user-emoji-image-list-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[1885,127,151,4398,3533,257,281,2147,354,1549,385,2761,576,590,626,652,710,4399,2415,932,970,972,997,1976,3285,4400,1200,1209,1212,2167,1319,1321,1324,1325,1345,3551,4401,1456],"class_list":["post-60160","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-argument","tag-background-image","tag-blog","tag-bullet-point","tag-comma","tag-content","tag-css","tag-delimiter","tag-dom","tag-element","tag-emoji","tag-header-php","tag-html","tag-image","tag-ios","tag-javascript","tag-list","tag-list-style-image","tag-localstorage","tag-php","tag-post","tag-posting","tag-programming","tag-pseudo-class","tag-pseudo-selector","tag-sessionstoragfe","tag-stop-press","tag-style","tag-styling","tag-title","tag-tutorial","tag-tutorials","tag-twentyten","tag-twentyten-theme","tag-url","tag-window-localstorage","tag-window-sessionstorage","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60160"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=60160"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60160\/revisions"}],"predecessor-version":[{"id":60167,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60160\/revisions\/60167"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=60160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=60160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=60160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}