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