We Keep Coding

How to add next previous buttons to popup?

I need to load XML data to next and previous buttons on the popup box. When button click, my code is fail to load the XML data. How can I implement the code.
Here is the script
function xmlParser(xml){
xml = $(xml).children();
$(xml).children().each(function () {
let tag = $(this).prop("tagName");
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" id="random">
<a href="#${tag}" id="openModalBtn">
<div>${image}</div>
<h5>${head}</h5>
</a>
</div>`;
let popup = `<div id="${tag}" class="overlay">
<div class="popup">
‹
›
<h6>${head}</h6>
<a class="close" href="#">×</a>
<div>${image2}</div>
</div>
</div>`;
$("#xmldata").append(html);
$("#popup").append(popup);
});
}
Plunker

Firstly div id is being duplicated if you use directly tag name. So use index in for loop and do some simple calculation to get prev & next items, something like:
$(xml).children().each(function (idx) {
let tag = $(this).prop("tagName");
let nextIdx = idx + 1;
let prevIdx = idx - 1;
//to make cyclic rotation
nextIdx = nextIdx == total ? 0 : nextIdx;
prevIdx = prevIdx == -1 ? (total -1) : prevIdx;
//..........check plunker code
http://next.plnkr.co/edit/Sj188FthvFu6H5uv?open=lib%2Fscript.js

Need YouTube Videos to be loaded in a separate HTML page

I have loaded Playlist items in my Home Page like this:
HTML:
<div id="youtube-playlist-feed_1"></div>
<div id="youtube-playlist-feed_2"></div>
<div id="youtube-playlist-feed_3"></div>
My Script to load Playlist is:
var htmlString = "";
var apiKey = 'AIzaSyDI4rWo_wVAxRZEIgF6_8sRZDj8OCOZZ38';
var playlistID = 'PLBhKKjnUR0XBVrHvtDOylN5XREHh9X1nt';
var maxResults = 7;
var playlists = [{
playlistId: 'PLJYHm_ZxWCKnQmapkDs7x47jkr-nw3l50',
el: '#youtube-playlist-feed_1'
},
{
playlistId: 'PLJYHm_ZxWCKmIBkoopKFK4kTTOmC1Zof0',
el: '#youtube-playlist-feed_2'
},
{
playlistId: 'PLBhKKjnUR0XAM2Wvi7JY5gLRpFLzIE-An',
el: '#youtube-playlist-feed_3'
}
];
playlists.forEach(function(playlist) {
getVideoFeedByPlaylistId(playlist.playlistId, playlist.el);
})
function getVideoFeedByPlaylistId(playlistId, el) {
$.getJSON('https://www.googleapis.com/youtube/v3/playlistItems?key=' + apiKey + '&playlistId=' + playlistId + '&part=snippet&maxResults=' + (maxResults > 50 ? 50 : maxResults), function(data) {
$.each(data.items, function(i, item) {
var videoID = item['snippet']['resourceId']['videoId'];
var title = item['snippet']['title'];
var videoURL = 'https://www.youtube.com/watch?v=' + videoID + '&list=' + playlistID + '&index=1';
htmlString += '<div class="video-wrap"><div class="video"><a target="_blank" href="' + videoURL + '"><img src="https://i.ytimg.com/vi/' + videoID + '/mqdefault.jpg"></a></div>' + '<div class="title"><a target="_blank" href="' + videoURL + '">' + title + '</a></div></div>';
});
$(el).html(htmlString);
htmlString = '';
});
}
Now, I have a separate page i.e. Player.html where I would like to have a YouTube Player and load the videos. For example, if a user clicks on 1st item of the playlist, that should be loaded in Player.html where I have my YouTube Player. How can I achieve this?

In Your script where you are loading playlist items replace this code just htmlString
htmlString += '<div class="video-wrap"><div class="video"><a target="_blank" href="#" onclick="player()"><img src="https://i.ytimg.com/vi/' + videoID + '/mqdefault.jpg"></a></div>' + '<div class="title"><a target="_blank" href="#" onclick="player()">' + title + '</a></div></div><input type="text" name="videoid" id="videoid" value="'+videoID+'" hidden>';
At the end of Index.html file:
Past this code:
<script type="text/javascript">
function player() {
var ID = document.getElementById('videoid').value;
document.location.href = 'player.html?vid='+ID;
}
</script>
And in your player.html file
<div id="display"></div>
<script type="text/javascript">
window.onload = function () {
var url = document.location.href,
params = url.split('?')[1].split('&'),
data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
var videoId = data.vid;
var output = '<iframe width="420" height="315" src="https://www.youtube.com/embed/'+videoId+'"></iframe>';
document.getElementById('display').innerHTML = output;
}
</script>

First of all pass VideoID in a href by writing this as a href
<div class="video-wrap"><div class="video">
<a target="_blank" href="player.php?id=' + videoID+ '">
<img src="https://i.ytimg.com/vi/' + videoID + '/mqdefault.jpg"></a>
</div>' + '<div class="title"><a target="_blank" href="player.php?id=' + videoID+ '">' + title + '</a></div></div>
Now in Player.php
Use GET method to get your id variable
like : $id = $_GET['id'];
in this file use this code to play video
​<iframe width="560" height="315" src="https://www.youtube.com/embed/<?php echo $id; ?>" frameborder="0" allowfullscreen></iframe>

In Your Videos displaying html file
you have to write something like this:
<a onclick="player()" >Watch</a>
<script type="text/javascript">
function player() {
videoid = 'a9Vh9TZkdSM'; //Your Video id
document.location.href = 'player.html?vid='+videoid;
}
</script>
And in
Player.html
Something like this:
<div id="display"></div>
<script type="text/javascript">
window.onload = function () {
var url = document.location.href,
params = url.split('?')[1].split('&'),
data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
var videoId = data.vid;
var output = '<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>';
document.getElementById('display').innerHTML = output;
}
</script>

Dynamically creating image link Jquery or vanilla Javascript

I am trying to figure out how to dynamically create a image with caption below it. I would like it so that when a user clicks the image or caption it redirects to a different page. I have a feeling what I am doing is wrong on many levels.
function createFrame(data){
// <div><img src=""><div></div></img></div>
var div = document.createElement('div');
var a = document.createElement('a');
var img = document.createElement('img');
a = a.innerHTML(img);
div.innerHTML(a);
return div;
});

Using .append() in jquery, you can append the image tags in the desired div.
$("#btn").click(function(){
$("#imgDiv").append('<img src="" alt="Image"/>')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Create Image Link</button>
<div id="imgDiv">
</div>

Following your idea of creat that you want, i did the following:
function createFrame(data){
// <div><img src=""><div></div></img></div>
var div = document.createElement('div');
var a = document.createElement('a');
a.href = 'your-href-link';
var img = document.createElement('img');
img.src = 'your-src-link';
var div_caption = document.createElement('div');
a.appenchild(img);
a.appenchild(div_caption);
div.appenchild(a);
});

There are several ways to do it with pure JS or with frameworks (jquery..).
Pure js :
Level 1 simple
function createFrame(src){
return "<div>"+
"<a href='"+src+"' target='_blank'>"+
"<img src='"+src+"' alt='demo'/>"+
"</a>"+
"</div>";
}
document.getElementById("demo").innerHTML = createFrame("http://lorempixel.com/100/100");
<div id="demo"></div>
<br/>
2nd Level
document.getElementById("demo").innerHTML = createFrame("http://lorempixel.com/100/100");
function createFrame(src=false, divID = false, link=false, aID=false, imgID=false, openToNewTab = false){
$html = "";
$html += "<div ";
if(divID !== false) $html += "id = '"+divID+"' ";
$html += ">";
$html += " <a href='";
$html += (link !== false)? link+"' ":"#' ";
$html += (openToNewTab !== false)? " target='_blank'":"";
$html += ">";
$html += "<img src='"+src+"' ";
$html += imgID? " id='"+imgID+"'":"";
$html += " /></a></div>";
return $html;
}
<div id="demo"></div>
3rd Level
var html = createFrame(
{"src":"http:lorempixel.com/100/100", "id":"img"},// img attributes
{"href":"http:lorempixel.com/100/100", "class":"caption", "target":"_blank"}, // a attributes
{"class":"imgContainer"}//div
);
document.getElementById("demo").innerHTML = html;
function createFrame(img={}, a={}, div={}){
var html = "";
html = TagGenerator("img", img, "",true);
html = TagGenerator("a", a, html);
html = TagGenerator("div", div, html);
return html;
}
function TagGenerator(tagname, attr=[], html="", endAbleTag=false){
var tag = "<"+tagname+" ", i;
for (i in attr)
tag += i+"='"+attr[i]+"' ";
if(!endAbleTag) tag += ">"+html+" </"+tagname+">";
else tag += "/>";
return tag;
}
<div id="demo"></div>

Get element from HTML object javascript

I have a HTML String and I want to get img element and initialize it.
var discountItem = '<li class="sidebar-brand" style="font-weight: bold; color: #9999 class="col-item">' +
'<div class="post-img-content">' +
'<img src=" " class="img-responsive" id="mimo" />'+
'<span class="post-title">'+
'<b>Perfumes</b><br>'+
'<b>Clássico</b>'+
'</span>'+
'<span class="round-tag">-15%</span>'+
'</div>'+
'</li>';
var k = app.clone(discountItem);
var df = document.createDocumentFragment();
// create a placeholder node to hold the innerHTML
var el = document.createElement('body');
el.innerHTML = k;
// append to the document fragment
df.appendChild(el);
// execute .getElementById
console.log(df.getElementByClassName('img-responsive');
view += k;
clone : function(obj){
try{
var copy = JSON.parse(JSON.stringify(obj));
} catch(ex){
console.log("you are using an old navigator");
}
return copy;
}
I tried this but it doesn't work.
My goal is to initialize the src of the image.
Could someone help me ?

If you're trying to find the img element, you can do a lot less work: Just create a body, append that HTML to it, and use querySelector:
var discountItem = '<li class="sidebar-brand" style="font-weight: bold; color: #9999 class="col-item">' +
'<div class="post-img-content">' +
'<img src=" " class="img-responsive" id="mimo" />'+
'<span class="post-title">'+
'<b>Perfumes</b><br>'+
'<b>Clássico</b>'+
'</span>'+
'<span class="round-tag">-15%</span>'+
'</div>'+
'</li>';
var body = document.createElement("body");
body.innerHTML = discountItem;
var img = body.querySelector(".img-responsive");
img.src = "source path here";

How to make clickable images in homepage

Make images Postings homepage clickable
Code I tried :
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<div id="thumbnail"><div class="thumbnail"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div></div></span>';
summ = summary_img;
}

ok prefer
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+' ';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<div id="thumbnail"><div class="thumbnail"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div></div></span>';
summ = summary_img;
}
var summary = imgtag + '<p>' + removeHtmlTag(div.innerHTML,summ) + '</p>';
div.innerHTML = summary;
}
//]]>
</script>