Topic: Make news block fade

[stikkki]

im building a forum for a charity organisation and i would like the news block to fade like the news fader on the forum rather than the news changing on page refresh

[Nathaniel]

Put the following code into a Custom PHP block:

Code: [Select]

global $context, $settings;

echo '
<div id="sp_news_fader_', $id, '" class="sp_center sp_fullwidth"><b>', $context['news_lines'][0], '</b></div>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
// The fading delay (in ms.)
var smfFadeDelay = ', empty($settings['newsfader_time']) ? 5000 : $settings['newsfader_time'], ';
// Fade from... what text color? To which background color?
var smfFadeFrom = {"r": 0, "g": 0, "b": 0}, smfFadeTo = {"r": 255, "g": 255, "b": 255};
// Surround each item with... anything special?
var smfFadeBefore = "<b>", smfFadeAfter = "</b>";

var foreColor, backEl, backColor;

if (typeof(document.getElementById(\'sp_news_fader_', $id, '\').currentStyle) != "undefined")
{
foreColor = document.getElementById(\'sp_news_fader_', $id, '\').currentStyle.color.match(/#([\da-f][\da-f])([\da-f][\da-f])([\da-f][\da-f])/);
smfFadeFrom = {"r": parseInt(foreColor[1]), "g": parseInt(foreColor[2]), "b": parseInt(foreColor[3])};

backEl = document.getElementById(\'sp_news_fader_', $id, '\');
while (backEl.currentStyle.backgroundColor == "transparent" && typeof(backEl.parentNode) != "undefined")
backEl = backEl.parentNode;

backColor = backEl.currentStyle.backgroundColor.match(/#([\da-f][\da-f])([\da-f][\da-f])([\da-f][\da-f])/);
smfFadeTo = {"r": eval("0x" + backColor[1]), "g": eval("0x" + backColor[2]), "b": eval("0x" + backColor[3])};
}
else if (typeof(window.opera) == "undefined" && typeof(document.defaultView) != "undefined")
{
foreColor = document.defaultView.getComputedStyle(document.getElementById(\'sp_news_fader_', $id, '\'), null).color.match(/rgb\((\d+), (\d+), (\d+)\)/);
smfFadeFrom = {"r": parseInt(foreColor[1]), "g": parseInt(foreColor[2]), "b": parseInt(foreColor[3])};

backEl = document.getElementById(\'sp_news_fader_', $id, '\');
while (document.defaultView.getComputedStyle(backEl, null).backgroundColor == "transparent" && typeof(backEl.parentNode) != "undefined" && typeof(backEl.parentNode.tagName) != "undefined")
backEl = backEl.parentNode;

backColor = document.defaultView.getComputedStyle(backEl, null).backgroundColor.match(/rgb\((\d+), (\d+), (\d+)\)/);
smfFadeTo = {"r": parseInt(backColor[1]), "g": parseInt(backColor[2]), "b": parseInt(backColor[3])};
}

// List all the lines of the news for display.
var smfFadeContent = new Array(
"', implode('",
"', $context['fader_news_lines']), '"
);
// ]]></script>
<script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/fader.js"></script>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
smfFadeScroller = document.getElementById(\'sp_news_fader_', $id, '\');
// ]]></script>';

[stikkki]

this didnt work and actually didnt change the news even on refresh

[dougsbrat]

I tried it and its great!  thanks

be sure you have more than one news message for it to fade to, else one will be as shown with no fade.


I have another request for this...
is it possible for the block size to be fixed?
because:
when using the fade and the news items are not the same height (text lines or image) then the block size changes as each is shown, causing the lower blocks to move too 


thanks for a good block

[stikkki]

be sure you have more than one news message for it to fade to, else one will be as shown with no fade.

lol im not that think

i have 3 news items set up
i created a php block, added the above code and placed it in top block position but it only displays the first news item

http://www.somersetstaffies.org.uk/index.php

[dougsbrat]

I gues I am    cause I only had one news item and took a minute to figure it out.

BTW I use
SMF 1.1.8 and see you have 2.0
perhaps its that or a server setting?

[Nathaniel]

Use the code below for SMF 2 RC1:

Code: [Select]

   global $context, $settings;

   echo '
                        <div id="smfNewsFader"><div id="smfFadeScroller" class="sp_center sp_fullwidth"><span>', $context['news_lines'][0], '</span></div></div>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
// The fading delay (in ms.)
var smfFadeDelay = ', empty($settings['newsfader_time']) ? 5000 : $settings['newsfader_time'], ';
// Fade from... what text color? To which background color?
var smfFadeFrom = {"r": 0, "g": 0, "b": 0}, smfFadeTo = {"r": 255, "g": 255, "b": 255};
// Surround each item with... anything special?
var smfFadeBefore = "<b>", smfFadeAfter = "</b>";

var foreColor, foreEl, backEl, backColor;

if (typeof(document.getElementById(\'smfFadeScroller\').currentStyle) != "undefined")
{
foreColor = document.getElementById(\'smfFadeScroller\').currentStyle.color.match(/#([\da-f][\da-f])([\da-f][\da-f])([\da-f][\da-f])/);
smfFadeFrom = {"r": parseInt(foreColor[1]), "g": parseInt(foreColor[2]), "b": parseInt(foreColor[3])};

backEl = document.getElementById(\'smfFadeScroller\');
while (backEl.currentStyle.backgroundColor == "transparent" && typeof(backEl.parentNode) != "undefined")
backEl = backEl.parentNode;

backColor = backEl.currentStyle.backgroundColor.match(/#([\da-f][\da-f])([\da-f][\da-f])([\da-f][\da-f])/);
smfFadeTo = {"r": eval("0x" + backColor[1]), "g": eval("0x" + backColor[2]), "b": eval("0x" + backColor[3])};
}
else if (typeof(window.opera) == "undefined" && typeof(document.defaultView) != "undefined")
{

foreEl = document.getElementById(\'smfFadeScroller\');

while (document.defaultView.getComputedStyle(foreEl, null).getPropertyCSSValue("color") == null && typeof(foreEl.parentNode) != "undefined" && typeof(foreEl.parentNode.tagName) != "undefined")
foreEl = foreEl.parentNode;

foreColor = document.defaultView.getComputedStyle(foreEl, null).getPropertyValue("color").match(/rgb\((\d+), (\d+), (\d+)\)/);
smfFadeFrom = {"r": parseInt(foreColor[1]), "g": parseInt(foreColor[2]), "b": parseInt(foreColor[3])};

backEl = document.getElementById(\'smfFadeScroller\');

while (document.defaultView.getComputedStyle(backEl, null).getPropertyCSSValue("background-color") == null && typeof(backEl.parentNode) != "undefined" && typeof(backEl.parentNode.tagName) != "undefined")
backEl = backEl.parentNode;

backColor = document.defaultView.getComputedStyle(backEl, null).getPropertyValue("background-color");//.match(/rgb\((\d+), (\d+), (\d+)\)/);
smfFadeTo = {"r": parseInt(backColor[1]), "g": parseInt(backColor[2]), "b": parseInt(backColor[3])};
}

// List all the lines of the news for display.
var smfFadeContent = new Array(
"', implode('",
"', $context['fader_news_lines']), '"
);
// ]]></script>
<script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/scripts/fader.js"></script>';

[stikkki]

sorry i should of said it was 2.0

that worked fine LHVWB, thanx

[geekfairy]

This works beautifully

Is there any way to not show titles/names of certain blocks?

I'm using this one to show some banners but would prefer it not to have to have a title sitting on the top of the block.

[Nathaniel]

Check the 'No Title' checkbox under the 'Style Options' area, when you edit a block.

[geekfairy]

  I thought I'd seen it there somewhere.

Not feeling well today...that's my only excuse 

Oh, and thankyou!

[geekfairy]

Is there a way to fix the height of the news block? I am finding that in Firefox, the first time a page is loaded the news block jumps as it fades to nothing and the next banner fades in. I only have three banners on there right now and once it has cycled through once it is fine.

I had the same problem with the SMF news fader and that was solved by editing the template files to fix the height of the news box. What would I need to edit to do the same with this block?

Thanks

[Nathaniel]

Use the style options, you should be able to add 'height:20px;' to the style parameter for the body of the block.

[geekfairy]

Perfect 

Thanks so much. I'm really loving SP 

[Chit-Chat ChatterBox Boss]

Sweet thanks!

[AngelinaBelle]

Put the following code into a Custom PHP block:

Brilliant! Works like a charm.  Thanks!

[primetime]

Works great!!

[amlucent]

When I use the code for SMF 2.0 it only fades on the board index..  I have my news block set to show up on "all pages"... can I make it fade everywhere?

[Gurbet_42]

Not fades on 2.0 RC but fades on forum.

[Nothingness]

I'm getting error "Syntax error in block code. Please check the code." when adding the code. I am on 2.0 RC2
SimplePortal 2.3.1

[Nothingness]

Bump.

[Nothingness]

If no one knows the answer or the fix to this just simply answer with a no instead of not replying at all.

[[SiNaN]]

For SMF 1.1 version:

Code: [Select]

global $context, $settings;

if (!empty($context['fader_news_lines']))
{
echo '
<div style="text-align: center;">';

// Prepare all the javascript settings.
echo '
<div id="smfFadeScroller" style="width: 90%; padding: 2px;"><b>', $context['news_lines'][0], '</b></div>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
// The fading delay (in ms.)
var smfFadeDelay = ', empty($settings['newsfader_time']) ? 5000 : $settings['newsfader_time'], ';
// Fade from... what text color? To which background color?
var smfFadeFrom = {"r": 0, "g": 0, "b": 0}, smfFadeTo = {"r": 255, "g": 255, "b": 255};
// Surround each item with... anything special?
var smfFadeBefore = "<b>", smfFadeAfter = "</b>";

var foreColor, backEl, backColor;

if (typeof(document.getElementById(\'smfFadeScroller\').currentStyle) != "undefined")
{
foreColor = document.getElementById(\'smfFadeScroller\').currentStyle.color.match(/#([\da-f][\da-f])([\da-f][\da-f])([\da-f][\da-f])/);
smfFadeFrom = {"r": parseInt(foreColor[1]), "g": parseInt(foreColor[2]), "b": parseInt(foreColor[3])};

backEl = document.getElementById(\'smfFadeScroller\');
while (backEl.currentStyle.backgroundColor == "transparent" && typeof(backEl.parentNode) != "undefined")
backEl = backEl.parentNode;

backColor = backEl.currentStyle.backgroundColor.match(/#([\da-f][\da-f])([\da-f][\da-f])([\da-f][\da-f])/);
smfFadeTo = {"r": eval("0x" + backColor[1]), "g": eval("0x" + backColor[2]), "b": eval("0x" + backColor[3])};
}
else if (typeof(window.opera) == "undefined" && typeof(document.defaultView) != "undefined")
{
foreColor = document.defaultView.getComputedStyle(document.getElementById(\'smfFadeScroller\'), null).color.match(/rgb\((\d+), (\d+), (\d+)\)/);
smfFadeFrom = {"r": parseInt(foreColor[1]), "g": parseInt(foreColor[2]), "b": parseInt(foreColor[3])};

backEl = document.getElementById(\'smfFadeScroller\');
while (document.defaultView.getComputedStyle(backEl, null).backgroundColor == "transparent" && typeof(backEl.parentNode) != "undefined" && typeof(backEl.parentNode.tagName) != "undefined")
backEl = backEl.parentNode;

backColor = document.defaultView.getComputedStyle(backEl, null).backgroundColor.match(/rgb\((\d+), (\d+), (\d+)\)/);
smfFadeTo = {"r": parseInt(backColor[1]), "g": parseInt(backColor[2]), "b": parseInt(backColor[3])};
}

// List all the lines of the news for display.
var smfFadeContent = new Array(
"', implode('",
"', $context['fader_news_lines']), '"
);
// ]]></script>
<script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/fader.js"></script>
</div>';
}
For SMF 2.0 RC2 version:

Code: [Select]

global $context, $settings;

if (!empty($context['fader_news_lines']))
{
echo '
<div id="newsfader">
<ul class="reset" id="smfFadeScroller">';

foreach ($context['news_lines'] as $news)
echo '
<li>', $news, '</li>';

echo '
</ul>
</div>
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/fader.js"></script>
<script type="text/javascript"><!-- // --><![CDATA[
var oNewsFader = new smf_NewsFader({
sSelf: \'oNewsFader\',
sFaderControlId: \'smfFadeScroller\',
sItemTemplate: ', JavaScriptEscape('<strong>%1$s</strong>'), ',
iFadeDelay: ', empty($settings['newsfader_time']) ? 5000 : $settings['newsfader_time'], '
});
// ]]></script>';
}

[Gurbet_42]

Thanks   [SiNaN].

[Nothingness]

Preview works but why am I getting "Syntax error in block code. Please check the code." when I apply the block.

[[SiNaN]]

It might be a bug related to PHP validation, and your news content. You can disable PHP validation from Admin > SimplePortal > Configuration > General Settings > Disable PHP Validation. I suggest that you enable it back after you create the block.

[grafitus]

Thanks for code [SiNaN]. I've tried, it works.

[Old Fossil]

Thanks for code [SiNaN]. I've tried, it works.

+1 It sure looks good too.

[Nothingness]

Perfect, thank you [SiNaN]. It works. So this error will be fixed in the next update, no?

[[SiNaN]]

It isn't easy to detect PHP syntax error and this is a rare case. But I'll keep that in mind, if I have a better solution.

[raffo]

it works, but with some problems:

1) when the page loads, users see for a while all the news in the block, that after about 300 milliseconds resize itself

2) it always starts from the first news... it'd be nice to start from a random one adn goes to others always randomly (without repeting before finishing all of them)

3) the news block is too much high... is possible to make a little shorter in height? i inserted height:20px; to style of body, but then the news are unreadable, because appears a scroll sidebar on the side

4) when one news is longer than others, the block continues to resize every single news...

thanks

[Old Fossil]

Raffo can you let us have a link to the forum please.

[raffo]

here it's...

i 'll mantain it for some hours...
thanks

http://*********

[Old Fossil]

The newsfaders resizing is automatic ie when a smiley or bold text is used.

Have you thought about making the text scroll across the page instead?

Have a look at the portal on www.mkaware.co.uk ( Announcements).

If you want to do it like that then I can point you in the right direction.

[raffo]

thanks, but i don't like the scrolling...

my problem was noticed when i choose the normal SMF news fading... it works only on forum and it is perfect... but it doesn't work on homepage of SP...

using, instead, just the top block of SP, in portal and forum, makes what we are talking about now...

[Old Fossil]

No worries it's a preference thing.

Using the top block as you mentioned is another way of course.

[raffo]

so, there isn't a way to replicate in the custom PHP block the same code that SMF use in forum news?

[Old Fossil]

Will have to wait and hope someone who knows coding can help.

Sorry bud. 

[raffo]

thanks man!

[Tricky]

Thanks [SiNaN] just what i was looking for