Identifying when the Facebook like feature has finished loading

I am trying to use jQuery to detect when the Facebook like button has loaded, and then fade in the button. My current approach is as follows:

$(document).ready(function() {
    $(document).on( "load", ".fb-like iframe", function() {
        condole.log("loaded");
    });

    $(".fb-like iframe").ready(function (){
        console.log("ready");
    });
});

While the 'ready' message displays correctly in the console, the 'loaded' message does not appear. It seems that the 'ready' event is triggered too early for the fadeIn effect I want since it actually needs to wait until everything has finished loading.

jquerycssfacebookbuttonfacebook-like

Answer №1

Here are some suggestions:

window.fbAsyncInit = function() {
  FB.init({
    ...
    xfbml : true
  });

  FB.Event.subscribe('xfbml.render', function(response) {
      alert('Wow... All Facebook social plugins on the page have been rendered at last!');
  });
};

You could also consider using the "iframeTracker jQuery Plugin"

Answer №2

One possibility could be to enclose the Instagram widget within a hidden div initially:

div { display:none }

Once the widget has fully loaded, the div can then be smoothly revealed:

$("div").fadeIn(1000);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The column with a class of col-md-3 is not rendering properly

The design shown below was created in photoshop utilizing a 12 grid system: https://i.sstatic.net/MSGHc.jpg I am attempting to replicate this layout using bootstrap with class='col-md-3' for each input. However, when I do this, they appear next ...

htmlcsstwitter-bootstrap

Unable to establish proper functionality of username variables in Node.js chat application

For my latest project, I am developing a chat application in node.js following a tutorial from socket.io. The main objective of the app is to allow users to input their username along with a message, which will then be displayed as "username: message" in t ...

javascriptjqueryhtmlnode.js

Looking for assistance with changing the class of a span when a radio button is selected

I'm facing an issue with toggling the class of a <span> when a radio button is clicked. <html> <head></head> <style type="text/css"> .eHide { display:none; } </style> <script type="text/javas ...

javascripthtmlcssradio-button

Achieve mobile responsiveness for search fields with Bootstrap 4

Attempting to center my search field using the code below did not yield a responsive result. On mobile, it remains right on top with the footer, unlike on desktop where I'd like to see some space between them. This discrepancy only surfaces in small ...

htmlcsstwitter-bootstrapbootstrap-4

Issues with WebAPI validation persist despite the correctness of data

Recently, my web API was functioning perfectly until something changed unexpectedly. Now, it seems to have stopped working altogether. Using Fiddler, I attempted to compose a PUT request to /api/Dealer/19 with the JSON Data below: {"notes":[],"dealerId ...

c#jqueryasp.netjsonasp.net-web-api

Unable to append Jquery attribute to a div component

My code snippet is creating a div with specific classes and elements: '<div class="ctrl-info-panel col-md-12 col-centered">'+ '<h2>You do not have any projects created at the moment.</h2>'+ '<div id="t ...

javascriptjqueryhtmlcss

Ensuring that the content fits perfectly inside a div using either Bootstrap or

I am facing an issue with two nested divs. One of them has a button that I want to stick to the bottom of the parent div, while the other contains text or a list of persons. The problem arises when the text is lengthy, causing it to overflow the div. I am ...

javascripthtmlcssvue.jsbootstrap-4

The design does not have the capability to scroll

I am currently working on developing an application using Vaadin and Spring Boot. I have successfully set the background of my app by utilizing the following CSS code within the styles.scss file (inside myTheme as specified by Vaadin): .backgroundImage{ ...

csssassvaadin

Spinning a hidden overlay image with CSS

I'm facing a challenge with my mask-image in CSS. I have successfully positioned it using the mask-position property, but I can't seem to figure out how to rotate it without rotating the entire element. Can anyone provide insight on how to achiev ...

htmlcss

What is the best way to duplicate a CSS shape across a horizontal axis?

I am working on decorating the bottom of my page with a repeated triangle design. The image provided only displays one triangle, but I would like to extend it across the entire horizontal div. Here is a screenshot of my progress so far: https://i.stack.im ...

htmlcssrepeatcss-shapes

Utilize RSelenium to showcase all rows in the display

I am encountering an issue while trying to extract data from the following website: . On this website, there is a table consisting of 1874 rows. Despite my efforts to scrape it, I was only able to retrieve the first 10 rows due to the default lengthMenu ...

javascriptjqueryrweb-scrapingrselenium

Managing a CSS Animation through User Input

Is there a way to control scrolling images with two arrows, one for scrolling up and one for scrolling down? I have CSS animations written for both directions - "scrollUp" and "scrollDown". How can I apply these animations to the images when the correspond ...

htmlcssanimationscroll

Dealing with jQuery Validation is driving me crazy!

Hey there, I've been struggling with JQuery validation problems lately and nothing seems to be working. I've tried starting from scratch multiple times but still can't figure it out. The latest attempt can be found using the reference link b ...

jqueryasp.netvalidationjquery-pluginsjquery-validate

Create dynamic div animations triggered by changes in size of another div

Struggling to get this animation to function correctly. I have a vertical scrolling page with various sized div elements that change based on the content. The problem is that when these size changes occur, the other elements are moving abruptly. I want to ...

javascriptjqueryhtmlcssangularjs

Animation effects compatible with iOS devices are professionally crafted using CSS

I just implemented a custom hamburger menu with animation using HTML, CSS, and JavaScript on my website. The animation works perfectly on Android devices but not on iOS. Any suggestions for fixing this issue? I attempted to add the Webkit prefix to each p ...

javascripthtmlcssanimationcss-animations

When using jQuery's .ajax method, the function is not being called

I am having an issue with calling the addLoadEvent function from the success callback of an AJAX request. The "game" object is created and when I call createGame, it uses jQuery AJAX. Everything works fine except that the addLoadEvent function is not bei ...

javascriptjqueryajaxfunctionfunction-call

Are CSS designers setting boundaries for their designs by restricting themselves to layouts that can be handled by CSS from the start?

After seeking guidance on reaching CSS zen in this forum, I have come to realize that my struggles largely stem from positioning. Some sources suggest that CSS may not always be the most efficient layout system. As CSS designers, do we limit ourselves fro ...

css

Leverage scope variables and dynamic CSS properties when using ngClass

Is there a way to manipulate the CSS dynamically in HTML using a scope variable? <div ng-class="myClassScope, { 'dynamic-class': !ifIsNot }"> ...

cssangularjsangularjs-scopeng-class

Streamline the organization of parent roles

var classFinder = $('.frame').parent().parent().parent().parent().parent(); if (classFinder.hasClass(".class")) { return true; } I have identified a class along this specific path^... Is there a way to streamline this process ...

javascriptjqueryasp.netdomloops

CSS media queries with precise inequality restrictions

Imagine the following scenario: @media only screen and (max-width: 600px) { nav { display: none; } } @media only screen and (min-width: 601px) { nav { display: block; } } This setup can lead to undefined behavior for a wid ...

htmlcssmedia-queries