Show rss feed news one at a time with fade

Asked

Viewed 290 times

1

I have the following php code to fetch the news feed from a particular site:

<?php
    $rss = new DOMDocument();
    $rss->load('http://feeds.jn.pt/JN-ULTIMAS');
    $feed = array();
    foreach ($rss->getElementsByTagName('item') as $node) {
        $item = array(
            'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
            'desc' => $node->getElementsByTagName('description')->item(0)->nodeValue,
            'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
            'date' => $node->getElementsByTagName('pubDate')->item(0)->nodeValue
        );
        array_push($feed, $item);
    }
    $limit = 3;
    for ($x = 0; $x < $limit; $x++) {
        $title       = str_replace(' & ', ' &amp; ', $feed[$x]['title']);
        $link        = $feed[$x]['link'];
        $description = $feed[$x]['desc'];
        $date        = date('l F d, Y', strtotime($feed[$x]['date']));
       echo '<ul id="tips"><li id="fontemaispequena">'.$title.'<li     id="fontepequena">'.$description.'</li></ul>';
    }
 ?>

I wanted that instead of showing the news all just show me one at a time doing a fade in and a fade out with jquery, at this moment is showing me a list with the 3 news.

echo '<ul id="tips"><li id="fontemaispequena">'.$title.'<li     id="fontepequena">'.$description.'</li></ul>';
php javascript jquery rss

1 answer

0

I think it solves your problem and can serve many people:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Notícias</title>
    <style>
    #feeds {font-family: Helvetica, sans-serif; font-size: .9em;}
    #feeds a {text-decoration: none;}
    #feeds li {max-width: 400px; opacity:0; transition:1s; position: absolute; list-style: none; margin:0 0 0 -3em; padding:20px;} 
    #feeds h2 {margin:0; font-size: 1.5em;}
    #feeds span {display:block; color:#890; font-size:.8em; font-style: italic; margin:5px 0 10px 0;}
    </style>
    </head>
<body>

    <ul id="feeds">

<?php
$mes = ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'];
$wda = ['Domingo','Segunda-feira','Terça-feira','Quarta-feira','Quinta-feira','Sexta-feira','Sábado'];

$rss = new DOMDocument();
$rss->load('http://feeds.jn.pt/JN-ULTIMAS');

$feed = [];
foreach ($rss->getElementsByTagName('item') as $node) {
    $item = array(
        'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
        'desc' => $node->getElementsByTagName('description')->item(0)->nodeValue,
        'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
        'date' => $node->getElementsByTagName('pubDate')->item(0)->nodeValue
    );
    array_push($feed, $item);
}

$limit = 10;
for ($x = 0; $x < $limit; $x++) {
    $title       = str_replace(' & ', ' &amp; ', $feed[$x]['title']);
    $link        = $feed[$x]['link'];
    $description = $feed[$x]['desc'];
    $dt          = strtotime($feed[$x]['date']);
    $date        = $wda[0+date('w', $dt)].', '.date('d', $dt).' de '.$mes[date('n', $dt)-1].' de '.date('Y', $dt);

    echo '<li id="feed'.$x.'"><a href="'.$link.'"><h2>'.$title.'</h2></a><span>'.$date.'</span><div>'.$description.'</div><div class="ddata"></div></li>';
}
?>

    </ul>

    <script>
    var t = 4000; //configura o tempo em miléssimos de segundos ( t = 10000 >> 10 segundos )

    var a = 0; 
    var b = document.getElementById('feeds').children.length - 1;
    document.getElementById('feed'+a).style.opacity = 1;

            setInterval(function(){
                a1 = a;
                a2 = a + 1;
                if(a1 >= b) a2 = 0;

                document.getElementById('feed'+a1).style.opacity = 0;
                document.getElementById('feed'+a2).style.opacity = 1;

                a ++;
                if(a > b) a = 0; 
          }, t);
    </script>
</body>

Browser other questions tagged php javascript jquery rss

You are not signed in. Login or sign up in order to post.