Develop Reference

How to replace a text from a dynamic table into a picture

On my site I have a scoreboard that receives it's info from a other website, so the content is dynamic.
I am trying to replace parts of the content of a table with pictures. So that instead of the 3 letterword of a club the logo appears. But my knowledge of CSS an Jquery is not large enough.
Can someone help my with the CSS or other html language parts?
This is the content that generates the table:
<style>
table,
td,
th {
border: 1px solid #ddd;
text-align: center;
font-size: 15px;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 1px;
}
th {
background-color: #c71b1b
}
th,
td1 {
padding: 1px;
}
th {
background-color: #c71b1b
}
</style>
<div style="overflow-x:auto;">
<table cellspacing="20">
<tbody>
<tr>
<th colspan="5">
<h1>MANNEN</h1>
</th>
</tr>
<tr>
<td width=14%>DATUM</td>
<td width=13%>UUR</td>
<td width=12%>THUIS</td>
<td width=12%>UIT</td>
<td width=49%>SCORE</td>
</tr>
</tbody>
</table>
<table cellspacing="20">
<tbody>
<tr>
<div class="pb-dynamic" id="block-main-men">
<p><img src="//www.pointbench.com/pointbench/img/pb-loading-1.gif" /></p>
</div>
</tr>
</tbody>
</table>
<table cellspacing="20">
<tbody>
<tr>
<th colspan="5">
<h1>VROUWEN</h1>
</th>
</tr>
<tr>
<td width=14%>DATUM</td>
<td width=13%>UUR</td>
<td width=12%>THUIS</td>
<td width=12%>UIT</td>
<td width=49%>SCORE</td>
</tr>
</tbody>
</table>
<table cellspacing="20">
<tbody>
<tr>
<div class="pb-dynamic" id="block-main-women">
<p><img src="//www.pointbench.com/pointbench/img/pb-loading-1.gif" /></p>
</div>
</tr>
</tbody>
</table>
</div>
<!-- Include JS script to do the job, block definition(s) and main function call -->
<script src="//stats.pointbench.com/pointbench/js/pb-update-ex.js" type="text/javascript"></script>
<script type="text/javascript">
<!--//--><![CDATA[// ><!--
blockdefs = [{
leagueid: 'bel/29/2022',
blocktype: 'team-games',
target: 'block-main-men',
teamid: '413'
},
{
leagueid: 'bel/30/2022',
blocktype: 'team-games',
target: 'block-main-women',
teamid: '207'
}
];
PBShowBlocks(blockdefs);
//--><!]]>
</script>
<!-- End -->
</div>
</div>

Your table stucture doesn't follow the expected pattern. Maybe the browser is also rewriting the tags to match the correct hierarchy, what "breaks" the selector logic inside the image replacer function.
Try:
<table cellspacing="20">
<tbody>
<tr>
<td>
<div class="pb-dynamic" id="block-main-women">
<p><img src="//www.pointbench.com/pointbench/img/pb-loading-1.gif" /></p>
</div>
</td>
</tr>
</tbody>
</table>

EDIT: I see how the code is supposed to work now. See edited code below.
You're not including the src tags correctly. In every script and image tag, you included something like "//google.com". That's not a valid URL. Usually, if you're fetching from another URL, you put something like src="https://google.com/"
The JS file you linked has an error in it. You can see it if you open the console. It's not using the proper path for the css file. It's saying the path for the css file pb-blocks.css is at stats.pointbench.com/css/pb-blocks.css but I'd bet it's actually at, following the same path structure as the JS file, stats.pointbench.com/pointbench/css/pb-blocks.css https://stats.pointbench.com/pointbench/css/pb-blocks.css
If you have access to that server, you can fix it there, but if not, I'll put a fix at the end.
Okay since the JS file is broken, just go to the url for the JS file and copy and paste the content and put it in your public/assets route.
Ctrl-F and find every instance of document.getElementsByTagName("head")[0].appendChild(fileref); On the line above it, you'll see fileref.setAttribute("href", gUpdateDomain + "pointbench/css/pb-blocks.css"); Replace it with this line: fileref.setAttribute("href", "https://stats.pointbench.com/pointbench/css/pb-blocks.css");
There should be two instances of this.
Also, your table structure is invalid. Below is the proper table structure
<table cellspacing="20">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
Overall, your code just needs a little touch up to make it look pretty. I removed the unnecessary elements and the closing tags with no open tags. See code below:
<style>
table, td, th {
border: 1px solid #ddd;
text-align: center;
font-size: 15px;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 1px;
}
th{
background-color: #c71b1b
}
th, td1 {
padding: 1px;
}
th{
background-color: #c71b1b
}
</style>
<div style="overflow-x:auto;">
<table cellspacing="20">
<thead>
<tr colspan="5">
<th><h1>MANNEN</h1></th>
</tr>
</thead>
<tbody>
<tr>
<td width=14%>DATUM</td>
<td width=13%>UUR</td>
<td width=12%>THUIS</td>
<td width=12%>UIT</td>
<td width=49%>SCORE</td>
</tr>
<tr>
<div class="pb-dynamic" id="block-main-men">
<p><img src="https://pointbench.com/pointbench/img/pb-loading-1.gif" /></p>
</div>
</tr>
</tbody>
</table>
<table cellspacing="20">
<thead colspan="5">
<th colspan="5">
<tr><h1>VROUWEN</h1></tr>
</th>
</thead>
<tbody>
<tr>
<td width=14%>DATUM</td>
<td width=13%>UUR</td>
<td width=12%>THUIS</td>
<td width=12%>UIT</td>
<td width=49%>SCORE</td>
</tr>
<tr>
<div class="pb-dynamic" id="block-main-women">
<p><img src="https://pointbench.com/pointbench/img/pb-loading-1.gif" /></p>
</div>
</tr>
</tbody>
</table>
</div>
<!-- <script src="script.js" type="text/javascript"></script> -->
<script src="https://stats.pointbench.com/pointbench/js/pb-update-ex.js" type="text/javascript"></script>
blockdefs =
[
{
leagueid: 'bel/29/2022',
blocktype: 'team-games',
target: 'block-main-men',
teamid: '413'
},
{
leagueid: 'bel/30/2022',
blocktype: 'team-games',
target: 'block-main-women',
teamid: '207'
}
];
PBShowBlocks( blockdefs );
</script>
As for your question, replacing team initials with a team logo is possible and doable. But to do this, you need to have the team logos stored somewhere, or fetch them from a server using API. Assuming there's only a couple of team logos, you can easily download them all and store them, then replace the initials with a logo.
For this example I'm gonna use a URL of a logo from the internet.
Say we have a table like the one you have, I don't know which cell in your table is a team name. But let's assume it's the 2nd and 3rd cell in every row.
I'd write some code like this:
<table cellspacing="20">
<thead>
<th colspan="5">
<tr><h1>MANNEN</h1></tr>
</th>
</thead>
<tbody id="mensteam">
<tr>
<td width=14%>DATUM</td>
<td width=13%>RM</td>
<td width=12%>FCB</td>
<td width=12%>UIT</td>
<td width=49%>SCORE</td>
</tr>
</tbody>
</table>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
function setLogo(teaminitials) {
switch(teaminitials)
{
case "RM":
var src = "https://www.freepnglogos.com/uploads/real-madrid-logo-png/real-madrid-logo-large-images-3.png";
break;
case "FCB":
var src = "https://pngimg.com/uploads/poop/poop_PNG52.png";
break;
}
return src;
}
$(document).ready(function(){
const menTable = $('#mensteam');
$('#mensteam tr').each(function(){
//first team
var teamName = $(this).children('td:nth-child(2)');
var logo = setLogo(teamName.text());
teamName.text("");
teamName.prepend('<img style="max-width: 10%;" src="' + logo + '" >');
//second team
var teamName2 = $(this).children('td:nth-child(3)');
var logo2 = setLogo(teamName2.text());
teamName2.text("");
teamName2.prepend('<img style="max-width: 10%;" src="' + logo2 + '" >');
});
});
</script>
Before
After

AngularJS increment id value of items in nested repeater

I have the following code in which there are questions and choices and I need the choices to have incremented id values.
However, I need the incrementation to restart each time there is a new question. Most of the examples I've found so far increment for all (e.g. using $index). But I've looked at several articles here on SO such as this one and not getting the results that I need:
What I need is this:
Question 1
Choice10 (the first numerical value is the Id of the question,
Choice11 the second numerical value should be the incremented id)
Choice12
Question 2
Choice20
Choice21
Choice22
Choice23
The html code looks like this:
<table summary="" style="border: none; width: 100%; background: none;" id="rptQuestions">
<tbody>
<tr style="width: 100%;" ng-repeat-start="q in questions track by $index">
...Question details here...
</tr>
<tr>
<td class="Bold_10" colspan="4">
<table summary="" style="border: none; background: none">
<tbody>
<tr ng-repeat-start="c in choices" ng-if="c.QuestionId==q.QuestionId">
<td style="width: 2em;">X</td>
<td>
<input type="text" id="inLetter{{c.QuestionId}}{{ value?? }}" ng-model="c.Letter" style="width: 2em;" /></td>
<td style="text-align: left;">
<input type="text" id="inChoice{{c.QuestionId}}{{ value?? }}" ng-model="c.Choice" style="width: 60em;" /> <input type="hidden" id="inChoiceId{{c.QuestionId}}{{ value?? }}" ng-value="{{c.Id}}" /></td>
</tr>
<tr ng-repeat-end ng-if="c.QuestionId==null"><td colspan="3"></td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

<table summary="" style="border: none; width: 100%; background: none;" id="rptQuestions">
<tbody>
<tr style="width: 100%;" ng-repeat-start="q in questions">
...Question details here...
</tr>
<tr ng-repeat-end="">
<td class="Bold_10" colspan="4">
<table summary="" style="border: none; background: none">
<tbody>
<tr ng-repeat-start="c in choices" ng-if="c.QuestionId==q.QuestionId">
<td style="width: 2em;">X</td>
<td>
<input type="text" id="inLetter{{$parent.$index}}{{$index}}" ng-model="c.Letter" style="width: 2em;" /></td>
<td style="text-align: left;">
<input type="text" id="inChoice{{$parent.$index}}{{$index}}" ng-model="c.Choice" style="width: 60em;" /> <input type="hidden" id="inChoiceId{{$parent.$index}}{{$index}}" ng-value="{{c.Id}}" /></td>
</tr>
<tr ng-repeat-end ng-if="c.QuestionId==null"><td colspan="3"></td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Each ng-repeat has its own index and you can access the index from the nested loop. However be aware that with your implementation the id inChoice111 might be misleading.
Question 1.11 == Question 11.1

Edit specific div's using AngularJS

How can I edit specific div's using Angular? I have a upset of div's at my page, containing tablerows with data. When I click on a edit-button on a specific div, I want that to bed editable.
How can I bind the click event to that particular div? I have done something like this now:
<div ng-show="summary.abbData.service_type == 'NaoLan'" class="col-md-6" style="background-color: #ffffff; width: 325px; margin-left: 15px;">
<h5 class="bg-primary rmpad15" style="margin-top: 1px; padding: 5px;">{{summary.abbData.service_type}}<button type="button" ng-click="editAbb(customer.id)" class="btn btn-default btn-xs" style="float: right; margin-top: -3px;"><span class="glyphicon glyphicon-pencil"></span></button></h5>
<table class="table table-condensed pad1">
<tbody>
<tr>
<td><strong>Hastighet</strong></td><td>{{summary.abbData.service}}</td>
</tr>
<tr>
<td><strong>Läghenhetsnr</strong></td><td>{{summary.abbData.apartment}}</td>
</tr>
<tr>
<td><strong>Månadsavgift</strong></td><td>{{summary.abbData.month_fee}}kr</td>
</tr>
<tr>
<td><strong>Anslutningsavgift</strong></td><td>{{summary.abbData.conn_fee}}kr</td>
</tr>
<tr>
<td><strong>Bindningstid</strong></td><td>{{summary.abbData.fixation}}mån</td>
</tr>
<tr>
<td><strong>Registreringsdatum</strong></td><td>{{summary.abbData.reg_date}}</td>
</tr>
</tbody>
</table>
</div>
As you can see, I have ng-click, but I don't know how to bind the div to the click event. ANyone?

please see here jsbin.com/zataro/2/edit?html,output
<tr>
<td><strong>Läghenhetsnr</strong>
</td>
<td>
<span ng-hide="edit.apartment">{{summary.abbData.apartment}}</span>
<input ng-model="summary.abbData.apartment" type="text" ng-show="edit.apartment" />
</td>
<td>
<button ng-click="edit.apartment=!edit.apartment">
<span ng-show="!edit.apartment">Edit</span>
<span ng-show="edit.apartment">Save</span>
</button>
</tr>

button not work in IE11

Problem:
http://jsfiddle.net/7ZDbB/1/
If I click the first and second row's deny button,
the third row's deny button can't click just in IE 11.
I tested on IE8、IE9、IE10、Firefox and Chrome, and not this problem.
This is source code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#main table{ border-collapse:collapse; width:100%; }
#main td{ border:1px solid #EEA; padding:4px 6px; }
#main table tr.excepted td{ background:#F99; }
form table {background:#FEFEF1}
</style>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body >
<div id="base">
<div id="main">
<form accept-charset="UTF-8" action="" method="post">
<input id="product_ids" name="product_ids" type="hidden">
<table>
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>product info</th>
</tr>
</thead>
<tbody>
<tr id="a_tr1_d_1084">
<td colspan="2">
<input type="button" value="allow" id="adAllowd_1084" style="display: none;">
<input type="button" value="deny" id="adExceptd_1084" onclick="onDenyBtnClicked('d_1084')">
</td>
<td>
<table>
<tbody>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
</tbody>
<tbody>
<tr>
<td>subheader1</td>
<td>subheader2</td>
<td rowspan="2">
other info
</td>
</tr>
<tr>
<td colspan="2">
image
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>product info</th>
</tr>
</thead>
<tbody>
<tr id="a_tr1_d_1085">
<td colspan="2">
<input type="button" value="allow" id="adAllowd_1085" style="display: none;">
<input type="button" value="deny" id="adExceptd_1085" onclick="onDenyBtnClicked('d_1085')">
</td>
<td>
<table>
<tbody>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
</tbody>
<tbody>
<tr>
<td>subheader1</td>
<td>subheader2</td>
<td rowspan="2">
other info
</td>
</tr>
<tr>
<td colspan="2">
image
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>product info</th>
</tr>
</thead>
<tbody>
<tr id="a_tr1_d_1090">
<td colspan="2">
<input type="button" value="allow" id="adAllowd_1090" style="display: none;">
<input type="button" value="deny" id="adExceptd_1090" onclick="onDenyBtnClicked('d_1090')">
</td>
<td>
<table>
<tbody>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
</tbody>
<tbody>
<tr>
<td>subheader1</td>
<td>subheader2</td>
<td rowspan="2">
other info
</td>
</tr>
<tr>
<td colspan="2">
image
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div id="allowAdSubmitButton"><input name="commit" type="submit" value="submit button"></div>
</form>
<script type="text/javascript">
var $j = jQuery;
function onDenyBtnClicked(adId) {
$j('#a_tr1_'+adId).addClass('excepted');
$j("#adAllow" + adId).show();
$j("#adExcept" + adId).hide();
$j("#product_ids").val(adId);
}
// -->
</script>
</div>
</div>
</body>
</html>
I solved this problem by adjust javascript code order,like this
$j('#a_tr1_'+adId).addClass('excepted');
$j("#adAllow" + adId).show();
$j("#adExcept" + adId).hide();
↓
$j("#adAllow" + adId).show();
$j("#adExcept" + adId).hide();
$j('#a_tr1_'+adId).addClass('excepted');
But I really don't know the reason, because I change any of follow 11 points , the problem can be solved.
delete table border-collapse style
#main table{ border-collapse:collapse; width:100%; }
delete td border style
#main td{ border:1px solid #EEA; padding:4px 6px; }
delete td background style
#main table tr.excepted td{ background:#F99; }
delete table backgroud style
form table {background:#FEFEF1}
delete submit button
delete javascript code that add 'excepted' css to tr
$j('#a_tr1_'+adId).addClass('excepted');
delete javascript code that show allow button and hide deny button
$j("#adAllow" + adId).show();
$j("#adExcept" + adId).hide();
delete javascript code that set value to 'product_ids'
$j("#product_ids").val(adId);
delete first colspan attribute on per row
delete first rowspan attribute on per row
delete second colspan attribute on per row
I'm quite puzzled and really don't get what is causing the problem. I'm hoping someone can help me, thank you.

This is an odd issue for sure. It appears to be a bad painting issue in IE 11 that prevents interacting with the page.
Take notice that after you click 2 deny buttons (order does not matter) the hover states of all the allow/deny buttons go away. Then click down and drag off of the submit button, and viola - all of the buttons (and text) are now interactive again.
Applying some best-practices to your code coincidentally fixes this issue as well. If you are using jQuery - you should not be using inline onclick attributes. A main goal of jQuery is to separate behavior from content. A better way to bind your click events would be to add a class to your deny and allow buttons then bind the click to them or to their closest static parent (in case your rows are being dynamically added). Also, since you're already toggling a class on the nearest parent, you may as well use that class to show/hide the correct button.
New JS:
$(function() {
$('#main').on('click', '.button-deny', function() {
$(this).closest('tr').addClass('excepted');
$("#product_ids").val($(this).data('ad-id'));
});
});
Additional CSS:
.excepted .button-deny,
.button-allow { display:none; }
.excepted .button-allow { display:inline-block; }
Relevant HTML Update:
<input type="button" value="allow" class="button-allow" data-ad-id="d_1084" />
<input type="button" value="deny" class="button-deny" data-ad-id="d_1084" />
And here's an updated fiddle - http://jsfiddle.net/7ZDbB/6/
If I can pinpoint the specific painting issue that is causing this issue, I'll update this answer.

Javascript code is not working in wordpress site

Hi i have created a javascript code that works very well.But when i have copy that code on wordpress pages then that code stops working.I don't know why it stops working.
I am new to wordpress but i have good experience in javacript.Please tell me why code is not working on wordpress pages?
Here is code:
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>How Much $$$ Are You Losing</title>
</head>
<script type="text/javascript">// <![CDATA[
function doCalc() {}
function doCalc1() {}
function doCalc2() {}
function quanBlur(quan) {
var result = quan / document.form1.newOrdQuan.value * 100;
document.form1.pctmissed.value = result.toFixed(0) + '%';
doCalc();
}
function pctBlur(pct) {
var pct1 = +pct.replace(/\D/g, '');
//document.form1.pctmissed.value=pct1.toFixed(0)+'%';
var result = document.form1.newOrdQuan.value * pct1 / 100;
document.form1.quanmissed.value = result.toFixed(0);
doCalc();
}
window.onload = function () {
document.getElementById("prevOrdQuan").focus();
}
function showstep2() {
document.getElementById('step2').style.visibility = 'visible'
document.getElementById('newOrdQuan').focus();
}
function showstep3() {
document.getElementById('step3').style.visibility = 'visible';
document.getElementById('takeOutAmt').focus();
}
function showstep4() {
document.getElementById('step4').style.visibility = 'visible';
document.getElementById('compsPerWeek').focus();
}
function showstep5() {
// alert('test');
document.getElementById('step5').style.visibility = 'visible';
document.getElementsById('avgProfitPerOrder').focus(); // 'avgProfitPerOrder').focus();
}
function showstep6() {
// alert('test');
document.getElementById('Step6').style.visibility = 'visible';
//document.getElementsById('avgProfitPerOrder').focus(); // 'avgProfitPerOrder').focus();
}
function showstep9() {
document.getElementById('step9').style.visibility = 'visible';
document.getElementById('avgProfitPerOrder').focus();
}
// ]]></script>
<table style="width: 270px; border: 2px navy solid;">
<tbody>
<tr>
<td><form name="form1">
<table style="width: 100%;" align="left">
<tbody>
<tr>
<td>How many TakeOut Orders do You do each week?</td>
<td><input tabindex="1" type="text" name="prevOrdQuan" id="prevOrdQuan" size="6" value="7" onblur="doCalc1(); showstep2();" /></td>
</tr>
</tbody>
</table>
<table id="step2" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How many NEW TakeOut Orders do You expect each week? (15% Expected)</td>
<td><input tabindex="2" type="text" name="newOrdQuan" id="newOrdQuan" size="6" value="7" onblur="doCalc(); showstep3();" /></td>
</tr>
</tbody>
</table>
<table id="step3" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How Much Is Your Average Takeout Order?</td>
<td>
<input tabindex="3" type="text" name="takeOutAmt" id="takeOutAmt" size="6" value="20" onblur="doCalc2(); showstep4();" /></td>
</tr>
</tbody>
</table>
<table id="step4" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How Many Times a Week do You Comp an Order? (5% expected)</td>
<td><input tabindex="4" type="text" name="compsPerWeek" id="compsPerWeek" size="6" value="1" onblur="doCalc(); showstep9();" /></td>
</tr>
</tbody>
</table>
<table id="step9" style="width: 100%; visibility: hidden; color: green;" align="left">
<tbody>
<tr>
<td>What's Your Average Profit Per Order? (30% Expected)</td>
<td>
<input tabindex="4" type="text" name="avgProfitPerOrder" id="avgProfitPerOrder" size="6" value="6.00" onblur="doCalc();showstep6();" /></td>
</tr>
</tbody>
</table>
<td><input type="text" tabindex="5" name="avgProfitPerOrder" id="avgProfitPerOrder"
<table id="Step6" style="width: 100%; visibility: hidden; color: green;" align="left">
<tbody>
<tr>
<td class="style1" height="7"></td>
<td class="style1" height="7"></td>
</tr>
<tr>
<td style="color: red;">This is how much money ($$) you are losing each month from TakeOut Orders you Didn't Get...</td>
<td id="monLostRev" style="color: red; font-weight: 900;" align="right">640</td>
</tr>
<tr>
<td style="font-weight: bold;">This is how much PROFIT ($$) you can gain each month with our system</td>
<td id="monrecoveredrev" style="font-weight: 900; text-decoration: underline;" align="right">192.00</td>
</tr>
<tr>
<td>Monthly cost of our system</td>
<td id="montextcost" align="right">-47</td>
</tr>
<tr>
<td>Monthly cost of Credit Card Fees</td>
<td id="monCcCost" align="right">19.20</td>
</tr>
<tr>
<td>Monthly Income Increase ($$) you get using our system</td>
<td id="monroi" style="font-weight: 900; text-decoration: underline;" align="right">125</td>
</tr>
</tbody>
</table>
</form></td>
</tr>
</tbody>
</table>
This code only create problem on wordpress pages.

You can't add the Javascript directly to the WordPress editor page, if that's what you mean by copying the code on the WordPress pages. You have to add it to the single.php page file, which you can access through Appearance-->Editor