TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome to TinyPortal. Please login or sign up.

March 29, 2024, 06:07:31 AM

Login with username, password and session length
Members
Stats
  • Total Posts: 195,106
  • Total Topics: 21,213
  • Online today: 358
  • Online ever: 3,540 (September 03, 2022, 01:38:54 AM)
Users Online
  • Users: 1
  • Guests: 258
  • Total: 259
  • lurkalot

PHP Article Question

Started by jernatety, August 15, 2019, 05:50:45 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

jernatety

I will try and be as descriptive as possible and hopefully I make sense.

Lots of independent sports websites keep track of pro sports stats by scraping the data from other sites which in turn updates statistical data on their own sites automatically when updates are made.

I would like to do the same with php articles on my site for varsity ice hockey. This is the main site where all of the league stats are managed. https://www.shshl.org/varsitystandings

Is there any way for me to code a php article with their league stats so when they update, their stats automatically update on my site?

Thank you

lurkalot

Unfortunately this is something I'm no familiar with, not having tried it myself.  I'm guessing there's a wealth of information in a google search regarding this. 

Providing you have the necessary scripts set up I can't see why you couldn't run it in an article, as you would with any html, php block

I just wouldn't know how to implement this particular scenario. So in the style of Dragons Den, I'm out.

@rjen

Don't know how to 'scrape' date from a website that does not facilitate it.

Only thing I know you can do is put the site in an Iframe in a block or article on your site...

Example in a HTML block:
<iframe frameborder="0" src="https://www.shshl.org/varsitystandings" style="width: 100%; height: 700px;"></iframe>
Running Latest TP on SMF2.1 at: www.fjr-club.nl

jernatety

@Mick - I don't have the slightest idea either. I just know there's a zillion different sports sites, (small like mine) that are specific to NFL football, NHL hockey etc. who are scraping real time stats data from sites like ESPN to populate their own stats pages. It allows them to basically create the pages on their own site and then forget about having to do any updates. Because when ESPN updates their data that data is automatically updated on the smaller sites pages.

@rjen, thank you for the suggestion but that won't work because of the scroll bar.

Thanks for replying.

jernatety

I came up with another idea. Make my own tables to track stats in an HTML article instead. Works great. It's responsive and sortable. Only problem is when I run through FB debugger and Twitter validator both pick up all of the CSS.

My question here is, how do you guys do HTML articles when you have to use CSS. Right now mine is like this. But I've also tried taking the CSS out of the HTML and putting it at the bottom in the field where it says head. But that strips all of the CSS.

<style>
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;
}

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 src='shshlscript.js'></script>
<img src="/images/shshl_cont.png" alt="2019 SHSHL Varsity Continental Division Standings" width="557" height="226" />
<h3>
2019 SHSHL Varsity Standings - Continental Division
</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>

jernatety

After screwing around over and over and over I got it to work but this is some really ugly formatting to make it work. How is this even working? Validates in twitter and FB debuggers too. LOL


<h3>
2019 SHSHL Varsity Standings - Continental Division
</h3>
<img src="/images/shshl_cont.png" alt="2019 SHSHL Varsity Continental Division Standings" width="557" height="226" /><br />

<style>
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;
}

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 src='shshlscript.js'></script>
<strong>*Tap or click on "PTS" to reorder by 1st place. By default teams are in alphabetical order.</strong><br />
<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><p><a href="https://www.youthhockeyinfo.com/index.php?board=93.0" target="_blank"><img src="/images/cbeasticon.jpg" title="CB East Patriots 2019 SHSHL Varsity Standings" style="vertical-align:middle" /> CB East</a></p></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><p><a href="https://www.youthhockeyinfo.com/index.php?board=94.0" target="_blank"><img src="/images/cbsouthicon.jpg" title="CB South Titans 2019 SHSHL Varsity Standings" style="vertical-align:middle" /> CB South</a></p></td>
<td>1</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><p><a href="https://www.youthhockeyinfo.com/index.php?board=95.0" target="_blank"><img src="/images/cbwesticon.jpg" title="CB West Bucks 2019 SHSHL Varsity Standings" style="vertical-align:middle" /> CB West</a></p></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><p><a href="https://www.youthhockeyinfo.com/index.php?board=106.0" target="_blank"><img src="/images/northpennicon.jpg" title="North Penn Knights 2019 SHSHL Varsity Standings" style="vertical-align:middle" /> North Penn</a></p></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><p><a href="https://www.youthhockeyinfo.com/index.php?board=107.0" target="_blank"><img src="/images/pennridgeicon.jpg" title="Pennridge Rams 2019 SHSHL Varsity Standings" style="vertical-align:middle" /> Pennridge</a></p></td>
<td>5</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><p><a href="https://www.youthhockeyinfo.com/index.php?board=110.0" target="_blank"><img src="/images/soudertonicon.jpg" title="Souderton Indians 2019 SHSHL Varsity Standings" style="vertical-align:middle" /> Souderton</a></p></td>
<td>2</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>

@rjen

I have inserted an extra section into Index.css for the css I need in articles. The best thing is that you can use it in all articles and blocks...

In 2.0 version of tp we plan to introduce an extra css file specifically for this...
Running Latest TP on SMF2.1 at: www.fjr-club.nl

jernatety

Quote from: @rjen on August 16, 2019, 07:43:45 PM
I have inserted an extra section into Index.css for the css I need in articles. The best thing is that you can use it in all articles and blocks...

In 2.0 version of tp we plan to introduce an extra css file specifically for this...

Hi rjen, is this something I can do now? And when you say you added an extra section. Does that mean any CSS I intend on using in Articles I can just add there?

Thank you

@rjen

Yes, you can add additional rules in your index.css and they will be available everyweher in the forum, including all articles and blocks. To keep it 'clean' I have added this at the top of my css between comments so I can easily identify my custom css...

Best practice is to make sure you use unique class names that are not used in SMF to make sure you do not accidentally change any standard SMF styles.

Example below..


/* Custom Styles.
------------------------------------------------------- */

/* AW en dan nu de specificaties tabel */
table.specificaties {
empty-cells: show;
width: 100%;
}
table.specificaties, .specificaties tr, .specificaties td  {
border: 0px;
border-spacing: 0px;
padding: 2px;
text-align: left;
vertical-align: top;
}
.specificaties tr:nth-of-type(odd) {
background: none;
}
.specificaties tr:nth-of-type(even) {
background: #e3e3e3;
}
.specificaties tr.titel {
background: #538ed5;
}
.specificaties tr.titel td {
color: #ffffff;
}
/* AW end customstyles, standard css starts here */

/* Styles for the general looks for the Curve theme.
------------------------------------------------------- */

/* Normal, standard links. */
a:link, a:visited
{
color: #346;
text-decoration: none;
Running Latest TP on SMF2.1 at: www.fjr-club.nl

jernatety