lightbox video popup for youtube channel video - javascript

When I click on the image video popups but does not play i.e. shows only loading symbol.
My js code is
function showVideoList(channelid, rows, maxnumbervideos, apikey) {
try {
var videoinfo = JSON.parse(getJSONData("https://www.googleapis.com/youtube/v3/search?order=date&part=snippet&channelId=" + channelid + "&maxResults=" + maxnumbervideos + "&key=" + apikey));
var videos = videoinfo.items;
var videocount = videoinfo.pageInfo.totalResults;
// video listing
for (var j = 0; j < 3; j++) {
debugger;
//document.body.innerHTML+= "<div class='row'>" ;
// var div = document.getElementById("row");
//var append = "<div class='row'>"
$("#row").append("<div class='row'></div>");
for (var i = 0; i < 3; i++) {
var videoid = videos[i].id.videoId;
var videotitle = videos[i].snippet.title;
var videodescription = videos[i].snippet.description;
var videodate = videos[i].snippet.publishedAt; // date time published
var videothumbnail = videos[i].snippet.thumbnails.default.url; // default, medium or high
$('div.row').last().append("<div class='col s12 m4 l4'>"
+ "<div class='blog-post'>" + " <div class='card'> " + " <div class='card-image'> "
+ "<a href=https://www.youtube.com/watch?v=" + videoid + " target='_blank' class='voverlay'>"
+ "<img src='" + videothumbnail + "' style='border:none;float:left;margin-right:10px;' alt='" + videotitle + "' title='"
+ videotitle + "' /></a>"
+"</div>"
+ " <div class='card-content blog-post-content'> "
+ "<h2><a href='https://www.youtube.com/watch?v=" + videoid + "' target='_blank'>" + videotitle + "</a></h2>"
+ " <div class='meta-media'> "
+ "<div class='single-meta'>" + " Post By <a href='#'>Admin</a>" + " </div> "
+ " <div class='single-meta'> " + " Category : <a href='#'>Web/Design</a> " + " </div> "
+ " </div> "
+ " <div class='card-action'> "
+ " <a class='post-comment' href='#'><i class='material-icons'>comment</i><span>15</span></a> "
+ " <a class='readmore-btn' href='blog-single.html'>Read More</a> "
+ " </div> "
+"</div>" + "</div>" + "</div>" + "</div>"
);
}
document.body.innerHTML+="</div>";
// append += "</div>";
// div.innerHTML = append;
}
} catch (ex) {
alert(ex.message);
}
}

Related

Unable To See Calculated Field in LocalStorage using JavaScript

I have the following JS code for which I am calculating the insurance cost based on input provided by the user:
function AddQuote() {
if (ValidateInputs()) {
var json = {};
$(":input").each(function () {
json[$(this).attr("id")] = $(this).val();
});
var nextId = Number(localStorage.getItem('nextId'));
if (!nextId) {
nextId = 1;
}
localStorage.setItem("quote-" + nextId, JSON.stringify(json));
localStorage.setItem("nextId", String(nextId + 1));
$(location).prop('href', 'viewQuote.html?' + nextId);
}
}
function LoadQuoteData(id) {
var json = JSON.parse(localStorage.getItem("quote-" + id));
$(":input").each(function () {
$(this).val(json[$(this).attr("id")]);
});
var driverAge = Number(json['age']);
var driverExperience = Number(json['experience']);
var driverAccidents = Number(json['accidents']);
var subQuote;
var insuranceQuote = Number(json['finalQuote']);
if (driverExperience === 0) {
subQuote = 4000;
}
else if (driverExperience >= 1 && driverExperience <= 9) {
subQuote = 2500;
}
else {
subQuote = 1800;
}
if (driverAge >= 30 && driverExperience >= 2) {
insuranceQuote = subQuote * 0.75;
}
else {
insuranceQuote = subQuote;
}
//console.log(insuranceQuote);
console.log(json);
$("#finalQuote").val("$" + insuranceQuote);
}
I am using this in my HTML code as follows:
<script>
$(document).ready(function () {
var localStorageItems = Object.entries(localStorage);
var htmlCode = "";
$(localStorageItems).each(function () {
if ($(this)[0].startsWith("quote")) {
console.log($(this)[0]);
console.log($(this)[1]);
var quoteData = JSON.parse($(this)[1]);
var quoteAmount = "$" + quoteData['finalQuote'];
htmlCode +=
"<div class='container'>" +
"<div class='row pb-4 pt-4' style='border-bottom: 1px solid rgba(0,0,0,.125);'>" +
"<div class='col-md-6 '>" +
"<div class='card-header' style='margin-left: -1rem; margin-right: -1rem;'>Customer Information</div>" +
"<span class='d-block'><strong>First Name:</strong> " + quoteData['firstName'] + "</span>" +
"<span class='d-block'><strong>Last Name:</strong> " + quoteData['lastName'] + "</span>" +
"<span class='d-block'><strong>Address:</strong> " + quoteData['address'] + "</span>" +
"<span class='d-block'><strong>City:</strong> " + quoteData['city'] + "</span>" +
"<span class='d-block'><strong>Province:</strong> " + quoteData['province'] + "</span>" +
"<span class='d-block'><strong>Postal Code:</strong> " + quoteData['postalCode'] + "</span>" +
"<span class='d-block'><strong>Phone Number:</strong> " + quoteData['phone'] + "</span>" +
"<span class='d-block'><strong>Email:</strong> " + quoteData['email'] + "</span>" +
"</div>" +
"<div class='col-md-6'>" +
"<div class='card-header' style='margin-left: -1rem; margin-right: -1rem;'>Driving Information</div>" +
"<span class='d-block'><strong>Accidents:</strong> " + quoteData['accidents'] + "</span>" +
"<span class='d-block'><strong>Age:</strong> " + quoteData['age'] + "</span>" +
"<span class='d-block'><strong>Driving Experience:</strong> " + quoteData['experience'] + "</span>" +
"<span class='d-block'><strong>Insurance Quote:</strong> " + quoteAmount + "</span>" +
"<span class='d-block'><strong>" +
"</span>" +
"</div>" +
"</div>" +
"</div>" +
"</div>";
};
});
$("#quotesList").html(htmlCode);
});
</script>
But the problem is that the calculated finalQuote is not showing up on this HTML page (but all other fields are). Any ideas on what I'm missing / not doing correctly?

Toggle function problem, What am I doing wrong?

I've created a comment system that posts comments in an ordered list. My requirememnts were to add hide/show toggle function to each comment.
Currently, the toggle function only works on the first comment (even when you try to click on 2nd, 3rd, etc.)
I've tried to use querySelectAll, but it didn't work for me. What am I doing wrong?
<div class="textbox">
<h3>Leave comments</h3>
<label for=msg>Name</label><br>
<input type=text id=fname> <br>
<label for=msg>Content</label><br>
<textarea id=msg> </textarea>
<br>
<input type=button onclick="postcomments()" value="Send" />
<input type="reset" value="Reset" />
<ol id="showcomments" style="max-width:200px; font-size:12px; padding-left:10px;">
</ol>
</div>
<script>
var ans = [];
function postcomments() {
var fname = document.getElementById("fname").value;
var msg = document.getElementById("msg").value;
var lastpos = ans.length;
var current = new Date();
console.log(current);
var time = current.getHours() + ":" + (current.getMinutes() < 10 ? '0' : '') + current.getMinutes();
var date = current.getDate() + "." + (current.getMonth() + 1) + "." + current.getFullYear();
var i = 0;
ans[lastpos] = '<img src="Media/minusicon.png" alt="minusicon" onclick="toggle(document.getElementById("txt&quot))" style="width:8%;" id="plusminusicon">' + " " + "Sent By" + " " + '' + fname + '' + " " + " In" + " " + date + " " + "At" + " " + time + '<br>' + '<span id="txt" class="toggle_panel">' + msg + '</span>' + '<br>' + '-------------------------------';
var ol = document.getElementById("showcomments");
ol.innerHTML = "";
for (var i = 0; i < ans.length; i++) {
ol.innerHTML += "<li id=" + (i + 1) + ">" + ans[i] + "</li>";
}
}
function toggle(x) {
if (x.style.display === "none") {
x.style.display = "block";
document.getElementById("plusminusicon").src = "Media/minusicon.png";
} else {
x.style.display = "none";
document.getElementById("plusminusicon").src = "Media/plusicon.png";
}
}
</script>
You have always the same id for all "txt" span, so the browser change always the first.
If you don't want change much of your code the simpliest solution is add the lastpost variable to the span id and to the parameter of toggle function.
Here the changes to do:
ans[lastpos] = '<img src="Media/minusicon.png" alt="minusicon" onclick="toggle(' + lastpos + ')" style="width:8%;" id="plusminusicon' + lastpos + '">' + " " + "Sent By" + " " + '' + fname + '' + " " + " In" + " " + date + " " + "At" + " " + time + '<br>' + '<span id="txt' + lastpos + '" class="toggle_panel">' + msg + '</span>' + '<br>' + '-------------------------------';
function toggle(x) {
let comment = document.getElementById("txt" + x);
let icon = document.getElementById("plusminusicon" + x);
if (comment.style.display === "none") {
comment.style.display = "block";
icon.src = "Media/minusicon.png";
} else {
comment.style.display = "none";
icon.src = "Media/plusicon.png";
}
}
To bind click listeners to dynamically added elements, you can use event delegation.
document.addEventListener('click', function(e) {
if (e.target && e.target.classList.contains('comment')) {
// do something
}
})
jQuery makes it even easier.
$(document).on('click','.comment',function(){ //do something })
And here's a jsfiddle link to the complete code example. https://jsfiddle.net/ep2bnu0g/

Im getting objectHTMLimageElement instead of the image in my list item

function story(){
if(document.getElementById("area").value == "salwa"){
var oImg = document.createElement("img");
oImg.setAttribute('src', './images/logo.png');
oImg.setAttribute('alt', 'na');
oImg.setAttribute('height', '1px');
oImg.setAttribute('width', '1px');
document.body.appendChild(oImg);
document.getElementById("story-result").innerHTML += "<li>" + oImg + " </li>";
}else{
document.getElementById("li-result").innerHTML += "<h1>" + "no results" + " </h1>";
}
}
Is this working?
function story(){
if (document.getElementById("area").value == "salwa"){
document.getElementById("story-result").innerHTML = "<img src=" + "'./images/logo.png'" + "alt=" + "'na'" + "height=" + "'1px'" + "width=" + "'1px'" + ">" + "</img>";
} else {
document.getElementById("li-result").innerHTML += "<h1>" + "no results" + " </h1>";
}
}
You have to get the image source attribute and make it equal to the innerHTML of the element with id story-result.
You are currently using the image itself, not its src attribute.
Try this:
document.getElementById("story-result").innerHTML += "<li>" + oImg.getAttribute('src') + " </li>";

set background to dynamically created check box and text in div

I want to apply background to each check box and separated by some space. Is it possible to apply background to dynamically created check box in div
I have to set background to this line.
'<input type="checkbox" value="'+ ar2[i] + " " + " " + ar1[i] + '"/>'
+ ar1[i] + " " + " " + ar2[i] + '</br>' + '</br>' + '</br>'
for ( var i = 0; i < ar2.length; i++) {
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<input type="checkbox" value="'+ ar2[i] + " " + " " + ar1[i] + '"/>' + ar1[i] + " " + " " + ar2[i] + '</br>' + '</br>' + '</br>' );
newTextBoxDiv.appendTo("#TextBoxesGroup");
}
Try;
classx="classname";
for ( var i = 0; i < ar2.length; i++) {
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<input class="'+classx+'" type="checkbox" value="'+ ar2[i] + " " + " " + ar1[i] + '"/>' + ar1[i] + " " + " " + ar2[i] + '</br>' + '</br>' + '</br>' );
newTextBoxDiv.appendTo("#TextBoxesGroup");
}
You may create custom classes in css and assign one class name to classx and it will apply the class to the dynamically created checkbox. The checkbox will get styled accordingly.

Issues with Jquery ".append" in IE8

well, i've been having problems trying to use the ".append" in IE8, my code works fine in all browsers (even IE9), but I'm having issues with IE8.. Here's my code:
divLine = null
for(var i = ini; i < fim; i++ ){
if(i % 5 === 0){
var divLine = $("<div class='line' style='float:left;display:block;padding-top:25px;'></div>")
$("#products").append(divLine)
}
if (linkI[i] != "semLink") {
if (i != (4 + ini) && i != (9 + ini) && i != (14 + ini) && i != (19 + ini)) {
divLine.append("<div id='" + albuns[i] + "'style='float:left;display:block;'>" +
"<a href='" + url[i] + "'>" +
"<img src='" + imagesUrl[i] + "' width='170' />" + "</a>" +
"<div style='width:170px;'>" +
"<h3 class='shout bare mts'>" +
"<b>" + names[i] + "</b>" +
"</h3>" +
"<h6 class='mbs'>" +
albuns[i] +
"</h6>" +
"<a class='icons-comprar lfloat mtxs mrs' href='" + linkS[i] + "' target='_blank' >Comprar </br></a>" +
"<a class='icons-itunesSmall lfloat mtm' href='" + linkI[i] + "' target='_blank'>Itunes</a>" +
"</div>" +
"</div>" +
"<img src='http://assets.jumpseller.com/store/biscoitofino/themes/8055/space.png' width='30' style='float:left;display:block;'/>" +
"</div>")
} else {
divLine.append("<div id='" + albuns[i] + "' style='float:left;display:block;'>" +
"<a href='" + url[i] + "'>" +
"<img src='" + imagesUrl[i] + "' width='170' />" +
"</a>" +
"<div style='width:170px;'>" +
"<h3 class='shout bare mts'>" +
"<b>" + names[i] + "</b>" +
"</h3>" +
"<h6 class='mbs'>" +
albuns[i] +
"</h6>" +
"<a class='icons-comprar lfloat mtxs mrs' href='" + linkS[i] + "' target='_blank' >Comprar </br></a>" +
"<a class='icons-itunesSmall lfloat mtm' href='" + linkI[i] + "' target='_blank'>Itunes</a>" +
"</div>")
}
} else {
if (i != (4 + ini) && i != (9 + ini) && i != (14 + ini) && i != (19 + ini)) {
divLine.append("<div id='" + albuns[i] + "' style='float:left;display:block;'>" +
"<a href='" + url[i] + "'>" +
"<img src='" + imagesUrl[i] + "' width='170' />" +
"</a>" +
"<div style='width:170px;'>" +
"<h3 class='shout bare mts'>" +
"<b>" + names[i] + "</b>" +
"</h3>" +
"<h6 class='mbs'>" +
albuns[i] +
"</h6>" +
"<a class='icons-comprar lfloat mtxs mrs' href='" + linkS[i] + "' target='_blank' >Comprar </br></a>" +
"</div>" +
"</div>" +
"<img src='http://assets.jumpseller.com/store/biscoitofino/themes/8055/space.png' width='30' style='float:left;display:block;'/>" +
"</div>")
} else {
divLine.append("<div id='" + albuns[i] + "' style='float:left;display:block;'>" +
"<a href='" + url[i] + "'>" +
"<img src='" + imagesUrl[i] + "' width='170' />" +
"</a>" +
"<div style='width:170px;'>" +
"<h3 class='shout bare mts'>" +
"<b>" + names[i] + "</b>" +
"</h3>" +
"<h6 class='mbs'>" +
albuns[i] +
"</h6>" +
"<a class='icons-comprar lfloat mtxs mrs' href='" + linkS[i] + "' target='_blank' >Comprar </br></a>" +
"</div>" +
"</div>" +
"</div>")
}
}
}
in which:
albuns = new Array();
imagesUrl = new Array();
url = new Array();
names = new Array();
linkS = new Array();
linkI = new Array();
are already sorted arrays generated by a server.
I also took printscreens of the output in both chrome and IE8:
IE8 below:
Chrome below:
As we can notice the output in IE is completely distorted...
here's the site in question:
http://biscoitofino.jumpseller.com/catalogo
Any suggestions???
Thank you in advance!

Categories