To get the jQuery show() function to work properly, you must invoke an alert immediately

When using jquery.show() to display a div, I was unable to see the display effect unless I included an alert after the show method, like so:

JavaScript:

 $("#screenAsLayer").show();
 $("#screenAsLayer_content").show();
 alert("aa");

HTML:

<div id="screenAsLayer" class="screenAsLayer"></div>
<div id="screenAsLayer_content" class="screenAsLayer_content">
  <img src="..../img/....gif">
</div>

CSS:

.screenAsLayer{
 display:none;
 z-index:9;
 position:abosolute;
}
.screenAsLayer_content{
 display:none;
 z-index:10;
 position:abosolute;
}

JSFiddle Demo

Answer №1

Give this a try:


$(document).ready(function() {
 $("#highlightedSection").fadeIn();
 $("#popupMessage").slideDown();
});

See it in action 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

The dynamic page fails to export with a static export in NextJS, resulting in an output error: "

I'm struggling to export a route in my NextJS 14 project. I've set the output to export and all routes are exporting correctly except for the dynamic ones. The folder for the dynamic route is not showing up in the output folder The version of Ne ...

Adjust the color of text in an input field as you type (css)

I am trying to customize the appearance of my search box by making the text color white. However, even after changing the placeholder color and text color to white in my CSS code, the text color only changes to white when the user clicks out of the form. W ...

Align the Font Awesome icon and text in the middle vertically within an <a> tag/router-link

My b-button acts as a router-link/a tag, and I can't seem to get the content centered the way I want. I'm aiming for the text to be below my font awesome icon, with both elements aligned both horizontally and vertically, but nothing I've tri ...

The JQuery datepicker lacks the ability to format dates

I am facing a challenge with the JQuery datepicker plugin. The issue lies in formatting the date it displays. Currently, it shows the date in the format mm/dd/yy, but I need it to be in the format yy/mm/dd. Here's what I have attempted: $("#" + cont ...

Is there a way to adjust the width of my web layout without sacrificing its responsiveness?

Struggling with my website layout design as I encountered an issue. The overall width of the layout is too excessive, and I want to introduce some margins on the sides for a better visual appeal. Although the responsive design works well originally, adding ...

Damaged .xlsx document originating from a Flask web application and an ajax POST submission

I've encountered an issue with my Flask web app where a URL route receives a post request containing JSON, converts it to an .xlsx file, and returns it using send_file(). On the server side, the generated .xlsx file appears to be correct. However, wh ...

Track and manage date ranges inclusive of specific times

http://jsfiddle.net/7vzapm49/1/ var startdatearr = [new Date("04 Dec 2014 14:30:00").toUTCString(), new Date("07 Dec 2014 14:30:00").toUTCString()]; var enddatearr = [new Date("05 Dec 2014 14:30:00").toUTCString(), new Date("08 Dec 2014 14:30:00").toUTCSt ...

Adjust the location of the slider scrollbar in jQuery UI

Currently, I am implementing jQuery UI's slider scrollbar and my goal is to set its position upon page load. Although I have referred to the sample code provided, my experience with jQuery UI is limited, so I am unsure about the necessary modification ...

Issue with PHP Form data not syncing with MySQL Database

I have been attempting to create a form and upload it into my database, but unfortunately, it is not functioning properly. Here is the HTML code I am using: <form name="Form-Request" method="post" action ="icn/form.php"> <div> ...

I am experiencing issues with CSS functionality in my Ruby on Rails application

Currently, I am in the process of creating a blog based on Mackenzie Child's 12 in 12 RoR tutorials. I diligently followed all the steps in the tutorial and adhered strictly to his code. However, I encountered an issue with the CSS stylesheets not be ...

Adjusting the "width" of a widgets within a particular <td> element on WordPress

Recently, I was given the task of modifying a mortgage calculator widget on a WordPress site to enlarge its appearance. Specifically, I am attempting to adjust the #MLCalcFormLoanForm table tbody tr td where one of the individual tags is set with a width ...

Something went awry when I tried to divide the HTML and CSS code

<div class="col-md-12" style=""> <div class="col-md-4 linkdetail" class="cursor"> <div class="col-md-12" style="margin-bottom:40px"> <img src="/img/product3.png" style="display:inline-block;width:100%;"> </div ...

How can I create two left-aligned columns in CSS, with the first column being fixed in place?

Is there a way to create two columns without using HTML tables? I'm looking for the first column to contain an image and the second column to display text aligned left, extending to the rest of the page width. I found this CSS solution for the first ...

Sharing data between controllers in AngularJS is a key feature that enables seamless

There are two controllers: one controller will write data into an object and the other controller needs to read it. Is it possible to have a global variable in my app.js file that can be accessed by both controllers? I'm unsure why one would need to u ...

Tips for showcasing a lineup horizontally with HTML and CSS

I'm currently working on creating a menu using HTML. I've included my links in an unordered list (ul) as shown below. In my CSS, I added a display:inline; property to the links to make them appear side by side like a menu. However, for some reaso ...

Is there a way to fully load an entire HTML page on success using AJAX?

$.ajax({ type:'GET', url:"/" , data:{"user": user}, //user is a variable success:function(data) { I would like to display the entire HTML content received from my views here. } }); ...

Loop through an array of objects using Typescript

Currently, I am facing a challenge in Angular 2 where I have an array of objects that I need to iterate over. However, I also need to limit the display length of a specific key's string value within each object. this.productService.loadAllProducts(pro ...

Storing HTML content in a MySQL table

When trying to store HTML content in a MySQL table, I'm encountering an issue where part of the content gets cut off by the script. The HTML content looks like this: <div data-plugin-lightbox data-plugin-options='{"delegate": "a", "type": "im ...

Dealing with vast amounts of data through jQuery ajax operations

Currently working on setting up a blog using asp.net, and I am seeking to utilize jquery for adding and displaying posts. However, I have concerns about whether it will function properly when dealing with large amounts of data. In the past, I encountered d ...

Experiencing excessive sliding down of JQuery accordion repeatedly

I have a unique accordion feature that expands to display further information when each button is clicked. While it works fine, I am facing an issue where the box seems to slide up and down multiple times before showing the full content. Ideally, I would l ...