How to add Youtube Video Image to Blog? - javascript

I want to add a clickable YouTube video's image to my blog. I used the following code:
if (vidid == ""){
var imgvid ="<a href='" + pURL + "#post-title" + "' title='" + pTITLE + "'>"
+ '<img class="no-thumbnail" src="img.youtube.com/vi/undefined/default.jpg"; />'
+ "</a>";
}else{
var imgvid ="<a href='" + pURL + "#post-title" + "' title='" + pTITLE + "'>"
+ '<span class="play-button"></span><img class="'+ vidid
+ '" src="img.youtube.com/vi/'+vidid
+ '/default.jpg"; width="196px" height="147px"/>' + "</a>";
};
div.innerHTML = imgvid + '<div class="truncated-title"><h2>'
+ post_URL+'</h2></div>';
}
But it's not working. How can I resolve this?

Did you try using the YouTube integration API? You can get some more info in the documentation here and here. Using it that way, Youtube will automatically generate and show the preview image, player controls etc.
Additionally, there might already be an extension for showing Youtube Videos on your blog - do you use Wordpress or a different standard Blogging platform?
Edit
Now that I know you are using Blogger - you should be able to add the youtube video to any post by default, please refer to this manual for details.

Related

SharePoint ToC script - changing link style to headers

I'm working on online SharePoint site, where I want to have Table of Contents on my pages. It went successful, but I'm not satisfied with links to headers, which are in this style: PageName#heading_[number], where I would like to have PageName#{headingName}.
Is it possible? Here is link to my script: https://pastebin.com/MVsJf0hr . I suppose that it must be written somewhere here:
$(this).attr("id", "heading_" + i);
$("#theTOC").append("<a href='#heading_" + i + "' title='" + theLevel + "'>" + theLevelString + " " + $(this).text() + "</a><br />");

Replace javascript href content with php link

I need to replace one link from javascript with php link.
javascript line:
'<a href="' + res.attachment.guid + '" target="_blank">
php :
echo '<a href="' . wp_get_attachment_url($value->ID) . '" target="_blank">
javascript context:
if (res.success) {
$('.no_file_upload').remove();
var template = '<li class="attachment-' + res.attachment.ID + '">' +
'<p>' + res.attachment.post_title + '<span>' +
'<i class="fa fa-cloud-download" aria-hidden="true"></i>' +
'<i class="fa fa-times" aria-hidden="true" data-post-id="' + res.attachment.ID + '" data-project-id="' + res.attachment.project_id + '" data-file-name="' + res.attachment.post_title + '"></i>' +
'</p></span>' +
'<span>' + res.attachment.post_date + '</span>' +
'</li>';
I tried this way but fail:
<?php echo '<a href="' . wp_get_attachment_url($value->ID) . '" target="_blank"> ?>
So my Wordpress site is uploading all the files to Amazon S3 using WP Offload S3 Lite plugin. I had to alter some of the template files to manage to show the proper Amazon S3 link on website, I had change href links with wp_get_attachment_url($value->ID). The only thing left is one javascript file with that content that is still loading wrong download link. I need to make it work.
I think better you use file name instead of attachment url. get_attached_file( $data->ID )
https://developer.wordpress.org/reference/functions/get_attached_file/
also you can use https://wordpress.org/plugins/amazon-s3-and-cloudfront/ for correct url
for 1.
when you have file name you can generate your own link with a custom function.
Please let me know if there is any issue.
javascript line
<a href="' + cloudfront_url + res.attachment.guid + '" target="_blank">
Complete Javascript
var cloudfront_url = 'https://your_unique_id.cloudfront.net/'
if (res.success) {
$('.no_file_upload').remove();
var template = '<li class="attachment-' + res.attachment.ID + '">' +
'<p>' + res.attachment.post_title + '<span>' +
'<i class="fa fa-cloud-download" aria-hidden="true"></i>' +
'<i class="fa fa-times" aria-hidden="true" data-post-id="' + res.attachment.ID + '" data-project-id="' + res.attachment.project_id + '" data-file-name="' + res.attachment.post_title + '"></i>' +
'</p></span>' +
'<span>' + res.attachment.post_date + '</span>' +
'</li>';
}
You're trying to mix Javascript & PHP code. That is possible but let me explain how it works. PHP code is executed on server side & Javascript is executed on client side.
So, if you write down any php code in the javacsript code, it'll be executed at the time the HTML page is sent by the server to the user. Once the page is loaded, you can't call any PHP function inside the javascript code.
The PHP code is executed in the server before executing the JavaScript client side, the only way in your case is by using AJAX call to get the download link from the server.
In the other hand, there is an option to write JavaScript inside PHP, but not the inverse.

How to build an anchor link to open page in new window using Kendo Grid Columns?

I have a Kendo Grid with a column definition as follows:
columns.Bound(c => c.Id).Title("ID #").Width("150px").ClientTemplate("#=showDetails(data.Id)#");
I'm calling a method showdetails that returns a link to open the details in a new page.
I need some help figuring out how to build the link.
This is my showDetails method:
function showDetails(data) {
var returnText = "<a href='/Detail/Index/" + data + "'>" + data + "</a>";
return returnText;
}
How do I modify it, so, the details page is opened in a new window?
add:
target="_blank" to return statement
var returnText = "gt a href='/Detail/Index/" + data + "'>" + data + "</a>";
to:
var returnText = "gt a target='_blank' href='/Detail/Index/" + data + "'>" + data + "</a>";
Reference link: https://www.w3schools.com/tags/att_a_target.asp

email message with changing information

I am trying to create email templates just using an html file. This file will display a list of mailto links that, when clicked, will open a template with message. I got it working for the most part but some of these templates use prompts to add information to the message before creating it. The problem is that it doesn't seem to work right. Here is my code.
function sendReport(emailName, addresseList){
document.writeln('<a onClick="setPrompt(this,\'' + addresseList + '\')" href="mailto:' + addresseList + '?subject=' + 'Report' + '&body=' + 'Here is the report.' + '">' + emailName + '</a><br />');
}
function setPrompt(obj, addresseList){
var reportName = prompt("Report name","");
obj.attr('href', ='mailto:' + addresseList + '?subject=' + reportName + '&body=' + "Here is the report."); //<-- this is the line that is giving me trouble.
}
You have a typo in the last line and there is no .attr() built in function in Javascript. This should fix it:
obj.setAttribute('href', 'mailto:' + addresseList + '?subject=' + reportName + '&body=' + "Here is the report.");

javascript - print a pdf file

I have pdf files stored on my server.
I would like the user to be able to click a link/button and have a print dialog popup so they can print the pdf. I tried convincing them that its not a big deal to click download, then print it from the browser tab in which it opens, but they are fickle. :)
I have tried a few javascript solutions, mostly what I end up with is:
contentWindow is not defined
My js snippet is as follows
a = $("a:contains('Download PDF')")
url = a.attr('href')
uid = unique_id()
uid = "abc_" + uid
ifrm = $("<iframe width='500px' src='" + url + "' id='" + uid + "' name='" + uid + "' onload='this.contentWindow.print()'></iframe>")
$('body').append(ifrm)
I have also tried
...
ifrm = $("<iframe width='500px' src='" + url + "' id='" + uid + "' name='" + uid + "' ></iframe>")
$('body').append(ifrm)
pdf = document.findElementById(uid)
pdf.contentWindow.print();
And a few other variations with the same result. Or I get a print of "About:Blank" presumably because print is called before the document is loaded in the iframe.
The pdf opens and renders in the iframe.
Any ideas

Categories

Resources