I found this code online that will show the most recent video from a Vimeo account...
$(function() {
$.getJSON('http://vimeo.com/api/v2/VIMEO-ACCOUNT-NAME/videos.json?callback=?', {format: "json"}, function(videoList) {
$.getJSON('http://vimeo.com/api/oembed.json?url=http%3A//vimeo.com/' + videoList[0].id + '&byline=false&portrait=false&callback=?', {format: "json"},
function(videoProperties) {
document.getElementById("vimeoRecent").innerHTML=videoProperties.html
document.getElementById("vimeoDescription").innerHTML="<p><a href='" + videoList[0].url + "'>" + videoProperties.title + "</a> from <a href='" + videoProperties.author_url + "'>" + videoProperties.author_name + "</a> on <a href='http://vimeo.com'>Vimeo</a>.</p><p>" + videoProperties.description + "</p>"
});
});
});
I'm trying to figure out how to get it to display the 2 most recent videos, instead of one. I tried to add another item to the array e.g. [0,1], but that just breaks the script.
Can anyone suggest how I could get this script to display 2 videos? Thanks!
Here's a non-functioning jsfiddle just to show the code more clearly.
You need to repeat the second getJSON for the second element using videoList[1].id, and inserting it into other divs
$(function() {
$.getJSON('http://vimeo.com/api/v2/VIMEO-ACCOUNT-NAME/videos.json?callback=?', {format: "json"}, function(videoList) {
$.getJSON('http://vimeo.com/api/oembed.json?url=http%3A//vimeo.com/' + videoList[0].id + '&byline=false&portrait=false&callback=?', {format: "json"},
function(videoProperties) {
document.getElementById("vimeoRecent").innerHTML=videoProperties.html
document.getElementById("vimeoDescription").innerHTML="<p><a href='" + videoList[0].url + "'>" + videoProperties.title + "</a> from <a href='" + videoProperties.author_url + "'>" + videoProperties.author_name + "</a> on <a href='http://vimeo.com'>Vimeo</a>.</p><p>" + videoProperties.description + "</p>"
});
//get second video (insert into another div)
$.getJSON('http://vimeo.com/api/oembed.json?url=http%3A//vimeo.com/' + videoList[1].id + '&byline=false&portrait=false&callback=?', {format: "json"},
function(videoProperties) {
document.getElementById("vimeoRecent2").innerHTML=videoProperties.html
document.getElementById("vimeoDescription2").innerHTML="<p><a href='" + videoList[1].url + "'>" + videoProperties.title + "</a> from <a href='" + videoProperties.author_url + "'>" + videoProperties.author_name + "</a> on <a href='http://vimeo.com'>Vimeo</a>.</p><p>" + videoProperties.description + "</p>"
});
});
});
Related
i want to pass dynamic imei number , instead of static imei. i want to pass
obj[i].DeviceImei
inside the href tag at the place of 1009 for the google map marker info window view more option.
var contentString = '<div id="content">' +
'<div id="siteNotice">' +
"</div>" +
'<div id="bodyContent">' +
"<p><b>Location: " + obj[i].location + "<br>"
+ "\n" +"IMEI: " + obj[i].DeviceImei +"<br>"
+ "\n" + "PRV Trip: " + obj[i].PRV_T + "<br>"
+'<a href="http://hostname/1009">' +
"View More" +
"</p>" +
"</div>" +
"</div>";
You can scape quotes with \", so in your case it would be:
+'<a href=\"http://hostname/' + obj[i].PRV_T + '\">' +
I am building a web app that allows users to mark which episode of a show they have watched. On load it has a ng-click event called markEpisode(). Once that is clicked, I want the ng-click event to change to unmarkEpisode().
Currently I have it removing the ng-click attribute and then re-adding a new one. But doesn't seem to work.
// Unmark Episode As Watched
$scope.unmarkEpisode = function(episode_number, season_number, id) {
$http.post('/api/show/' + id + '/season/' + season_number + '/episode/' + episode_number + '/unwatch')
.then(response => {
$('.episode-artwork[data-episode-season="' + episode_number + season_number + '"]').removeAttr('ng-click').attr('ng-click', 'markEpisode(' + episode_number + "," + season_number + "," + id + ')');
});
};
This is how I add the episodes in
$('#episodes .row').append($compile('<div class="col-sm-3">' +
'<div data-episode-season="' + response.data.episodes[i].episode_number + response.data.episodes[i].season_number + '" class="episode-artwork" ng-click="markEpisode(' + response.data.episodes[i].episode_number + "," + season_number + "," + id + ')" style="background-image: url(' + imageURL + ')">' +
'</div>' +
'<p class="episode-name">' + response.data.episodes[i].episode_number + '. ' + response.data.episodes[i].name + '</p>' +
'<p class="episode-text">' + response.data.episodes[i].overview + '</p></div>')($scope));
It would be good to have two links or buttons: one for mark, one for unmark.
Each button should have an *ngIf="item.isMarked" or *ngIf="!item.isMarked".
I think that it's not a good idea to mix angular and jquery. If you are working with angular, there is no need to manipulate the dom via jQuery.
I'm facing a freak problem in jquery. When I try to populate a list from a table it becomes empty if it contains a special character like sid'ahmed. When I change it to sidi ahmed it works perfectly. This is my code to populate two lists:
$.getJSON("get-data.php?dat=driver", function(data) {
var stringToAppend1 = "<option value='" + day_Shift + "'>" + day_Shift + "</option>";
var stringToAppend2 = "<option value='" + night_Shift + "'>" + night_Shift + "</option>";
$.each(data, function(key, val) {
stringToAppend1 += "<option value='" + val.prenom + " / " + val.nom + " : " + val.telephone + "'>" + val.prenom + " / " + val.nom + " : " + val.telephone + "</option>";
stringToAppend2 += "<option value='" + val.prenom + " / " + val.nom + " : " + val.telephone + "'>" + val.prenom + " / " + val.nom + " : " + val.telephone + "</option>";
});
$("#night_Shift_text" + id).html(stringToAppend2);
$("#day_Shift_text" + id).html(stringToAppend1);
});
You should escape the single quote by using replace function as shown below. Use this replace whereever needed.
day_Shift = day_Shift.replace(/'/g, "\\'");
Hope this helps!!
I am not sure why, but the following
href='javascript:"+ openextlink('http://www.ipetfindr.com/shop/product/' + item._id.$id);+"'
seems to run automatically without the user clicking.
document.getElementById("shop-items").innerHTML += "<div class='product " + cssclass + "'><div class='product-images-smaller'><span class='shop-large-image'><img src='" + item.pictures[0] + "'/></span></div><h1>" + item.name + "</h1><div class='prodtext'><b>Status:</b> " + item.status + "<br><b>Price:</b> $" + item.price + "<br><a id='shop_" + item._id.$id + "' href='javascript:"+ openextlink('http://www.ipetfindr.com/shop/product/' + item._id.$id);+"'><h3 id='dshop_" + item._id.$id + "' class='green_button'>Buy Now</h3></a></div></div>";
could anyone please tell me why.
href='javascript:"+ openextlink('http://www.ipetfindr.com/shop/product/'
I see a double quote , is it a typo, change to
href='javascript:'+ openextlink('http://www.ipetfindr.com/shop/product/'
This element loads last and with delay on the page...
I've created a dynamic header with an external javascript file for my static html page.
I need help slimming down the code.
Also, to call the function, I call the body onLoad method. Any suggestions on how to call this EXTERNAL function before ALL the contents of the page loads?
function addHeaders(){
var emptyHTML = document.getElementById("category_header").innerHTML;
var addHTML =
"<span>" + emptyHTML + "<a href='/broadcast_webcast/' class='catnav'>" + "Live Broadcasts & Webcasts" + "</a>" + "</span>"
+ "<span>" + "<a href='/business/' class='catnav'>" + "Business" + "</a>" + "</span>"
+ "<span>" + "<a href='/celebrities/' class='catnav'>" + "Celebrities" + "</a>" + "</span>"
+ "<span>" + "<a href='/culture/' class='catnav'>" + "Culture" + "</a>" + "</span>"
+ "<span>" + "<a href='/education/' class='catnav'>" + "Education" + "</a>" + "</span>"
+ "<span>" + "<a href='/energy/' class='catnav'>" + "Energy" + "</a>" + "</span>"
+ "<span>" + "<a href='/entertainment/' class='catnav'>" + "Entertainment" + "</a>" + "</span>"
+ "<span>" + "<a href='/environment/' class='catnav'>" + "Environment" + "</a>" + "</span>"
+ "<span>" + "<a href='/fashion/' class='catnav'>" + "Fashion" + "</a>" + "</span>"
+ "<br>"
+ "<span>" + "<a href='/health/' class='catnav'>" + "Health & Fitness" + "</a>" + "</span>"
+ "<span>" + "<a href='/humanitarian/' class='catnav'>" + "Humanitarian" + "</a>" + "</span>"
+ "<span>" + "<a href='/movies/' class='catnav'>" + "Movies" + "</a>" + "</span>"
+ "<span>" + "<a href='/music/' class='catnav'>" + "Music" + "</a>" + "</span>"
+ "<span>" + "<a href='/hollywood/' class='catnav'>" + "Hollywood" + "</a>" + "</span>"
+ "<span>" + "<a href='/newyork/' class='catnav'>" + "New York City" + "</a>" + "</span>"
+ "<span>" + "<a href='/scienceandtech/' class='catnav'>" + "Science & Technology" + "</a>" + "</span>"
+ "<span>" + "<a href='/sports/' class='catnav'>" + "Sports" + "</a>" + "</span>"
+ "<span>" + "<a href='/videogames/' class='catnav'>"+ "Video Games" + "</a>" + "</span>"
document.getElementById("category_header").innerHTML = addHTML;
var getNav = document.getElementById("navtop").innerHTML;
var createNav =
"<span class='navtop'>" + getNav + "<a href='../' class='navtop'>" + "Home" + "</a>" + "</span>"
+ "<span class='navtop'>" + "<a href='/contact-us' class='navtop'>" + "Contact Us" + "</a>" + "</span>"
+ "<span class='navtop'>" + "<a href='/our-expertise' class='navtop'>" + "Our Expertise" + "</a>" + "</span>"
+ "<span class='navtop'>" + "<a href='/worldwide-studios-offices/' class='navtop'>" + "Bader TV Worldwide Studios & Offices" + "</a>" + "</span>"
+ "<span class='navtop'>" + "<a href='/careers' class='navtop'>" + "Careers" + "</a>" + "</span>"
+ "<span class='navtop'>" + "<a href='/urgent-video-requests' class='navtop'>" + "Urgent video Requests" + "</a>" + "</span>"
document.getElementById("navtop").innerHTML = createNav;
}
ref: [badertv.com]
Step 1: Reduce Duplication (make a function which makes the span and a tags give a url and text.
Step 2: Use an array and loop for url and text.
function makeLink(url, text){
return "<span><a href='"+url+"' class='catnav'>"+text+"</a></span>";
}
var url = ['/business/','/celebrities/',...];
var text = ['Business','Celebrities',...];
var out = '';
for(var i = 0; i < url.length; i++){
out += makeLink(url[i],text[i]);
}
add any special cases and you're all set.
In both addHTML and createNav you have only one dynamic variable. Why the concatenation?
Addition:
You can just put the whole thing in a function and call it at after you close the parent tag for the element that will hold the content (you can set two function if the two strings are not for the same container).
The slimming down I guess could go like this, it will spare you a few bytes but I wonder if it is worth the effort. For the loading part: calling this in body onload is safe because it probably guarantees that the getElementbyId will work. If you put a script tag near the end of the </body> tag it might work also but on different browser the behavior might be different (aka broken).
function link(linkText) {
return "<span><a href='/" + linkText[0] + "/' class='catnav'>" + linkText[1] + "</a></span>";
}
function addHeaders(){
var emptyHTML = document.getElementById("category_header").innerHTML,
linkTexts = [
["broadcast_webcast", "Live Broadcasts & Webcasts"],
["business", "Business"]
// etc
],
addHtml;
addHtml = new [];
for (i=0;i<linkTexts.length;i += 1) {
addHtml.push(link(linkTexts[i]));
}
document.getElementById("category_header").innerHTML = addHtml.join("");
// rest of the code
}