News Feed on all pages?

[Niomi]

Is it possible to have the News Feed available on every page? I was trying to integrate it into a skin I'm working on however it becomes really moot if it's only view-able on the home page. Is it possible to have it viewed from every page/part of the forum? I tried moving the $[news] to the forum wrapper but of course that didn't work. So just wondering if it's at all possible? I know there's a similar plugin by MSG called forum marquee, but I like how the news feed looks/functions with its sliding feature, so it doesn't really fit exactly what I'm hoping for. 

[Kami]

The news fader is only available on the home page, sorry :(

[Niomi]

Kami

Darn! Thanks anyway!

[Kami]

You’re welcome! Sorry it wasn’t better news

[Peter]

You can kinda do it, though it would probably be much nicer to roll this all into a plugin.

The HTML:

<div id="news" aria-live="off">
<div class="nav">
<span class="arrow left"><span></span></span>
<span class="title">News</span>
<span class="arrow right"><span></span></span>
</div>
<div class="items panel"></div>
</div>

The news items:

let custom_news_items = [

"Welcome to our new forum from ProBoards.com!",
"Hello World",
"Treats For ALL"

];

Create the news properties in the dataHash object:

proboards.dataHash.news_items = [];
proboards.dataHash.news_speed = 5000;
proboards.dataHash.news_animation = "slide";

Populate the news panel and news_items array:

$(() => {

for(let i = 0; i < custom_news_items.length; ++ i){
proboards.dataHash.news_items.push({

id: (i + 1),
text: custom_news_items[i]

});

$("#news .items.panel").append($("<div class='itemSlide'>" + custom_news_items[i] + "</div>"));
}

});

Finally recall all of the PB code that sets up the news for animations and click events (this is a copy and paste of their code).

$(document).ready(function() {

// Selectors for both styles of news
var $arrows = $('#news .arrow');
var $title  = $('#news .title');
var $items  = $('#news .items');
var $prev   = $('#news .left');
var $next   = $('#news .right');
var $front  = $('#news .front');
var $back   = $('#news .back');

// Handy Variables
var index      = 0;
var news       = pb.data('news_items');
var speed      = pb.data('news_speed');
var relative   = (proboards.data('news_relative') == 1) ? 1 : 0;
var $invisible = '';
var timeout    = '';
var maxHeight = 0;

if(pb.data('news_animation') == 'flip') {
// Flip specific item selector
var $item   = $('#news .item');

// Count the number of news
var numNews = $item.length;

// Get the tallest item
$item.each(function() {
maxHeight = ($(this).outerHeight() > maxHeight) ? $(this).outerHeight() : maxHeight;
});

$.set_heights(maxHeight, $arrows, $title);

// Hide the unneeded ones
$('#news .hidden').hide();

if($front.height() < maxHeight) {
var heightDiff = maxHeight - $front.height();
$front.attr('style', 'padding-top: ' + heightDiff / 2 + 'px;');
}


// Go to the next/prev item
function cycle(dir) {
// Clear the auto change timeout so it doesn't interfere
clearTimeout(timeout);

// Designate which side of the flippable element is currently hidden
$invisible = ($items.hasClass('flip')) ? $front : $back;

// Get the text of the next item in the rotation (may be previous item depending on direction)
var next_text = news[get_next_index(dir)].text;

// Set the invisible side of the flippable element to have the text of the next news item
$invisible.html(next_text);
$invisible.attr('style', '');

if($invisible.height() < maxHeight) {
var heightDiff = maxHeight - $invisible.height();
$invisible.attr('style', 'padding-top: ' + heightDiff / 2 + 'px;');
}

// Flip the element using CSS3 transforms applied through a CSS class
$items.toggleClass('flip');

// Reset the auto change timeout
start_timeout(next_text);
}


// Make sure the indexes always wrap around appropriately
function get_next_index(dir) {
if(dir == 'forward') {
if(index == news.length - 1) {
index = 0;
}
else {
index++;
}
}
else {
if(index == 0) {
index = news.length - 1;
}
else {
index--;
}
}

return index;
}


// Set the auto change timeout based on all possible settings
function start_timeout(next_text) {
// If speed is set to relative, calculate the auto change speed for this text specifically
if(relative) {
speed = get_relative_change_speed(next_text);
}

// Set the auto change timeout
timeout = setTimeout(function() {
cycle('forward');
}, speed);
}


// If speed is set to relative, this function will be used to calculate the delay, since it's based on the text length
function get_relative_change_speed(str) {
return 1500 + (str.length * 50);
}

if(numNews > 1) {
// Handle the navigation clicks
$next.on('click', function() {
cycle('forward');
});
$prev.on('click', function() {
cycle('backward');
});

// Stop the auto changing when the mouse is over the news section
$items.on('mouseenter', function() {
clearTimeout(timeout);
});

// Re-enable the auto changing when the mouse leaves the news section
$items.on('mouseleave', function() {
start_timeout($front.text())
});


// Set timeout on init
start_timeout($front.text());

} else {
$.one_entry($title, $arrows);
}
} else {

// init the slider without navigation
if (proboards.data('news_speed')) {
$('#news').slidable({
autoChange : proboards.data('news_speed'),
items      : '.items',
relative   : (proboards.data('news_relative') == 1)
});
}

// Slide specific item selectors
var $item      = $('#news .itemSlide');
var $container = $('#news .items.panel > div');

var numNews = $item.length;

// Item Container gets the tallest possible value of all items
maxHeight = $container.outerHeight();

// Set the new heights
$.set_heights(maxHeight, $arrows, $title);

// Make items vertically centered if smaller than maxHeight
$item.each(function() {
if($(this).outerHeight() < maxHeight) {
var heightDiff = maxHeight - $(this).outerHeight();
$(this).css({
'height'      : maxHeight + 'px',
'padding-top' : (heightDiff / 2) + 'px'
});
}
});

// Remove arrows if theres only 1 item and add a border to the News title
if(numNews == 1) {
$.one_entry($title, $arrows);
}

}

});

[Lynx]

Oct 15, 2018 13:31:24 GMT -8 Niomi said:

Is it possible to have the News Feed available on every page? I was trying to integrate it into a skin I'm working on however it becomes really moot if it's only view-able on the home page. Is it possible to have it viewed from every page/part of the forum? I tried moving the $[news] to the forum wrapper but of course that didn't work. So just wondering if it's at all possible? I know there's a similar plugin by MSG called forum marquee, but I like how the news feed looks/functions with its sliding feature, so it doesn't really fit exactly what I'm hoping for. 

Not sure if it's what you're looking for, but I've also got a plugin named Random News that shows on all pages. If need be, it shouldn't be too hard to add in a sliding animation - but that would have to wait until I get back home on Saturday.

If you're pulling news items from a board, then you can ignore this - as my plugin doesn't grab recent posts. All news entries are manually entered into the plugin settings.