Issue with transparent background appearing unexpectedly during fade in/out effect in Internet Explorer 8 while using jQuery galleria

For my girlfriend's birthday, I am working on a surprise website for her. However, I have encountered a minor visual problem in Internet Explorer 8 (and possibly 7) with the fade in/out effect when switching images in an iframe gallery. While other browsers maintain a white background for a polished look, IE fades out to transparency and then back in.

To replicate this issue, visit her new site in IE8, click on one of the sections that loads in a fancybox iframe, and observe the image switch effect. Then, open the iframe directly to see everything appears as it should.

When transitioning between images:

I've attempted to set background-color: white in various places without success. The IE-specific allowtransparency property on the iframe element hasn't made much difference either. I've tried both allowtransparency="false" and removing it altogether.

Edit: Also, Galleria seems to handle the fade in/out effect by adjusting the inline style: changing opacity from 1 to 0 and back again.

jquerycssinternet-explorerfancyboxgalleria

Answer №1

It appears that updating your jQuery version may solve the issue

Your current code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>

(The first line will result in a 404 error anyhow)

Consider using this instead:

<script src="http://code.jquery.com/jquery-latest.js"></script>

This change should resolve any issues with IE compatibility and save you from having to adjust the close button placement.

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 response object is consistently being returned by CoffeeScript

I'm currently working with some CoffeeScript code that looks like this: getSection = (url) -> req = $.getJSON url return req.success (data) -> data.section Alternatively, it could also be written like this: getSection = (url) -> ...

jqueryajaxcoffeescript

Exploring the power of directives in AngularJS for dynamically manipulating the

Using angular directives, I am attempting to dynamically replace a portion of HTML within a portlet on a webpage. The portlet contains two embedded sections. The top section includes a heading obtained from a separate backend service. <div class="head ...

csshtmldomangularjsangularjs-directive

Looking to link a click event to a particular hyperlink?

I have a question about attaching click events to hyperlinks. Here is an example code snippet: $(".notice").click(function() { alert("Hello world!"); }); Below is the HTML for my hyperlink: <a href="http://www.bba-reman.com/catalogue/DetailedProdu ...

jquery

The absence of button.onclick=func in the HTML code is notable

I am facing an issue where adding an onclick attribute to an input element via JavaScript does not display in the HTML, but the function gets executed. On the other hand, when I add the input element directly in the HTML code, the onclick attribute shows u ...

javascriptjqueryhtml

Special html effects for scrolling

Recently, I've been noticing a trend of websites incorporating new and innovative scrolling effects. One great example is: As you scroll down the page, the initial section stays fixed in place (z-index of 1?) while the content scrolls over it seamles ...

htmlcssfragment-identifier

Express.js allows for AJAX POST requests without the use of newlines

My current approach to sending the request is as follows: $(document).on('submit', 'form', function(e) { var form = e.currentTarget; console.log($(this).serialize()); $.ajax({ url: form.action, ...

javascriptjqueryajaxexpress

Can the CSS be used to conceal the PNG image while still preserving the drop shadow effect?

I recently applied the "Filter: drop-shadow" effect to my png photo and it worked perfectly. However, I am now interested in hiding the actual png image while retaining the shadow effect. My initial attempt involved adjusting the translate and drop-shadow ...

htmlcss

Scrolling seamlessly within a container that is fixed in position

For hours, I've been attempting to incorporate smooth scrolling into my project with no success. The issue lies in the container where the anchor tags are located. If it's set to fixed position or absolute, none of my attempts seem to work. In ...

javascriptjqueryhtmlcss

Can an RMD file access a CSS variable?

In my .Rmd file, I am interested in adjusting the style based on whether it is viewed on a mobile device or not. Checking window width with @media in CSS makes this task simple. Let's consider a scenario where there is a root variable --mobile: 1; ...

javacssrr-markdown

What could be causing the div class to move downward in the CSS code?

I have posted a question, but unfortunately, no one has answered it yet. Here is my code snippet: * { margin: 0; padding: 0; } body { width: 100%; font-family: 'Cabin', sans-serif; background-color: #333; } .firstnav { ...

htmlcss

Having trouble retrieving JSON data using ajax

I am currently working with JSON data that is being generated by my PHP code. Here is an example of how the data looks: {"Inboxunreadmessage":4, "aaData":[{ "Inboxsubject":"Email SMTP Test", "Inboxfrom":"Deepak Saini <*****@*****.co.in>"} ...

javascriptjqueryjsonajax

variables that are scoped globally within a webpage that has been fully loaded

I am facing an issue with my index page where I use a script to load another page into a div. $('#TransportPlanning').click(function() { mainpage = $('#FloatMain') mainpage.load('create_diary.php') }); Ev ...

phpjquery

Can you tell me which specific font Adobe Edge Code (Brackets) uses in its code editor?

Can someone please help me? I'm trying to identify the syntax highlighter being used in this code. Is it Prettify or something else? ...

javascriptcsstypographyadobe-edgeadobe-brackets

Using JQuery to find and update elements in the DOM

My goal with JQuery is to have the select attribute removed from the Default.aspx li element and added to the Feedback.aspx li element when a user clicks on a link like Feedback.aspx. <ul id="main_menu" class="main_menu ui-sortable"> < ...

javascriptjqueryhtml

Tips for resizing the MUI-card on a smaller screen

Is there a way to adjust the width of the card on small screen sizes? It appears too small. You can view my recreation on codesandbox here: https://codesandbox.io/s/nameless-darkness-d8tsq9?file=/demo.js The width seems inadequate for this particular scr ...

javascriptcssreactjsmaterial-ui

What is the best way to remove an item from an object?

I have a checkbox that adds its id value to an array when checked, and I want to remove this value when it is unchecked. I attempted to remove the id using indexOf() + splice(), but I am unable to use indexOf() because I am dealing with an object. Does a ...

javascriptjquery

Issues with jQuery '.ajax()' requests falling short

I'm currently attempting to make a jQuery .ajax() call to a public web service, but I seem to be struggling with finding the correct syntax. I've experimented with various implementations. For example: $.ajax({ url: 'http://www.geognos.c ...

jqueryajaxjson

Unable to view the line number of a CSS style in Chrome Dev Tools while inspecting an element anymore

Today, a strange issue arose that has me puzzled. I can't seem to figure out what caused it. If you take a look at this picture here: This screenshot is from Twitch where I had a tab open. You can see the CSS file and line number displayed as usual. ...

cssgoogle-chromegoogle-chrome-devtools

Failed jQuery AJAX request to database with no returned information

I'm really confused about where the issue lies :S The button triggers a function that passes the parameter "sex" and initiates an ajax call to ajax.php, where I execute a MySQL query to retrieve the results and populate different input boxes. When I ...

javascriptphpjquerymysqlajax

What is the process for sending an InMemoryUploadedFile to my S3 storage?

My upload form is quite simple and includes an image as a FileField: def post(request): if request.user.is_authenticated(): form_post = PostForm(request.POST or None, request.FILES or None) if form_post.is_valid(): inst ...

javascriptpythonjquerydjangoamazon-s3