Internet Explorer fails to display deep nested iFrames within jQuery UI tabs, keeping them hidden from view

My web application utilizes iframes to load different panels into view, with jQuery UI tabs used to switch between them. In a particular case, one iframe contains jQuery UI tabs, which in turn houses more iframes. And within one of those nested iframes, another iframe is employed to display additional software panels. While this setup generally functions well, there's an issue with Internet Explorer where the innermost iframe remains hidden when switching back to a specific tab after changing tabs. Strangely, performing actions like collapsing a neighboring panel, selecting other jQuery tabs, or adjusting CSS properties can bring the iframe back into view.

<html>
<body>
...
<DIV style="HEIGHT: 858px; WIDTH: 1680px">
    <IFRAME style="HEIGHT: 100%; WIDTH: 100%" src="..." frameBorder=0 scrolling=yes></IFRAME>
</DIV>
...
</body>
</html>

The inner iframe includes full HTML content (with <html> and <body> tags).

<div class="ui-tabs-panel">
    <iframe src="..."></iframe>
</div>

This appears to be a rare jQuery UI bug specific to Internet Explorer. I'm interested in finding a solution that doesn't involve modifying the jquery-ui.js file. If you have any suggestions on how to "jostle" the inner iframe back into view when switching jQuery UI tabs, please share your ideas.

jquerycssuser-interfaceiframe

Answer №1

Implementing this solution within your own "on tab select" event instead of the _toggle event in jquery-ui-1.9.2.custom.js should work just as effectively. Make sure to include the (event, ui) arguments in your function.

Navigate through the tab structure to reach the third level iframe and trigger a resize action. Interestingly, directly calling resize() on the iframe does not resolve the issue; however, modifying the height attribute (setting it to zero and then back to its original value) successfully addresses the problem.

tabSelected: function(event, ui) {
var toShow = ui.newPanel;
//....
toShow.find('iframe').each(function () {
    var tabFrame = this;

    $(tabFrame).contents().find('iframe').each(function () {
        var workspaceFrame = this;

        $(workspaceFrame).contents().find('iframe').each(function () {
            var innerFrame = this;

            var myHeight = $(innerFrame).attr('height');
            $(innerFrame).attr('height', 0);
            $(innerFrame).attr('height', myHeight);
        });
    });
});
//....

Although not mandatory, I find it helpful to assign the "this" keyword to local variables for improved code readability.

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

Using a Mixin as an Argument in Another Mixin in LESS CSS

Is it possible to pass the declaration of one mixin or style to another mixin as an input parameter? Consider the following example involving animation keyframes. This is how keyframes are typically defined in pure CSS: @-moz-keyframes some-name { fr ...

cssargumentslessmixinscss-animations

Visual Delights on the Menu

I am having trouble adding a "Home" picture to my menu. It keeps showing up as a blank square, even though I have tried using both .png and .jpg formats. Here is the code that I am currently using: <div id='cssmenu'> <link rel= ...

htmlcssmenu

"Automate the process of manual content duplication with JavaScript's for each replacement

Seeking a solution to automate the selection process without writing individual JS scripts for every input. For instance, having 10 double inputs (total of 20 inputs) and utilizing the each() function or other methods by only declaring selectors. Find th ...

javascriptjqueryhtmleach

Having issues with the horizontal list layout

I am having trouble implementing Bootstrap horizontal lists on my website. How can I resolve this issue? Desired outcome: https://i.sstatic.net/zzBFi.png Current situation: https://i.sstatic.net/cfoZN.png Below is the snippet of CSS code in question ...

htmlcsstwitter-bootstrap

Include the title of the page in the printing stylesheet

Is there a way to dynamically insert the page title into the print version of my website using jQuery and CSS? I have a separate print.css file, but I'm wondering if it's possible to grab the title data as a variable in jQuery and then use CSS to ...

jquerycsstitle

Refrain from engaging with "disabled" table rows to prevent user interaction

I have an HTML table with certain rows marked as 'disabled'. To make this clear to the user, I decided to apply a blur filter to the tr, resulting in a table that looks like this: https://i.stack.imgur.com/GcX67.png NOTE: You can view a live ex ...

htmlcss

The dropdown menu is extending beyond the edge of the screen

I'm having trouble with my navbar dropdown menu extending off the page to the right. Take a look at the code below: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-c ...

htmlcssbootstrap-4

Executing AJAX POST request with callback function

I successfully used this code for the get function to retrieve data. It works flawlessly and I am able to fetch the required data using this function. function getdata(getdatafrom, resultclass){ $.get(getdatafrom, function(data) { $(result ...

javascriptphpjqueryajax

Issue arises when CSS selectors do not function properly with absolutely positioned divs

I am experiencing an issue with my CSS code that is functional on CodePen but not on my actual website. I am attempting to target the .appraisals class for manipulating the background color of an opaque screen slider containing information. Despite using a ...

htmlcss

What is the best way to place this dropdown in a fixed position within a parent element with overflow scrolling

I am facing an issue with a dropdown menu inside a parent div. The parent div has a fixed height and is set to overflow: auto. My goal is to have the menu extend beyond the boundaries of the parent when opened, but currently it just increases the height of ...

htmlcss

The $() function in jQuery consistently yields 'undefined' when used in conjunction with AJAX requests

I've noticed that the popup shows up before the text in the textbox gets updated. It seems like the JavaScript is being called before the page is fully rendered, which may be causing the 'undefined' popup. How can I ensure that JavaScript is ...

asp.netjqueryajaxpagerequestmanager

Video playback disabled on hover in Chrome browser

I have added videos to a search results page. When the user hovers over the video, I want to show a preview of it in a separate container and start playing the video. $(".videoSearchResults video").mouseenter(function () { var container = document.cre ...

javascriptjqueryhtmlvideo

There are no elements displayed beneath the div

If you're short on time, let me explain my point with an image: Here is the HTML code I am working with: <div align="center"> <div class="img-container"> <div class="myconatiner"> <h2>Headline< ...

csshtml

How to change the background color of select options using JQuery

My webpage includes multiple select boxes with different options: <select name="item-0-status" id="id_item-0-status"> <option value="">---------</option> <option value="1">Online</option> <option value="2">Offline</o ...

jquerycss

What is the reason for the initial DOM operation taking significantly longer than subsequent ones?

Why is the first operation much more despite the subsequent manipulation of the DOM being practically identical in time when both are written with the realization in JS and jQuery? Link to Javascript source // ES5 // Sending a message function sendMessa ...

javascriptjquery

Form with an external filter option integrated with a Datatable

element, I am looking to optimize my form submission process using Datatables for server-side filtering. Initially, I figured out how to send individual parameters by specifying them in the data field of the configuration: url: './demo2/contents/orde ...

phpjquerydatatable

Unable to render the JSON data that was retrieved from a jQuery AJAX request

I am having trouble displaying JSON data that is returned from an AJAX call. Can someone please assist me? I am new to this. $.ajaxSetup({ cache: false, timeout: 5000 }); //String.prototype.toJSON; var the_object = {}; function concatObject(obj) { ...

javascriptjqueryajaxjson

jQuery Tiny Tints - Storing the alpha channel of RGBA in the input field

I'm currently working on implementing opacity in a minicolors. While I have successfully added the functionality, I am facing an issue with saving the RGBA values to the input field. Although the rgba values are displayed in the input field when a co ...

jquerycolor-picker

Images on web pages are automatically resized to fit into a smaller preview window

Currently, I am facing an issue with the display of images in my grid windows on my website . The images are appearing as partial representations instead of rescaled versions where the whole picture is resized to fit the grid window. I have attempted mod ...

javascripthtmlcssweb

Tips for saving the web address and breaking down each word

Hello, I am familiar with how to store URL parameters using the following JavaScript code. However, I am wondering if there is a way to store each word that comes after a slash in a URL. For example, let's consider the URL: http://localhost:9000/Data ...

javascriptjquery