News Engine Help RSS

Navigation
1

Good night guys,

I'm trying to make a good RSS-style news engine the code is open and can be seen at Github >, I am trying to do with the fadeout and fadein effects however only the latest news is being shown as you can see in the example JSFiddle additionally I would like it to be shown from several rss feeds and not just one as it is in the example. And also better the visual because when the news starts to appear the layout stays off the pink margin.

If anyone can help me, I appreciate it.

    
asked by anonymous 03.01.2016 / 05:10

1 answer

3

Things to improve on your code:

  • strip the CSS from HTML
  • separates logic from changing ajax news
  • creates HTML outside the news generator

Suggestion:

Use a function like this: 

 var alternador = (function(el, delay) {
    el = $(el);
    var noticias = [];
    var p = el.find('p');
    var a = el.find('a');

    var index = 0;

    function mostrarProxima() {
        el.fadeIn();
        var value = noticias[index++];
        a.html(value.title);
        a.attr('href', value.link);
        // p.html(value.content); // <- caso queiras usar mais tarde
        el.delay(2000).fadeOut();
        if (index == noticias.length) index = 0;
    }
    setInterval(mostrarProxima, delay || 3000);
    return function(_noticias) {
        noticias = _noticias;
    }
})('#result', 5000);

and then inside ajax you only have to update the news if it is necessary to refresh, like this: 

values = xml.responseData.feed.entries;
alternador(values);

Example: 

$(function() {

    var alternador = (function(el, delay) {
        el = $(el);
        var noticias = [];
        var p = el.find('p');
        var a = el.find('a');

        var index = 0;

        function mostrarProxima() {
            el.fadeIn();
            var value = noticias[index++];
            a.html(value.title);
            a.attr('href', value.link);
            // p.html(value.content); // <- caso queiras usar mais tarde
            el.delay(2000).fadeOut();
            if (index == noticias.length) index = 0;
        }
        setInterval(mostrarProxima, delay || 3000);
        return function(_noticias) {
            noticias = _noticias;
        }
    })('#result', 5000);

    var urlRss = 'http://www.cidades.gov.br/ultimas-noticias?format=feed&type=rss';
    $.ajax({
        type: "GET",
        url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=1000&callback=?&q=' + encodeURIComponent(urlRss),
        dataType: 'json',
        error: function(xhr) {
            var erro = xhr.responseText;
            alert('Erro ao ler o feed: ' + erro);
        },
        success: function(xml) {
            values = xml.responseData.feed.entries;
            alternador(values);
        }
    });
});
#result li {
    list-style: none;
}

#result a {
    text-decoration: none;
    color: #fff;
}

#footer {
    background-color: #224B9D;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    color: white;
    font-weight: bold;
    padding: 1em;
    height: 4em;
}

#titulo {
    background-color: #F95252;
    color: white;
    font-weight: bold;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    float: left;
    text-align: center;
}

#header {
    color: white;
    font-weight: bold;
    background-color: #7E9DBB;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
#header:after {
  content: " ";
  display: block;
  clear: both;
}
#header > div {
	padding: 1em;
}
<body>
    <div id="header">
        <div id="titulo">
            ::Noticias::
        </div>
        <div>
            Título
        </div>
    </div>
    <div id="footer" ¨>
        <ul id="result">
            <li>
                <a href=""></a>
                <p></p>
            </li>
        </ul>
    </div>
</body>

jsFiddle: link

    
03.01.2016 / 09:18
Refresh page after submitting the form Error in the authentication of a web system