Direct your attention to the cursor problem in Internet Explorer

Here is a snippet of code that automatically changes background images:

function changeBackground() {
    currentBackground++;
    if(currentBackground > 3) currentBackground = 0;

    $('body').fadeOut(0, function() {
        $('body').css({
            'background-image' : "url('" + backgrounds[currentBackground] + "')"
        });
        $('body').fadeIn(0);
    });


    setTimeout(changeBackground, 3000);

On the front end, there is a simple form. Strangely, in Internet Explorer, the form focus seems to shift each time the background image changes, while it functions correctly in Chrome and Firefox.

javascripthtmlcssfade

Answer №1

jQuery's fadeOut smoothly reduces opacity to 0 and then hides the element with display: none.

In my opinion, Internet Explorer shifts focus away from form elements when they are contained within an element with display: none.

For a possible solution, consider using the animate() method instead:

$('body').animate({ opacity: 0}, 0, function() {
    $('body').css({
        'background-image' : "url('" + backgrounds[currentBackground] + "')"
    });
    $('body').animate({ opacity: 1 }, 0);
});

One thing to ponder on: since you are using instant transitions (setting duration to 0), the use of fadeIn/fadeOut may not be necessary (the css() call should suffice by itself).

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

When working on a MEAN web application, encountering HTTP responses like 403 or 500 from the Express server can sometimes go unnoticed and not be properly handled in the errorCallback function within

Within my Node web app, there is a situation where an HTTP GET request is sent in one of the Angular controllers. At the same route defined in Express, somewhere in the route logic, an HTTP 500 response (also tried 403 Error) is also being sent. However, i ...

javascriptangularjsnode.jsexpress

Having trouble with the Material-UI v1 Drawer component on the iOS 13 beta version

As we prepare for the upcoming iOS release, set to debut next month, it has come to our attention that the main navigation on our website is experiencing issues when accessed using an iOS device running the latest beta (iOS13). While the drawer opens as ex ...

javascriptreactjsmaterial-uiios13

Adjust and align image with an unknown dimensions

I need to adjust various images of unknown sizes (some bigger, some smaller) to fit inside a container of a known size while maintaining their aspect ratio. The goal is to stretch and center the images within the container. To clarify: If the images a ...

htmlcssimage

Can data be presented in AngularJS without the use of scope variables?

I have a method: <span ng-init="getJobApplicantsList(jobId)">(number should be display here)</span> Is there a way to display the data without having to store it in a scope variable? I need to use this method in many places. This is my cont ...

javascriptangularjsmethods

Japanese Character File Naming Convention

When dealing with certain Japanese characters, the content disposition header appears as follows: Content-Disposition: attachment; filename=CSV_____1-___.csv; filename*=UTF-8''CSV%E3%82%A8%E3%83%93%E3%83%87%E3%83%B3%E3%82%B91-%E3%82%B3%E3%83%94%E ...

javascriptjqueryreactjsdownloaddocument

Combining href into click events - a step-by-step guide

I have an href link available. '<a href="index.php?imei=' + value['imei'] + '&nama=' + value['nama'] + '" class="summarykapal">Summary</a>' This is the function in question: function retr ...

javascripthtml

Is it possible to encounter an invalid character when trying to parse valid JSON using

I have an object with properties that contain JSON strings. When I serialize this object, I get the following string: [{ "template": 1, "action_json": "{\"id\":\"1\",\"action\":\"An action for all of IT!\",& ...

javascriptphpjson

Performing function in Vue.js when a change occurs

I recently started developing a Vue.js component that includes an input field for users to request a specific credit amount. My current goal is to create a function that will log the input amount to the console in real-time as it's being typed. Ultima ...

javascriptvue.jsvuejs2

Modify the Embed Audio Player in Google Drive

I am looking to integrate audio files from Google Drive into my website. While I have successfully embedded them, the issue lies in not being able to customize the player (as shown in the image below). Is there a way to modify the player? <iframe ...

javascripthtmlcssgoogle-drive-api

What is the best way to send a form using jQuery's AJAX function?

Essentially, I have a form that contains several text boxes along with a submit button. The issue I am facing is that upon submitting the form, only the value of the username box is being sent and not the values of the other text boxes. I am using a servl ...

javascriptjqueryajaxformsservlets

Can you explain the purpose of prevState within the setState method of a functional component?

When returning the updated previous state within a setState method retrieved from the useState hook, it appears that the state remains unchanged. To demonstrate this behavior, consider running the following code snippet: function App(){ const [state, ...

javascriptreactjsstatereact-hooksreact-state-management

Looping through a jQuery/js script, adding a unique variable with varying ending numbers to individual div elements

Imagine having an array of variables like so: example1 = 1 example2 = 32 example3 = 3345 and so forth up to something large, for instance example100 = 222 The goal is to insert each number into a separate div, with each div identified by: <div class ...

javascriptjquery

Develop a custom WordPress meta box for managing the color scheme of individual posts and pages

Currently, I am in the process of learning how to create a custom WordPress meta box with a select tag for controlling the color scheme of individual posts/pages. My goal is to implement a system where I can use if statements to load an additional CSS file ...

csswordpressselectmetabox

Deactivate Firestore listener in useEffect to cease updates

Looking for a solution with useEffect to stop listening to Firebase Firestore collection changes? Data from Firebase can be retrieved successfully, but encountering issues accessing the unsubscribe function. Any ideas on how to resolve this problem? l ...

javascriptreactjsfirebasereact-nativegoogle-cloud-firestore

How to programmatically close a Bootstrap modal in a React-Redux application using jQuery

Hello everyone, I hope you're all doing well. I am currently working on a React application that utilizes Redux. I have run into an issue while trying to close a modal in Bootstrap programmatically. The versions I am using are Bootstrap 4 and jQuery 3 ...

javascriptjquerynode.jsreactjsredux

Timer Does Not Appear to be Counting Down

I recently added a countdown clock to my website, but I'm having an issue with it not updating in real-time unless the page is refreshed. I'm not very familiar with javascript, so I found some code online and made some modifications myself to sui ...

javascripthtmlcss

jQuery.clone() Internet Explorer issue

I have a scenario where I use jQuery.clone() to extract the html of a page and then append it to a pre tag. Surprisingly, this operation works perfectly fine in Firefox and Chrome, but there's no response when it comes to IE: <!DOCTYPE html> &l ...

javascriptjqueryinternet-explorerclone

Troubles with Borders and Padding in HTML Elements

Hello everyone, I'm currently facing an issue trying to neatly fit a textbox, select menu, and button all within the same sized div. Each element seems to have strange borders/margins causing them not to display properly (the button ends up below the ...

htmlcss

Mastering the correct application of both Express's res.render() and res.redirect()

After implementing a res.redirect('page.ejs');, my browser is displaying the following message: Cannot GET /page.ejs In my routes file, I have not included the following code structure: app.get('/page', function(req, res) { ...

javascriptnode.jsexpressrender

Choosing a request date that falls within a specified range of dates in PHP Laravel

In my database, I currently store two dates: depart_date and return_date. When a user is filling out a form on the view blade, they need to select an accident_date that falls between depart_date and return_date. Therefore, before submitting the form, it ne ...

javascriptphphtmlmysqllaravel