combining jquery vTicker with getJSON

StackOverflow https://stackoverflow.com/questions/20976286

题

I have some code to get json data from another site like this:

<html>
<head><script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://richhollis.github.io/vticker/downloads/jquery.vticker.min.js>
</script>
</head>
<div id="example">
<ul class="row template">
        <li class="nohp"></li>
        <li class="content"></li>
        <li class="date"></li>
        <br/>
    </ul>
<script>
$(function() {

$.getJSON("http://1.handy-post-402.appspot.com/show?callback=?", function(json) {
console.log(json);
for (var i = 0; i < json.length; i++) {
    row = $(".row.template").clone();
    row.removeClass("template");
    var map     = json[i].propertyMap;
    var content = map.isi;
    var user    = map.No_HP;
    var date    = map.tanggal;

    row.find('.date').text(date);
    row.find('.nohp').text(user);
    row.find('.content').text(content);
    $("example").append(row);
}
$('#example').vTicker();
});
});
</script>
</body>
</html>

I want to animated it with some vertical ticker like vTicker, but the page display nothing. I've tried some example from this and modifying it but still didn't work. any idea how to combine vertical ticker with code above?

vTicker is not a must so I'll accept any other recommended vertical function too.

--edited: I change the code into the didn't work one instead of just $getJSON function code

有帮助吗？

解决方案

The vTicker plugin expects that you have a <div> with a <ul> inside. What it will do is take all the <li>s there and scroll them.

You are not creating your HTML correctly for the ticker to correctly render anything. You want to add a new <li> for each element you want scrolled. You were close, but you should be doing it like this:

<div id="slider">
    <ul class="row"></ul>
</div>

And then simply append the <li>s to it:

$(function () {
    $.getJSON("http://1.handy-post-402.appspot.com/show?callback=?", function (json) {
        for (var i = 0; i < json.length; i++) {
            var map = json[i].propertyMap;
            var content = map.isi;
            var user = map.No_HP;
            var date = map.tanggal;

            $('#example .row').append('<li>'+
                content + '<br>' +
                user + '<br/>' +
                date +
            '</li>');
        }

        $('#example').vTicker();
    });
});

DEMO: http://jsfiddle.net/PFex7/

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top