We Keep Coding

Why when hide a div it's space exist there

I want to hide a div when clicking a button. div hides well when clicking the button. But when div hides space still exists there.
It means there are two div(It can be more than two). I want to hide the div and space also and below div replace with hiding one.
I have mentioned my tried in jsfiddle: https://jsfiddle.net/c2pnv7o6/17/
How can I fix this?

I would say your problem is that you use those three <br> Tags. Those are not part of the div you are hiding. By hiding the ancor changes.
<br><br><br>
Try putting them in the div you hide, or use margin properties.

You are not removing the line breaks. Add them in the div element
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="modal-body">
<div id="prodcuctdiv">
<h6 style="margin: 5px;" class="modal-title">New Products</h6>
<div>
<p style="border:1px; border-style:solid; border-color:green; padding: 0.5em; width: 15%; text-align: center; margin: 5px; float:left;">sss</p>
<p style="border:1px; border-style:solid; border-color:green; padding: 0.5em; width: 15%; text-align: center; margin: 5px; float:left;">jjj</p>
</div>
<div>
<button onclick="myFunction1()" style="float:right;" id="addBtn" type="button" class="btn btn-secondary btn-outline-secondary btn-sm">Click me1</button>
</div>
<br><br><br>
</div>

The first div is hidden when the button is clicked. The reason the second div does not move all the way to the top is because you have three <br /> tags in the way. Remove them. Alternatively use margin-bottom on the div elements to provide the spacing, then when one is removed the white space is removed too.
In addition you should not use inline CSS or JS. Move that logic in to external stylesheet and script files. You should also look to amend the JS logic to use unobtrusive event handlers.
With all that said, try this:
jQuery($ => {
$('.test-btn').on('click', e => $(e.target).closest('.parent').hide());
});
h6.modal-title {
margin: 5px;
}
p {
border: 1px;
border-style: solid;
border-color: green;
padding: 0.5em;
width: 15%;
text-align: center;
margin: 5px;
display: inline-block;
}
.btn {
float: right;
}
#prodcuctdiv,
#prodcuctCon {
margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body">
<div id="prodcuctdiv" class="parent">
<h6 class="modal-title">New Products</h6>
<div>
<p>sss</p>
<p>jjj</p>
</div>
<div>
<button type="button" class="test-btn btn btn-secondary btn-outline-secondary btn-sm">Click me1</button>
</div>
</div>
<div id="prodcuctCon" class="parent">
<h6 class="modal-title">New Con</h6>
<div>
<p>mmm</p>
</div>
<div>
<button type="button" class="test-btn btn btn-secondary btn-outline-secondary btn-sm">Click me2</button>
</div>
</div>
</div>

How to block a content editable at specific position if a div with style absolute position is overlapped on it

I am creating an application where I have created a MS-word type application in Jquery. Now I have a problem where I have an editor and I want to place a div 'footer' on it at some position which I can do the actual problem is that when I am placing it,the place occupied by the footer div from content-editable should be
disabled. Check this fiddle Demo
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding:40px 40px 40px 40px; background-color:#eaedf1">
<div id="wrapper" style="border:1px solid #eaedf1; width:602px; background-color:white;">
<div id="header" style="height:96px; width:600px;">
<h2 style="text-align:center;">This is header
</h2>
</div>
<div contenteditable="true" style="height:1400px; width:600px; border:1px solid #eaedf1; padding:2px 2px 2px 2px;">
</div>
<br>
<div style="position:absolute; top:750px; width:600px; height:200px; border:1px solid #eaedf1;">
<div id="footer" style="height:50px; width:600px;">
<h2 style="text-align:center;">This is footer
</h2>
</div>
<div style="background-color:#eaedf1;height:10px; width:600px;">
</div>
<div id="header" style="height:96px; width:600px;">
<h2 style="text-align:center;">This is header
</h2>
</div>
</div>
<div id="footer" style="height:50px; width:600px;">
<h2 style="text-align:center;">This is footer
</h2>
</div>
</div>
<div>

I'm not sure this is easily possible with one contenteditable element. I setup a basic example using multiple contenteditable elements, one for each page.
Example: https://fiddle.jshell.net/d68ew9qc/
The following snippet adds a new page if the maximum rows per page is reached and the key used was an "enter":
$(".pageEdit").on('keypress', function(e) {
var length = $(this).children().length + 1;
/* only add a new page if the next sibling is not available */
// enter
if (e.which == 13 && length >= this.getAttribute("max_rows")) {
if ($(this).parent('.page').next().length === 0) {
var newPage = $('.page').clone(true);
$('.pageEdit', newPage).html('');
newPage.appendTo('#editor');
$('.pageEdit', newPage).focus();
}
e.preventDefault();
return false;
}
});
The keypress duplicates an element with the class=".page" and emptys the contenteditable element on the newly created one.
The keyup handles the backspace deletion of empty pages.
$(".pageEdit").on('keyup', function(e) {
var length = $(this).children().length;
var total_pages = $(this).parent('.page').parent().children().length;
// backspace is not working with keypress, this portion needs some work!!!
if (e.which == 8 && $(this).parent('.page').prev().length > 0) {
if (length === 0 && total_pages > 1) {
// found via: http://stackoverflow.com/a/4238971/3298029
placeCaretAtEnd($('.pageEdit>div:last', $(this).parent('.page').prev())[0]);
$(this).closest('.page').remove();
}
}
});
The basic html for that looks like the following:
<style>
.editor {
background-color: transparent;
border: 1px solid #eaedf1;
}
.page {
width: 600px;
position: relative;
margin-top: 15px;
background-color: #fff;
}
.header {
height: 100px;
width: 100%;
margin: 0;
}
.footer {
height: 100px;
bottom: 0;
width: 100%;
margin: 0;
}
.pageEdit {
min-height: 1400px;
border: 1px solid #eaedf1;
overflow: hidden;
padding: 0;
}
/* found: http://stackoverflow.com/a/4407335/3298029 */
.noselect {
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
not supported by any browser */
pointer-events: none;
}
</style>
<div style="padding:40px 40px 40px 40px; background-color:#eaedf1">
<div id="editor">
<div class="page">
<div class="header noselect">
<h2 style="text-align:center;">This is header</h2>
</div>
<div contenteditable="true" class="pageEdit" max_rows="77">
</div>
<div class="footer noselect">
<h2 style="text-align:center;">This is footer
</h2>
</div>
</div>
</div>
</div>
This is a fairly simple demo and many things won't work. If a line breaks to a new one, this should be handled as well.
This was only tested in Chrome which adds <div><br /></div> for a new line. Firefox only adds <br /><br />. So with that in mind the total number of rows should be calculated dynamically and not set to a fixed value because it defers from one browser to another.
Hope this gets you started.

Try css pointer-events: none; or select: none; or jQuery
$("#div").click(function(e){e.preventDefault();});
or maybe
$("#div").click(function(e){e.stopPropagation();});
(not 100% clear on your intent).

Is there any particular reason why would you want to use 'position:absolute'? I think if I change the code to work with 'relative' position, it display the results you want.
For example:
<div id="wrapper" style="border:1px solid #eaedf1; width:602px;background-color:white;">
<div id="header" style="height:96px; width:600px;">
<h2 style="text-align:center;">This is header
</h2>
</div>
<div contenteditable="true" style="overflow:hidden;height:1400px; width:600px; border:1px solid #eaedf1;">
</div>
<div id="footer" style="height:50px; width:600px;">
<h2 style="text-align:center;">This is footer
</h2>
</div>
<div style="background-color:#eaedf1;height:10px; width:600px;">
</div>
<div id="header" style="height:96px; width:600px;">
<h2 style="text-align:center;">This is header
</h2>
</div>
<div contenteditable="true" style="height:1400px; width:600px; border:1px solid #eaedf1;">
</div>
<div id="footer" style="height:50px; width:600px;">
<h2 style="text-align:center;">This is footer
</h2>
</div>
</div>
See:
https://jsfiddle.net/alejuliet/qn4k7csu/

Adding content to inline-block-div messes up layout in unexpected way [duplicate]

This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Closed 7 years ago.
I have a piece of HTML/CSS/JS which behaves in a way I wouldn't expect it to behave. There are three divs displayed as inline-block and given a fixed height and width. Within these divs are further divs which I'm filling with content.
My expectation would be, that the content would start at the top, head to the bottom of the div, and then im some way overflow. At least I've seen it like that in the past.
But for some reason, the code in the snippet I'll post below behaves differently - the two grey boxes move downward. And I'd be thankful for some explanation on why it behaves that way. Maybe it's too obvious for me too see after looking at that code for two hours now and scratching my head.
function demo() {
document.getElementById("clock5").innerHTML = "test<br/>sometext";
}
.user {
display: inline-block;
width: 128px;
height: 128px;
font-size: 18pt;
color: white;
background-color: #999;
}
.present {
background-color: green;
}
<div id="users">
<div class="user">
<div class="username">user4</div>
<div id="clock4"></div>
</div>
<div class="user present">
<div class="username">user5</div>
<div id="clock5"></div>
</div>
<div class="user">
<div class="username">user6</div>
<div id="clock6"></div>
</div>
</div>
<hr />
<button type="button" onclick="demo()">demo</button>
Just click the demo-button at the bottom to see what I'm talking about in action.

Setting vertical-align property (almost any value, since you fixed the heights) to .user rule should fix the issue.
function demo() {
document.getElementById("clock5").innerHTML = "test<br/>sometexttest";
}
.user {
display: inline-block;
width: 128px;
height: 128px;
font-size: 18pt;
color: white;
background-color: #999;
vertical-align: top;
}
.present {
background-color: green;
}
<div id="users">
<div class="user">
<div class="username">user4</div>
<div id="clock4"></div>
</div>
<div class="user present">
<div class="username">user5</div>
<div id="clock5"></div>
</div>
<div class="user">
<div class="username">user6</div>
<div id="clock6"></div>
</div>
</div>
<hr />
<button type="button" onclick="demo()">demo</button>

overflow:hidden will fix it.
Its basically aligning everything to bottom. So either overflow it, or set vertical-align :top. What's the deal with inline-block
Why does overflow fix it? From w3
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
function demo() {
document.getElementById("clock5").innerHTML = "test<br/>sometext";
}
.user {
display: inline-block;
width: 128px;
height: 128px;
font-size: 18pt;
color: white;
background-color: #999;
}
.clock{
border: #000 2px solid;
}
.present {
background-color: green;
}
<div id="users">
<div class="user">
<div class="username">user4</div>
<div class="clock" id="clock4"></div>
</div>
<div class="user present">
<div class="username">user5</div>
<div class="clock" id="clock5">some text <br/> </div>
</div>
<div class="user">
<div class="username">user6</div>
<div class="clock" id="clock6"></div>
</div>
</div>
<hr />
<button type="button" onclick="demo()">demo</button>

jquery.height() and float parameter in CSS

I'd noticed a strange behaviour of jquery.height() function. Have a look at the following code.
CSS:
div.text-field {
font-family: sans-serif;
margin: 3px;
float: left;
}
HTML:
<div id="someid">
<div class="text-holder">
<div class="text-field">text here</div>
</div>
</div>
JS:
console.log($("someid").find("text-holder").height());
The last line outputs 0 if I have float: left; in CSS file, and otputs real height if I remove float: left;. What is the reason of such a behaviour? Can I use height() function together with float: left;?

When float elements are within a container, that element does not apply the height of the container, because the element is no longer in the "flow". It is removed from the current element, and applied to it's parent, hence the issue. You can fix it by using either inline-block, or clear: both

I usually use a 0 height element with clear both as the last child in the container. This causes the container to "stretch" around the floating objects:
<div style="clear: both; line-height: 0; height: 0;"> </div>
This is a variant on the QuirksMode article, and has good cross browser compatibility.
I've rewritten your code to include it and demonstrate the results:
<html>
<head>
<title>test</title>
<style type="text/css">
div.text-field
{
border: 1px solid red;
font-family: sans-serif;
margin: 3px;
float: left;
}
div.text-holder
{
border: 1px solid blue;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#output1").text($("#someid1 .text-holder").height());
$("#output2").text($("#someid2 .text-holder").height());
});
</script>
</head>
<body>
<div id="someid1">
<div class="text-holder">
<div class="text-field">text here</div>
</div>
</div>
<br>
<div id="output1"> </div>
<br><br><br>
<div id="someid2">
<div class="text-holder">
<div class="text-field">text here</div>
<div style="clear: both; line-height: 0; height: 0;"> </div>
</div>
</div>
<br>
<div id="output2"> </div>
</body>
</html>
The demonstration can also be viewed on JSFiddle.

floats removes element from the space therefore it occupies 0 space. So height() is space it takes up that is 0

because floats remove the element from the normal flow. try using overflow:hidden
see the DEMO
for more details http://www.quirksmode.org/css/clearing.html

In jQuery the test script looks like:
console.log($("#someid").find(".text-holder").height());
if you modify the html to clear the float, the parent will gain height:
<div id="someid">
<div class="text-holder">
<div class="text-field">text here</div>
<div style="clear: both;"></div>
</div>
</div>

I had the same issue where I was using float for better element positioning. If however you (like me) know beforehand what the exact contents of the element will be, you can add a height attribute with a value (e.g. height: 30px) to your CSS class, so the jQuery .height() method does work.

Untoggle Previous Menus on click of the Next Menu Header

I have created a menu using CSS and Javascript. When I click on a menu topic (Header) it gets toggled and shows the sub categories.
What I need it to do is.. when I click on any other menu headers the previously toggled (shown) sub category should untoggle (hide) and the currently active menu header should be toggled with its sub categories. How can I achieve this?
here is my code..
$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over heading 2
$("h2").click(function(){
// slide toggle effect set to slow you can set it to fast too.
$(this).next(".togglebox").slideToggle("slow");
$(".toggleBox").hide();
return true;
});
});
HTML
now it is kind of OK, but there are some weird movements when I click on it. Here is my remaining HTML code.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="toggle.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr>
<td>
<h2 style="background-color:#DAD0D0;">NOKIA</h2>
<div class="togglebox">
<div class="content">
<center> NOKIA 8320 </center>
</div>
</div>
<h2 style="background-color:#EEE6E6;">SAMSUNG</h2>
<div class="togglebox">
<div class="content">
<center>SAMSUNG 3242C </center>
<center>SAMSUNG 3423C </center>
<center>SAMSUNG 7642C </center>
</div>
</div>
<h2 style="background-color:#DAD0D0;">SONY ERICSSON</h2>
<div class="togglebox">
<div class="content">
<center>SAMSUNG 3242C </center>
<center>SAMSUNG 3423C </center>
<center>SAMSUNG 7642C </center>
</div>
</div>
<h2 style="background-color:#EEE6E6;">ALCATEL</h2>
<div class="togglebox">
<div class="content">
<center>SAMSUNG 3242C </center>
<center>SAMSUNG 3423C </center>
<center>SAMSUNG 7642C </center>
</div>
</div>
</td>
<td width="70%">
</td>
</tr>
</table>
</body>
</html>
CSS
h2 {
padding:10px;
font-size:10px;
color:#243953;
/* border: 1px solid #a9a9a9;
-moz-border-radius: 7px; /* Rounder Corner
-webkit-border-radius: 7px;
-khtml-border-radius: 7px; */
text-align:center;
font-family:Arial, Helvetica, sans-serif;
margin-bottom:10px;
margin: 0px;
}
.togglebox {
background-color:#F7F3F3;
border: 0px solid #a9a9a9;
/* Rounder Corner */
/* -moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 7px; */
overflow: hidden;
font-size: 1.2em;
width: 196px;
clear: both;
margin-bottom:0px;
margin-top:0px;
}
.togglebox .content {
padding: 20px;

// slide toggle effect set to slow you can set it to fast too.
$(".togglebox").hide();
$(this).next(".togglebox").slideToggle("slow");
you have a capital 'B' in your hide code, $(".toggleBox").hide(); and you should swap the order of the actions hide all the "toggleboxes" (not the current one though, see below) first before triggering the H2's next slidedown
Example JSFIDDLE
edited as the above code means you can't toggle the current togglebox
// slide toggle effect set to slow you can set it to fast too.
var tb = $(this).next(".togglebox");
$(".togglebox").not(tb).slideUp();
$(tb).slideToggle("slow");
Because of later addition of more code to question;
Updated JSFiddle

I prepared a DEMO H E R E
Let me know if this suits your needs.