Facebook comments do not show up when added with javascript - javascript

I am having a page with multiple facebook-comment areas, which are all different.
In order to save page load time, I want to make them only appear/load when the user clicks some button.
The problem is, when I've written the code
<div class="fb-comments" data-href="http://mypage.com" data-width="600" data-numposts="5" data-colorscheme="dark"></div>
in html, it all worked but when I've added the code via .innerHTML it does not show anything expect when I include the sdk after the html is manipulated. the problem with that is, that all other comment-boxes cannot be shown since the sdk loaded already.
How do I make all comment-boxes visible to the user when they click a button using JavaScript?

I´ve solved it like this. I changed the comment code to
<fb:comments href="http://mypage.com" width="600" numposts="5" colorscheme="dark"></fb:comments>
and after I´ve added the code i refreshed this particular section with
FB.XFBML.parse(document.getElementById("parent of commentField"));

Related

Download property in HTML tag not working with BLOB file

I am working on a project on my website Click here to go to project site,
but after inputting all the needed information, the download element does not work. Here is the code for the download link: The download may work on this website, but it doesn't work on my website, which is strange.
<a id="down" href="blob:http://veryblankwhitepaper.weebly.com/8d869eaa-5bce-4326-9dff-dd0b50286a84" download="filename.txt">DOWNLOAD</a>
For some reason, when I click this, nothing happens.
If you want, you can see the javascript here.
Scroll down to the scripts within the "/text-file-generator.html"
(I put all the scripts for my pages in one file)
Edit1: If I take the element out of the div that it is in, it seems to work, but I want it to still be in the div.
Your scripts change the link too quickly. Try adding a setTimeout function for half a second when you click the link. This should allow it to download.

How can I target a div on my HTML page with Javascript to change the contents of an element?

I've got an interesting question. I'm running Squarespace # buscadprimero.caminoglobal.org
and need to target the top-right button on the navigation (Ingresar, which means login) to bring up a Javascript form provided to me via embed code. The code itself works fine when included as a code block in the body of a page, but Squarespace only allows navigation buttons at the top to be hyperlinks. There's nowhere for me to add code to the button itself, being that it is a largely consumer platform and works great for straightforward application until you try to change the way it works.
They make an allowance for custom code via a "code injection" menu that adds whatever code you want to the HTML header of the page, so I've been trying to target this div, which does not have an id but who's class is external, with Javascript to replace its contents with an onclick listener to bring up this form. Tracking?
Here's my embed code, which like I said is fine:
<script>// <![CDATA[
!function(e,t){e._cc={}, e._cc.host="https://www.coachingcloud.com/";var n=function(){var n=t.createElement("script"),c=t.getElementsByTagName("script")[0];n.src=e._cc.host+"login.min.js",c.parentNode.insertBefore(n,c)};e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);
// ]]></script>
I've been trying document.getElementsByClassName("external").innerHTML; but when set to a var that returns undefined. New to Javascript but not afraid to learn. I'd like to figure out how to properly target the div, first of all, and then replace its contents (which currently is a link to my 404 page) with a Javascript function that activates on click. Thanks for the guidance!
I've tested the following on your site in Chrome, and have successfully changed the content. The page contained multiple ".collection" elements, so i select only the last one:
JavaScript / jQuery
$("#mainNavigation .collection").last().html("<a href='/newlink'>Test</a>");
Thanks to the great help of #Arg0n, I've now got a working login form that appears in the top-right-most button of my site. Using:
$(function() { $("#mainNavigation .collection").last().html("<span id='cc-login'>Ingresar</span>"); });
as the function to replace the contents of the div in question, I inserted <span id='cc-login'>Ingresar</span> as the call to the provided embed code:
<![CDATA[ !function(e,t){e._cc={}, e._cc.host="https://www.coachingcloud.com/";var n=function(){var n=t.createElement("script"),c=t.getElementsByTagName("script")[0];n.src=e._cc.ho‌​st+"login.min.js",c.parentNode.insertBefore(n,c)};e.addEventListener?e.addEventLi‌​stener("load",n,!1):e.attachEvent("onload",n)}(window,document); // ]]>
Turns out that a little jQuery was helpful in accessing the desired div, and setting its html contents was a bit beyond my area of expertise.
Many thanks to the StackOverflow community for helping me learn about targeting page elements with Javascript to procedurally manipulate its contents.

Website: Same universal menu on different pages

I'm trying to put together a website that no-longer uses frames (my previously preferred method) but a singe page format.
One big problems I've found is that each page on the site will use the same menu. Now it occurs to me that if I amend the menu at a later date, then I'd have to change it on every page manually. This seems very time consuming and Inefficient.
Can anyone suggest ways I can alter the menu code once and have it on every page? I was thinking initially of embedding a javascript anchor to a js file on each page, then I would only have to change the js file. Are there better ways to do this?
The menu is a simple image and mix of text and anchor links.
I can program HTML/JS/CSS/C++ ... and willing to look at others if necessary to achieve my goals.
Thank you.
Make a separate partial view file containing your menu code and than include it on each page you need it to use the menu.
In PHP:
<?php require_once(__ROOT__.'/mainMenu.php'); ?>
In ASP something like:
<%# Register src="~/mainMenu/mainMenu.ascx" tagname="MainMenu" tagprefix="uc" %>
<uc:MainMenu ID="MainMenu" runat="server />
Ideally you can expand this logic and create a master template page and than feed just the dynamic content in it - that keeps all your code on one place and makes changes very simple.

Hide iframe if src is empty

I work for a school system http://m.rsd17.org/index1.html and working on an annoucement to show up for school cancellations. I have an external page that I uncomment and change the text if there is a delay or schools closed. On the top of my site I want to hide the iframe if I comment out the writing from the external file. Here is some of the code Im using.
<iframe id="emergency" src="http://f.rsd17.org/frontemergency1.html" width="100%" height="50px" frameborder="0"></iframe>
I want it to show the iframe when I haven't commented out the text in the external html. And I want it the iframe totally gone so the buttons move back up when there is no message to display. I've tried a bunch of different jquery scripts, but no luck removing the iframe when the html is empty. Any thoughts would be great.
Is your server PHP-enabled? I ask because if this is for a school district you may not want to assume that all users will have javascript enabled, etc. It might be best to handle this on the back end where users are not dependent on their browser being capable.
Inside http://f.rsd17.org/frontemergency1.php:
<?php
die(); //Comment this out to display a message
?>
Announcement here!
You do not have to check if there is a content in your iframe. If you put a comment-content then your iframe will encapsulate and display it. If you delete the comment then your iframe will still be there but it will not be visually noticeable.
Although you do not need this, you can try something like this with jQuery:
var html_content = $('#emergency ').find('#alertmessagebox').children().html();
if(html_content[0] === '' ) {
$('#emergency').css('display','none');
} else {
$('#emergency').css('display','');
}
I was able to fix this issue but using SSI, changing the index.html to index.shtml, and moving the file I was using to the correct folder. Changed my links on my main index.shtml. All is better. Thank you FiLeVeR10 for all your help.

Facebook like button not loading

I can't seem to get my facebook like button to load.
The pages meta tags pass the facebook debugger tests, but the button itself does not load
http://ping-it.theonconnection.com/properties/31
Looks like you have:
<div id="fb-root"></div>
...twice in your document, which is probably throwing off your script. This should only appear once.
I looked at your HTML code being served down from http://ping-it.theonconnection.com/properties/31 and I could not find where you're putting in your like button code.
I do not see any like button code in there. However I do see the FB.init, the all.js file, and TWO fb-roots.

Categories

Resources