{"id":53975,"date":"2021-11-19T03:01:20","date_gmt":"2021-11-18T17:01:20","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=53975"},"modified":"2021-11-19T11:27:28","modified_gmt":"2021-11-19T01:27:28","slug":"hashtag-navigation-scrolling-tweaks-wordpress-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/hashtag-navigation-scrolling-tweaks-wordpress-tutorial\/","title":{"rendered":"Hashtag Navigation Scrolling Tweaks WordPress Tutorial"},"content":{"rendered":"
\"Hashtag<\/a>

Hashtag Navigation Scrolling Tweaks WordPress Tutorial<\/p><\/div>\n

The recent Hashtag Navigation Scrolling Tweaks Primer Tutorial<\/a> “proof of concept” ideas gave us something to work on to fix some annoyances with navigation to this WordPress Blog you are reading. We found that we often fell short of the hashtag navigation we wanted to achieve, a little selfishly, <\/font>because the “admin user” toolbar took up enough height to put out the hashtag navigation.<\/p>\n

In order to remedy the fault, albeit a little selfishly, <\/font>we changed this WordPress Blog’s Twenty Ten theme’s good ol’<\/font> header.php as below …<\/p>\n

    \n
  1. we added in a script link to the new external Javascript as per …
    \n<?php
    \n
    \n<script type='text\/javascript' src='\/\/www.rjmprogramming.com.au\/hashtag_and_a_bit.js'><\/script>
    \n<\/code>
    \n?>\n<\/li>\n
  2. fix those calls to the RJM Programming WordPress Blog<\/a> from the dropdown of the RJM Programming Landing Page<\/a> we append<\/font> …
    \n<?php
    \n
    \nfunction post_pp_ref() {
    \n if (document.getElementById('iftable')) {
    \n location.href='#iftable#andabit=-60<\/font>';
    \n }
    \n}
    \n<\/code>
    \n?>\n<\/li>\n
  3. fix the mobile platform calls to the WordPress Blog that often hashtag straight to the relevant posting’s content ( via #content ) … it’s fixed via code in that external Javascript hashtag_and_a_bit.js<\/a> (and an added if clause)<\/font> …
    \n
    \n\/\/ hashtag_and_a_bit.js
    \n\/\/ RJM Programming
    \n\/\/ November, 2021
    \n\/\/ Help out Hashtag Position Less a Bit
    \n
    \n var firstlfh='';
    \n var dgbiv='-40';
    \n
    \n function lfh() {
    \n if (1 == 1) {
    \n var thish=('' + location.hash);
    \n if (thish != firstlfh) {
    \n firstlfh=thish;
    \n if (firstlfh.split('#').length > 2) {
    \n if (firstlfh.split('#andabit').length == 2) {
    \n window.scroll(0, 0);
    \n var rect=document.getElementById(firstlfh.split('#')[1].split('#')[0]).    getBoundingClientRect<\/a>();
    \n if (('' + rect.top) != '') {
    \n var newtop=eval(('' + rect.y)); \/\/y));
    \n newtop+=eval('' + dgbiv); \/\/document.getElementById('i1').value);
    \n window.scroll(0, newtop);
    \n }
    \n }
    \n } else if (thish.indexOf('#content') != -1) {
    \n window.scroll(0, 0);
    \n var rect=document.getElementById(thish.split('#')[1].split('#')[0]).getBoundingClientRect();
    \n if (('' + rect.top) != '') {
    \n console.log('rect.y=' + rect.y);
    \n var newtopc=eval(('' + rect.y)); \/\/y));
    \n newtopc-=eval('30'); \/\/document.getElementById('i1').value);
    \n console.log('newtopc=' + newtopc);
    \n window.scroll(0, newtopc);
    \n }<\/font>
    \n }
    \n }
    \n }
    \n }
    \n
    \n setInterval(lfh, 1000);
    \n<\/code>\n<\/li>\n<\/ol>\n

    … to make life better administering this blog. Perhaps with you too?! We certainly hope so!<\/p>\n

    Did you know?<\/i><\/b><\/p>\n

    Yes …<\/p>\n

    <?php
    \n
    \n<script type='text\/javascript' src='\/\/www.rjmprogramming.com.au\/hashtag_and_a_bit.js'><\/script>
    \n<\/code>
    \n?><\/p>\n

    … could more generically<\/i> be …<\/p>\n

    <?php
    \n
    \n<script type='text\/javascript' src='\/hashtag_and_a_bit.js'><\/script>
    \n<\/code>
    \n?><\/p>\n

    … as a kind of “hybrid” relative URL (that is a bit like an absolute URL in that if you know you are dealing with the RJM Programming domain, you are pointing at its Apache<\/a> (with PHP) web server $_SERVER[‘DOCUMENT_ROOT’]<\/a> folder’s hashtag_and_a_bit.js external Javascript). Equally, without code modification, the latter syntax could suit a local Apache (we like MAMP<\/a>) web server environment, as the place for hashtag_and_a_bit.js external Javascript, also placed into that local Apache (we like MAMP<\/a>) web server environment’s $_SERVER[‘DOCUMENT_ROOT’] folder (here on macOS on a MacBook Air with MAMP<\/a> that is \/Applications\/MAMP\/htdocs\/<\/i> or HTTP:\/\/localhost:8888\/<\/i> as the “URL part” equivalence).<\/p>\n

    And then, do you get, seeing …<\/p>\n


    \nlocation.href='#iftable#andabit=-60';
    \n<\/code><\/p>\n

    … how hashtag (ie. location.hash) coding could take advantage of the fact that location.hash could be parsed via Javascript …<\/p>\n


    \n var bitsofhashare=('' + location.hash + String.fromCharCode(32)).substring(1).trim().split('#');
    \n<\/code><\/p>\n

    … to arrive at, for case above bitsofhashare[0]=”iftable”;<\/i> and bitsofhashare[1]=”andabit=-60″;<\/i> and bitsofhashare[0]=””;<\/i> for the case where there is no defined location.hash ?<\/p>\n

    \n

    \n

    Previous relevant Hashtag Navigation Scrolling Tweaks Primer Tutorial<\/a> is shown below.<\/p>\n

    \"Hashtag<\/a>

    Hashtag Navigation Scrolling Tweaks Primer Tutorial<\/p><\/div>\n

    We’ve got what we hope is an interesting proof of concept web application for you today. What do you think of …<\/p>\n

    \nHagtag navigation plus a Scrolling correction\n<\/p><\/blockquote>\n

    … combining that …<\/p>\n