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