[trvytrvParticipant]

We are using X for our church and we are trying to utilize Church Online.

They have a countdown that you can put in the menu, the code is as follows:

<style type=”text/css”>
#churchonline_counter { overflow: auto; width: 200px; padding: 10px; display: none; }
#churchonline_counter .description, #churchonline_counter .time li .label { font-size: 0.8em; }
#churchonline_counter .time { list-style: none; padding: 0; margin: 10px 0 0 0; }
#churchonline_counter .time li { float: left; padding: 0 10px; text-align: center; }
#churchonline_counter .time li:first-child { padding-left: 0; }
#churchonline_counter .time li span { font-size: 1.2em; }
#churchonline_counter .live { display: none; font-weight: bold; }
</style>
<script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script type=”text/javascript”>
jQuery(function() {
var days, goLive, hours, intervalId, minutes, seconds;

// Your churchonline.org url
var churchUrl = “http://centerpointcc.churchonline.org”

goLive = function() {
$(“#churchonline_counter .time”).hide();
$(“#churchonline_counter .live”).show();
};
loadCountdown = function(data){
var seconds_till;
$(“#churchonline_counter”).show();
if (data.response.item.isLive) {
return goLive();
} else {
// Parse ISO 8601 date string
date = data.response.item.eventStartTime.match(/^(\d{4})-0?(\d+)-0?(\d+)[T ]0?(\d+):0?(\d+):0?(\d+)Z$/)
dateString = date[2] + “/” + date[3] + “/” + date[1] + ” ” + date[4] + “:” + date[5] + “:” + date[6] + ” +0000″
seconds_till = ((new Date(dateString)) – (new Date())) / 1000;
days = Math.floor(seconds_till / 86400);
hours = Math.floor((seconds_till % 86400) / 3600);
minutes = Math.floor((seconds_till % 3600) / 60);
seconds = Math.floor(seconds_till % 60);
return intervalId = setInterval(function() {
if (–seconds < 0) {
seconds = 59;
if (–minutes < 0) {
minutes = 59;
if (–hours < 0) {
hours = 23;
if (–days < 0) {
days = 0;
}
}
}
}
$(“#churchonline_counter .days”).html((days.toString().length < 2) ? “0” + days : days);
$(“#churchonline_counter .hours”).html((hours.toString().length < 2 ? “0” + hours : hours));
$(“#churchonline_counter .minutes”).html((minutes.toString().length < 2 ? “0” + minutes : minutes));
$(“#churchonline_counter .seconds”).html((seconds.toString().length < 2 ? “0” + seconds : seconds));
if (seconds === 0 && minutes === 0 && hours === 0 && days === 0) {
goLive();
return clearInterval(intervalId);
}
}, 1000);
}
}
days = void 0;
hours = void 0;
minutes = void 0;
seconds = void 0;
intervalId = void 0;
eventUrl = churchUrl + “/api/v1/events/current”
msie = /msie/.test(navigator.userAgent.toLowerCase())
if (msie && window.XDomainRequest) {
var xdr = new XDomainRequest();
xdr.open(“get”, eventUrl);
xdr.onload = function() {
loadCountdown(jQuery.parseJSON(xdr.responseText))
};
xdr.send();
} else {
$.ajax({
url: eventUrl,
dataType: “json”,
crossDomain: true,
success: function(data) {
loadCountdown(data);
},
error: function(xhr, ajaxOptions, thrownError) {
return console.log(thrownError);
}
});
}
});
</script>

However, I can’t seem to add it. Is there any way to do this?

[JackKeymaster]

Hi there,

Thanks for writing in!

I only see CSS and Javascript with no actual markup such as HTML or any dynamic output using PHP.

Do they have any instructions on how this should be added or where it should be placed? As without any markup, even adding the CSS and Javascript nothing will actually output.

Would it be possible for you to provide wp-admin login details in a private reply please so we can take a closer look?

Thanks!

[Author]

Posts