I am developing application using jQuery Mobile and Phonegap and this application i want to integrate twitter.
i try this.
<script type="https://twitter.com/status/user_timeline/'user'.json?count=30&callback=listTweets" type="text/javascript"></script>
JAVASCRIPT IS:
function listTweets(data){
console.log(data);
var output = '<ul data-role="listview">';
$.each(data, function(key, val){
var text = data[key].text;
var thumbnail = data[key].user.profile_image_url;
var name = data[key].user.name;
output += '<li>';
output += '<img src="' +thumbnail+ '" alt="Photo Of ' +name+ '">';
output += '<div>' +text+ '</div>';
output += '</li>';
});
output += '</ul>';
$('#tweetlist').html(output);
}
html is:
<div data-role="page" id="tweets">
<div data-role="content" id="tweetlist">
</div>
</div>
it give me blank screen and when I inspect element it give me:
Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: only screen and (-webkit-min-device-pixel-ratio: 1.5), not all, only screen and (min-resolution: 240dpi)
Any suggestion
Thanks in advanced.
Use the refresh call as specified here : http://api.jquerymobile.com/listview/#method-refresh
$("#tweetlist").listview('refresh');
should works.
EDIT
My apologies. I didn't read your code carefully. The main problem is your $.each loop. You close the ultag and you display the result before the end of the loop (JS is functionnal don't you remember?) Try this:
function listTweets(data){
console.log(data);
var output = '<ul data-role="listview">';
var text, thumbnail, name;
// Use a loop instead a $.each
for(var i=0, _len=data.length; i < length; i++) {
text = data[i].text;
thumbnail = data[i].user.profile_image_url;
name = data[i].user.name;
output += '<li>';
output += '<img src="' +thumbnail+ '" alt="Photo Of ' +name+ '">';
output += '<div>' +text+ '</div>';
output += '</li>';
}
output += '</ul>';
$('#tweetlist').html(output);
$("#tweetlist").listview('refresh'); // In case of
}
Related
Currently making a website to index and play movies stored on my hard drive that I've recently pulled off dvds just as a little side project. I have a 'master movie list' JSON file with all the data I need for each movie including the name, video source, video poster source, and genre which I would like to allow the use of placing a movie in multiple different genres.
Currently the problem I'm having is while I'm parsing through the genre list generated its not placing the html in the correct ID that id like it to on the webpage.
For example:
"genre":"comedy,recent,scifi"
I went about it how I thought I should, through getJSON and setting an output variable to which I get the genre value, split to make it an array, and get the element by going through each of them in a loop. Its not placing it in the right place though. The example above would be placed in comedy, recent, scifi, horror, and a few others for some reason and I have absolutely no reason why.
$.getJSON('/webresource/data/movies.json', function(data) {
console.log(data);
var output = '';
var ele = $('');
$.each(data, function(key, val) {
output += '<div class="video_box lazy-background" video-src="' +
val.video_src + '" video-poster-src="' +
val.video_poster_src + '">' +
'<h5>' + val.name + '</h5>' +
'</div> ';
var genres = val.genre;
var genresarray = genres.split(',');
for (i = 0; i < genresarray.length; i++) {
var genreelement = $('#' + genresarray[i]);
genreelement.html(output);
}
});
});
[ {
"name": "a star is born", "video_src":"/files/movies/A%20Star%20Is%20Born/astarisborn.mp4", "video_poster_src":"https://images-na.ssl-images-amazon.com/images/I/51R-TU6VaTL.jpg", "genre":"recently,romance,drama"
}
] // this is an example of the json
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="genre_box">
<h3>RECENTLY ADDED</h3>
<div class="scroll_box" id="recently"></div>
</div>
<div class="genre_box">
<h3>ACTION</h3>
<div class="scroll_box" id="action"></div>
</div>
<div class="genre_box">
<h3>COMEDY</h3>
<div class="scroll_box" id="comedy"></div>
</div>
Your output variable is being appended to and kept on every iteration of your $.each loop. What you want is to append to the end of $("#action"), $("#comedy"), etc. You should do something along these lines:
$.getJSON('/webresource/data/movies.json', function(data) {
console.log(data);
$.each(data, function(key, val) {
var output = '<div class="video_box lazy-background" video-src="' +
val.video_src + '" video-poster-src="' +
val.video_poster_src + '">' +
'<h5>' + val.name + '</h5>' +
'</div> ';
var genres = val.genre;
var genresarray = genres.split(',');
for (var i = 0; i < genresarray.length; i++) {
var genreelement = $('#' + genresarray[i]);
genreelement.append(output);
}
});
});
I am making video playlist like youtube for my hybrid app. I populate/display the data using each function and append them from json data thrown by the webserver.
I have a sample json data here:
[{"video_id":"1","video_youtube_title":"This is the latest video",
"video_youtube_description":"Discription for the primary video.",
"video_youtube_thumbnail":"https://i.ytimg.com/vi/aVS4W7GZSq0/hqdefault.jpg",
"video_youtube_date_published":"2016-07-15 13:37:00",
"video_youtube_duration":"PT16M15S",
"video_youtube_link":"aVS4W7GZSq0",
"video_fb_link":"example/posts/1715658608683485",
"video_date_added":"2016-07-14 23:45:58"}]
,
[{
"video_id":"2",
"video_youtube_title":"Title 1",
"video_youtube_description":"Description1",
"video_youtube_thumbnail":"https://i.ytimg.com/vi/kPDnw3_1GOI/hqdefault.jpg",
"video_youtube_date_published":"2016-03-07 15:00:00",
"video_youtube_duration":"PT1M16S",
"video_youtube_link":"kPDnw3_1GOI",
"video_fb_link":"example/posts/1666877406894939",
"video_date_added":"2016-03-09 07:00:00"}
,
{
"video_id":"3",
"video_youtube_title":"Title 2",
"video_youtube_description":"Description2",
"video_youtube_thumbnail":"https://i.ytimg.com/vi/dRjE1JwdDLI/hqdefault.jpg",
"video_youtube_date_published":"2016-03-08 16:00:00",
"video_youtube_duration":"PT1M16S",
"video_youtube_link":"dRjE1JwdDLI",
"video_fb_link":"example/posts/1666877406894939",
"video_date_added":"2016-03-09 06:00:00"}]
So the first array is the primary video, the next array are the list video.
Here is my sample code in appending the data on my primary video:
var primary_videolink = (data[1][0].video_youtube_link);
var primary_videodescription = (data[1][0].video_youtube_description);
var primary_videodatepublished = (data[1][0].video_youtube_date_published);
var primary_videotitle = (data[1][0].video_youtube_title);
$('#primary-video').append('<iframe id="video" width="100%" height="auto" src="https://www.youtube.com/embed/'+ primary_videolink + '" frameborder="0" allowfullscreen></iframe>'+
'<div class="primary-video-details-wrap">'+
'<div class="primary-videotitle"> '+primary_videotitle+' <i class="fa fa-check-square" aria-hidden="true"></i></div>'+
'<div class="primary-videodatepublished"> Published on '+primary_videodatepublished +'</div>'+ '<div class="primary_videodescription">'+primary_videodescription+'</div>'+
'</div>'
);
Here is my sample code on appending the data on my video lists:
$.each(data[2], function(i, row) {
var video_link = row.video_youtube_link;
var video_img = row.video_youtube_thumbnail;
var video_title = row.video_youtube_title;
var video_description = row.video_youtube_description;
var video_duration = row.video_youtube_duration;
var video_published = row.video_youtube_date_published;
var str = "<div class='video-list-wrapper'>";
str += "<div class='video-wrap'>";
str += "<div class='left-video-info'><a href=#null onclick=document.getElementById('video').src='http://www.youtube.com/embed/"+video_link+"'><img src="+ video_img +" width='100%' height='auto'></a><span class='video-duration'>"+parseDuration(video_duration)+"</span></div>";
str += "<div class='right-video-info'>";
str += "<div class='video-title'>"+video_title+"</div>";
str += "<div class='video-date'>"+ video_published +" ago</div>";
str += "</div>";//right-info
str += "</div>";//video-wrap
str += '</div>';
$('#video-list').append(str);
});
The code works fine and it displays the primary video and the list of video(thumbnails) below of it. When I clicked any of the thumbnails, the primary video will be able to change according to the youtube url that it contains. This is working fine. This is how it looks like.
Added: Jsfiddle https://jsfiddle.net/xkevin/h2hegehv/
My problem now is on how to show the details (video title, description, date etc.) of the video I have clicked. So that the primary video details could be change too*(not only the video)*. Is there a way I can change the details depending on what video I have clicked using jquery? I hope you understand my problem. Thank you!
Edit: I am open for any suggestion on how I can better develop this video playlist or what should I consider to make this things workout. Thanks.
I have wrote and revise some code as less as possible but achieve what you want ,
maybe you can have a look :
var video_inf_array = [];
$.each(data[2], function(i, row) {
var video_link = row.video_youtube_link;
var video_img = row.video_youtube_thumbnail;
var video_title = row.video_youtube_title;
var video_description = row.video_youtube_description;
var video_duration = row.video_youtube_duration;
var video_published = row.video_youtube_date_published;
var all_video_inf = { // an object to carry one video's all information
video_link : video_link,
video_img : video_img ,
video_title : video_title ,
video_description : video_description ,
// ... all key value above ,and maybe u wanna simplify it like 'video_published : row.video_youtube_date_published'
}
var str = "<div class='video-list-wrapper'>";
str += "<div class='video-wrap'>";
str += "<div class='left-video-info'><img src="+ video_img +" width='100%' height='auto'><span class='video-duration'>"+parseDuration(video_duration)+"</span></div>";
str += "<div class='right-video-info'>";
str += "<div class='video-title'>"+video_title+"</div>";
str += "<div class='video-date'>"+ timeago(date)+" ago</div>";
str += "</div>";//right-info
str += "</div>";//video-wrap
str += '</div>';
$('#video-list').append(str);
video_inf_array.push(all_video_inf); //push this video's information to an array
});
function replace_to_primary(index){
$('#video').attr('src',video_inf_array[index].video_link);
$('.primary-videotitle').text(video_inf_array[index].video_title);
$('.primary_videodescription').text(video_inf_array[index].video_description);
// ... handle other information like above pattern .
}
===========================================================================
Sorry for late to provide correct answer , At first , I keep to revise as less as possible , but now I revise a little more to make this clearly
There is a saying that using onClick() is a bad practice , here is why.
So I do it with more jquery , the index() api is the key that maybe you wanna look into more =)
here is a JSFiddle : https://jsfiddle.net/Carr1005/pusyyen1/2/
I'm having issues dynamically creating content from an array of images. What I want to happen is that when keywords are entered into the searchbar (try "joyride" or "nick"), all of the images that match the keywords show up. Currently, only one image shows up, and it doesn't necessarily match the keyword. I think I'm going wrong with the javascript function - I feel like I shouldn't be using innerHTML to create the photos, especially because when the keyword is deleted, it just leaves the one image.
Would it be easier to do it all in jQuery/javascript, instead of generating the initial gallery of images in jQuery and trying to do the filtering in javascript? I'm lost.
http://scf.usc.edu/~uota/itp301/final/odc-photos.html
This is a working version of the page, with the arrays and other code that I am using.
Thanks in advance!
$(document).ready(function(){
for(var i = 0; i < src.length; i++){
var content = "<div class='pics' id='imagesection" + i + "'>";
content += "<div class='images'><img class='imagesfiles' height='133px' width='200px' src='" + src[i] + "'></div>";
content += "</div>";
$("#gallery").append(content).hide().fadeIn(250);
}
});
var songSearch = function(keyword){
var foundFlag = false;
var content = "";
for (var i = 0; i < src.length; i++){
if (tags[i].toLowerCase().indexOf(keyword) != -1 || keyword == "") {
content = "<div class='pics' id='imagesection" + i + "'>";
content += "<div class='images'><img class='imagesfiles' height='133px' width='200px' src='" + src[i] + "'></div>";
content += "</div>";
findFlag = true;
}
}
if(findFlag){
document.getElementById("gallery").innerHTML = content;
}
else{
content = "Your search did not return any results.";
}
}
</script>
It looks like the problem is on this line in the songSearch function:
content = "<div class='pics' id='imagesection" + i + "'>";
You are redefining the variable content instead of concatenating it. This way it will always be just the last image. Try changing it to:
content += "<div class='pics' id='imagesection" + i + "'>";
There is also have a variable inside the songSearch function called foundFlag that is later referenced as findFlag. That shouldn't be causing the issue though.
I'm using the z weatherfeed plugin.
It already pulls most of the data from yweather api but I need the latitude and longitude.
The plugin gets the data for each item element like this for example:
html += '<div class="weatherCountry">'+ feed.location.country +'</div>';
However, if I try this...
html += '<div class="latitude">' + feed.item.geo.lat + '</div>';
html += '<div class="longitude">' + feed.item.geo.long + '</div>';
...it doesn't get the data for these elements.
How should I go about accessing both the geo:lat and geo:long?
Here's a live example: http://jsbin.com/sibafeke/1/edit
The data for geo:lat and geo:long can be accessed this way:
html += '<div class="latitude">' + feed.item.lat + '</div>';
html += '<div class="longitude">' + feed.item.long + '</div>';
I'm adding some amount of div based on the xml list which contain some data and url
Currently trying to use onClick but it doesn't seems right on the js that loads the div part.
//retrieve each of the data field from ITEM
var url = item.find('url').text();
var image = item.find('project-img').text();
var title = item.find('id').text();
var desc = item.find('desc').text();
var html;
//Embed them into HTML code
html = '<div class="project"><img src="' + image + '" alt="' + title + '" />';
html += '<div class="info">';
html += '<div class="title">'+title+'</div>';
html += '<div role="button" class="launch" onclick="window.open('+url+',"mywindow");">Launch Website</div>';
html += '<div role="button" class="more">View More</div>';
html += '</div></div>';
I think it somehow get mess up on the adding 'url' part with ' or "
Or there would be a much easier way to call a link on such situation?
as per your requirement correct syntax would be
html += '<div role="button" class="launch" onclick="window.open(\''+url+'\',\'mywindow\');">Launch Website</div>';
I think you have an error (the only one i could spot), so try the following:
onclick="window.open('+url+',\'mywindow\');"