Utilize a flexbox with a hidden attribute, such as visibility: hidden, and reveal it at

Having a problem with my flexbox

<style>
  .popup {
    height:50%;
    width:50%;
    background-color: rgba(99,148,236,0.7);
    border: 2px solid white;
    border-radius: 5vw;
    display:flex;
    flex-direction:column;
    align-content: space-evenly;
    }
    .popup svg line {
    stroke-width: 2;
    stroke: white;
    fill: none;
}
</style>
<html>
<span id='save_popup'>
<span style='display:flex;flex-direction:row;align-items:center;z-index:22;width:100%;height:100%;'>
<span style='display:flex;flex-direction:column;justify-content: center;align-items:center;z-index:22;width:100%;height:100%;'>
 <span class='popup' style='z-index:22;'>
    <svg id='close_popup' xmlns="http://www.w3.org/2000/svg" width="2vw" height="2vw" style='z-index:23;position:relative;margin-top:4vh;margin-left:90%;'>
    <line class="a" x1="0" y1="1vw" x2="1vw" y2="0"></line>
    <line class="b" x1="1vw" y1="1vw" x2="-1vw" y2="-1vw"></line>
    </svg>
    <p id='savings_popup_p1' style='font-size:3vw;margin:auto;'>You Saved</p>
    <p id='savings_popup_p2' style='margin:auto;font-family:roboto;max-width:55%;'></p>
    <p id='savings_popup_p3' style='margin:auto;font-family:roboto;max-width:55%;0.9em;'></p>
    <p id='savings_popup_p4' style='margin:auto;font-family:roboto;font-size:0.9em;'>*This is a preliminary estimate, please contact us to discuss more</p>
 </span>
</span>
</span>
</span>
</html>

I'm looking to hide it without disrupting the rest of the page when the preloader appears:

<div id='preloader_cover' style='display:flex;flex-direction:column;background-color:black;width:100%;height:100%;z-index:1000;'>
 <div id='preloader_circle' style='display:inherit;border-radius:50%;border:3px solid white;margin:auto;width:18vw;height:18vw;
 background-color:cornflowerblue;'>
    <img id='preloader_logo' src='logo.png' style='margin:auto;width:10vw;height:10vw;'/>
 </div>
 <p id='preloader_p' style='margin: 10vh auto;font-size:4vh;font-family:Montserrat;color:white;'>Loading assets..</p>
 <progress id='preloader_prog' max='100' value='10' style='margin: 5vh auto;height:2vh;width:60%;border-radius:0.8vh;color:white;background-color:background-color:rgba(99,148,236,0.7);
 gray;opacity:0.9;'></progress>

</div>

The use of .hide() and .show() doesn't fully solve the issue, as I cannot use normal display:block for other reasons.

Using display:none; in the style:

 $('#save_popup').css('display','flex');

doesn't provide the desired result either. I need the ability to toggle the visibility on screen smoothly. Any assistance is appreciated.

jquerycssflexbox

Answer №1

Do you find this CodePen response satisfactory?

<style>
.hidden {
  display: none;
}

nav {
  display: flex;
}

nav div {
}


</style>
<script>
var textFieldVisible = true;

document.querySelector('button').addEventListener('click', function() {

  $('input').toggleClass('hidden');

});
</script>
<html>
<nav>
  <div>
    <span>Item 1</span>
  </div>
  <button>Click it</button>
  <input value="Potato brains"/>
  <div>
    <span>Item 2</span>
  </div>
</nav>
</html>

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

jQuery validation requires either two fields to be filled out or one other field

I've been searching extensively for a solution that addresses my specific requirements. I have three fields – first name, last name, and business name. My goal is to allow users to input either both their first and last names or just the business na ...

jqueryjquery-validate

What is the best way to reset JQuery autocomplete in a newly loaded DIV?

I am facing an issue with an autocomplete widget inside a DIV, which was copied from the JQuery samples available at http://jqueryui.com/resources/demos/autocomplete/default.html Upon button presses, the content of the DIV gets replaced with new HTML. The ...

jqueryjquery-autocomplete

How to Align an Icon to the Right in a Bootstrap 4 Modal Title

I'm attempting to position two icons next to the close button within a Bootstrap 4 modal. Unfortunately, I am struggling to remove some unwanted margin-left that persists despite my best efforts. While inspecting the element, I was successful in achie ...

htmlcsstwitter-bootstrapbootstrap-4

Is there a recent problem with the flickrAPI where the photo description is showing as undefined

For the last couple of years, my two websites have been successfully populating galleries using a simple FlickrAPI call with JSON and jQuery. However, they recently encountered an error that caused gallery population to fail. I've narrowed down the i ...

jqueryjsonapiflickr

Greeting message in jQuery that only disappears when manually closed (for Rails 3)

How can I create a welcome message for first-time users in Rails 3 that remains visible until the user closes it once using jQuery's hide method? ...

javascriptjqueryruby-on-railsajaxruby-on-rails-3

Toggle the visibility of a div based on the outcome of an AJAX response

Is there a method to conceal a div based on the result of an ajax call to my server? The server responds with an object {available: yes/no} depending on the domain and username searched. If the response is yes, I aim to keep the div visible in the availabl ...

javascriptjqueryhtmlajax

Why are my styles not working when referenced from the .module.scss file?

Here is the code snippet from my Sublayout.module.scss file: .pl-6 { padding-left: 6rem !important; } .pr-6 { padding-right: 6rem !important; } .pl-12 { padding-left: 12rem !important; } .pr-12 { padding-right: 12rem !important; } After im ...

javascriptcssreactjssassvite

Following the recent update of Google Chrome, Sencha Touch experiences spinning issues

Since updating my Google Chrome to the latest version (v29.0.1547.57 m), I've noticed some issues with parts of my Sencha Touch app spinning. The Sencha Touch version I am using is v2.2.1. For example, when using Ext.Msg.alert, I can see the title bu ...

javascriptcssgoogle-chromesencha-touchsencha-touch-2.2

PHP is not compatible with cookies, however, they can be effectively used with Javascript

In order to view the cart of products, I am looking to initially load it using PHP and then handle subsequent updates or deletions through jQuery post requests. However, I am encountering an issue. [I receive variables in JSON format within the same PHP ...

phpjquerycookies

What is the best way to make a fixed div span the entire screen when it is placed within a fixed container

Currently, I have a container that is 100x100px in size and centered in the middle of my webpage. Inside this container, there is a nested div that is 100px tall, which I would like to stretch to the width of the entire screen. Does anyone know how I can ...

cssscreenstretchhtml

Alerting JavaScript with element Selector doesn't function at full capacity

I am currently implementing Notify JS from the following source : Below is the HTML code I am using: <div> <p><span class="elem-demo">aaaa</span></p> <script> $(".elem-demo").notify( "Hello Box" ...

javascriptjqueryhtmlnotifyjs

Adding complex JSON format to an HTML table involves formatting the data correctly and then using

Utilizing AJAX, I fetched a JSON response and am now looking to map the JSON data into an HTML table structured like this: { "records": [{ "type_id": 000001, "type_desc": "AAAAAA", "type_createby": "Adam" }, { "type ...

javascriptjqueryhtmljsonajax

What causes divs to be interspersed among other divs when Float is enabled?

I am looking to create a layout for 4 sections, similar to a table, utilizing only divs and CSS. The intended output is this: Logo-----------Info Business-------Client I initially thought it would be simple by using the Float property. However, when I se ...

htmlcss

Utilize the dropdown menu value within a PHP function

My understanding is that PHP is server side, while Javascript is client side. I am currently attempting to dynamically update a table on the screen when a user selects a different value in a dropdown menu without causing a page reload. Here is the form se ...

javascriptphpjqueryhtml

Whenever I attempt to use .ajax to post to an MVC 4 controller, the ViewModel is consistently null

My jQuery/HTML: @using(Html.BeginForm("Create", "Home", FormMethod.Post)) { <input name="ImageName" id="ImageName" type="hidden" /> <input name="XPos" id="XPos" type="hidden" /> <input name="YPos" id="YPos" type="hidden" /> ...

c#jqueryajaxasp.net-mvcjson

Is there a way to duplicate an image a specified number of times depending on a given output value?

As a beginner in coding, I am looking to learn how to dynamically insert multiple images based on input and output values. Currently, my code for basic addition looks like this: <form oninput="x.value=parseInt(a.value)+parseInt(b.value)"> <inpu ...

javascriptjqueryhtmlimage

Tips for refreshing the appearance of a window in angular when it is resized

I have a chat feature integrated into my application. I am looking to dynamically resize an image within the chat window when the width of the window falls below a certain threshold. Is there a method available to modify the CSS style or class based on the ...

cssangulartypescript

Turn off autocomplete feature to prevent interference while handling database information

My Kindo AutoComplete is nested within a helper function. Whenever I perform a search and select one of the AutoComplete results, it triggers a function that retrieves data from the source. The information takes some time to load and appear on the page. ...

jquerysql-serverkendo-ui

Using PHP to send multiple data through ajax

Currently, I am facing an issue with jQuery where I am unable to pass more than one selected data from "Forms.html" to be sent to "ajaxServer.php" using jQuery "ajax.js". The problem arises when trying to receive multiple values at "ajaxServer.php", as one ...

phpjqueryajax

What is the best way to adjust the footer width to match the sidebar using Bootstrap 5?

Currently working on a Bootstrap 5 template for my website, but being new to it makes it a bit challenging. Specifically struggling with aligning the footer to fit the full width of the sidebar. <!DOCTYPE html> <html lang="en"> <head&g ...

htmlcssbootstrap-5