Home Revolution Fullwidth › Forums › Tips & recommendations › Add newsScroller to a playlist slide
Tagged: horizontal scroller, marquee, News ticker, RSS, text
First we have to edit the “functions “page in the DigitalSignage plugin so that jQuery is loaded in the header instead of the footer.
STEP 1.Navigate on the WordPress server to “wp-content/themes/DigitalSignagePressTheme/functions.php” and following code:
function insert_jquery(){
wp_enqueue_script(‘jquery’, false, array(), false, false);
}
add_filter(‘wp_enqueue_scripts’,’insert_jquery’,1);
STEP 2. Now add the code for the newsScroller by editing the playlist and selecting “ADD > html”:
<!– CSS styling for the scroller –>
<style>
/* Horizontal scroller */
div#hscroller {
width: 100%;
z-index: 999;
font-size: 2em;
}
div#hscroller marquee {
background-color: rgba(204, 0, 0, 0.9); color: white; /* red */
/* background-color: rgba(255, 255, 0, 0.9); color: black; yellow */
/* background-color: rgba(255, 204, 0, 0.9); color: black; yelloworange */
/*background-color: rgba(0, 0, 0, 0.9); color: white;*/
text-transform: uppercase;
width: 100%;
font-family: “Volvo Sans Medium”, sans-serif;
font-size: 0.65em;
padding: 2px 0px;
margin: 0;
}
div#hscroller marquee span {
margin-right: 8%;
}
div#hscroller #feedlogo {
position: absolute;
top: 0px;
left:1px;
z-index: 9;
font-size: 0.5em;
background: grey;
color: white;
border: 1px solid white;
padding: 5px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
</style>
<!– The scroller html markup –>
<div id=”hscroller”>
<div id=”feedlogo”>LOGO</div>
<marquee direction=”left” speed=”normal” behavior=”loop” scrollamount=”10″></marquee>
</div>
<!– The jQuery code for adding news items from a RSS feed (not needed if you want manual text in the marquee) –>
<script>
//var urlticker = ‘https://www.tijd.be/rss/ondernemen_auto.xml’; //detijd.be
var urlticker = ‘http://www.verkeerscentrum.be/rss/4-INC%7CLOS%7CINF%7CPEVT.xml’; //verkeerscentrum.be
jQuery(document).ready(function($) {
//if scroller div exists…
if (jQuery(‘#hscroller’).length > 0){
//RSS feed ophalen via interne methode HSCROLLER
jQuery.ajax({
url: ‘https://www.tijd.be/rss/ondernemen_auto.xml’,
type: ‘GET’,
dataType: “xml”,
success: function(xml) {
console.log(“News loading into bottom scroller…”);
var i = 0;
var itemCount = jQuery(“item”, xml).length;
/*console.log(“TEST COUNT ” + itemCount);*/
jQuery.each(jQuery(“item”, xml), function(i, e) {
//Haal item data op
var itemURL = (jQuery(e).find(“link”)).text().trim();
var itemTitle = (jQuery(e).find(“title”)).text().trim();
var itemDescription = (jQuery(e).find(“description”)).text().trim();
var itemPubDate = (jQuery(e).find(“pubDate”)).text().trim();
var logolink = itemURL.replace(/^(http|https):\/\//, ”).replace(/\/.+/, ”);
//Herschrijf pubDate
var date = new Date(itemPubDate);
var months = Array(“January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”);
var time = date.getHours()+”:”+date.getMinutes();
var itemPubDate = date.getDate() + ” ” + months[date.getMonth()] + ” ” + date.getFullYear() + ” “+ time;
//console.log(itemTitle);
jQuery(“#hscroller #feedlogo”).empty().text(logolink);
//News Scroller
jQuery(“#hscroller marquee”).append(” » ” + itemTitle + ” <span> </span> “);
i++; //counter
});
jQuery(“#hscroller”).show(); //Show when ready
}
});
}
});
</script>
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.