{"id":16974,"date":"2015-09-04T05:01:19","date_gmt":"2015-09-03T19:01:19","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=16974"},"modified":"2015-12-24T12:27:04","modified_gmt":"2015-12-24T02:27:04","slug":"wordpress-posted-on-css-styling-following-you-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-posted-on-css-styling-following-you-tutorial\/","title":{"rendered":"WordPress Posted On CSS Styling Following You Tutorial"},"content":{"rendered":"
\"Wordpress<\/a>

Wordpress Posted On CSS Styling Following You Tutorial<\/p><\/div>\n

Today, with our WordPress TwentyTen themed blog, we’re consolidating the concepts of WordPress Posted On CSS Styling Follow Up Tutorial<\/a> as shown below, as promised, to make the #<\/b>hashtagging navigation that goes on so much more practically useful. Let’s recap again, so that you can go over the tautological repetition of concepts …<\/p>\n

\n

The improvement, today, is with colour coding the HTML option<\/a> tag of an HTML select<\/a> tag, but find this useful feature is no longer cross-browser, though it works in Firefox, at least. With cross-browser issues, you want to check that you are not wasting your time with something, and in terms of this, this useful link<\/a> put me onto the thoughts that picking at this like a dog over its bone, was not the go (or the went, for that matter) … and that we must not obsess … you got that … no obsessing here … mean to say, you won’t see us obsessing over an obsession in the near future, or into the next millenium … come to think of it … though cannot rule out the millenium after that, perhaps<\/font>.<\/p>\n

So what is another help on a dropdown to show where you are, apart from the tick provided by some web browsers … well, we decided to indent the #hashtag dropdown item you are on, as well as to try to colour code both the HTML select tag itself and the HTML option tag list (you expand to).<\/p>\n<\/blockquote>\n

… that all remains true, but yesterday it only applied to the topmost dropdown, but if a user is seriously engaged in #<\/b>hashtagging navigation, they are unlikely to remain up the top of a webpage for very long … ergo, the need to be there to help that #<\/b>hashtagging navigation enthusiast. To me there are at least two approaches to solving this issue …<\/p>\n

    \n
  1. you can use a CSS (or Javascript DOM) approach to style another dropdown (HTML select element) with styling featuring something like position:absolute;left:50%;top:400;opacity:0.8;z-index:4;<\/i> (which came into play with PHP Blog Summary Follow Up Tutorial<\/a>)<\/li>\n
  2. you can use Javascript DOM techniques to change the innerHTML property of relevant HTML elements to slot in new dynamically added dropdowns (HTML select element) that are almost clones<\/i> of the topmost one created when any one of these dropdowns’ selections is changed by a user who is #<\/b>hashtagging<\/li>\n<\/ol>\n

    We tried option 1 above for awhile, and it may have been possible, but option 2 turned out to be a better idea, and more straightforward to think about and code for, as well. Two small issues or niceties that come into play regarding the “almost clones<\/i>” affect, is to give each dynamically added dropdown (HTML select element) a unique ID= and insert it so that it shows yellow with the relevant blog posting title option selected (rather than that “Posted On” option that began this whole concept).<\/p>\n

    We need to show you changes made to header.php in itallic bold<\/i><\/b> text below (that adds to the bold<\/b> text changes as of yesterday) …<\/p>\n


    \nvar ponarr=new Array();
    \nvar poniharr=new Array();
    \nvar htnew=\"\";<\/i>
    \nfunction cpostedon(valt) {
    \n var shiho=document.getElementById('hrpresel');
    \n var valtvalue=valt.value.replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\");
    \n if (shiho != null) {
    \n var previs=-1, nextis=-1;
    \n var ponopts=docgetclass('ponopt','option');
    \n for (var iihj=0; iihj<poniharr.length; iihj++) {
    \n if (valtvalue == poniharr[iihj]) valtvalue=ponarr[iihj].replace('option', '#');
    \n }
    \n var oiso=document.getElementById(valtvalue.replace('#','option'));
    \n for (var ihj=0; ihj<ponopts.length; ihj++) {
    \n if (ihj == nextis || ihj == previs) {
    \n ihj=ihj;
    \n } else if (ponopts[ihj].id == oiso.id) {
    \n ponopts[ihj].innerHTML=ponopts[ihj].innerHTML.replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\");
    \n shiho=document.getElementById('hrpresel');
    \n if (shiho != null) shiho.style.backgroundColor=ponopts[ihj].style.backgroundColor.replace('white','yellow');
    \n ponopts[ihj].style.backgroundColor='yellow';
    \n ponopts[ihj].innerHTML=\"&nbsp;&nbsp;\" + ponopts[ihj].innerHTML;
    \n nextis=eval((1 + ihj) % ponopts.length);
    \n ponopts[nextis].innerHTML=\"\" + ponopts[nextis].innerHTML.replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\");
    \n ponopts[nextis].style.backgroundColor='green';
    \n previs=eval(eval((-1 + ihj + ponopts.length) % ponopts.length));
    \n ponopts[previs].innerHTML=\"\" + ponopts[nextis].innerHTML.replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\");
    \n ponopts[previs].style.backgroundColor='red';
    \n htnew=valtvalue.replace(\"#\",\"\") + \"_\" + ponopts[ihj].id;
    \n zfour();<\/i>
    \n } else {
    \n ponopts[ihj].innerHTML=ponopts[ihj].innerHTML.replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\");
    \n ponopts[ihj].style.backgroundColor='white';
    \n }
    \n }
    \n }
    \n return valtvalue;
    \n}
    \nfunction zfour() {
    \n if (htnew.indexOf(\"_\") != -1) {
    \n var hts=htnew.split(\"_\");
    \n var shihofloat=document.getElementById(htnew);
    \n var htso=document.getElementById(hts[0]);
    \n if (shihofloat == null && htso != null) {
    \n var shihonf=document.getElementById('hrpresel');
    \n if (shihonf != null) {
    \n if (document.body.innerHTML.indexOf(htso.innerHTML + \"<\/div>\") != -1) {
    \n htso.innerHTML=\"<select id='\" + htnew + \"' style='background-color:yellow;' onchange='location.href=cpostedon(this);'>\" + shihonf.innerHTML.replace(\"> \",\" selected> \") + \"<\/select>\" + htso.innerHTML;
    \n } else if (document.body.innerHTML.indexOf(htso.innerHTML + \"<\/p>\") != -1) {
    \n htso.innerHTML+=\"<select id='\" + htnew + \"' style='background-color:yellow;' onchange='location.href=cpostedon(this);'>\" + shihonf.innerHTML.replace(\"> \",\" selected> \") + \"<\/select>\";
    \n } else if (document.body.innerHTML.indexOf(htso.innerHTML + \"<\/h1>\") != -1) {
    \n htso.innerHTML+=\"<select id='\" + htnew + \"' style='background-color:yellow;' onchange='location.href=cpostedon(this);'>\" + shihonf.innerHTML.replace(\"> \",\" selected> \") + \"<\/select>\";
    \n } else if (document.body.innerHTML.indexOf(htso.innerHTML + \"<\/h2>\") != -1) {
    \n htso.innerHTML+=\"<select id='\" + htnew + \"' style='background-color:yellow;' onchange='location.href=cpostedon(this);'>\" + shihonf.innerHTML.replace(\"> \",\" selected> \") + \"<\/select>\";
    \n } else if (document.body.innerHTML.indexOf(htso.innerHTML + \"<\/a>\") != -1) {
    \n document.body.innerHTML=document.body.innerHTML.replace(htso.innerHTML + \"<\/a>\", htso.innerHTML + \"<\/a><select id='\" + htnew + \"' style='background-color:yellow;' onchange='location.href=cpostedon(this);'>\" + shihonf.innerHTML.replace(\"> \",\" selected> \") + \"<\/select>\");
    \n } else {
    \n document.body.innerHTML=document.body.innerHTML.replace(htso.innerHTML + \"<\/a>\", htso.innerHTML + \"<\/a><select id='\" + htnew + \"' style='background-color:yellow;' onchange='location.href=cpostedon(this);'>\" + shihonf.innerHTML.replace(\"> \",\" selected> \") + \"<\/select>\").replace(htso.innerHTML + \"<\/div>\", htso.innerHTML + \"<\/div><select id='\" + htnew + \"' onchange='location.href=cpostedon(this);'>\" + shihonf.innerHTML + \"<\/select>\");
    \n }
    \n }
    \n }
    \n htnew=\"\";
    \n }
    \n}<\/i>
    \nfunction initpostedoncc() {
    \n var shiho=document.getElementById('hrpresel');
    \n if (shiho != null) {
    \n var seqis=\" style='background-color:yellow;'\", newih=\"\", anth;
    \n var newih=shiho.innerHTML.replace(\"> HTML<\", \">End of page<\").replace(\"> HTML<\", \">End of page<\").replace(\">HTML<\", \">End of page<\");
    \n var optshiho=newih.split(' value=\"');
    \n for (var iry=1; iry<optshiho.length; iry++) {
    \n \/\/alert(98);
    \n if (iry == 1) {
    \n newih=newih.replace(optshiho[1], optshiho[1].replace(\">\",\">&nbsp;&nbsp;\"));
    \n } else if (iry == -2) {
    \n newih=newih.replace(optshiho[2], optshiho[2].replace(\">\",\">&nbsp;\"));
    \n }
    \n anth=optshiho[iry].split('\"');
    \n ponarr.push('option' + anth[0].replace('#',''));
    \n newih=newih.replace(' value=\"' + anth[0] + '\"', ' class=\"ponopt\" id=\"option' + anth[0].replace('#','') + '\"' + seqis);
    \n seqis=seqis.replace(\" style='background-color:green;'\", \" style='background-color:white;'\").replace(\"yellow\", \"green\");
    \n }
    \n shiho=document.getElementById('hrpresel');
    \n if (shiho != null) shiho.innerHTML=newih;
    \n if (shiho != null) shiho=document.getElementById('hrpresel');
    \n if (shiho != null) shiho.style.backgroundColor='yellow';
    \n optshiho=newih.split('<\/option>');
    \n for (var iry=0; iry<optshiho.length; iry++) {
    \n anth=optshiho[iry].split('>');
    \n if (anth.length > 1) {
    \n poniharr.push(anth[eval(anth.length - 1)].replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\").replace(\"&nbsp;\",\"\"));
    \n }
    \n }
    \n }
    \n}
    \n<\/b>
    \n<\/script>
    \n<\/head>
    \n<body onload=\" setTimeout(initpostedoncc, 3000);<\/b> widgetcon(); precc(); courseCookies();\" <?php body_class(); ?>>
    \n<\/code><\/p>\n

    So you are here ready to try it out with the first “Posted On” dropdown up the top … and see its functionality follow you like a faithful dog … awwwwwwwwwww shucks!<\/p>\n

    \n

    Previous relevant WordPress Posted On CSS Styling Follow Up Tutorial<\/a> is shown below.<\/p>\n

    \"Wordpress<\/a>

    Wordpress Posted On CSS Styling Follow Up Tutorial<\/p><\/div>\n

    Today, with our WordPress TwentyTen themed blog, we’re following up on the concepts of WordPress Posted On CSS Styling Primer Tutorial<\/a> as shown below, as we believe in revisits to code, and we can see room for improvement. Let’s recap …<\/p>\n

    \n

    Do you perhaps remember, on this blog, when we presented PHP Blog Summary Follow Up Tutorial<\/a> as shown below, and talked about the two uses of # (hashtag) and the associated use of the id=<\/i> HTML parameter?<\/p>\n

      \n
    1. you can manipulate HTML via Javascript DOM in terms of individual HTML objects or elements (or tags, if you like)<\/li>\n
    2. you can use them to navigate in a “hashtag”<\/a> way via #[id]<\/i> syntax … by repositioning yourself on your current webpage (as is so readily used in online essays or books in their Table of Contents, perhaps)<\/li>\n<\/ol>\n

      In that tutorial we talked about the second point, and again, today, we make use of the functionality of that second point, but this time we keep Javascript DOM integrity.<\/p>\n<\/blockquote>\n

      The improvement, today, is with colour coding the HTML option<\/a> tag of an HTML select<\/a> tag, but find this useful feature is no longer cross-browser, though it works in Firefox, at least. With cross-browser issues, you want to check that you are not wasting your time with something, and in terms of this, this useful link<\/a> put me onto the thoughts that picking at this like a dog over its bone, was not the go (or the went, for that matter) … and that we must not obsess … you got that … no obsessing here … mean to say, you won’t see us obsessing over an obsession in the near future, or into the next millenium … come to think of it … though cannot rule out the millenium after that, perhaps<\/font>.<\/p>\n

      So what is another help on a dropdown to show where you are, apart from the tick provided by some web browsers … well, we decided to indent the #hashtag dropdown item you are on, as well as to try to colour code both the HTML select tag itself and the HTML option tag list (you expand to).<\/p>\n

      Are we obsessed with dropdowns? Not on your nelly. Though can’t speak for the nelly over there —>>><\/p>\n

      But, seriously (and didn’t you just know there was a but<\/i>), dropdowns save space and if you have content that becomes important … minimalist looks are fine, but are minimalist looks just that, sometimes … minimalist?<\/p>\n

      So this is a first step, and tomorrow we open up more practically useful functionality to do with this.<\/p>\n

      In any case, what needed to change? Well, (and didn’t you just know there was a well<\/i>), it involved …<\/p>\n