Removing a container with a nested hidden element

Forum Moderators: not2easy

Message Too Old, No Replies

Removing a container with a nested hidden element

csdude55

6:29 pm on Jul 27, 2022 (gmt 0)

I have this:

<div style="height: 16px">
 <div id="saved" hidden>Autosaved</div>
</div>

I use jQuery to show and fadeOut #saved, so I need for there to be 16px allocated here to keep the rest of the page from jumping when it's shown.

I'm looking for an alternative to using that parent container that defines the height. It's not causing a problem or anything, I'm just trying to eliminate unnecessary nesting where possible to speed up delivery.

I know that I can use positioning, but that takes up more space and is more complicated so it seems to defeat the purpose. But then again, the additional styling would be in a separate CSS file, so I guess it would still be faster?

I know that I could use visibility instead of hidden, but then I couldn't use jQuery's fadeOut().

Here's the functioning script so you can see what I mean:
[jsfiddle.net...]

Any other suggestions?

coothead

5:56 pm on Jul 28, 2022 (gmt 0)

Any other suggestions?

Yes, don't use jQuery, don't even use JavaScript !

HTML


<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

</head>
<body>

 <div id="container">
 <div id="comment" contentEditable="true"></div>
 <div id="saved">Autosaved</div>
 </div>

</body>
</html>

CSS


* {
 box-sizing: border-box;
}
body {
 background-color: #ccc;
 font: normal 1em / 1.5em arial, tahoma, helvetica, sans-serif;;
 }
#container {
 border: 2px inset #ece9d8;
 padding: 0 0.5em;
 background-color: #fff;
 font-size: 0.75em;
 color: #000;
 }
#comment {
 min-height: 12.5em;
 max-height: 50em;
 padding: 0.25em;
 outline: 0;
 }
#saved { 
 opacity: 0;
 text-align: right; 
 animation: fadeinout 5s infinite;
 }
@keyframes fadeinout {
 0% {opacity: 0;}
 59% {opacity: 0}
 60% {opacity: 1}
100% {opacity: 0} 
 }

coothead

coothead

9:27 pm on Aug 17, 2022 (gmt 0)

Hi there csdude55,

do you have any particular reasons for ignoring the solution that I posted?

coothead

phranque

9:34 pm on Aug 17, 2022 (gmt 0)

this has been previously addressed:
https://www.webmasterworld.com/html/5070170.htm#msg5070176