Animation will begin once the page has finished loading

On the website, there is a master page along with several content pages. The desired effect is to have a fade-in animation when navigating between pages. Currently, when clicking on a link, the new page appears first and then starts fading out, but this should be reversed.

Javascript:

$(window).load(function(){
 $(".divLoading").fadeOut(2000);
});

ASPX:

<asp:Content ID="content" ContentPlaceHolderID="" runat="server">
<div class="divLoading"></div>
   //all the page content comes here

CSS:

.divLoading
{
 width:100%;
height:100%;
background:white;
z-index:1000;
position:fixed;
}

Attempts were made to place the Javascript and div within the master page instead of each content page, but the issue persisted.

Answer №1

Your current use of height in percentage appears to be causing issues. To resolve this, include the following CSS code:

html,body{
height: 100%;
}

Answer №2

If you want to hide your content initially and then fade it in, you can enclose your content in a div with an id of "divLoading" and apply the following CSS:

CSS:

 div#divLoading { display: none; }

jQuery:

 $(document).ready(function(){  
        $('#divLoading').fadeIn(2000);
    });

Check out the demo here

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

Keep your eyes peeled for updates in jquery movements

Is there a way to detect changes in HTML content? I have a button that adds more HTML, but when I save the data using ajax, it doesn't capture the added HTML. Currently, when I click save, the new HTML is not recognized. $("#more_column").click(func ...

Maintaining an onExit function in the ui-router framework

I am trying to implement an animation on an element within a page when the user is transitioning out of a state. Here is my current code snippet: { ....., views: { ... }, onExit: function(){ someEle.classList.remove("someClass"); // ...

Bootstrap for Twitter: How to Customize Text in the Navigation Bar

As per the twitter bootstrap guidelines, I am supposed to enclose text in a <p> tag for correct leading and color. However, when I try to do this within the navbar element or any of its sub-levels, the text does not inherit any of the styling propert ...

What is the correct way to execute a jQuery trigger on a checkbox or radio button to simulate a user clicking on it?

My current page utilizes can.js, making it challenging to replicate the issue on jsfiddle.net. The result I am experiencing is as follows: When I click on a checkbox (or even a radio button), an input text box should update accordingly (for example, displ ...

correcting mistakes in the design of the website

After inserting Google Adsense on my website, the content of the site moved down. Is there a way to have the content appear alongside the Google Adsense rather than below it? You can view my site here: .wrapper { width: 990px; margin: 0 auto; ...

"Enhance your website with jQuery autocomplete: displaying and structuring various elements

Finding the right jquery/ui autocomplete tutorial can be overwhelming, as there are numerous different approaches available. It's challenging to determine the correct method, understand why it's necessary, and learn how to enhance it. After succ ...

Optimal method for managing URL redirection in ASP.NET web applications

My webpage, Default.aspx, showcases the differences between two text files using drop-down lists (ID="File1" and "File2") and a submit button (ID="Submit"). Additionally, there is a Literal control with ID "Result." The drop-down list options are based o ...

C# MVC - Enabling dynamic row addition in an HTML table with multiple fields consolidated into a single cell

Hello, I'm new to c# MVC and could use some guidance. Currently, I am utilizing an example from Matt Lunn (here) to dynamically add new items to a bound list within an HTML table. However, the issue is that all the new items are being added to the fir ...

The form submission messages that are being received are appearing blank, even when the name field is populated with an

Hey there! I'm experiencing an issue with my form. Even though I've set the name attribute to "" for all fields, the submitted data comes back blank in my email. Here's a snippet of my code: <div class="col-lg-6 ...

Please pause and await the user's input

Currently, I am working on a process that involves making calls to a webservice and managing the responses. Some of these responses necessitate user input for proper handling. My goal is to trigger an event when user input is required, display a form on th ...

Issues arise when inline elements are not behaving correctly when placed alongside inline-block elements

Among the various types of HTML elements, inline and inline-block elements have their differences. One such difference is that inline elements don't support margin-top or margin-bottom properties like inline-block elements do. However, in a specific e ...

Delay fading in during the loading process

Recently, I came across a neat animation effect that I would love to incorporate into an upcoming project. The effect involves animating the opacity on load, also known as a fade in. I am curious if it is possible to link multiple elements together (for ...

Tips on concealing all elements besides the one with the ID of "mainContainer"

Efforts have been made to conceal everything except the main content on this particular Facebook post The following CSS code has been attempted without success - I would appreciate any assistance. html body * { display:none; } #contentArea { display:b ...

Equivalent of ResolveUrl for loading scripts without the need for server technology

I am in the process of converting an ASP.NET web page into a plain HTML web page. Most of the work is done, however, I am having trouble replacing the ASP.NET Page.ResolveUrl function when setting a reference to a javascript file: <script src="<%= ...

Automatically refresh the D3 Sunburst visualization when the source json is modified (items added or removed)

I'm a beginner in D3 and I'm attempting to update the chart dynamically if the source JSON is modified. However, I'm facing difficulties in achieving this. Feel free to check out this plunkr Js: var width = 500, height = 500, radi ...

Unable to find the specified element within the dropdown menu

Trying to figure out how to distinguish my xpath from the following: <td onclick="hrefClick(this,4,0);" onmouseout="menuLevel2MouseOut(this);" onmouseover="menuLevel2MouseOver(this);" style="padding-left:30px; padding-top:10px; padding-b ...

``Incorporate images into a slideshow container with proper alignment

I'm currently using a jquery slideshow on my homepage with fading images, but I'm having trouble centering them. The images are all different sizes and they're aligning to the left instead of being centered. Here is the CSS code I've b ...

Increasing the top padding of a resized iframe thanks to iframe-resizer

Currently, I am utilizing the remarkable iframe-resizer library to resize an iFrame while keeping it in focus. The challenge I am facing is my inability to figure out how to include additional padding at the top of the iFrame once it's resized. The ...

Enhance your Windows Media Player settings

I inserted a Windows Media Player on my webpage like this: <object id="mPlayer" classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" type="application/x-oleobject"> <embed name="mPlayer" pluginspage="http://www.microsoft.com/Windows/Medi ...

Adaptable website design featuring dynamic data grid

I've spent quite some time searching for a way to achieve the layout displayed in the linked image, but I haven't been successful in finding exactly what I need. My goal is to create a responsive layout that includes a datagrid (ui-grid) within ...