I have a parent div and 2 child divs (child-left and child-right). child-right div will contain 1 or 2 icons depending on dynamic page requirement. The child-left div contains the title and also used as a handle to drag operation. I do not want to set a width px or % (like the 90% I have below). How do I set the child-left div to take the rest of available space after what is occupied by child-right.
<div id="parent">
<div id="child-left" style="width:90%">
This is my title
</div>
<div id="child-right">
<i class="fa fa-cog"></i>
</div>
</div>
Thanks!
The following should help you:
HTML:
<div id="parent">
<div id="child-right">Hey</div>
<div id="child-left">This is my title</div>
</div>
CSS:
#child-left {
border: 3px solid gray;
background-color:blue;
margin-left:0px;
overflow:hidden;
}
#child-right {
float:right;
border-style:solid;
}
#parent {
overflow:hidden;
}
DEMO JSFiddle
Related
I have DIV wrapper which I want to toogle class using children element. However the DOM three isn't the best:
<div class="wrapper-I-want-to-toogle-class">
<div class="other-class">
<div class="other-class">
<span class="element-I-want-to-triggle-toogle-class">X</span>
</div>
</div>
</div>
How to do that?
I have alredy tried to use:
$(this).parents(".wrapper").classList.toogle('active');
However wordpress does not really allow to use functions like that.
Can You help me?
Something like this should work, its important to select the correct class name of the parent, and the child used to toggle the parent
jQuery(function(){
jQuery('.target').click(function(){
jQuery(this).parents(".wrapper").toggleClass('active');
})
})
.wrapper{
display:block;
height:20px;
background:#CCC;
}
.wrapper.active{
height:150px;
}
.target {
float:right;
display:flex;
background:#EEE;
color:#666;
border:1px solid #aaa;
width:20px;
height:20px;
justify-content:center;
align-content:middel;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="other-class">
<div class="other-class">
<span class="target">X</span>
</div>
</div>
</div>
Im trying to right align the Title on top of the last Div. As per the below image , the text should be on top of "Hello 5 / 4 / 3". When we resize the window button will float which is working and the text should be always be on top of the last button.
Unsure why the wrapper div is adding extra space to the right of the button and not aligning to the edge of the right most div. Extra space is coming even if the Title is not there , any insights about Div width calculation would be great.
I tried calculating the number of buttons in the top row using javascript and added offset to the title , but it seems tedious and not aligning at certain resolution.
http://jsbin.com/nonexegiqa/embed?html,css,console,output
HTML
<div class="wrapper">
<div class="title">Title</div>
<div class="clear"/>
<div class="btn">Hello 1</div>
<div class="btn">Hello 2</div>
<div class="btn">Hello 3</div>
<div class="btn">Hello 4</div>
<div class="btn">Hello 5</div>
<div class="btn">Hello 6</div>
<div class="clear"/>
</div>
CSS
.wrapper{
border:solid gray 1px;
}
.btn{
width:96px;
height:46px;
float:left;
border:solid gray 1px;
margin-left : 11px;
margin-bottom : 11px;
text-align:center;
}
.title{
float:right;
}
.clear{
clear:both;
}
You need to find count of .btn in first row when page resizing, Then set position of .title to last .btn in first row.
$(window).on("resize", function(){
var parWidth = $(".wrapper").innerWidth();
var chiWidth = $(".wrapper .btn").first().outerWidth(true);
var childCount = 0;
while(parWidth >= chiWidth){
parWidth -= chiWidth;
childCount ++;
}
var left = $(".btn:eq("+(childCount-1)+")").position().left;
$(".title").css("margin-left", left);
});
To better understanding, i create demo but because you can't change demo page size in here, i create it in JSFiddle.
yes, display:flex may be very helpful. As a work around you could set the width of the .wrapper to 70vw, or something similar. The .wrapper div width is creating the "extra space."
I want to create a table with 4 columns, but only show 3 columns. So I would ideally have a div that spans the 3 columns and apply overflow: hidden. On a click of the button, I want column 3 (company 2) to slide left, and be replaced with column 4 (company 3), so that company 3 gets compared against company 1. If the button is clicked again, company 3 should slide left again, but company 2 should slide from the right and return to its original position as it was originally. The reason for doing this is because in mobile view we can't fit in all the columns.
Fiddle can be found here:
https://jsfiddle.net/smks/U7JHM/197/
HTML
<div class="div-table">
<div class="div-table-row header-row">
<div class="div-table-col header-row"> </div>
<div class="div-table-col header-row">company 1</div>
<div class="div-table-col header-row">company 2</div>
<div class="div-table-col header-row">company 3</div>
</div>
<div class="div-table-row">
<div class="div-table-col">Comparison 1</div>
<div class="div-table-col">yyy</div>
<div class="div-table-col">yyy</div>
<div class="div-table-col">yyy</div>
</div>
<div class="div-table-row">
<div class="div-table-col">Comparison 2</div>
<div class="div-table-col">yyy</div>
<div class="div-table-col">www</div>
<div class="div-table-col">yyy</div>
</div>
<div class="divRow">
<div class="div-table-col">Comparison 3</div>
<div class="div-table-col">uuu</div>
<div class="div-table-col">Mkkk</div>
<div class="div-table-col">yyy</div>
</div>
</div>
<br>
<button>Compare Next</button>
CSS
.div-table{
display:table;
width:auto;
border:1px solid #666666;
border-spacing:5px;/*cellspacing:poor IE support for this*/
padding: 0;
text-align: center;
}
.div-table-row{
display:table-row;
width:auto;
clear:both;
padding: 5px;
}
.div-table-col{
float:left;/*fix for buggy browsers*/
display:table-column;
width:200px;
border:1px solid #666666;
padding: 5px;
}
.header-row {
height: 50px;
}
Here is a quick and dirty way - first I applied classes to the third and forth cols, and then animated the 4th one to hidden with a duration of 1 so it happens instantly. Then I toggle columns 3 and 4 each time the button is pressed.
$(document).ready(function () {
$(".c4").animate({
width: 'toggle',
opacity: 'toggle'
}, 1);
$("button").click(function (event) {
event.preventDefault();
$(".c3, .c4").animate({
width: 'toggle',
opacity: 'toggle'
});
});
});
Updated fiddle: https://jsfiddle.net/U7JHM/202/
I have had some problems to resolve this situation.
I have a div "header" with no set height because could have a variable value depending on browser.
Inside her I have two more divs and I want to place one div exacly at the bottom of the another but I never know height "header" height. I tried to define a height for div "header" but sometimes it fails.
Use position:absolute in combination with a positioning context on the parent, for example:
<header>
Ohai
<div>
Noes!
</div>
</header>
CSS:
header {
position:relative;
height:25%;
background:#eee;
}
div {
position:absolute;
bottom:0;
left:50%;
margin-left:-50px;
width:100px;
background:red;
}
The header's size is unknown, since it's based on the viewport height, and the div is locked to its bottom with the combination of position:absolute and bottom:0. The header needs the position:relative to designate it a positioning context used by absolutely positioned child elements.
Fiddle here.
One way to do this would be to set position:relative on the header div, and position:absolute and bottom:0 on the child div you want to sit on the bottom of the header.
jsFiddle example
just use clear:both for the second div at bottom ,and set the height of the header as height:auto
Sample:
<div id="header">
<div id="first">
first
</div>
<div id="second">
second
</div>
</div>
CSS:
#header{height:auto}
#first{}
#second{clear:both}
DEMO
<div id="header">
<h2>Some title..</h2>
<div class="right">
<p style="color: black;display: inline">
Some data.....
</p>
</div>
<div class="left">
<form action="#" >
<input type="text" placeholder="put here..." required="required">
<button type="submit">Validar</button>
</form>
</div>
</div>
CSS:
#header{position: relative;height: 150px; border:1px solid black}
.right{right: 0; bottom: 0; top:auto; position: absolute}
.left {left: 0; bottom: 0; top:auto; position: absolute}
This work just fine in Chrome and Firefox but is not working in IE.
The div which have the left css is not being placed at the bottom of the "header".
<div>
<div>
div1
</div>
<div>
div2
</div>
</div>
Consider this JSFiddle
When I mouseenter on Span1 , a blue bar should appear below the Span1 (same for Span2 and Span3)
But even I mouseenter on Span1 or Span2 or Span3 , blue bar appears only under Span2.
CSS
div.demo {
display:table;
width:100%;
}
div.demo div {
display:table-cell;
text-align:center;
}
.under {
width:100px;
height:2px;
background-color:blue;
margin:0px auto;
display:block;
}
HTML
<div class="demo">
<div id='span1'>Span 1</div>
<div id='span2'>Span 2</div>
<div id='span3'>Span 3</div>
</div>
<div class="demo">
<div><span id='Span1'></span></div>
<div><span id='Span2'></span></div>
<div><span id='Span3'></span></div>
</div>
JS
$(document).ready(function(){
$('#span1').mouseenter(function(){
$('#Span1').addClass('under');
});
$('#span2').mouseenter(function(){
$('#Span2').addClass('under');
});
$('#span3').mouseenter(function(){
$('#Span3').addClass('under');
});
$('#span1').mouseleave(function(){
$('#Span1').removeClass('under');
});
$('#span2').mouseleave(function(){
$('#Span2').removeClass('under');
});
$('#span3').mouseleave(function(){
$('#Span3').removeClass('under');
});
});
You have no width on the cells before the hover
Working JSFiddle here: http://jsfiddle.net/F2smc/5/
div.demo div {
display:table-cell;
text-align:center;
width: 33%; // <<< Added this
}
Basically the other 2 cells are zero width so the second row collapses to something very narrow in the middle so it looks like it is only under option 2.
Better example: http://jsfiddle.net/F2smc/29/
You can get the same effect, without specifying an exact % width, by simply adding this CSS instead for the spans (so they do not collapse within their parent divs):
div.demo span
{
width:100%;
}
If you put unique colors on the divs it will become really obvious what is going on. 100% on the div does not mean the divs will use it like in a table. Basically any change that applies a width to the underlining divs/spans will work. Suggest you use Chrome in F12 debug mode to view this type of work as it clearly shows the original elements were all 0 width.
PS. Is really is a bad idea to use ids that vary only in case
On a separate note:
You would not normally hardwire events for each different id in JQuery when they all do roughly the same thing. If you change your ids to be really unique (not just by case) you can do something like:
$(document).ready(function () {
$('.menu').hover(function () {
$('#' + this.id + '-l').addClass('under');
}, function () {
$('span').removeClass('under');
});
});
Which takes the id of the current hovered item, appends something unique then updates the matching item by id.
Working demo: http://jsfiddle.net/F2smc/30/
That should clean things up while retaining your original structure.
For testing i have given text-decoration,you replace that with background-color..
HTML
<div class="demo">
<div id='one' class="hover">Span 1</div>
<div id='two' class="hover">Span 2</div>
<div id='three' class="hover">Span 3</div>
</div>
<div class="demo">
<div><span id='Span1'></span></div>
<div><span id='Span2'></span></div>
<div><span id='Span3'></span></div>
</div>
CSS
div.demo {
display:table;
width:100%;
}
div.demo div {
display:table-cell;
text-align:center;
}
.under {
width:auto;
height:1px;
text-decoration:underline;
margin:0px auto;
display:block;
}
JQuery
$(document).ready(function(){
$('.hover').hover(function(){
var id=$(this).attr("id");
$('#'+id).addClass('under');
},function(){
$('.hover').removeClass('under');
});
});
Working DEMO
Try this
I have editted your html and css
<div class="demo">
<div id='span1'>Span 1</div>
<div id='span2'>Span 2</div>
<div id='span3'>Span 3</div>
</div>
<div class="demo">
<span id='Span1'></span>
<span id='Span2'></span>
<span id='Span3'></span>
</div>
and add this to your css
div.demo span {
display:table-cell;
width:100px;
}
or
Try this
Working DEMO
without changing any html and css
just add width:100px; to
div.demo div {
display:table-cell;
text-align:center;
width:100px;
}
Hope this helps,thank you