Advertisement:

Author Topic: News  (Read 1976 times)

Offline vostro1400

  • Semi-Newbie
  • *
  • Posts: 42
News
« on: August 13, 2018, 08:03:03 AM »
Hi Guys,

How can i make the news rollover. So the text can roll from right to left consistently and also set the spped

Offline Arantor

  • Resident Overthinker
  • SMF Friend
  • SMF Legend
  • *
  • Posts: 71,430
    • StoryBB/StoryBB on GitHub
Re: News
« Reply #1 on: August 13, 2018, 08:05:04 AM »
Nothing short of a complete rewrite of the feature will do that, and no one has done it as a mod as far as I know.
Don’t try to tell me that some power can corrupt a person. You haven’t had enough to know what it’s like.

No good deed goes unpunished / No act of charity goes unresented.

Offline vostro1400

  • Semi-Newbie
  • *
  • Posts: 42
Re: News
« Reply #2 on: August 13, 2018, 08:07:35 AM »
OOh i really need it. The news is just static and doesn't bring attention. but with rollover... Users will be interested to read.

Offline SychO

  • Lead Customizer
  • SMF Hero
  • *
  • Posts: 1,467
  • Gender: Male
    • SychO9 on GitHub
    • SychO
Re: News
« Reply #3 on: August 13, 2018, 08:24:47 AM »
If you mean the html <marquee> tag, it would be something like this,

Assuming you're using the default theme, in index.template.php look for

Code: [Select]
// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news']))
echo '
<h2>', $txt['news'], ': </h2>
<p>', $context['random_news_line'], '</p>';

and replace it by

Code: [Select]
// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news'])) {
echo '
<h2>', $txt['news'], ': </h2>
<div class="news_marquee">
<marquee>';

foreach ($context['news_lines'] as $news) {
echo $news. '  **  ';
}

echo'
</marquee>
</div>';
}

Imazighen

Offline Shambles

  • SMF Hero
  • ******
  • Posts: 5,159
  • Gender: Male
    • i30 Owners Club
Re: News
« Reply #4 on: August 13, 2018, 08:25:57 AM »
So you want the news to be dynamically (and automatically) updated inbetween marquee rollovers, or are you just after the marquee effect?

I believe the [move] bbcode would provide the latter when incorporated into the news text.

Offline Arantor

  • Resident Overthinker
  • SMF Friend
  • SMF Legend
  • *
  • Posts: 71,430
    • StoryBB/StoryBB on GitHub
Re: News
« Reply #5 on: August 13, 2018, 08:31:53 AM »
The move tag just uses marquee but browsers are deprecating this meaning it’ll go away.

In any case you need to marquee all the items, not just one item, which still requires a major change of the fader.
Don’t try to tell me that some power can corrupt a person. You haven’t had enough to know what it’s like.

No good deed goes unpunished / No act of charity goes unresented.

Offline Sir Osis of Liver

  • SMF Hero
  • ******
  • Posts: 9,244
Re: News
« Reply #6 on: August 13, 2018, 01:19:03 PM »
There are plenty of javascript scrollers you can find elsewhere and install in the template.

Offline Diego Andrés

  • Customizer
  • SMF Hero
  • *
  • Posts: 3,265
  • Gender: Male
    • DiegoSetroc on GitHub
    • @bihgetter on Twitter
    • SMF Tricks - Free & Premium Themes
Re: News
« Reply #7 on: August 13, 2018, 08:54:05 PM »
You can also create a marquee using CSS3 animations.
However, like Arantor said this is only for each individual element, making a transition between each item will require more work.

SMF Tricks - Free & Premium Responsive Themes for SMF.

Offline vostro1400

  • Semi-Newbie
  • *
  • Posts: 42
Re: News
« Reply #8 on: August 14, 2018, 07:59:47 AM »
If you mean the html <marquee> tag, it would be something like this,

Assuming you're using the default theme, in index.template.php look for

Code: [Select]
// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news']))
echo '
<h2>', $txt['news'], ': </h2>
<p>', $context['random_news_line'], '</p>';

and replace it by

Code: [Select]
// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news'])) {
echo '
<h2>', $txt['news'], ': </h2>
<div class="news_marquee">
<marquee>';

foreach ($context['news_lines'] as $news) {
echo $news. '  **  ';
}

echo'
</marquee>
</div>';
}

I tried the code you recommended but it didnt work.
Have you tested it

Offline vostro1400

  • Semi-Newbie
  • *
  • Posts: 42
Re: News
« Reply #9 on: August 14, 2018, 08:00:50 AM »
There are plenty of javascript scrollers you can find elsewhere and install in the template.


Which of th javascript scroller that can do that magic. Plz let me know

Offline vostro1400

  • Semi-Newbie
  • *
  • Posts: 42
Re: News
« Reply #10 on: August 14, 2018, 09:04:06 AM »
If you mean the html <marquee> tag, it would be something like this,

Assuming you're using the default theme, in index.template.php look for

Code: [Select]
// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news']))
echo '
<h2>', $txt['news'], ': </h2>
<p>', $context['random_news_line'], '</p>';

and replace it by

Code: [Select]
// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news'])) {
echo '
<h2>', $txt['news'], ': </h2>
<div class="news_marquee">
<marquee>';

foreach ($context['news_lines'] as $news) {
echo $news. '  **  ';
}

echo'
</marquee>
</div>';
}

I have checked it again and it works on SMF 2.0.15 . However, the whole text is rolling over. Is it possible for the text to roll line by line. Also is there a way to reduce to speed?

Offline SychO

  • Lead Customizer
  • SMF Hero
  • *
  • Posts: 1,467
  • Gender: Male
    • SychO9 on GitHub
    • SychO
Re: News
« Reply #11 on: August 23, 2018, 05:11:02 PM »
checkout https://github.com/aamirafridi/jQuery.Marquee, It's a nice marquee plugin, download jquery.marquee.min.js
add it to your default theme's scripts folder, and then add this code before the </head> tag in your index.template.php

If you have jQuery already loaded in your forum remove the first line :
Code: [Select]
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="', $settings['default_theme_url'], '/scripts/jquery.marquee.min.js?fin20"></script>

change your current code to
Code: [Select]
// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news'])) {
echo '
<h2>', $txt['news'], ': </h2>
<div class="news_marquee">
<div class="marquee">';

foreach ($context['news_lines'] as $news) {
echo '<span style="margin-right: 2em">', $news, '</span>  **  ';
}

echo'
</div>
</div>
<script>
jq(\'.marquee\').marquee({
//speed in milliseconds of the marquee
duration: 14000
});
</script>';
}

Imazighen

Offline vostro1400

  • Semi-Newbie
  • *
  • Posts: 42
Re: News
« Reply #12 on: August 25, 2018, 11:46:31 PM »
The your code and jquery.marquee.min.js does not work in SMF 2.0.15 but when tested in SMF 2.1 Beta 3 with the following code

Code: [Select]
// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news'])) {
echo '
<h2>', $txt['news'], ': </h2>
<div class="news_marquee">
<marquee>';

foreach ($context['news_lines'] as $news) {
echo $news. '  **  ';
}

echo'
</marquee>
</div>';
}

It works

THESE CODE DOES NOT WORK IN EITHER SMF 2.0.15 OR SMF 2.1 Beta 3

Code: [Select]
// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news'])) {
echo '
<h2>', $txt['news'], ': </h2>
<div class="news_marquee">
<div class="marquee">';

foreach ($context['news_lines'] as $news) {
echo '<span style="margin-right: 2em">', $news, '</span>  **  ';
}

echo'
</div>
</div>
<script>
jq(\'.marquee\').marquee({
//speed in milliseconds of the marquee
duration: 14000
});
</script>';
}
IN SMF 2.1 Beta 3 with jquery.marquee.min.js... It only extend the news to the left margin.. which is good but it doesn't roll. So in order for it to roll I replaced it with

Code: [Select]
if (!empty($settings['enable_news'])) {
echo '
<h2>', $txt['news'], ': </h2>
<div class="news_marquee">
<marquee>';

foreach ($context['news_lines'] as $news) {
echo $news. '  **  ';
}

echo'
</marquee>
</div>';
}

So how can i made the code to work ?
« Last Edit: August 26, 2018, 10:57:07 AM by Kindred »

Offline Deaks

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 22,148
  • Gender: Male
Re: News
« Reply #13 on: August 26, 2018, 04:11:56 AM »
have you downloaded the needed files and uploaded the script to your default themes script directory?

Offline Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,943
  • Gender: Male
  • Black cat rulz!
    • Antes on GitHub
    • merta on LinkedIn
    • @XinYenFon on Twitter
    • WoWSnips
Re: News
« Reply #14 on: August 27, 2018, 05:02:45 AM »
Try this one;

Step 1) Download the following files and upload them to your theme's script folder (attached), if you already have jQuery on your system skip that part.

Step 2) Load the files (as again if you have jQuery loaded skip/delete the part where you load jQuery)

Code: (Find) [Select]
// If we're in a board, or a topic for that matter, the index will be the board's index.
Code: (Add Before) [Select]
echo '
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/jquery.js"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/jquery.tickerNews.min.js"></script>
<script>
$(function(){
$(".TickerNews").newsTicker();
});
</script>';

Step 3) Load the code
Code: (Find) [Select]
// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news']))
echo '
<h2>', $txt['news'], ': </h2>
<p>', $context['random_news_line'], '</p>';

echo '
</div>
</div>
<br class="clear" />';
Code: (Replace with) [Select]
// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news']))
echo '
<h2>', $txt['news'], ': </h2>
<p>', $context['random_news_line'], '</p>';

echo '
</div>
</div>
<div class="TickerNews" id="T2">
<div class="ti_wrapper">
<div class="ti_slide">
<div class="ti_content">';

foreach ($context['news_lines'] as $news_lines)
{
echo '
<div class="ti_news"><span>', $news_lines , '</span></div>';
}

echo '
</div>
</div>
</div>
</div>
<br class="clear" />';

Step 4) Styling (IMPORTANT) -without styling newsticker won't work properly, simply open your index.css and add the following code to bottom of the file.
(A small note; no additional styling done to the system apart from required adjustments to make news work properly on certain situations).
Code: [Select]
/* Ticker news */
.TickerNews
{
width: 100%;
height: 50px;
line-height: 50px;
}
.ti_wrapper
{
width: 100%;
position: relative;
overflow: hidden;
height: 50px;
}
.ti_slide
{
width: 30000px;
position: relative;
left: 0;
top: 0;
}
.ti_content
{
width: 8000px;
position: relative;
float:left;
}
.ti_news
{
float:left;

}
.ti_news span
{
display: block;
margin-right: 10px;
}

Step 5) ???
Step 6) Profit.

Important Note; This system is designed to handle one-liner news (aka no new lines or <br> usage), try to keep it that way for now.
You can support me directly via Patreon

In Catnip We Trust.
The solution is Catnip!
Vote for Catnip!

Current Project(s): [ WoWSnips ]
Past Project(s): [ ezPortal ] # [ Lunarfall ] # [ RDD (HTML5) ]

Offline vostro1400

  • Semi-Newbie
  • *
  • Posts: 42
Re: News
« Reply #15 on: August 28, 2018, 09:31:18 AM »
It doesn't work for me. I received error

"syntax error, unexpected 'echo' (T_ECHO), expecting ',' or ';'