"Fancybox 2 fails to trigger beforeLoad and afterClose events, resulting in the inability to hide/show a div when it

Currently, I am experimenting with utilizing the beforeLoad and afterClose features in Fancybox 2 to achieve a specific goal.

The objective is to conceal a flash animation within an iFrame - nested inside the #elanceiframe div - while Fancybox is active and displaying a portfolio. Upon closing Fancybox, the intention is to reveal the hidden div once again.

This action is necessary because the iFrame does not adhere to z-index properties in Internet Explorer and remains visible alongside Fancybox images instead of being faded out. To address this issue, I aim to set the #elanceiframe div's display property to 'none' while Fancybox is operational.

Despite defining the fancybox initialization function successfully for the portfolio display, there seems to be an issue with the execution of the beforeLoad and afterClose functions.

$(document).ready(function() {
   $("a[data-fancybox-group=portfolio]").fancybox({
    'transitionIn' : 'none',
    'transitionOut' : 'none',
    'overlayColor' : '#000',
    'overlayOpacity' : 0.7,
    'beforeLoad' : function(){
       $("#elanceiframe").css('display', 'none');
     },
    'afterClose': function() {
       $("#elanceiframe").css('display','block');
     } 
   });
});

Could someone verify if I am correctly utilizing the beforeLoad and afterclose functionalities?

Is it mandatory to apply CSS styling on the #elanceiframe div initially, such as using display:none?

Edit 12/04/13

Fortunately, the aforementioned example is functioning properly; it appears that my mistake was referencing the incorrect div within the function :(

javascriptjquerycssiframefancybox-2

Answer №1

Your code options are well thought out.

beforeLoad: function () {
    $("#elanceiframe").css('display ', 'none');
},
afterClose: function () {
    $("#elanceiframe").css('display ', 'block ');
}

I think the manipulation of the src attribute of the iframe is a good idea to prevent document jump when using display: none

var thesrc;
$(".fancybox").fancybox({
    beforeLoad: function () {
        thesrc = $("#elanceiframe").attr("src");
        $("#elanceiframe").attr("src", "");
    },
    afterClose: function () {
        $("#elanceiframe").attr("src", thesrc);
    }
});

You can view the implementation in JSFIDDLE. Note that some API options may not work with fancybox v2.x, so make sure to refer to the documentation for the correct options:

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

Writing a JavaScript equation using three.js to orbit an object in a circular path around a central y-axis in a 3D space

Currently, I am playing around with threeJS and have managed to position the camera to look at the origin point of a scene (0,0,0). My goal is to rotate the camera in a circular path around the y axis at a specific distance (radius) while keeping its focus ...

javascriptmaththree.js3d

Enhancing the style of child elements in jQuery using CSS

My goal is to create a popup that appears upon mouse hover using jQuery and CSS. The code functions properly, but I'm encountering difficulty adding CSS to the child elements within the popup window. Below is the jQuery code: $(document).ready(fun ...

javascriptjqueryhtmlcss

Setting up a reverse proxy for deploying React applications

I am attempting to implement a setup where multiple containerized SPAs are deployed using a reverse proxy for routing. Each container contains a production build create-react-app served by an express app with the following configuration: app.use(express.s ...

javascriptnode.jsreactjsdockerexpress

The react-redux developer tool appears to be disabled and is not displaying the current state of the application on the extension toolbar

Just finished the redux-tutorial and attempting to view the state in the redux-devtools. However, the redux-devtools seems to be inactive on the extensions bar. Upon clicking it, a menu appears with options like "to right, to left etc". Selecting one of ...

javascriptreactjsreduxredux-devtools-extension

Issue with Bootstrap 5 tab navigation in Firefox and Internet Explorer - troubleshooting needed

I've encountered an issue with Bootstrap 5 nav tabs not working as expected on Firefox version 89.0.2 and Internet Explorer 11+. Strangely, there are no errors showing up in the console. Here is the CDN JS being used: <script src="https://cdn ...

htmljqueryfirefoxinternet-explorer-7bootstrap-5

Using jQuery, you can store values in a PHP array or session by making an AJAX

Is there a way to store values in PHP array or PHP session using ajax in jQuery? I am trying to send some values via ajax to a PHP page and store them. The issue is that every time the array/session only returns the latest sent value, and not the previous ...

phpjqueryajax

The visual effects of CSS 3D transformations vary between PCs and mobile devices, creating a distinct contrast

I'm experiencing a rendering issue with a 3D transform. On Chrome (PC/Mac), it appears as shown below: https://i.sstatic.net/pDbwN.png However, on mobile devices using Safari or Chrome, the display is different: https://i.sstatic.net/1mQHl.jpg When ...

css3dtransform

Ways to connect a button to a Bootstrap 5 tab class

I am trying to find a way to directly link to a specific tab using a Bootstrap 5 button class. I have attempted to incorporate the solution provided in the following resource: Twitter Bootstrap 5 Tabs: Go to Specific Tab on Page Reload or Hyperlink Unfo ...

javascriptjquerybootstrap-5

The "lazy" jQuery plugin encounters an issue when attempting to load two other jQuery plugins that contain $.getJSON calls within each of them, resulting in excessive recursion errors that seem to only

Plugin: jQuery lazy() I am reaching out here as the project page itself appears to be inactive. What steps can trigger the issue? 1. Integrating two jQuery plugins that both utilize the $.getJSON function results in a "too much recursion error" in Firefo ...

jqueryrecursionjsonpgetjsonlazy-evaluation

Learn how to implement icons within Textfield components using Material-UI and TypeScript in React

I have successfully created a form with validation using TypeScript Material UI and Formik. Now, I am looking to enhance the visual appeal by adding a material UI Icon within the textfield area. Below is a snippet of my code: import React from 'reac ...

cssreactjstypescriptmaterial-uiformik

What is the best way to dynamically apply the "active" class to a link when it is clicked

Here is how my vue component looks: <template> <div> ... <div class="list-group"> <a :href="baseUrl+'/message/inbox'" class="list-group-item"> Message </a> ...

javascriptvue.jsvuejs2vue-component

Is there a way to make res.render in node.js/express/mongo wait until the database search is finished before loading?

Having some difficulty with loading a table properly on my page because the information is not being passed to the ejs template before the page loads. I'm fairly new at this and could use some assistance! Just a heads up, owneditems consists of an ar ...

javascriptnode.jsmongodbexpressmongoose

The attribute selector specifically targets the number 3, excluding numbers such as 13 or 23 from being selected

Within a form, there is a segment that displays groups of 4 weeks in each division. Take a look at the code snippet provided below <div class="form-check" data-weeknr="1,2,3,4"></div> <div class="form-check" dat ...

javascriptjqueryattributesselector

Tips for managing fetch API AJAX response in React

Currently, I am working on an AJAX request using the fetch API in React, specifically inside the componentDidMount() function. The request seems to be successful as the result is being logged in the console. However, I am facing an issue with accessing th ...

javascriptjsonreactjsresponsefetch-api

Incorporating a series of image links into a Three.js project with the addition of a

My latest project involves creating a reflection cube with randomly changing images on each side every time the site is reloaded. Here is the code I have written: var imgAr = [ 'sources/instagram2/image1.jpg', 'sources/instagram2/image2.jp ...

javascriptarraysthree.jssuffix

During the present module, retrieve the runtime list of all modules that are directly imported (Javascript/Typescript)

Imagine you have a set of modules imported in the current module: import {A1, A2, A3} from "./ModuleA"; import {B1, B2, B3} from "./ModuleB"; import {C1, C2, C3} from "./ModuleC"; function retrieveListOfImportedModules() { // ...

javascriptnode.jsjsontypescript

Methods for identifying when a Vue component has been updated based on property change

I have a requirement to show a spinner in every Vue component. My initial thought is to use v-if="loading" within the component's HTML. How do I know when a component has finished loading? In other words, how can I tell when the DOM has be ...

javascriptvue.js

Jump to a specific section on a different page when the links are already equipped with anchors for smooth scrolling

My website has a menu on the home page that scrolls to specific id positions: <li><a href="#event-section">El evento</a></li> <li><a href="#asistentes-section">Asistentes</a></li> <li><a href="#cont ...

javascriptjqueryhtml

Troubleshooting issue with CSS code for table scrolling functionality

I have created an HTML page with a table that gets data from a database. I am trying to limit the size of the table by placing it inside a div like this: <div id="scrollablebody"> <table class="clientTable"> <thead> <tr ...

htmlcss

Struggling with the compilation of this Typescript code

Encountering a compile error: error TS2339: Property 'waitForElementVisible' does not exist on type 'signinPage' SigninPage code snippet: export class signinPage{ constructor(){ emailInput: { selector: 'input[type ...

javascripttypescriptnightwatch.js