Tagged: horizontal scroller, marquee, News ticker, RSS, text
This topic contains 0 replies, has 1 voice, and was last updated by Geoffrey Timmerman 6 years, 7 months ago.
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>