News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

News

Started by vostro1400, August 13, 2018, 08:03:03 AM

Previous topic - Next topic

vostro1400

Hi Guys,

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

Arantor

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.

vostro1400

OOh i really need it. The news is just static and doesn't bring attention. but with rollover... Users will be interested to read.

SychO

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

// 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

// 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>';
}
Checkout My Themes:
-

Potato  •  Ackerman  •  SunRise  •  NightBreeze

Shambles

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.

Arantor

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.

Sir Osis of Liver

There are plenty of javascript scrollers you can find elsewhere and install in the template.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Diego Andrés

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.

vostro1400

Quote from: SychO 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

// 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

// 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

vostro1400

Quote from: Sir Osis of Liver on August 13, 2018, 01:19:03 PM
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

vostro1400

Quote from: SychO 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

// 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

// 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?

SychO

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 :
<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 // 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>';
}
Checkout My Themes:
-

Potato  •  Ackerman  •  SunRise  •  NightBreeze

vostro1400

#12
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

// 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

// 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

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 ?

Deaks

have you downloaded the needed files and uploaded the script to your default themes script directory?
~~~~
Former SMF Project Manager
Former SMF Customizer

"For as lang as hunner o us is in life, in nae wey
will we thole the Soothron tae owergang us. In truth it isna for glory, or wealth, or
honours that we fecht, but for freedom alane, that nae honest cheil gies up but wi life
itsel."

Antes

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).
/* 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.

vostro1400

It doesn't work for me. I received error

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

Advertisement: