combining jquery vTicker with getJSON

Question

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

What's the problem here? What did you try that didn't work? Did you follow the example at https://github.com/richhollis/vticker? — gen_Eric, Jan 07 '14 at 17:05
@RocketHazmat thanks for the respond, I've tried the link above but didn't get any result as well. any idea how to use this ticker with json feed? — sabrina, Jan 08 '14 at 15:17
Why are you creating a new `
` (all with the same ID) and a new `
` inside the `for` loop? Look at the example (http://richhollis.github.io/vticker/) again and make sure to follow the way their HTML is. Also remember that IDs *must* be unique on the page. P.S. Do you want one scroller or three scrollers? — gen_Eric, Jan 08 '14 at 15:25
@RocketHazmat I've edited the code with modification from http://richhollis.github.io/vticker/, can you tell me what's wrong with this code? and btw I intend to make one scroller that display 2/3 list. — sabrina, Jan 08 '14 at 15:57

score 0 · Accepted Answer · answered Jan 08 '14 at 16:13

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/

combining jquery vTicker with getJSON

1 Answers1