How can I reload facebook page element, in one page application?
https://developers.facebook.com/docs/plugins/page-plugin
If I delete facebook embedded div from DOM and add this div again, facebook plugin won't automatically reinit. I'm guessing I have to do extra javascript work, to tell plugin to reinit.
Im using code that loads facebook plugin.
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.4&appId=xxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Then on home dynamic tab I'm using code to embed facebook page on my one-page app:
<div class="fb-page" data-href="https://www.facebook.com/facebook" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook">Facebook</blockquote></div></div>
It loads ok at the first time, I can see embeded facebook page. But if I will change tab, and change back to home again, the facebook code doesn't execute and I can't see facebook page anymore.
At this point how can manually reload Facebook embedded page ?
Call the following JS code
FB.XFBML.parse();
after a new content loads to make the Facebook SDK reload each
<div class="fb-page" data-href="https://www.facebook.com/facebook" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook">Facebook</blockquote></div></div>
tag on the page. If you need to reload a Facebook plugins only in a certain DOM element, pass it as argument to the function:
FB.XFBML.parse(document.getElementByID('certain-plugins-holder'));
Full reference: https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse
What I did was move the
<div class="fb-page" data-href="https://www.facebook.com/facebook" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook">Facebook</blockquote></div></div>
To a hidden div at the end of the document. Once facebook loads it then I use javascript to clone the element to where I need it to be. This example uses jQuery. Anywhere I need the page plugin to show up I placed a
<div id="facebook-timeline"></div>
Then in the javascript that loads the page or section dynamically I run the script below
$('.fb-page').clone(true).replaceAll('#facebook-timeline');
Related
I made a script that connects to a WP video plugin and generates a floating menu over it. The script works fine inside the WP page but it does not work when I use the plugins SHARE&EMBED function when it generates a link to my video that is used to incorporate it into another page structure. When embedding the into the outside webpage my custom Js script does not work. Better to say it works because my js and css files get connected to the head of the new page and the menu is present inside the structure of the page but it is covered by the new div elements generated by the plugin.
WordPress video plugin that I use generates an iframe tag. When I examine the page in which I embed the link to the video, in developer mode, I see that the is placed inside a tag that is outside the page's tag. When I try to access the Iframe tag with document.getElementsByTagName("iframe") or by its' id I get an error message that the element does not exist. I tried to use "document.addEventListener('DOMContentLoaded',..." and "if(window.fwduvpPlayer0)..." but it still i can not access the the tag with my video.
document.addEventListener('DOMContentLoaded', function displayMenuBtnOverVideo() {
generateMainMenuButton1();``
if (window.fwduvpPlayer0 && document.getElementsByTagName("iframe") != null) {
shareAndEmbed();
}
});
document.addEventListener('DOMContentLoaded', function displayMenuBtnOverVideo() {
generateMainMenuButton1();``
if (window.fwduvpPlayer0 && document.getElementsByTagName("iframe") != null) {
shareAndEmbed();
}
});
function shareAndEmbed() {
let getIFrameDiv = document.document.getElementById("fwduvpPlayer0youtube");
getIFrameDiv.insertAdjacentHTML("beforebegin",
`<div class="show-menu top-left" id="menuBtnDiv1">
<button class="btn btn-sm" id="menuBtn" onclick="videoOverlayMenuGenerator1()">
<span class="iconify" data-icon="whh:menu" data-inline="false"></span><span class="menu-button-title"> MENU emb</span>
</button>
</div>`
);
The idea is that I want my script to access he iFrame tag by its' id and include before it the div tag with the code for my custom menu.
You are selecting the document property within document. That property does not exist.
let getIFrameDiv = document.document.getElementById("fwduvpPlayer0youtube");
Maybe you tried to get the <html> tag which is the documentElement property in document.
documentElement only has three methods to select elements.
getElementsByClassName
getElementsByTagName
getElementsByTagNameNS
In order to access to a element that is not into the tag, you can try to use this options:
window.parent.document.getElementById()
OR
window.top.document.getElementById()
Maybe, with this you would can to access to this elements.
I hope that this, help you.
Regards
I have an iframe within which I open a third party website. Few links in the webpage opens in new tab. How do I override this option and make sure all the links open in the same iframe?
Sample Code
Your browser doesn't support iframes
This code can't be tested on an offline page. You will need to test it within live page
Suppose this is your iframe.
<iframe src='give_your_url_here.com'/>
Put the below code instead of your iframe and replace the variable 'url' with your required url.
This is not a proper method, but this is the only solution to your situation.
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div id="queryResultContainer"/>
<script type="text/javascript">
var url = 'give_your_url_here.com';//without http://
$.getJSON('http://anyorigin.com/go?url=' + url + '&callback=?', function (data) {
var aa = data.contents;
$('#queryResultContainer').html(aa + "<script> setInterval(function () { $('#queryResultContainer').find('a').removeAttr('target');}, 200);</script" + ">");
});
</script>
If your site is HTTPS then change
$.getJSON('http://anyorigin.com....
To
$.getJSON('https://anyorigin.com....
You can't. If the links on the third party website are programmed to open in new windows / tabs, you have no way of modifying that code.
I am working on Windows 8 App where I need to show a web page with facebook "Like/Unlike" options. Below is code which I added for Like.I need to add Unlike option too. Can some one explain me how to get this done ?
#section AdditionalHeaderContent {
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
}
#section ContentFooter
{
<div id="fb-root">
<fb:like ref="#Url.RequestContext.HttpContext.Request.Url.ToString().EnsureTrailing("/")" show_faces="true" width="450"></fb:like>
</div>
}
How can I show "unlike" button?
Thanks.
The Facebook like button also is your Facebook unlike button. The Facebook button knows if you already liked the page.
So when you click on it again you are "unlike-ing" it again.
*update * *(so you do not have to check the comments)*
This button uses Javascript that has been hosted by facebook, you can not edit that.
----- What you can do ----
If it is possible to make a custom separate Like and "Unlike" button this would be the way to do it.
Use the c# Facebook SDK to code things for Facebook yourself.
( http://csharpsdk.org/ )
You can look up the Facebook API here.
( https://developers.facebook.com/docs/reference/apis/ )
I am trying to add Tweet buttons to a few ASP.NET websites by using the documentation here. My code is very simple; I am just adding this to my web pages:
Tweet
<script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = "//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } } (document, "script", "twitter-wjs");</script>
When I run it, the Twitter pop-up window works fine, but my page's URL, which is supposed to be captured in order to be shared, does not appear. In other words, I only get something like:
Welcome to ConML! #ConML
I must say that I am putting the Twitter code in ASCX user controls and master pages, rather than regular ASPX pages. I am not sure whether this makes a difference. Twitter's developers web site appears to contain no reference to this, and Google hasn't helped much either.
Edit. I just found out that this problem only occurs when working from Visual Studio on my development machine. Once I deploy the website and I navigate to it using a regular browser, the Tweet button works fine. Still, why does it fail in development mode?
Suggestions are welcome. Thanks.
suppose my page content is huge so in my asp.net application i want to show busy icon with percentage downloading the content in client side. i saw many flash and sliver light site that they show busy icon and also they show percentage that means how much content has been loading in client machine. how could i achieve this using JQuery and when page content has been downloaded in client machine the busy icon goes out and actual page content will display.
please me with sample code to achieve it. thanks
You could have a placeholder image, and when the image you want is loaded, you could replace the placeholder with the new source
var img = new Image();
img.src= "largerImage.png";
img.onload = function() { oldImage.src = img.src; };
This could be taken a step further, and the code could be added to the image itself
<img src="http://www.codedigest.com/img/loading.gif"
onload="var t = this; var img = new Image(); img.src ='http://hardgeek.org/wp-content/uploads/2010/07/firefox-logo-1024x969.jpg'; img.onload = function() { t.src = img.src }" />
Which could also be taken a step further, as you might not always have the ability to apply the onload directly like this, just a suggestion.
I would recommend something like Uploadify. It does require a flash plugin. This is by far the easiest way.
http://www.uploadify.com/
Here is an example (ASP.NET MVC):
http://blog.bobcravens.com/2010/02/upload-files-with-progress-using-uploadify/
[Update] If you are trying to lazy load images, then use the jquery lazyload plugin. This only loads images that are in the current viewing area. As you scroll down, it fetches the next images. I use it on my blog page.
http://blog.bobcravens.com
View source and you will see (around line 13) a script that sets lazy loading on all post images.
Bob