Contrast between JQuery .display/.conceal and CSS view:invisible

I'm working on a way to toggle the visibility of a Div element using JQuery:

$("#Progress").hide("fast");

But I want the #Progress div to be hidden by default. 

<div style="height:30px;margin-top:5px">
    <div id="Progress" style="visibility:hidden">
        <div style="float:left"> <img src="../../../../Content/images/ProgressSpinner.gif"/></div>
        <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Saving.......</div>
    </div>
</div>

When I try to hide it every time the page loads using JQuery, there's a flashing effect due to constant hiding onload. I really want it hidden until I choose to show it with JQuery.

I attempted using the "Visibility" attribute in CSS, but then my JQuery .Show("fast") command had no impact and the div remained hidden.

So what is the best approach to keep a div hidden by default so that a JQuery .Show command can reveal it when needed, such as when a link is clicked?

$(document).on("click", ".edit-link", function (e) {
jquerycss

Answer №1

To hide your element, remember to adjust the display property accordingly:

#Progress {
    display: none;
}

Answer №2

a. To avoid the flashing effect, avoid using the .hide('fast') function.

However, in your specific scenario, you can simply use $("#Progress").hide();

As an alternative, consider using .hide('slow') for a more gradual hide.

b. The .show("fast") function is not effective because your progress div has style="visibility:hidden", which hides it but still occupies space on the page.

To solve this issue, remove that and replace it with style="display:none", which hides it without taking up space on your page.

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

Curved edges on a text box featuring a scroll bar

I'm facing an issue with my website where I have a large amount of text in an html textarea that requires a scroll bar. The problem is, I'd like to add rounded corners to the textarea, but it doesn't look good with the scroll bar. Below is ...

htmlcssscrolltextareaborder

How can you create an accordion menu that expands when a button is clicked?

Is there a way to make an accordion menu open when the 'More' button is clicked? I've tried, but it always starts in its expanded state and collapses when the button is clicked. What I really want is for the accordion to be closed initially ...

javascriptjquerycss

Set the DIV element to match the height of its container

I'm currently using this HTML code, and it's functioning correctly. However, I would like the height of the div to adjust dynamically based on the tab's content, rather than specifying a fixed height of 200px. Using a percentage value for th ...

cssvue.js

Modifying Checkbox BorderWidth in Material UI v5

Seeking assistance with adjusting the checkbox border width in Material UI v5. I currently have a custom checkbox and would like to remove the border width. Despite trying numerous solutions, I have been unsuccessful so far. checkbox <Checkbox de ...

cssreactjsmaterial-uinext.jsjss

preparing a function to be executed at a later time in response to a click event

I'm working on an animation function that needs to run every time a specific set of buttons is clicked. Each button triggers different animations, but the overall animation occurs consistently with each click. Currently, I have it set up within each c ...

jqueryfunctionanimation

showcasing extensive information in asp.net data tables

I am seeking alternative methods for displaying data in a gridview with approximately 500 - 1000 rows. The ideal grid should allow for keyboard navigation, so I have implemented jQuery functions to support this feature. However, upon loading 500 rows into ...

jquerygrid

Infinite loop using jQuery function endlessly

I'm trying to create a jQuery Animation that loops indefinitely, but my current code doesn't seem to be working. Here's what I have: $(document).ready(function() { var i = 0; document.write(i); function runAnimatio ...

javascriptjquery

Is it possible to utilize ajax for submitting a form only after it has been validated by the

Currently, I am utilizing a jQuery plugin for validation and incorporating AJAX for form submission. My objective is to submit the form only after successful validation; however, the issue arises where the form gets submitted regardless of the validation o ...

javascriptjqueryajax

validation for grouped radio inputs

I'm having a small issue with appending error states. I have 7 radio inputs and after submitting, I see 7 error states under the group. Can someone assist me in modifying the code? <form class="register-form"> <div class="co ...

javascriptjquery

The alignment of the website design is off

I'm in the process of creating a custom template for my website and everything was going smoothly until I encountered an issue with the news bar placement. Instead of appearing below the navbar and welcome message bar, it's showing up above the n ...

csshtml

Tabulator filter - Enhancing CSS elements for a unique touch

Is there a way to customize the CSS elements of filters used in tabulator.js? Specifically, I am looking to: Apply different background colors to text filters Add a down arrow on the right side of each drop-down filter box I have included a screenshot ...

csstabulator

The footer is supposed to be at the bottom, but unfortunately, the clear float isn

Today seems to be a rough one without enough coffee, as I'm struggling to remember how to do this I am trying to achieve the following layout: header content float float footer The content section contains two floating elements. The problem is ...

htmlcss

Stop the bootstrap carousel at a specified screen size

Looking for a way to stop the bootstrap carousel from auto-playing on screen sizes below 640px. Despite trying various methods, I have yet to find a solution that works. This is my current approach: $(document).ready(function(){ if ($(window). ...

jquerytwitter-bootstraptwitter-bootstrap-3bootstrap-carousel

What is the best way to resize a div located below a dynamic div in order to occupy the available space?

My website has a dynamic div1 and a scrollable table inside div2. I need the div2 to take up the remaining height of the window, while ensuring all divs remain responsive. I've tried using JavaScript to calculate and adjust the heights on window loa ...

javascriptcssangularbootstrap-4flexbox

The autocomplete feature is malfunctioning when trying to input data into dynamic table rows

Recently, I designed a dynamic input table with auto-complete functionality. Everything was working well until I encountered an issue - the auto-complete function doesn't work on newly added rows in my dynamic table. Any suggestions for resolving this ...

phpjqueryajaxjquery-ui

switch from material ui lists on/off

Trying to learn React through coding, I've encountered an issue with displaying the 'StarBorder' icon next to folders when clicked. Currently, clicking on any folder displays the 'StarBorder' icon for all folders. Any tips on how t ...

javascriptcssreactjsarraysmaterial-ui

Potential effects on the browser when making an AJAX call every 3 seconds

Our goal is to periodically check for updates in the database every 3 seconds using the jquery $.ajax method. While the technology is straightforward, we are interested in potential reasons to avoid making frequent ajax calls, such as browser limitations ...

ajaxjqueryfirefox

Tap on the child to reveal their parent

I am working with a family tree that includes dropdown menus containing the names of parents and children. Each child has a link, and when I click on a child's link, I want their father to be displayed in the dropdown menu as the selected option. Can ...

javascriptphpjqueryajaxpdo

Enhance your website with a dynamic div zoom feature using the Jquery Zoom

I've been scouring the internet for a jQuery plugin that allows me to zoom in on an image. There are many options out there, but I prefer ones that display the zoomed-in image in a separate area rather than directly on the original image. For example ...

javascriptjqueryhtmlcsszooming

How can I position the arrows inside the Slick Slider instead of outside?

After discovering how user-friendly slick slider is, I decided to incorporate it into a website I have been developing: You can find the slider positioned at the bottom of the page. However, I am facing an issue where I would like the navigation arrows to ...

jqueryhtmlslider