We Keep Coding

Ajax function is not display xml data on some mobile browsers

I tried to view XML data in html. This project works fine on desktop browsers but does not work on some mobile browsers. I feel like the issue is obviously but I don't know what to do. Please help.
<div class="row" id="xmldata"></div>
$(document).ready(function() {
$.ajax({
type: "GET",
url: "data.xml",
dataType: "xml",
success: xmlParser2
});
});
function xmlParser2(xml) {
xml = $(xml).children();
let total = $(xml).children().length;
$(xml).children().each(function(idx, index, item) {
let tag = $(this).prop("tagName");
let nextIdx = idx + 1;
let prevIdx = idx - 1;
//to make cyclic
nextIdx = nextIdx == total ? 0 : nextIdx;
prevIdx = prevIdx == -1 ? (total - 1) : prevIdx;
let image = '<img style="background-image:url(' + $(this).find("image").text() + ')"' + '" />';
let image2 = '<div><img src="' + $(this).find("image").text() + '" width="100%" alt="' + '" />' + '</div>';
let head = '<div>' + $(this).find("head").text() + '</div>';
let html = `<div class="col-sm-4 random reveal" id="random">
<div class="thumbnail randomdiv3">
<a href="#${tag + idx}" id="openModalBtn">
<div>${image}</div>
<h5>${head}</h5>
</a>
</div>
</div>`;
$("#xmldata").append(html);
});
}

How To Parse Blogger Rss feed Using Javascript and get output on a HTML Page?

I want to parse my blogger feed from below RSS Link
https://www.universalmanual.com/feeds/posts/default?alt=rss.
https://www.universalmanual.com/feeds/posts/default/-/[label]?alt=rss
.I want to show that parsed data on a plan HTML Page.
Is there any method to extract it data using javascript.
Usign JSON I will get Title, author name and summary but didn't able to get images, how to add images in below code
<script type="text/javascript">
function mycallback(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
var postUrl = json.feed.entry[i].link[j].href;
break;
}
}
var postimage = json.feed.entry[i].media$thumbnail.url;
var postTitle = json.feed.entry[i].title.$t;
var postAuthor = json.feed.entry[i].author[0].name.$t;
var postSummary = json.feed.entry[i].summary.$t;
var entryShort = postSummary.substring(0,400);
var entryEnd = entryShort.lastIndexOf(" ");
var postContent = entryShort.substring(0, entryEnd) + '...';
var item = '<div class="wrapper"><img src=' + postimage + '><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><span>'+ postAuthor + '</span><p>' + postContent + '</p></div>';
document.write(item);
}
}
</script>
<script src="https://www.universalmanual.com/feeds/posts/summary?orderby=published&max-results=500&alt=json-in-script&callback=mycallback"></script>

Why not using blogger JSON feed, It is lightweight compared to XML feed (used in Atom and RSS) You can use ?alt=json parameter to access json feed like this
https://www.universalmanual.com/feeds/posts/default?alt=json
To parse JSON feed using javascript use ?alt=json-in-script
The following example shows the last post title from your blog
<div id="content"></div>
<script>
function get(json) {
document.getElementById('content').innerHTML = "<h2>" + json.feed.entry[0].title.$t + "</h2>";
}
</script>
<script src="https://www.universalmanual.com/feeds/posts/default?alt=json-in-script&callback=get"></script>
To show post image in your code:
<script type="text/javascript">
function mycallback(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
var postUrl = json.feed.entry[i].link[j].href;
break;
}
}
var postTitle = json.feed.entry[i].title.$t;
var postAuthor = json.feed.entry[i].author[0].name.$t;
var postSummary = json.feed.entry[i].summary.$t;
var entryShort = postSummary.substring(0,400);
var entryEnd = entryShort.lastIndexOf(" ");
var postContent = entryShort.substring(0, entryEnd) + '...';
var postImage = json.feed.entry[i].media$thumbnail.url.replace('s72-c/','s1600/');
var item = '<div class="wrapper"><img src="' + postImage + '"/><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><span>'+ postAuthor + '</span><p>' + postContent + '</p></div>';
document.write(item);
}
}
</script>
<script src="https://www.universalmanual.com/feeds/posts/summary?orderby=published&max-results=5&alt=json-in-script&callback=mycallback"></script>

Why does my YouTube code not work with all playlists?

jsfiddle playlist first
Alum Songs Playlist perfectly works but unfortunately the same code is not working for another playlist Id
jsfiddle playlist second
Medical Animated Playlist does not work
var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/B2A4E1367126848D?v=2&alt=json&callback=?';
var videoURL = 'http://www.youtube.com/watch?v=';
$.getJSON(playListURL, function(data) {
var list_data = "";
$.each(data.feed.entry, function(i, item) {
var feedTitle = item.title.$t;
var feedURL = item.link[1].href;
var fragments = feedURL.split("/");
var videoID = fragments[fragments.length - 2];
var vid = item.media$group.yt$videoid.$t;
var url = videoURL + videoID;
var vidtitle = item.title.$t;
var vidviews = item.yt$statistics.viewCount;
var content = item.media$group.media$description.$t;
var thumb = "http://img.youtube.com/vi/" + videoID + "/default.jpg";
list_data += '<tbody><tr><td width="110"><img height="150" width="150" alt=' + feedTitle + ' src=' + thumb + ' style="padding: 5px;"></td><td><h5><a name="p4">' + vidtitle + '</h5><p><b>Views:-</b> <b>' + vidviews + '</b> </p><section class="toggle active"><label>Case Study <i class="icon icon-youtube-play"></i></label><div class="toggle-content"><p>' + content + '</p></p></div></section></td></tr></tbody></table></a><hr/>';
});
$(list_data).appendTo(".cont");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="cont">
</ul>

The reason is the video has no views, and as a result item.yt$statistics is undefined for some of the videos. Remove those variables, or check for undefined values before accessing viewCount.
I also noticed that the provided jsFiddle was not including jQuery, so I updated that in the jsFiddle below.
http://jsfiddle.net/cqp20zLc/1/

When retrieving a particular playlist thumbnail, it is not getting the views and description of the video

I am trying to retrieve a particular playlist thumbnail of user but here I stuck - it is not getting the views and description of the video. I want to allow the video within my website only.
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function() {
function LoadVids(startindex) {
if (typeof startindex === "undefined" || startindex === null) startindex = 1;
var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/PL3B8939169E1256C0?orderby=published&v=2&alt=json&&start-index=' + startindex;
var videoURL = 'http://www.youtube.com/watch?v=';
$.getJSON(playListURL, function(data) {
var list_data = "";
$.each(data.feed.entry, function(i, item) {
var feedTitle = item.title.$t;
var feedURL = item.link[1].href;
var fragments = feedURL.split("/");
var videoID = fragments[fragments.length - 2];
var vid = item.media$group.yt$videoid.$t;
var url = videoURL + videoID;
var vidtitle = item.title.$t;
var thumb = "http://img.youtube.com/vi/" + videoID + "/default.jpg";
list_data += ' < img alt = "'+ feedTitle+'"
src = "'+ thumb +'"
' + ' - ' + vidtitle + '
';
});
$(list_data).appendTo(".cont");
});
}
//
$(document).ready(function() {
LoadVids(1); // call on load more click
});
}); //
</script>
</head>
<body>
</body>
</html>

Your ajax seems to be ok. But i can't find any "play function" in your code. For that, i suggest you jquery.tubeplayer:
http://www.tikku.com/jquery-youtube-tubeplayer-plugin
Little example:
playVideo: function (events) {
var self = this;
var that = $(events.currentTarget);
var videoId = that.parents('.videopreview').find('.youtubeimage').attr('data-link');
that.parents('.videopreview').find('.youtubeimage').hide();
that.parents('.videopreview').find('.playicon').css({
"z-index": -20,
});
that.parents('.videopreview').find('.playvideo').tubeplayer({
width: 279, // the width of the player
height: 200, // the height of the player
allowFullScreen: "true", // true by default, allow user to go full screen
initialVideo: videoId, // the video that is loaded into the player
autoPlay: true,
preferredQuality: "default", // preferred quality: default, small, medium, large, hd720
});
},
Where "data-link" is the youtube video id:
JavaScript REGEX: How do I get the YouTube video id from a URL?
In your script:
$.each(data.feed.entry, function(i, item) {
var feedTitle = item.title.$t;
var feedURL = item.link[1].href;
var fragments = feedURL.split("/");
var videoID = fragments[fragments.length - 2];
var vid = item.media$group.yt$videoid.$t;
var url = videoURL + videoID;
var vidtitle = item.title.$t;
var description=item.media$group.media$description.$t;
var views=item.yt$statistics.viewCount;
var thumb = "http://img.youtube.com/vi/"+ videoID +"/default.jpg";
list_data += '
<img alt="'+ feedTitle+'" src="'+ thumb +'"' + ' - ' + vidtitle + '
';
});
$(list_data).appendTo(".cont");
});

align image randomized by function

This part of code works alright:
var cobras=new Array();
cobras[0] = '<img src="Cobra1.jpg">';
cobras[1] = '<img src="Cobra2.jpg">';
cobras[2] = '<img src="Cobra3.jpg">';
cobras[3] = '<img src="Cobra4.jpg">';
cobras[4] = '<img src="Cobra5.jpg">';
cobras[5] = '<img src="Cobra6.jpg">';
cobras[6] = '<img src="Cobra7.jpg">';
cobras[7] = '<img src="Cobra8.jpg">';
cobras[8] = '<img src="Cobra9.jpg">';
cobras[9] = '<img src="Cobra10.jpg">';
cobras[10] = '<img src="Cobra11.jpg">';
cobras[11] = '<img src="Cobra12.jpg">';
cobras[12] = '<img src="Cobra13.jpg">';
cobras[13] = '<img src="Cobra14.jpg">';
cobras[14] = '<img src="Cobra15.jpg">';
var numberChosen=Math.floor(Math.random()*15);
function makeDisappear() {
var elem = document.getElementById("main");
elem.style.visibility = "hidden";
var elem = document.getElementById("empty");
elem.style.visibility = "visible";
var bodyE1 = document.body;
bodyE1.innerHTML += cobras[numberChosen];
}
But it adds an image aligned to the left, and I want to align it at center. Here's what I've tried:
var bodyE2 = document.getElementById("parte");
bodyE2.innerHTML = cobras[numberChosen];
And here's how I call it:
<center>
<img id="parte" src=" ' + cobras[numberChosen] + ' ">
</center>
But the image doesn't appear, and if I inspect the element, there's is something like img src="Cobras7" "inside" the image part, like:
\/ <img id = "parte" src=" ' + cobras[numberChosen] + ' ">
<img src="Cobras7">
Any ideas?