Advertisement:

Author Topic: Code Pen Help  (Read 1174 times)

Offline njtweb

  • Sr. Member
  • ****
  • Posts: 917
Code Pen Help
« on: August 16, 2019, 08:42:03 AM »
Hi,

I found a sortable responsive table code I'd like to implement on my site. I've formatted the CSS and HTML and tested and it works great. Only problem is the .js. What do I do with it? I've copied and pasted into notepad and named/saved it as shshlscript.js then uploaded uploaded to my host root.

This is the code
https://codepen.io/Loonz206/pen/nkzjC

The table sorting isn't working because as I understand it there's no script being called. Where/how do I enter the call to the script so my table sorts?

Thank you in advance.

Offline Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,943
  • Gender: Male
  • Black cat rulz!
    • Antes on GitHub
    • merta on LinkedIn
    • @XinYenFon on Twitter
    • WoWSnips
Re: Code Pen Help
« Reply #1 on: August 16, 2019, 09:15:27 AM »
Calling JS file is not a huge issue,

if you are on SMF 2.0 just open your Index.template.php and add this inside the head tag
Code: [Select]
// Load the JS
echo '
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sort.js?fin20"></script>';

if you are on SMF 2.1 just open your index.template.php and add the following code inside function template_init()
Code: [Select]
loadJavaScriptFile('sort.js');
You can support me directly via Patreon

In Catnip We Trust.
The solution is Catnip!
Vote for Catnip!

Current Project(s): [ WoWSnips ]
Past Project(s): [ ezPortal ] # [ Lunarfall ] # [ RDD (HTML5) ]

Offline njtweb

  • Sr. Member
  • ****
  • Posts: 917
Re: Code Pen Help
« Reply #2 on: August 16, 2019, 09:21:36 AM »
Calling JS file is not a huge issue,

if you are on SMF 2.0 just open your Index.template.php and add this inside the head tag
Code: [Select]
// Load the JS
echo '
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sort.js?fin20"></script>';

if you are on SMF 2.1 just open your index.template.php and add the following code inside function template_init()
Code: [Select]
loadJavaScriptFile('sort.js');

Hi Antes, thank you for the response. I don't think that's the problem. How does the CSS or html know what to call? This is from a Tinyportal HTML article. Both the CSS and HTML are loaded directly from the article.

Thank you

Offline Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,943
  • Gender: Male
  • Black cat rulz!
    • Antes on GitHub
    • merta on LinkedIn
    • @XinYenFon on Twitter
    • WoWSnips
Re: Code Pen Help
« Reply #3 on: August 16, 2019, 09:55:34 AM »
Calling JS file is not a huge issue,

if you are on SMF 2.0 just open your Index.template.php and add this inside the head tag
Code: [Select]
   // Load the JS
   echo '
   <script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sort.js?fin20"></script>';

if you are on SMF 2.1 just open your index.template.php and add the following code inside function template_init()
Code: [Select]
loadJavaScriptFile('sort.js');

Hi Antes, thank you for the response. I don't think that's the problem. How does the CSS or html know what to call? This is from a Tinyportal HTML article. Both the CSS and HTML are loaded directly from the article.

Thank you

Well, if you are just loading this JS file to the SMF and creating tables, first of all its not putting "sortable" class to table which is the main class that JS file looks for (to enable sortable tables function). You need to fix that, which is easy with just opening Subs.php;
Code: (Find) [Select]
            'before' => '<table class="bbc_table">',
Code: (Replace) [Select]
            'before' => '<table class="bbc_table sortable">',
Trick here, since SMF (2.0) has no TH support, the JS will take first line as table-header so it will sort the items after it. What does this mean? If someone creates a table say 4x4 with all numbers, the JS file will take first td element as header and it won't be a right (or proper) sort.

Small note; making the change I stated above, will make ALL your tables sort able.
You can support me directly via Patreon

In Catnip We Trust.
The solution is Catnip!
Vote for Catnip!

Current Project(s): [ WoWSnips ]
Past Project(s): [ ezPortal ] # [ Lunarfall ] # [ RDD (HTML5) ]

Offline njtweb

  • Sr. Member
  • ****
  • Posts: 917
Re: Code Pen Help
« Reply #4 on: August 16, 2019, 10:16:30 AM »
I don't think I'm explaining correctly. I put the following code directly into a TinyPortal article. Code Pen has a .js that the code requires in order to sort the headers, (code below the CSS and HTML)

This ---> is the article page I'm working on. It's all html and no BBCode
Code: [Select]
https://www.youthhockeyinfo.com/index.php?page=43
I saved the .js code as shshlscript.js and uploaded to my site root. How do I call that JS from the article? I added this <scrixt>hxxps://www.youthhockeyinfo.com/shshlscript.js</scrixt> right before </head> tag and the table still isn't sortable.

Code: [Select]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*
Generic Styling, for Desktops/Laptops
*/

body {
  font-family:Arial;
}

table {
  width: 100%;
  border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
  background: #E1E1E1(#EEEEEE, 70%);
}
th {
  background: #0A3165;
  color: white;
  font-weight: bold;
}
th:after {
  content:'\2605';
}

th:after {
    margin-left: 10px;
}

td, th {
  padding: 6px;
  border: 1px solid #fff;
  text-align: left;
}

/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

tr { border: 1px solid #fff; }

td {
/* Behave  like a "row" */
border: none;
border-bottom: 1px solid #fff;
position: relative;
padding-left: 50%;
}

td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
}

td:first-of-type {
  font-weight:bold;
}
</style>
<script>https://www.youthhockeyinfo.com/shshlscript.js</script>
</head>
<body>

<h3>2019-2010 SHSHL Standings</h3>
<table class="sortable">
<thead>
<tr>
<th>TEAM</th>
<th>PTS</th>
                <th>GP</th>
                <th>W</th>
                <th>L</th>
                <th>T</th>
                <th>GF</th>
                <th>GA</th>
                <th>DIVISION</th>
</tr>
</thead>
<tbody>
<tr>
<td>CB East</td>
<td>0</td>
                <td>0</td>
                <td>0</td>
<td>0</td>
                <td>0</td>
                <td>0</td>
<td>0</td>
                <td>0-0-0</td>
</tr>
<tr>
<td>CB South</td>
<td>0</td>
                <td>0</td>
                <td>0</td>
<td>0</td>
                <td>0</td>
                <td>0</td>
<td>0</td>
                <td>0-0-0</td>
</tr>
<tr>
<td>CB West</td>
<td>0</td>
                <td>0</td>
                <td>0</td>
<td>0</td>
                <td>0</td>
                <td>0</td>
<td>0</td>
                <td>0-0-0</td>
</tr>
<tr>
<td>North Penn</td>
<td>0</td>
                <td>0</td>
                <td>0</td>
<td>0</td>
                <td>0</td>
                <td>0</td>
<td>0</td>
                <td>0-0-0</td>
</tr>
<tr>
<td>Souderton</td>
<td>0</td>
                <td>0</td>
                <td>0</td>
<td>0</td>
                <td>0</td>
                <td>0</td>
<td>0</td>
                <td>0-0-0</td>
</tr>
<tr>
<td>Pennridge</td>
<td>0</td>
                <td>0</td>
                <td>0</td>
<td>0</td>
                <td>0</td>
                <td>0</td>
<td>0</td>
                <td>0-0-0</td>
</tr>
</tbody>
</table>
</body>
</html>

Code: [Select]
var stIsIE = /*@cc_on!@*/false;

sorttable = {
  init: function() {
    // quit if this function has already been called
    if (arguments.callee.done) return;
    // flag this function so we don't do the same thing twice
    arguments.callee.done = true;
    // kill the timer
    if (_timer) clearInterval(_timer);

    if (!document.createElement || !document.getElementsByTagName) return;

    sorttable.DATE_RE = /^(\d\d?)[\/\.-](\d\d?)[\/\.-]((\d\d)?\d\d)$/;

    forEach(document.getElementsByTagName('table'), function(table) {
      if (table.className.search(/\bsortable\b/) != -1) {
        sorttable.makeSortable(table);
      }
    });

  },

  makeSortable: function(table) {
    if (table.getElementsByTagName('thead').length == 0) {
      // table doesn't have a tHead. Since it should have, create one and
      // put the first table row in it.
      the = document.createElement('thead');
      the.appendChild(table.rows[0]);
      table.insertBefore(the,table.firstChild);
    }
    // Safari doesn't support table.tHead, sigh
    if (table.tHead == null) table.tHead = table.getElementsByTagName('thead')[0];

    if (table.tHead.rows.length != 1) return; // can't cope with two header rows

    // Sorttable v1 put rows with a class of "sortbottom" at the bottom (as
    // "total" rows, for example). This is B&R, since what you're supposed
    // to do is put them in a tfoot. So, if there are sortbottom rows,
    // for backwards compatibility, move them to tfoot (creating it if needed).
    sortbottomrows = [];
    for (var i=0; i<table.rows.length; i++) {
      if (table.rows[i].className.search(/\bsortbottom\b/) != -1) {
        sortbottomrows[sortbottomrows.length] = table.rows[i];
      }
    }
    if (sortbottomrows) {
      if (table.tFoot == null) {
        // table doesn't have a tfoot. Create one.
        tfo = document.createElement('tfoot');
        table.appendChild(tfo);
      }
      for (var i=0; i<sortbottomrows.length; i++) {
        tfo.appendChild(sortbottomrows[i]);
      }
      delete sortbottomrows;
    }

    // work through each column and calculate its type
    headrow = table.tHead.rows[0].cells;
    for (var i=0; i<headrow.length; i++) {
      // manually override the type with a sorttable_type attribute
      if (!headrow[i].className.match(/\bsorttable_nosort\b/)) { // skip this col
        mtch = headrow[i].className.match(/\bsorttable_([a-z0-9]+)\b/);
        if (mtch) { override = mtch[1]; }
      if (mtch && typeof sorttable["sort_"+override] == 'function') {
        headrow[i].sorttable_sortfunction = sorttable["sort_"+override];
      } else {
        headrow[i].sorttable_sortfunction = sorttable.guessType(table,i);
      }
      // make it clickable to sort
      headrow[i].sorttable_columnindex = i;
      headrow[i].sorttable_tbody = table.tBodies[0];
      dean_addEvent(headrow[i],"click", sorttable.innerSortFunction = function(e) {

          if (this.className.search(/\bsorttable_sorted\b/) != -1) {
            // if we're already sorted by this column, just
            // reverse the table, which is quicker
            sorttable.reverse(this.sorttable_tbody);
            this.className = this.className.replace('sorttable_sorted',
                                                    'sorttable_sorted_reverse');
            this.removeChild(document.getElementById('sorttable_sortfwdind'));
            sortrevind = document.createElement('span');
            sortrevind.id = "sorttable_sortrevind";
            sortrevind.innerHTML = stIsIE ? '&nbsp<font face="webdings">5</font>' : '&nbsp;&#x25B4;';
            this.appendChild(sortrevind);
            return;
          }
          if (this.className.search(/\bsorttable_sorted_reverse\b/) != -1) {
            // if we're already sorted by this column in reverse, just
            // re-reverse the table, which is quicker
            sorttable.reverse(this.sorttable_tbody);
            this.className = this.className.replace('sorttable_sorted_reverse',
                                                    'sorttable_sorted');
            this.removeChild(document.getElementById('sorttable_sortrevind'));
            sortfwdind = document.createElement('span');
            sortfwdind.id = "sorttable_sortfwdind";
            sortfwdind.innerHTML = stIsIE ? '&nbsp<font face="webdings">6</font>' : '&nbsp;&#x25BE;';
            this.appendChild(sortfwdind);
            return;
          }

          // remove sorttable_sorted classes
          theadrow = this.parentNode;
          forEach(theadrow.childNodes, function(cell) {
            if (cell.nodeType == 1) { // an element
              cell.className = cell.className.replace('sorttable_sorted_reverse','');
              cell.className = cell.className.replace('sorttable_sorted','');
            }
          });
          sortfwdind = document.getElementById('sorttable_sortfwdind');
          if (sortfwdind) { sortfwdind.parentNode.removeChild(sortfwdind); }
          sortrevind = document.getElementById('sorttable_sortrevind');
          if (sortrevind) { sortrevind.parentNode.removeChild(sortrevind); }

          this.className += ' sorttable_sorted';
          sortfwdind = document.createElement('span');
          sortfwdind.id = "sorttable_sortfwdind";
          sortfwdind.innerHTML = stIsIE ? '&nbsp<font face="webdings">6</font>' : '&nbsp;&#x25BE;';
          this.appendChild(sortfwdind);

        // build an array to sort. This is a Schwartzian transform thing,
        // i.e., we "decorate" each row with the actual sort key,
        // sort based on the sort keys, and then put the rows back in order
        // which is a lot faster because you only do getInnerText once per row
        row_array = [];
        col = this.sorttable_columnindex;
        rows = this.sorttable_tbody.rows;
        for (var j=0; j<rows.length; j++) {
          row_array[row_array.length] = [sorttable.getInnerText(rows[j].cells[col]), rows[j]];
        }
        /* If you want a stable sort, uncomment the following line */
        //sorttable.shaker_sort(row_array, this.sorttable_sortfunction);
        /* and comment out this one */
        row_array.sort(this.sorttable_sortfunction);

        tb = this.sorttable_tbody;
        for (var j=0; j<row_array.length; j++) {
          tb.appendChild(row_array[j][1]);
        }

        delete row_array;
      });
    }
    }
  },

  guessType: function(table, column) {
    // guess the type of a column based on its first non-blank row
    sortfn = sorttable.sort_alpha;
    for (var i=0; i<table.tBodies[0].rows.length; i++) {
      text = sorttable.getInnerText(table.tBodies[0].rows[i].cells[column]);
      if (text != '') {
        if (text.match(/^-?[£$¤]?[\d,.]+%?$/)) {
          return sorttable.sort_numeric;
        }
        // check for a date: dd/mm/yyyy or dd/mm/yy
        // can have / or . or - as separator
        // can be mm/dd as well
        possdate = text.match(sorttable.DATE_RE)
        if (possdate) {
          // looks like a date
          first = parseInt(possdate[1]);
          second = parseInt(possdate[2]);
          if (first > 12) {
            // definitely dd/mm
            return sorttable.sort_ddmm;
          } else if (second > 12) {
            return sorttable.sort_mmdd;
          } else {
            // looks like a date, but we can't tell which, so assume
            // that it's dd/mm (English imperialism!) and keep looking
            sortfn = sorttable.sort_ddmm;
          }
        }
      }
    }
    return sortfn;
  },

  getInnerText: function(node) {
    // gets the text we want to use for sorting for a cell.
    // strips leading and trailing whitespace.
    // this is *not* a generic getInnerText function; it's special to sorttable.
    // for example, you can override the cell text with a customkey attribute.
    // it also gets .value for <input> fields.

    if (!node) return "";

    hasInputs = (typeof node.getElementsByTagName == 'function') &&
                 node.getElementsByTagName('input').length;

    if (node.getAttribute("sorttable_customkey") != null) {
      return node.getAttribute("sorttable_customkey");
    }
    else if (typeof node.textContent != 'undefined' && !hasInputs) {
      return node.textContent.replace(/^\s+|\s+$/g, '');
    }
    else if (typeof node.innerText != 'undefined' && !hasInputs) {
      return node.innerText.replace(/^\s+|\s+$/g, '');
    }
    else if (typeof node.text != 'undefined' && !hasInputs) {
      return node.text.replace(/^\s+|\s+$/g, '');
    }
    else {
      switch (node.nodeType) {
        case 3:
          if (node.nodeName.toLowerCase() == 'input') {
            return node.value.replace(/^\s+|\s+$/g, '');
          }
        case 4:
          return node.nodeValue.replace(/^\s+|\s+$/g, '');
          break;
        case 1:
        case 11:
          var innerText = '';
          for (var i = 0; i < node.childNodes.length; i++) {
            innerText += sorttable.getInnerText(node.childNodes[i]);
          }
          return innerText.replace(/^\s+|\s+$/g, '');
          break;
        default:
          return '';
      }
    }
  },

  reverse: function(tbody) {
    // reverse the rows in a tbody
    newrows = [];
    for (var i=0; i<tbody.rows.length; i++) {
      newrows[newrows.length] = tbody.rows[i];
    }
    for (var i=newrows.length-1; i>=0; i--) {
       tbody.appendChild(newrows[i]);
    }
    delete newrows;
  },

  /* sort functions
     each sort function takes two parameters, a and b
     you are comparing a[0] and b[0] */
  sort_numeric: function(a,b) {
    aa = parseFloat(a[0].replace(/[^0-9.-]/g,''));
    if (isNaN(aa)) aa = 0;
    bb = parseFloat(b[0].replace(/[^0-9.-]/g,''));
    if (isNaN(bb)) bb = 0;
    return aa-bb;
  },
  sort_alpha: function(a,b) {
    if (a[0]==b[0]) return 0;
    if (a[0]<b[0]) return -1;
    return 1;
  },
  sort_ddmm: function(a,b) {
    mtch = a[0].match(sorttable.DATE_RE);
    y = mtch[3]; m = mtch[2]; d = mtch[1];
    if (m.length == 1) m = '0'+m;
    if (d.length == 1) d = '0'+d;
    dt1 = y+m+d;
    mtch = b[0].match(sorttable.DATE_RE);
    y = mtch[3]; m = mtch[2]; d = mtch[1];
    if (m.length == 1) m = '0'+m;
    if (d.length == 1) d = '0'+d;
    dt2 = y+m+d;
    if (dt1==dt2) return 0;
    if (dt1<dt2) return -1;
    return 1;
  },
  sort_mmdd: function(a,b) {
    mtch = a[0].match(sorttable.DATE_RE);
    y = mtch[3]; d = mtch[2]; m = mtch[1];
    if (m.length == 1) m = '0'+m;
    if (d.length == 1) d = '0'+d;
    dt1 = y+m+d;
    mtch = b[0].match(sorttable.DATE_RE);
    y = mtch[3]; d = mtch[2]; m = mtch[1];
    if (m.length == 1) m = '0'+m;
    if (d.length == 1) d = '0'+d;
    dt2 = y+m+d;
    if (dt1==dt2) return 0;
    if (dt1<dt2) return -1;
    return 1;
  },

  shaker_sort: function(list, comp_func) {
    // A stable sort function to allow multi-level sorting of data
    // see: http://en.wikipedia.org/wiki/Cocktail_sort
    // thanks to Joseph Nahmias
    var b = 0;
    var t = list.length - 1;
    var swap = true;

    while(swap) {
        swap = false;
        for(var i = b; i < t; ++i) {
            if ( comp_func(list[i], list[i+1]) > 0 ) {
                var q = list[i]; list[i] = list[i+1]; list[i+1] = q;
                swap = true;
            }
        } // for
        t--;

        if (!swap) break;

        for(var i = t; i > b; --i) {
            if ( comp_func(list[i], list[i-1]) < 0 ) {
                var q = list[i]; list[i] = list[i-1]; list[i-1] = q;
                swap = true;
            }
        } // for
        b++;

    } // while(swap)
  }
}

/* ******************************************************************
   Supporting functions: bundled here to avoid depending on a library
   ****************************************************************** */

// Dean Edwards/Matthias Miller/John Resig

/* for Mozilla/Opera9 */
if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", sorttable.init, false);
}

/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
    document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
    var script = document.getElementById("__ie_onload");
    script.onreadystatechange = function() {
        if (this.readyState == "complete") {
            sorttable.init(); // call the onload handler
        }
    };
/*@end @*/

/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
    var _timer = setInterval(function() {
        if (/loaded|complete/.test(document.readyState)) {
            sorttable.init(); // call the onload handler
        }
    }, 10);
}

/* for other browsers */
window.onload = sorttable.init;

// written by Dean Edwards, 2005
// with input from Tino Zijdel, Matthias Miller, Diego Perini

// http://dean.edwards.name/weblog/2005/10/add-event/

function dean_addEvent(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else {
// assign each event handler a unique ID
if (!handler.$$guid) handler.$$guid = dean_addEvent.guid++;
// create a hash table of event types for the element
if (!element.events) element.events = {};
// create a hash table of event handlers for each element/event pair
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
// store the existing event handler (if there is one)
if (element["on" + type]) {
handlers[0] = element["on" + type];
}
}
// store the event handler in the hash table
handlers[handler.$$guid] = handler;
// assign a global event handler to do all the work
element["on" + type] = handleEvent;
}
};
// a counter used to create unique IDs
dean_addEvent.guid = 1;

function removeEvent(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else {
// delete the event handler from the hash table
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
}
};

function handleEvent(event) {
var returnValue = true;
// grab the event object (IE uses a global event object)
event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
// get a reference to the hash table of event handlers
var handlers = this.events[event.type];
// execute each event handler
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false) {
returnValue = false;
}
}
return returnValue;
};

function fixEvent(event) {
// add W3C standard event methods
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
};
fixEvent.preventDefault = function() {
this.returnValue = false;
};
fixEvent.stopPropagation = function() {
  this.cancelBubble = true;
}

// Dean's forEach: http://dean.edwards.name/base/forEach.js
/*
forEach, version 1.0
Copyright 2006, Dean Edwards
License: https://www.opensource.org/licenses/mit-license.php
*/

// array-like enumeration
if (!Array.forEach) { // mozilla already supports this
Array.forEach = function(array, block, context) {
for (var i = 0; i < array.length; i++) {
block.call(context, array[i], i, array);
}
};
}

// generic enumeration
Function.prototype.forEach = function(object, block, context) {
for (var key in object) {
if (typeof this.prototype[key] == "undefined") {
block.call(context, object[key], key, object);
}
}
};

// character enumeration
String.forEach = function(string, block, context) {
Array.forEach(string.split(""), function(chr, index) {
block.call(context, chr, index, string);
});
};

// globally resolve forEach enumeration
var forEach = function(object, block, context) {
if (object) {
var resolve = Object; // default
if (object instanceof Function) {
// functions have a "length" property
resolve = Function;
} else if (object.forEach instanceof Function) {
// the object implements a custom forEach method so use that
object.forEach(block, context);
return;
} else if (typeof object == "string") {
// the object is a string
resolve = String;
} else if (typeof object.length == "number") {
// the object is array-like
resolve = Array;
}
resolve.forEach(object, block, context);
}
};

« Last Edit: August 16, 2019, 10:49:13 AM by njtweb »

Offline Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,943
  • Gender: Male
  • Black cat rulz!
    • Antes on GitHub
    • merta on LinkedIn
    • @XinYenFon on Twitter
    • WoWSnips
Re: Code Pen Help
« Reply #5 on: August 16, 2019, 10:50:09 AM »
Well first is first, your execution is very poor... You are trying to load (override) head/body elements which neither TP nor SMF can do it. So you need to change the execution.

The file (JS) needs to be loaded either in php article format or via index.template. Same applies to styling.

Just go ahead and paste the following code into PHP Article format;
Code: [Select]
echo '<style>
/*
Generic Styling, for Desktops/Laptops
*/

body {
  font-family:Arial;
}

table {
  width: 100%;
  border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
  background: #E1E1E1(#EEEEEE, 70%);
}
th {
  background: #0A3165;
  color: white;
  font-weight: bold;
}
th:after {
  content:"\2605";
}

th:after {
    margin-left: 10px;
}

td, th {
  padding: 6px;
  border: 1px solid #fff;
  text-align: left;
}

/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

   /* Force table to not be like tables anymore */
   table, thead, tbody, th, td, tr {
      display: block;
   }
   
   /* Hide table headers (but not display: none;, for accessibility) */
   thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
   }
   
   tr { border: 1px solid #fff; }
   
   td {
      /* Behave  like a "row" */
      border: none;
      border-bottom: 1px solid #fff;
      position: relative;
      padding-left: 50%;
   }
   
   td:before {
      /* Now like a table header */
      position: absolute;
      /* Top/left values mimic padding */
      top: 6px;
      left: 6px;
      width: 45%;
      padding-right: 10px;
      white-space: nowrap;
   }
}

td:first-of-type {
  font-weight:bold;
}
</style>
<script type="text/javascript" src="https://www.youthhockeyinfo.com/shshlscript.js"></script>
<h3>
   2019-2010 SHSHL Standings
</h3>
<table class="sortable">
   <thead>
      <tr>
         <th>
            TEAM
         </th>
         <th>
            PTS
         </th>
         <th>
            GP
         </th>
         <th>
            W
         </th>
         <th>
            L
         </th>
         <th>
            T
         </th>
         <th>
            GF
         </th>
         <th>
            GA
         </th>
         <th>
            DIVISION
         </th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>
            CB East
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0-0-0
         </td>
      </tr>
      <tr>
         <td>
            CB South
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0-0-0
         </td>
      </tr>
      <tr>
         <td>
            CB West
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0-0-0
         </td>
      </tr>
      <tr>
         <td>
            North Penn
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0-0-0
         </td>
      </tr>
      <tr>
         <td>
            Souderton
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0-0-0
         </td>
      </tr>
      <tr>
         <td>
            Pennridge
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0
         </td>
         <td>
            0-0-0
         </td>
      </tr>
   </tbody>
</table>';


I personally won't encourage you to do this all inline things, this is messy and easy to break things... I strongly suggest you to load JS file directly from SMF and add styling file to tp-specific file with proper class/ID so it will work only if you are creating one of those files.
You can support me directly via Patreon

In Catnip We Trust.
The solution is Catnip!
Vote for Catnip!

Current Project(s): [ WoWSnips ]
Past Project(s): [ ezPortal ] # [ Lunarfall ] # [ RDD (HTML5) ]

Offline njtweb

  • Sr. Member
  • ****
  • Posts: 917
Re: Code Pen Help
« Reply #6 on: August 16, 2019, 10:55:01 AM »
Thank you Antes, that works great!

Perfectly!

Offline njtweb

  • Sr. Member
  • ****
  • Posts: 917
Re: Code Pen Help
« Reply #7 on: August 16, 2019, 11:30:32 AM »
Ok, sorry, it works perfectly on a computer.

On a phone though, the field titles are gone and the columns are no longer sortable.

php article
Code: [Select]
https://www.youthhockeyinfo.com/index.php?page=44

Offline Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,943
  • Gender: Male
  • Black cat rulz!
    • Antes on GitHub
    • merta on LinkedIn
    • @XinYenFon on Twitter
    • WoWSnips
Re: Code Pen Help
« Reply #8 on: August 16, 2019, 01:01:10 PM »
Your CSS hiding the table-headers in smaller device modes

Code: [Select]
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

Remove this part and table-headers will return back + sort option.
You can support me directly via Patreon

In Catnip We Trust.
The solution is Catnip!
Vote for Catnip!

Current Project(s): [ WoWSnips ]
Past Project(s): [ ezPortal ] # [ Lunarfall ] # [ RDD (HTML5) ]

Offline njtweb

  • Sr. Member
  • ****
  • Posts: 917
Re: Code Pen Help
« Reply #9 on: August 16, 2019, 01:29:28 PM »
Got it, thank you.