{"id":60170,"date":"2023-07-20T03:01:34","date_gmt":"2023-07-19T17:01:34","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=60170"},"modified":"2023-07-19T19:53:14","modified_gmt":"2023-07-19T09:53:14","slug":"wordpress-list-style-user-interaction-form-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-list-style-user-interaction-form-tutorial\/","title":{"rendered":"WordPress List Style User Interaction Form Tutorial"},"content":{"rendered":"
\"WordPress<\/a>

WordPress List Style User Interaction Form Tutorial<\/p><\/div>\n

It can be hard going on a mini-project where you need to set up data structures for success until you get to today’s progress, on top of yesterday’s WordPress List Style User Emoji Image List Tutorial<\/a>, where we can finally offer a decent user interface to these data structures. So, yayyyyyyyy!<\/p>\n

In Change User Controllable Font, Border, Background Settings<\/a>‘s HTML form based approach, the user can see “all before them” the data items that make up the full scope of what the functionality offers, in today’s case that being user controllable …<\/p>\n


\nul.noclass li
\n<\/code><\/p>\n

… CSS styling options in the WordPress blog you are reading. The ++<\/i> we ask you to add to the “listimage” textbox here allows a window.localStorage means by which the web browser you are using will assist you keep that look for the new time you access this WordPress blog with that web browser and device combination. And it may well be, you want to (perhaps be amused)<\/font> with a particular look (which can bring a smile to your face)<\/font> but never want to go through the ordeal again … well … consider appending ++ here.<\/p>\n

We’ve kept the original approach too, and it works as before, should a user prefer, and they want a simple approach, and we needed to change<\/font> our WordPress TwentyTen theme’s header.php as below …<\/p>\n

<?php echo ”
\n
\nfunction eqworrydecodeURIComponent(instw) {
\n var eqis='=', ampis='';
\n var outstw=decodeURIComponent(instw);
\n if (outstw.trim() != '') {
\n if (outstw.indexOf(eqis) != -1) {
\n eqis='=';
\n ampis='&';
\n } else if (outstw.indexOf(encodeURIComponent(eqis)) != -1) {
\n if (1 == 1) {
\n ampis='&';
\n outstw=decodeURIComponent(outstw);
\n } else {
\n eqis=encodeURIComponent(eqis);
\n ampis=encodeURIComponent('&');
\n }
\n }
\n if (ampis != '') {
\n document.getElementById('listwimage').value=(outstw.split('listwimage=')[1] ? ('' + decodeURIComponent(outstw.split('listwimage=')[1].split('&')[0])) : \"\");
\n document.getElementById('listhimage').value=(outstw.split('listhimage=')[1] ? ('' + decodeURIComponent(outstw.split('listw\\himage=')[1].split('&')[0])) : \"\");
\n document.getElementById('midpseudoclass').value=(outstw.split('midpseudoclass=')[1] ? ('' + decodeURIComponent(outstw.split('midpseudoclass=')[1].split('&')[0])) : \"\");
\n return (outstw.split('listimage=')[1] ? ('' + decodeURIComponent(outstw.split('listimage=')[1].split('&')[0])) : \"\");
\n }
\n }
\n return outstw;
\n}<\/font>
\n
\nfunction cookieAVal(cName) {
\n if (cName == 'forcedemoji') {
\n if (window.localStorage) {
\n if (decodeURIComponent(('' + localStorage.getItem('listimage')).replace(\/^undefined\/g,'').replace(\/^null\/g,'')) != '') {
\n return eqworrydecodeURIComponent(localStorage.getItem('listimage'));
\n }
\n if (decodeURIComponent(('' + sessionStorage.getItem('listimage')).replace(\/^undefined\/g,'').replace(\/^null\/g,'')) != '') {
\n return eqworrydecodeURIComponent(sessionStorage.getItem('listimage'));
\n }
\n }
\n if (cName == 'forcedemoji' && document.getElementById(cName)) {
\n return document.getElementById(cName).value;
\n }
\n return '';
\n }<\/font>
\n var expireDate = new Date();
\n expireDate.setDate(expireDate.getDate()-1);
\n if (window.localStorage && cName == 'forced_emoji') {
\n if (decodeURIComponent(('' + localStorage.getItem('forced_emoji')).replace(\/^undefined\/g,'').replace(\/^null\/g,'')) != '') {
\n if (decodeURIComponent(('' + localStorage.getItem('forced_emoji')).replace(\/^undefined\/g,'').replace(\/^null\/g,'')).indexOf('`') != -1) {
\n document.cookie = cName + \"=; expires=\" + expireDate.toGMTString();
\n return decodeURIComponent(localStorage.getItem('forced_emoji'));
\n } else {
\n document.cookie = cName + \"=; expires=\" + expireDate.toGMTString();
\n return decodeURIComponent(localStorage.getItem('forced_emoji'));
\n }
\n }
\n }
\n if (document.cookie != '') {
\n var tCookie=document.cookie.split(\"; \");
\n

\n for (var j=0; j<tCookie.length; j++) {
\n if (cName == tCookie[j].split(\"=\")[0]) {
\n return decodeURIComponent(tCookie[j].split(\"=\")[1]);
\n }
\n }
\n }
\n if (cName == 'forced_emoji' && document.getElementById(cName)) {
\n return document.getElementById(cName).value;
\n }<\/font>
\n return '';
\n}
\n
\nfunction deleteACookie(goodname) {
\n if (window.localStorage && goodname == 'forced_emoji') {
\n if (('' + localStorage.getItem('forced_emoji')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') != '') {
\n localStorage.removeItem('forced_emoji');
\n }
\n }<\/font>
\n var expireDate = new Date();
\n expireDate.setDate(expireDate.getDate()-1);
\n \/\/if ((\"\" + cookieAVal(goodname)).length != 0) {
\n document.cookie = goodname + \"=; expires=\" + expireDate.toGMTString();
\n \/\/}
\n}
\n
\nfunction newlsvsco(tvis, tvo<\/font>) {
\n var origtvis=tvis;
\n if (tvis != '' && tvis.replace(\/\\-\/g,'') == '') {
\n if (tvis.indexOf('--') != -1) {
\n if (decodeURIComponent(('' + window.localStorage.getItem('listimage')).replace(\/^undefined\/g,'').replace(\/^null\/g,'')) != '') {
\n window.localStorage.removeItem('listimage');
\n }
\n if (decodeURIComponent(('' + window.sessionStorage.getItem('listimage')).replace(\/^undefined\/g,'').replace(\/^null\/g,'')) != '') {
\n window.sessionStorage.removeItem('listimage');
\n }
\n if (decodeURIComponent(('' + window.localStorage.getItem('forced_emoji')).replace(\/^undefined\/g,'').replace(\/^null\/g,'')) != '') {
\n window.localStorage.removeItem('forced_emoji');
\n }
\n } else {
\n if (decodeURIComponent(('' + window.sessionStorage.getItem('listimage')).replace(\/^undefined\/g,'').replace(\/^null\/g,'')) != '') {
\n window.sessionStorage.removeItem('listimage');
\n }
\n }
\n document.getElementById('forced_emoji').value='';
\n document.getElementById('forcedemoji').value='';
\n return '';
\n }<\/font>
\n if (tvo.id == 'forcedemoji') { \/\/ new window.localStorage way
\n if (tvis.indexOf('`') != -1 || (tvis.trim() == '' && tvis != '')) {
\n document.getElementById('forced_emoji').value=tvis;
\n tvo.value='';
\n document.getElementById('tdnew').style.display='none';
\n newlsvsco(tvis.replace(String.fromCharCode(32), String.fromCharCode(96)).replace(String.fromCharCode(44), String.fromCharCode(96)), document.getElementById('forced_emoji'));
\n return '';
\n }
\n if (tvis.indexOf('+') != -1) {
\n if (tvis.slice(-2) == '++') {
\n tvo.value=tvis.substring(0, eval(-2 + tvis.length)) + ' ';
\n tvis=tvis.substring(0, eval(-2 + tvis.length)) + ' ';
\n }
\n if (tvis.slice(-1) == '+') {
\n tvo.value=tvis.substring(0, eval(-1 + tvis.length)) + ' ';
\n tvis=tvis.substring(0, eval(-1 + tvis.length)) + ' ';
\n }
\n }
\n } else {<\/font>
\n if (tvis.indexOf('`') != -1 && tvis.indexOf(',') != -1) {
\n document.getElementById('forcedemoji').value=tvis.replace(String.fromCharCode(96), String.fromCharCode(44)).replace(String.fromCharCode(96), String.fromCharCode(32), document.getElementById('forcedemoji'));
\n tvo.value='';
\n document.getElementById('tdoriginal').style.display='none';
\n newlsvsco(document.getElementById('forcedemoji').value, document.getElementById('forced_emoji'));
\n return '';
\n }<\/font>
\n if (eval('' + tvis.length) > 0) {
\n tvis=tvis.replace(\/\\#\/g, '').replace(\/\\&\/g,'').replace(\/\\x\/g, '').replace(\/\\X\/g, '').replace(\/\\u\/g, '').replace(\/\\U\/g, '').replace(\/\\\/\/g, '').replace(\/\\|\/g, '`').replace(\/\\;\/g, '`').replace(\/\\,\/g, '`').replace('```', '`').replace('``', '`').replace('```', '`').replace(\/\\`$\/g, '').replace(\/\\`$\/g, '');
\n if (window.localStorage) {
\n if (document.getElementById('forced_emoji')) {
\n document.getElementById('forced_emoji').name=document.getElementById('forced_emoji').id;
\n }
\n if (tvis.trim() != '') {
\n window.localStorage.setItem('forced_emoji', encodeURIComponent(tvis.trim()));
\n if (document.getElementById('forced_emoji') && (tvis != tvis.trim() || origtvis != tvis)) {
\n document.getElementById('forced_emoji').value=tvis.trim();
\n }
\n } else {
\n window.localStorage.setItem('forced_emoji', encodeURIComponent(tvis));
\n }
\n } else {
\n var xexpireDate = new Date();
\n xexpireDate.setMonth(xexpireDate.getMonth()+6);
\n if (tvis.trim() != '') {
\n document.cookie = 'forced_emoji=' + encodeURIComponent(tvis.trim()) + '; expires=' + xexpireDate.toGMTString();
\n if (document.getElementById('forced_emoji') && (tvis != tvis.trim() || origtvis != tvis)) {
\n document.getElementById('forced_emoji').value=tvis.trim();
\n }
\n } else {
\n document.cookie = 'forced_emoji=' + encodeURIComponent(tvis) + '; expires=' + xexpireDate.toGMTString();
\n }
\n }
\n }
\n if (1 == 2) { change_ff(this, this.value); }
\n }<\/font>
\n}
\n<\/code>
\n“; ?><\/p>\n

… to also help make this user interaction improvement happen.<\/p>\n

\n

\n

Previous relevant WordPress List Style User Emoji Image List Tutorial<\/a> is shown below.<\/p>\n

\"WordPress<\/a>

WordPress List Style User Emoji Image List Tutorial<\/p><\/div>\n

When in yesterday’s WordPress List Style User CSS Middle Pseudo Class Tutorial<\/a> we said …<\/p>\n

\n(though, come to think of it, there may be another layer of thought before that … we’ll see)<\/font>\n<\/p><\/blockquote>\n

Well, we saw, and did want to allow for four more feature extensions …<\/p>\n

    \n
  1. allow for a comma separated list (that can correspond, optionally, with a comma separated pseudo-class list) … of …<\/li>\n
  2. a mix of “list style” images and\/or emojis … all …<\/li>\n
  3. rememberable and recallable on a web browser tab via window.sessionStorage<\/a> … or …<\/li>\n
  4. rememberable and recallable on a web browser at any time in any tab via window.localStorage<\/a><\/li>\n<\/ol>\n

    … as required.<\/p>\n

    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) …<\/p>\n