Fancybox iframe does not appear - javascript

HTML
<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas">Youtube (iframe)</a>
This code line works but I want to add dynamically javascript code.
JS
'<li>' +
'<div class="list-left">' +
'<img src="' + thumb + '">' +
'</div>' +
'<div class="list-right">' +
'<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/' + videoID + '"><h3>' + title + '</h3></a>' +
'<small>By <span class="Title">' + channelTitle + '</span> on ' + videoDate + '</small>' +
'<p>' + description + '</p>' +
'</div>' +
'</li>' +
'<div class="clearfix"></div>' +
'';
When I clicked the link, I can't open with fancybox. It's open with new page and console says
Mixed Content: The page at 'https://www.youtube.com/embed/OFMSUI7PAS8'
was loaded over HTTPS, but requested an insecure image
'http://www.youtube.com/favicon.ico'. This content should also be served over HTTPS.

Update
I just used your pen and everything worked fine for me, you forgot to pass type: 'iframe' to fancybox, also you should put your js code in js section in codepen, here is screenshot
And here is the codepen's link: Click me

Related

The attached email appears in compose mode when open in desktop Outlook

I attached an email message to a new message before sending it. But, the received attachment is editable on Outlook Desktop and is not on Outlook web. It means that when I try to open the attachment, it appears in compose mode in Outlook desktop. I used createItem to create and send the message, and ItemAttachment to put the attachment. I don't understand why it works on the web and not on the desktop.
Here is the part of code which make the attachment:
var soap = '<m:CreateItem MessageDisposition="SendAndSaveCopy">'+
' <m:Items>' +
' <t:Message>' +
' <t:Subject>' + subject + '</t:Subject>' +
' <t:Body BodyType="HTML">' + body + '</t:Body>' +
' <t:Attachments>' +
' <t:ItemAttachment>' +
' <t:Name>' + attachmentName + '</t:Name>' +
' <t:IsInline>false</t:IsInline>' +
' <t:Message>' +
' <t:MimeContent CharacterSet="UTF-8">' + attachmentMime + '</t:MimeContent>' +
' </t:Message>' +
' </t:ItemAttachment>' +
' </t:Attachments>' +
' <t:ToRecipients><t:Mailbox><t:EmailAddress>' + to + '</t:EmailAddress></t:Mailbox></t:ToRecipients>' +
' </t:Message>' +
' </m:Items>' +
'</m:CreateItem>';
Thank you.
You need to set the PR_MessageFlags extended property https://msdn.microsoft.com/en-us/library/ee160304(v=exchg.80).aspx on the attachment to make it appear sent eg
<t:Message>
<t:ItemClass>IPM.Note</t:ItemClass>
<t:Subject>subject</t:Subject>
<t:Body BodyType="HTML">body</t:Body>
<t:IsRead>false</t:IsRead>
<t:ExtendedProperty>
<t:ExtendedFieldURI PropertyTag="3591" PropertyType="Integer" />
<t:Value>1</t:Value>
</t:ExtendedProperty>
</t:Message>

How to actually use meta tags to share data through social networks?

So I'm trying to do a website that has multiple images with their own content and allow users to click on a dropdown next to an image and share that image and the content to: Twitter, Facebook, LinkedIn, and Email.
What I've looked into is creating a separate URL for each image with it's content. Then in each page setting it's description, image, etc. in the meta tags. So on the landing page when they click to share it's actually pulling a separate page.
My question is...how do I share meta tag information to Twitter, Facebook, LinkedIn, and Email?
I've tried for Twitter:
<a rel="nofollow" class="share-twitter sd-button share-icon no-text" href="http://twitter.com/share?text=Textgoeshere&url=https://www.landingpage.com/&hashtags=example" target="_blank" title="Click to share on Twitter"><span></span><span class="sharing-screen-reader-text">Click to share on Twitter (Opens in new window)</span></a>
This seems like a lot of text that I would have to then write for each image. Plus it doesn't pull the image, author, etc. Isn't there a way to grab the meta tag information to share to Twitter here?
I mean I have the meta tags present (below) but no idea how to actually use them to share.
<meta name="twitter:card" content="Here's Twitter Card"/>
<meta name="twitter:site" content="#author"/>
<meta name="twitter:domain" content="#author"/>
<meta name="twitter:url" content="http://www.mainpage.com">
<meta name="twitter:title" content="Twitter Title">
<meta name="twitter:description" content="Here is the Twitter Description">
<meta name="twitter:image" content="link to image">
Found the following for Facebook:
https://developers.facebook.com/docs/plugins/share-button#
Found the following for Twitter:
https://publish.twitter.com/#
Okay here is what I'll do for you because I am not sure what answer you are looking for here. We are going to write some javacript that can do this for you.
Here you have your HTML tag. It's important that you give every div the class "twitter-input-card" and you give them an onload function of "updateCards()".
HTML here:
<div class="twitter-input-cards" onload="updateCards(tCard1)"> </div>
Now here is your js....:
//this function creates your object
function twitterCards(twitterCard, twitterAuthor1, twitterAuthor2, twitterURL, twitterTitle, twitterDes, twitterImg) {
//this will be twitter:card
this.twitterCard = twitterCard;
//this will be twitter:site
this.twitterAuthor1 = twitterAuthor1;
//this will be twitter:domain
this.twitterAuthor2 = twitterAuthor2;
//this will be twitter:url
this.twitterURL = twitterURL;
//this will be twitter:title
this.twitterTitle = twitterTitle;
//this will be twitter:description
this.twitterDes = twitterDes;
//this will be twitter:image
this.twitterImg = twitterImg;
}
//this isn't as important but i am not familiar with twitter cards so if there are more meta tags you can define them here.
var tcard = 'twitter:card';
var tsite = 'twitter:site';
var tdomain = 'twitter:domain';
var turl = 'twitter:url';
var ttitle = 'twitter:title';
var tdes = 'twitter:description';
var timg = 'twitter:image';
//this function will update the card with information
function updateCards(selectCard){
cardSelect = selectCard;
document.getElementsByClassName("twitter-input-cards").innerHTML = "<meta name=" + "'" + tcard + "' content = '" + twitterCard + "'/>"
document.getElementsByClassName("twitter-input-cards").innerHTML = "<meta name=" + "'" + tsite + "' content = '" + twitterAuthor1 + "'/>"
document.getElementsByClassName("twitter-input-cards").innerHTML = "<meta name=" + "'" + tdomain + "' content = '" + twitterAuthor2 + "'/>"
document.getElementsByClassName("twitter-input-cards").innerHTML = "<meta name=" + "'" + turl + "' content = '" + twitterURL + "'/>"
document.getElementsByClassName("twitter-input-cards").innerHTML = "<meta name=" + "'" + ttitle + "' content = '" + twitterTitle + "'/>"
document.getElementsByClassName("twitter-input-cards").innerHTML = "<meta name=" + "'" + tdes + "' content = '" + twitterDes + "'/>"
document.getElementsByClassName("twitter-input-cards").innerHTML = "<meta name=" + "'" + timg + "' content = '" + twitterImg + "'/>"
}
//this is where you define your cards info
var tCard1 = new twitterCards (
//this will be twitter:card
"Here is a new card",
//this will be twitter:site
"here is an author",
//this will be twitter:domain
"here is another aurthor",
//this will be twitter:url
"here is the page",
//this will be twitter:title
"here is the title",
//this will be twitter:description
"here is the description",
//this will be twitter:img
"img.jpg"
)

Creating Functions in JQuery to Avoid Writing the Same Code Again

I am currently using a Twitch API that receives information about a specific channel then prepends it to the HTML document. The code that prepends the information is used over and over. I was wondering how exactly do you create a function that could avoid repetition and be called throughout the document?
The codepen can be found here: http://codepen.io/sibraza/pen/AXRRvq
Here is the JQuery Code thats gets used repeatedly:
$("#follower-Info").prepend("<div class ='row'>" + "<div class = 'col-md-4'>" + "<img src='" + logo + "'>" + "</div>" + "<div class='col-md-4'>" + name +"</div>"+ "<div class ='col-md-4'>" + status + "</div></div>")
Would something like this work:
function addThis(){
$("#follower-Info").prepend("<div class ='row'>" + "<div class = 'col-md-4'>" + "<img src='" + logo + "'>" + "</div>" + "<div class='col-md-4'>" + name +"</div>"+ "<div class ='col-md-4'>" + status + "</div></div>")
}
And then I can could call addThis() after each $.getJSON request.
It would work, but you need to pass name, logo and status as parameters to the function. You can also remove the redundant string concatenation:
function addThis(name, logo, status) {
$("#follower-Info").prepend('<div class="row"><div class="col-md-4"><img src="' + logo + '"></div><div class="col-md-4">' + name + '</div><div class="col-md-4">' + status + '</div></div>');
}
Then you can call it from within your $.getJSON handler:
addThis('Foo', 'bar.jpg', 'online');

creating '<a href onclick=function... with javascript I get error: Uncaught ReferenceError: popup is not defined

I have puled data from server and created a list of thumbnails and some other data from twitch TV.
I need to create popup tab with video stream in it.
Therefore I have put thumbnail in anchor tag and called a popup() function onclick. (I am planing to put parameters for playing video in that function.)
Also I have created function for that popup() but no matter where I place it I get an Error in console when I click on thumbnail.
ERROR: Uncaught ReferenceError: popup is not defined
This is the JS code:
$(document).ready(function(){
$.getJSON( "https://api.twitch.tv/kraken/streams", function( data ) {
var items = [];
var videoHTML ='<ul>';
//Popup Tab with streaming video
$.each(data.streams, function(i, video){
videoHTML += '<li class="video-stream ' + video.channel.language + '">';
videoHTML += '<img class="user-logo" src="' + video.channel.profile_banner + '">';
videoHTML += '<p class="user-name">' + video.channel.display_name + '</p>';
videoHTML += '<a href="#" onClick="popup()">';
videoHTML += '<img class="video-image" src="' + video.preview.medium + '"></a>';
videoHTML += '<h1 class="game-name">' + video.game + '</h1><br/>';
videoHTML += '<i></i>';
videoHTML += '<span class="views-number">' + video.viewers + '</span>';
videoHTML += '<p class="short-date-format date' + i + '">' + video.created_at + '</p>';
videoHTML += '</li>';
var d = new Date(video.created_at);
//var dateClass = 'date' + i; console.log(dateClass);
//$(dateClass).html = d.toDateString();
//console.log(video._id);
//console.log(data.streams[i].game);
//console.log(data.streams[i]._links.self);
//console.log(data.streams[i].preview.medium);
});
videoHTML += '</ul>';
$('#placeholder').html(videoHTML);
}); //getJson
//popup tab
function popup(){
alert('wow');
}
}); //end ready
Can You please help me with this becasue I can not find an answer on the internet?
-How to get popup() function running?
-How to implement parameter into this function?
(Also, I have tried to write anchor in HTML and add function and then everything works fine but when I create HTML with JS then I have this problem.
Thank You in front!
Sincerely,
Denis
You defined the function popup inside $(document).ready(function()). So popup can only be used within it.
Move it outside the $(document).ready(function()) function like this
$(document).ready(function(){
// code
})
function popup(){
// code
}

Javascript systax for URL contatenation

I am pulling data from a JSON file into a map and form. I would like to link to new tab with directions to given location. How do I write this?
Working code that opens Yelp link:
<tr><th>Yelp</th><td><a class='url-break' href='" + feature.properties.YelpURL + "' target='_blank'>" + feature.properties.YelpURL + "</a></td></tr>
Not working code for Google Directions using lat long
<tr><th>Directio</th><td><a class='url-break' href='" + https://www.google.com/maps/dir/ + feature.properties.geo_longitude + feature.properties.geo_latitude + "' target='_blank'>" + Get Directions + "</a></td></tr>
The app in progress
quotes are in the wrong place, replace
<a class='url-break' href='" + https://www.google.com/maps/dir/ + feature.properties.geo_longitude + feature.properties.geo_latitude + "' target='_blank'>
with
<a class='url-break' href='https://www.google.com/maps/dir/" + feature.properties.geo_longitude +","+ feature.properties.geo_latitude + "' target='_blank'>

Categories