I have a set of square divs lined up beside each other, each measuring 200x200 pixels, arranged in rows and columns using the inline-block property. I'm currently using jquery to fade out one of these divs when it's clicked on. However, after the fade effect, there is a sudden "jump" as the remaining divs adjust to fill the gap left behind.
Is there a way to smoothly transition the divs from one row to another instead of having them jump?
If you're looking for a solution, consider using the code snippet below and replacing the setTimeout function with your desired click event:
Take a look at this functional fiddle.
setTimeout(function(){
$("#boxToHide").addClass('hideMe');
}, 3000);.container{
display: flex;
justify-content: center;
width: 100%;
}
.box{
height: 200px;
width: 200px;
transition: 1s;
background-color: black;
margin: 10px;
}
.hideMe{
animation: hide 1s forwards;
}
@keyframes hide{
0% {opacity: 1; width: 200px;}
10%{opacity: 0; width: 200px;}
99%{opacity: 0; width: 0;}
100% {opacity: 0; width:0; display:none}
}<div class="container">
<div class="box"></div>
<div id="boxToHide" class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>Currently, I am developing a website where the layout of a section is structured as follows: <div class="col-md-6"> <section class="right" data-type="background" data-speed="30" style="background: url(<?php echo get_field('book_image& ...
I'm currently brainstorming different ways to securely display FTP, database, and hosting information for website projects on my project management site. One potential solution I'm considering is encrypting the passwords and developing an applica ...
Is there a way to center align an icon added using the :before method? Below is the current code snippet: <div class="button submit"> <a class="submit check_car_search" href="#" >Some Text</a> </div> CSS: .button a{ backgr ...
Here is how I am utilizing my lit element: <my-header>MyHeading</my-header> Within my lit element, I have the render method defined as follows: render() { return html` <h3><slot></slot></h3> `; } Everything is ...
Recently, I encountered a scenario where I have an xhtml page containing a sessionscoped bean. I am looking to utilize this page twice within another html page - once on the left side and again on the right side of the screen. The issue I faced is that w ...
I'm determined to add a full-page slider to the homepage of my Angular 1.x app After testing multiple libraries, I haven't had much luck. The instructions seem incomplete and there are some bugs present. These are the libraries I've experi ...
Just dipping my toes into the world of bootstrap and decided to try out one of the examples from their documentation. Unfortunately, it doesn't seem to be displaying as expected. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/boots ...
Many questions have been raised about Bootstrap, Tables, and responsiveness. However, I have yet to find one that addresses my specific issue with getting a particular cell (<td> element) to: (a) Fill the available space, stopping at the window boun ...
I need help centering an inline element (like a span) within a fixed-width block element. The goal is to have the position of the inline element determine how the text is laid out in the block element. Here's an example: .container { ...
Apologies for the mismatched title, but here's my issue: I need to create hidden checkboxes for each Polymer's paper-button div in jsp/style related problems. <%int i; %> <form ACTION="Computation.jsp"> <% for(i=0; i<n; ...
Having just embarked on learning about JSON, I find myself puzzled by the process of parsing JSON from an input value within my form. I'm attempting to convert the inputs into an array format like {"task" : "(input) ", "(input) "} {"description" : "( ...
I recently downloaded the most recent version of Bootstrap, which is version 4. Upon extraction, I noticed that it includes two folders: one for CSS and the other for JS. The CSS folder consists of approximately 12 CSS files, while the JS folder contains ...
<tr> <form role="form" class="manualImportSubmit" action="http://localhost:5000/XXX" method="post"> <td><input name="yyy" value="FormAValue" type="hidden">TestA</td> <td><input name="before_year" class="fo ...
After consideration, I have decided to avoid using a JavaScript solution for my problem. The only way it seems to work consistently is by using setInterval() at regular intervals, which I prefer not to do. I am aware that achieving the same effect with CSS ...
Is there a way to ensure that an image fits within a specified area using CSS or other methods? For example, if I have images of various sizes and want them all to fit into a div of 150px by 100px without stretching or distorting them. I just want the imag ...
How can I prevent overlay on material-ui's RaisedButton? When I open a modal window, the buttons still remain visible. Which property should be added to the buttons to disable the overlay? Any assistance from those familiar with material-ui would b ...
I am working on an asp.net MVC project and I need to convert a HTML div into a PDF with two separate pages. Here is an example of my code: HTML Code <div class="row" id="mycanvas"> <p>This is the first part of my content.</p> <p ...
I'm having trouble getting the MUI Stepper Component to display Icons within each step node. Despite following the sample code provided by MUI, my implementation only shows a blank screen instead of the desired look. The desired appearance includes i ...
Is there a way to make a component that can function with or without an image? Currently, when the component doesn't have an image, other contents and styles disappear. How can I resolve this issue? App.Vue: <template> <div id="app&qu ...
When a radio button is clicked, an Ajax request is triggered and the Div containing checkboxes for employees is retrieved. I am hoping to have the selected checkboxes displayed at the top. I am considering the possibility of using a dynamic index attribut ...