Why when hide a div it's space exist there - javascript

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>

Related

Adjust padding of input checkbox and vertical align with buttons

I try to vertically align an input checkbox with button at its right.
Here's an example of what I get for moment :
As you can see, the 2 checkbox on the left are misaligned (a little too much high compared to buttons) with their button at right (the first input is "Player Computer" and the second one is "Player1 Player2").
With Inspector, I tried to modify padding and margin on parent div of these checkbox/buttons but no luck.
Just remove padding from button-group class. and add vertical-align: middle; and display: inline-block; in checkbox And add below css to your code:
#formGame {
padding-left: 0;
pointer-events: all;
}
#formGame input[type="checkbox"] {
vertical-align: middle;
display: inline-block;
}
label {
padding-left: 3px;
}
.btn-group{
position: relative;
display: inline-block;
vertical-align: middle;
}
button.btn {
padding-left: 10px;
}
.btn-classic {
color: black;
background-color: white;
}
.btn-inverse {
color: white;
background-color: black;
}
#Player1VsPlayer2 {
margin-top: 10px;
margin-left: 12px;
}
#PlayerVsComputer {
margin-top: 15px;
margin-left: 12px;
}
#PlayableHits {
margin-top: 10px;
margin-left: 32px;
}
<form id="formGame">
<div id="PlayerVsComputer" class="checkbox">
<label><input type="checkbox" class="game" style=""/>
<div class="btn-group" role="group">
<button type="button" class="btn btn-inverse btn-xs"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Player</font></font></button>
<button type="button" class="btn btn-classic btn-xs"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Computer</font></font></button>
</div>
</label>
</div>
<div id="Player1VsPlayer2" class="checkbox">
<label><input type="checkbox" class="game">
<div class="btn-group" role="group">
<button type="button" class="btn btn-inverse btn-xs" disabled=""><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Player 1</font></font></button>
<button type="button" class="btn btn-classic btn-xs" disabled=""><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Player 2</font></font></button>
</div>
</label>
</div>
</form>
Please do the following CSS changes.
First remove padding from button-group class.
.btn-group{
padding-top: 0px;
}
Then use the CSS3 solution display:flex. Like so.
form label{
display:flex;
align-items:center;
}
Another way is
Replace
<input type="checkbox" class="game">
To
<span class="btn-group"><input type="checkbox" class="game"></span>
1. The intended behaviour can be accomplished by applying vertical-align to the checkbox input elements, e.g:
input.game {
vertical-align: middle;
}
2. The padding-top property declared on the nested .btn-group elements must be removed, e.g:
#formGame .btn-group {
padding-top: 0px;
}
3. Instead, rather offset spacing between sibling elements by declaring a margin property on the containing label elements, e.g:
#formGame label {
margin-bottom: 10px;
}
Note: by using the unique ID attribute of the form element (#formGame) as a base selector for common elements (label) or framework classes (.btn-group) we can ensure that these changes only apply to the intended elements.
Remove the padding and margin properties and use vertical-align instead.
You've added some unnecessary CSS that is creating the problem. This will help you get what you're looking for and it'll work on old browsers too.
.btn-group {
padding-top: 0;
vertical-align: text-bottom;
}
/* Get rid of vertical align on elements inside button */
button font {
vertical-align: initial !important;
}
/* Restore whitespace removed by padding-top: 0 */
form#formGame > div {
margin-top: 10px;
margin-bottom: 10px;
}

How to hide various span tags with a known id leaving just one visible

I have this page where I have some span tags that works like a link, inside it I have some hidden divs, what I want to do is when I click in one of these links the div inside of the clicked one is shown and the other spans receive the property display:none.
Like this:
<style>
#divHidden{display:none;}
</style>
<span id="link_01" onclick="myfunction()"> <!--<<= when clicked-->
<div id="divHidden">Content</div> <!--<<= this comes visible-->
</span>
<span id="link_02" onclick="myfunction()"> <!--<<= then this-->
<div id="divHidden">Content</div>
</span>
<span id="link_03" onclick="myfunction()"> <!--<<= and this goes hidden-->
<div id="divHidden">Content</div>
</span>
how do I code this in javascript?
Something like this?
UPDATE: to work as request, hope this is ok
codepen version
$('.content-wrapper').on('click','.tag', function(evt){
evt.preventDefault();
var selectedDiv = $(this).prop('id');
$('.content-wrapper span:not(#' + selectedDiv + ')').hide();
$(this).find('.content').addClass('show');
})
span.tag .content {
padding-top: 10px;
text-align: center;
display: none;
}
span.tag .content.show {
display: block;
}
span.tag {
margin: 0 auto;
padding: 6px 0;
border-bottom: 1px #ddd solid;
width: 200px;
cursor: pointer;
color: #444;
height: 40px;
background: #eee;
transition: background 600ms;
display: block;
}
span.tag:hover {
background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-wrapper">
<span class="tag" id="tag-one">
<div class="content">Content A</div>
</span>
<span class="tag" id="tag-two">
<div class="content">Content B</div>
</span>
<span class="tag" id="tag-thre">
<div class="content">Content C</div>
</span>
</div>

Stack overlayed divs with absolute position

Im generating a div containing jscolor (color picker) elements.These divs are inserted in a HTML page depending on IDs.My first result was a distorted display of my targeted div as following
Thus i added a position absolute to my inserted div and made it so it's clear of my HTML but still follows my target.
the problem im having now is that with multiple inserted DIVs on the same HTML target they overlay on top of each other.Im searching for a way to stack them up so they can all be visible without distorting my HTML target.
My inserted Div code :
<div id="colorpicker1" style=" position:absolute; display:block; width:450px; margin-top:-10%; left:1px; z-index:5;">
<div class="well" style=" position:relative; width:450px; left:1px; z-index:5;" >
<button class="jscolor{valueElement:'+Myvalue+', styleElement:'+Myvalueid+'}">
Click here to pick a color
</button>
Value:
<input id="+Myvalue+" >
</div>
What i want to achieve is this
If I understand your question correctly, you can achieve what you need to, simply by applying display:inline-block to both the left-hand div (#colorpicker1) and the right-hand div.
Example:
.color-picker {
display: inline-block;
width:450px;
vertical-align: top;
}
.right-block {
display: inline-block;
width:450px;
height:450px;
background-color:rgb(0,127,0);
}
.well {
width: 400px;
margin: 2px;
padding: 12px 0 12px 12px;
background-color:rgb(239,239,239);
border: 2px solid rgb(214,214,214);
border-radius: 6px;
}
<div class="color-picker">
<div class="well">
<button>Click here to pick a color</button>
Value:
<input />
</div>
<div class="well">
<button>Click here to pick a color</button>
Value:
<input />
</div>
<div class="well">
<button>Click here to pick a color</button>
Value:
<input />
</div>
<div class="well">
<button>Click here to pick a color</button>
Value:
<input />
</div>
<div class="well">
<button>Click here to pick a color</button>
Value:
<input />
</div>
</div>
<div class="right-block">
</div>
If you have any questions about how the CSS in the snippet above works, please ask in the comments below.

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>

Problems with IE7 keeping two buttons in a same line

I have a problem with IE7.
I'm trying to put 2 buttons in the same line.. but its not working only for IE7 in all other browsers it works as it should( didn't check IE6, will no check). Here is a picture so you know what I mean
This black border you see is just something I put so I can see how long/tall is my div. Which css style should buttons have in order to be in the same line. Thank you
UPDATE-> HERE IS SOME HTML :
<div style="border:1px solid; width:300px; height:30px; float:left; padding:0;margin:0;text-align:left;">
<a class="button niceButton">
<div id="first" class="action_button">
EDIT CATEGORY
</div>
</a>
<a class="button niceButton">
<div id="action_delete" class="action_button1">
DELETE RECORDS
</div>
</a>
</div>
The left one should have float: left; and the right one should have float: right; and it's recommended to place a clear: both; on the element after the div with the buttons.
Example:
<div class="buttons">
<button class="left">left button</button>
<button class="right">right button</button>
</div>
with
.buttons {
width: 300px;
}
.left {
float: left;
}
.right {
float: right;
}
Have you tried display: inline; on the buttons?
Edit:
also shouldnt the be inside the div around the text like so:
<div id="first" class="action_button">
<a class="button niceButton">EDIT CATEGORY</a>
</div>

Categories