Fading or Vertical Scroll News/Content

I have been googleing and searching Sitepoint for a fading or vertical scroll multi browser script with no luck.

Can someone help me finding a good script that work on most popular browsers such FF, IE, Safari and Opera to scroll of fade news. The news content has an image, text and link.

Thank you

jQuery makes it easy:


<div id="container">
    <div><img src="" width="15" height="15">News: <a href="#">Something happened</a></div>
	<div><img src="" width="15" height="15">Opinion: <a href="#">Why did it happen?</a></div>
	<div><img src="" width="15" height="15">Entertainment: <a href="#">Who did it happen to?</a></div>
	<div><img src="" width="15" height="15">Sports: <a href="#">How did it happen?</a></div>
</div>

Each entry will fade out, the content below it will scroll up, then the faded entry fades back in at the end of the list.


$(function () {
	function fadingScroller($el) {
		$el.animate({'opacity': 0}, 1000);
		$el.hide('slow', function () {
			$el.parent().append($el);
			$el.show();
			$el.animate({'opacity': 1}, 1000);
			setTimeout(function ($el) {
				return function () {
					fadingScroller($($el.selector));
				};
			}($el), 2000);
		});
	}
	fadingScroller($('#container div:first'));
});

Hello,

It worked ok. However, how can I make it that only one line of news appears then it disappear and the next one appears.

Thank you.

That’s even easier, you’re wanting a news ticker.
http://www.texotela.co.uk/code/jquery/newsticker/

Hello,

Not exactly a news ticker. However, each piece of news contains:

  1. Title
  2. Intro
  3. Image
  4. Link (more…)

The problem is that the div’s that I need to rotate using JQ fading in embeded inside other div’s.

Here is my code.

Note the div’s that I need to rotate are inside a parent div with id=“fade-news”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
</head>

<body>
  <div id="wrapper">
    <div id="page">
      <div id="content">
        <div id="main-content">
          <table class="renderedtable" border="0" cellpadding="2" cellspacing="0"
          width="100%">
            <tr>
              <td valign="top" width="60%">
                <div class="object-center news_ticker">
                  <div class="content-view-embed">
                    <div class="class-folder">
                      <div class="box-bb">
                        <div class="border-tl">
                          <div class="border-tr">
                            <span>News</span>

                            <div class="border-tc">
                              &nbsp;
                            </div>
                          </div>
                        </div>

                        <div class="border-ml">
                          <div class="border-mr">
                            <div class="border-mc float-break">
                              <div id="fade-news">
                                <div>
                                  <a href="">Lyon, une métropole de taille
                                  européenne</a>
                                </div>

                                <div>
                                  <a href="">Lyon, terre d’innovation</a>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div class="border-bl">
                          <div class="border-br">
                            <div class="border-bc">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </div><!--End of Box Blue Big-->
                    </div>
                  </div>
                </div>
              </td>

              <td valign="top" width="40%">&nbsp;</td>
            </tr>
          </table><!-- Content: END -->
        </div><!--End of Main Content-->
      </div><!--End of Content-->
    </div><!--End of Page-->
    <!--End of Wrapper-->
  </div>
</body>
</html>

It works. Change fade-news to an unordered list, with the title, image and so forth contained inside a list item, and it’ll work.

The page says that due to an IE bug with opacity, you’ll need to set a background color too.