How to lock height of two divs together? - javascript

I need to create two divs with same height. The height of each div is different on every page (height depends on content). Is there any way how to lock the height of two divs together? Here is a jsfiddle (I need to increse the height of div C based on div A and conversely).
Note: I cant use table or parent div. I am a newbie in JavaScript, so I hope that it can be done without it.
<div class="a">
<brdsds><br><br><br><bdsdsr><br><br><br>ds<br>dsds<br>dsd
</div>
<div class="b">
dsdds
</div>
<div class="c">
dsdds
</div>

You can use display:table-cell, first remove the float and add this:
div {
width 30px;
display:table-cell;/*Add this*/
/*float:left; Remove this*/
}
Check this Demo http://jsfiddle.net/8zPD2/1/
Before use this check the Compatibility

Just need to use this CSS:
.a,
.c {
max-height: 200px;
}

try this:
<div class="divmaster">
<div class="divchild">
<brdsds><br><br><br><bdsdsr><br><br><br>ds<br>dsds<br>dsd
</div>
<div class="divchild">
dsdds
</div>
<div class="divchild">
dsdds
</div>
and the css:
.divmaster{
display:table;
}
.divChild{
height: 100%;
}

If you want to try this in JavaScript , Use this code:
DEMO
$(function(){
setHeight = function (src, target) {
h = src.height();
target.css('height', h + 'px');
}
content = $('.a');
imagediv = $('.b');
setHeight(content, imagediv);
});

Just set your div to display: table-cell, and then remove the float: left.
CSS
div {
display: table-cell;
width 30px;
}
.a {
background-color: #e9d8b7;
}
.b {
background-color:blue;
}
Check this: http://jsfiddle.net/8zPD2/6/

Set min height to height of the div which has high height. Say if your div A has highest height the use that height to all divs. Its not possible with css if you dont know which div might have heigest div. As you asked how to do it only with css here it is
.a,.b,.c{ min-height:200px; max-height:400px; }

Related

How to dynamically get the length of a div using JQuery and JavaScript?

I am developing a web application using AngularJS. I find myself in a situation where I have a bar (with the css I created a line) that must dynamically lengthen and shorten.
I know that JQuery scripts are sufficient to do this. For example, if my css is like this:
.my_line{
display:block;
width:2px;
background: #FFAD0D;
height: 200px; /*This is the part that needs to dynamically change*/
}
I could in the controller resize the line (of my_line class) simply with:
$(".my_line").css("height", someExpression*100 + 'px');
The thing is, I would like to dynamically resize the line based on the size of another div element (Or, in general, any HTML element of my choice).
I don't know how to get (at run-time) the size of a certain page element in terms of height.
Only in this way I would be able to create a line that dynamically lengthens or shortens as the size of a div (or some other element) changes!
How do you do this? So I will avoid writing hard-coded the measures but I want make sure that they vary as the dimensions of other elements on the page vary
I hope this is helping:
$(".my_line").css("height", $("#referenceElement").height()*5 + 'px');
.my_line{
display:inline-block;
width:2px;
background: #FFAD0D;
}
#referenceElement {
display:inline-block;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my_line"></div>
<div id="referenceElement">Hi, I'm 5 time smaller than the orange line!</div>
Here I am using the setInterval to track the div's height (you can do width as well) and storing it in a previousHeight variable and comparing it every interval
Then according to the comparison, it will determine if the height of the div has changed. If it has then it will change the height of the other div according to the height of the first div
You can create multiple variables and track multiple elements in the same setInterval
$(document).ready(function(){
var previousHeight = parseInt($("#my-div").css("height"));
setInterval(function(){ checkHeight(); }, 100);
function checkHeight() {
// Check height of elements here
var currentHeight = parseInt($("#my-div").css("height"));
if(currentHeight != previousHeight) {
previousHeight = currentHeight;
$("#dynamic-div").css("height", parseInt(currentHeight) + "px");
}
}
$("#button").click(function() {
$("#my-div").css("height", parseInt(previousHeight) + 5 + "px");
})
})
#my-div{
background: #000000;
height: 20px;
width: 20px;
}
#dynamic-div{
background: teal;
height: 20px;
width: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my-div">
</div>
<button id="button">Increase div height</button>
<div id="dynamic-div">
</div>

jQuery copy height of the closest div

I am using a jQuery script (below) to get a height of one div and apply it to the one next to it. It works absolutely fine, but it gets wrong if I have another row with the same .app-screenshot class inside, which has a different height.
How can I make .app-screenshot-description class get the height only of the closest .app-screenshot class height?
function getImgHeight() {
var divHeight = $('.app-screenshot').height();
$('.app-screenshot-description').css('height', divHeight+'px');
}
<div class="row">
<div class="app-screenshot">This divs height is 690px</div>
<div class="app-screenshot-description">Second div</div>
</div>
<div class="row">
<div class="app-screenshot">This divs height is 540px</div>
<div class="app-screenshot-description">Second div</div>
</div>
Assuming your html structure is following this pattern
<div class="row">
<div class="app-screenshot"></div>
<div class="app-screenshot-description"></div>
</div>
You can try something like this.
$('.row').each(function(){
var divHeight = $(this).find('.app-screenshot').height();
$(this).find('.app-screenshot-description').css('height', divHeight+'px');
});
You can use closest as well as mentioned in the comment, but if heights are different for each div, you still need to loop over them using each
Search for the divs that are with common Y coordinate:
function getImgHeight() {
$('.app-screenshot').each(function(){
var divHeight = $(this).height();
var divPosition = $(this).offset().top;
$('.app-screenshot-description').each(function(){
if($(this).offset().top == divPosition)
{
/*console.log($(this).offset().top);*/
$(this).css('height', divHeight+'px');
}
});
});
}
You didn't say when your function is supposed to run, but if you loop over the rows, it can work:
$(".row").each(function(index, row){
$(row).find(".app-screenshot-description").css("height", $(row).find(".app-screenshot").css("height"));
});
.row { border:1px solid black;}
.row > div { border:1px dashed red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="app-screenshot" style="height:100px">This divs height is 100px</div>
<div class="app-screenshot-description">Second div</div>
</div>
<div class="row">
<div class="app-screenshot" style="height:25px">This divs height is 25px</div>
<div class="app-screenshot-description">Second div</div>
</div>
While you have, as I write this answer, already accepted another answer to your question, I thought I'd take a moment to offer a further answer, which hopefully provides some further alternatives that may may be of use to you. Particularly since the solutions I offer here require no JavaScript to use (although I do use jQuery to demonstrate the functionality of those solutions).
There are three obvious approaches to take that would allow your desired functionality in pure CSS; in this answer I'll go through those options in order of (personal) preference.
1: flexbox.
This approach takes advantage of the fact that flexbox sizes its child items to be the same cross-axis dimension (if the contents are arranged in a row then the cross-axis dimension would be the height, and if arranged in a column the cross-axis dimension would be width).
// This is purely to demonstrate that both elements take
// the same height (that of the 'tallest' sibling.
// binding the anonymous function of the on() method as
// the event-handler for the 'click' event:
$('#resizeHeight').on('click', function() {
// selecting all elements matching the selector,
// and using the css() method's anonymous function
// to style each '.app-screenshot' element
// independently:
$('.app-screenshot').css('height', function() {
// generating a random height up to a maximum of 500px:
let newHeight = Math.floor(Math.random() * 500);
// setting the height of the current element:
this.style.height = newHeight + 'px';
// setting the text of the current element:
this.textContent = newHeight;
});
// triggering the click event on page-load in order
// the elements have a randomly-assigned size on
// page-load:
}).click();
body {
padding-top: 3em;
}
#control {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 2.5em;
text-align: center;
}
.row {
/* setting the display to use the
flexbox layout: */
display: flex;
margin-bottom: 1em;
}
.row>div {
/* setting the flex-grow and flex-shrink
to be 1, and the flex-basis to be auto: */
flex: 1 1 auto;
}
/* Everything below is either for aesthetics
or simple visibility: */
.app-screenshot {
background-color: fuchsia;
}
.app-screenshot-description {
background-color: silver;
}
.app-screenshot::before {
content: "This element's height is: ";
}
.app-screenshot::after {
content: 'px.';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="control">
<button id="resizeHeight">Randomise height of '.app-screenshot' elements</button>
</div>
<div class="row">
<div class="app-screenshot"></div>
<div class="app-screenshot-description">Second div</div>
</div>
<div class="row">
<div class="app-screenshot"></div>
<div class="app-screenshot-description">Second div</div>
</div>
2. CSS grids.
// This is purely to demonstrate that both elements take
// the same height (that of the 'tallest' sibling.
// binding the anonymous function of the on() method as
// the event-handler for the 'click' event:
$('#resizeHeight').on('click', function() {
// selecting all elements matching the selector,
// and using the css() method's anonymous function
// to style each '.app-screenshot' element
// independently:
$('.app-screenshot').css('height', function() {
// generating a random height up to a maximum of 500px:
let newHeight = Math.floor(Math.random() * 500);
// setting the height of the current element:
this.style.height = newHeight + 'px';
// setting the text of the current element:
this.textContent = newHeight;
});
// triggering the click event on page-load in order
// the elements have a randomly-assigned size on
// page-load:
}).click();
body {
/* Setting the display to use CSS grid layout: */
display: grid;
/* specifying the number of rows, to:
row 1: 3em high,
row 2: min-content,
row 3: min-content.
'min-content' directs the row to be the
smallest practicable size that will still
fully contain the content of the elements
in that row, and because the elements take
up the whole of the allocated space those
elements are of equal height: */
grid-template-rows: 3em min-content min-content;
}
.row {
/* setting the display of the .row elements
to also use grid layout: */
display: grid;
/* setting both columns to be 1 fractional unit
therefore both columns will be the same size;
this can, of course, be adjusted to taste
using any valid CSS grid length unit: */
grid-template-columns: 1fr 1fr;
margin-bottom: 1em;
}
.app-screenshot {
/* Assigning the .app-screenshot element(s) to
be positioned in the first column of its
parent: */
grid-column: 1;
background-color: fuchsia;
}
.app-screenshot-description {
/* Assigning the .app-screenshot-description
element(s) to be positioned in the second
column of its parent: */
grid-column: 2;
background-color: silver;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="control">
<button id="resizeHeight">Randomise height of '.app-screenshot' elements</button>
</div>
<div class="row">
<div class="app-screenshot"></div>
<div class="app-screenshot-description">Second div</div>
</div>
<div class="row">
<div class="app-screenshot"></div>
<div class="app-screenshot-description">Second div</div>
</div>
3. CSS tables.
Ideally this would not be used since – and this is a purely personal opinion – it feels too close to using a <table> element for layout reasons, and while we're not using a <table> element we are using this for, purely, layout reasons. Which still feels dirty to me. It is, though, an option that could be used.
While I would tend to avoid this solution it does have the potential advantage of simplicity, despite the associated 'smell,' and takes advantage of a table-cell's parent table-row being defined by the 'tallest' of its descendants.
// This is purely to demonstrate that both elements take
// the same height (that of the 'tallest' sibling.
// binding the anonymous function of the on() method as
// the event-handler for the 'click' event:
$('#resizeHeight').on('click', function() {
// selecting all elements matching the selector,
// and using the css() method's anonymous function
// to style each '.app-screenshot' element
// independently:
$('.app-screenshot').css('height', function() {
// generating a random height up to a maximum of 500px:
let newHeight = Math.floor(Math.random() * 500);
// setting the height of the current element:
this.style.height = newHeight + 'px';
// setting the text of the current element:
this.textContent = newHeight;
});
// triggering the click event on page-load in order
// the elements have a randomly-assigned size on
// page-load:
}).click();
.row {
/* forcing the '.row' element(s) to display
as a table-row: */
display: table-row;
}
.app-screenshot,
.app-screenshot-description {
/* forcing the selected elements to display
as table-cells: */
display: table-cell;
width: 50vw;
/* emulating the margin-bottom of previous
demos in this answer: */
border-bottom: 1em solid #fff;
}
.app-screenshot {
background-color: fuchsia;
}
.app-screenshot-description {
background-color: silver;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="control">
<button id="resizeHeight">Randomise height of '.app-screenshot' elements</button>
</div>
<div class="row">
<div class="app-screenshot"></div>
<div class="app-screenshot-description">Second div</div>
</div>
<div class="row">
<div class="app-screenshot"></div>
<div class="app-screenshot-description">Second div</div>
</div>
Please note that while I've used jQuery to allow the .app-screenshot elements to be resized neither that jQuery, nor any JavaSCript at all, is necessary to implement these posted solutions, it was used purely to demonstrate the functionality of the solutions.

jQuery slideDown() moves everything below downwards. How to prevent this?

I have a small problem with jQuery slideDown() animation. When this slideDown() is triggered, it moves all stuff below downwards too.
How do I make all the stuff below the <p> being slid down, remain stationary ?
Note:
I would prefer a solution where the change is done to the <p> element, or to the slideDown call or something. Because in my actual page, there is a lot of stuff below the <p> being slid down, so changing/re-arranging all of them will take much longer for me ~
Demo # JSFiddle: http://jsfiddle.net/ahmadka/A2mmP/24/
HTML Code:
<section class="subscribe">
<button id="submitBtn" type="submit">Subscribe</button>
<p></p>
</section>
<div style="padding-top: 30px;">
<table border="1">
<tr>
<td>This table moves</td>
<td>down when</td>
</tr>
<tr>
<td>slideDown()</td>
<td>is activated !</td>
</tr>
</table>
</div>
JavaScript:
$(function () {
$("#submitBtn").click(function (event) {
$(".subscribe p").html("Thanks for your interest!").slideDown();
});
});
CSS:
.subscribe p {
display: none;
}
You can position that element as absolute:
.subscribe p {
display: none;
position : absolute; // add this line
}
Demo: http://jsfiddle.net/A2mmP/25/
What's happening with your existing code is that the element starts out as display:none; so it doesn't take up any space at all until you slide it in and it is changed to display:block, hence the movement down of the following elements.
With position:absolute it doesn't take up space in that sense, it overlaps: in fact in my updated version of your fiddle you can see a slight overlap into the table underneath - you can obviously tweak margins on the table or whatever to make it fit the way you want.
All you need is to give a fixed height of your .subscribe.
.subscribe {
height: 50px;
}
.subscribe p {
margin: 0px;
display: none;
}
Here is the jsFiddle : http://jsfiddle.net/xL3R8/
Solution
We will put the sliding element in a div element with a fixed width, preventing the document flow from being affected by the slide event.
HTML
<section class="subscribe">
<button id="submitBtn" type="submit">Subscribe</button>
<!-- this is the modified part -->
<div><p></p></div>
</section>
CSS
.subscribe div
{
/* We force the width to stay a maximum of 22px */
height:22px;
max-height:22px;
overflow:hidden;
}
.subscribe div p {
display: none;
/* We reset the top margin so the element is shown correctly */
margin-top:0px;
}
Live Demo
The problem is your CSS, it will render as block and push the other elements down when it slides in. Set it to be absolutely positioned and change the z-index to be in front, or behind.
.subscribe p {
display: none;
position: absolute;
z-index: 100;
}
Fiddle
.subscribe p {
display: none;
margin :0px;
}
IMO a good UI practice would be to, remove the subscribe button, and instead show a message there like :
"Hurray! You have been subscribed"
e.g
http://jsfiddle.net/UvXkY/
$(function () {
$("#submitBtn").click(function (event) {
$("#submitBtn").slideToggle('slow', function(){
$(".subscribe p").html("Thanks for your interest!").slideDown();
});
});
});
The actual problem your facing is display:none which will remove the space for the element p
where as visiblity:hidden and showing will get ride of this problem
Even though it will not give the proper slideDown effects so you can use the position absolute and keep some spaces for the p element will solve your problem.
one of the solution
.subscribe p {
position:absolute;
display:none;
}
.subscribe
{
position:relative;
height:50px;
}
FIDDLE DEMO

duplicate div then do a horizontal scroll

I'm trying to clone #main then put my ajax result there (hidden), after doing so I will make it scroll horizontally to the left hiding the current one then display the clone.
HTML:
<div class="container">
<div id="main">
<p>Click here to start</p>
</div>
</div>​
CSS:
#main{
width:460px;
min-height:200px;
background:#3F9FD9;
margin:0 auto;
}
.container {
position:relative;
}
​
Javascript:
$('#main').click(function(){
//clone.html(data)
var clone = $(this).clone().html('<p>Ajax loaded content</p>').css(
{position:'absolute',right:'0','margin-right':'-460px',top:0}
).attr('class','love').insertAfter($(this));
$(this).css({position:'relative'});
var width = $(window).width()-$(this).outerWidth()/2;
$('#main').animate({'left':'-'+width},4000);
});
but i'm stuck on the idea on how to make both #main animate to the left and position the second div at the center?
Fiddle
EDIT: Now i'm only stuck on how to animate the clone.
I sort of took a different approach to your question, is this kind of what you are looking for?
http://jsfiddle.net/3s7Fw/5/show
I thought, rather than do some animating ourselves, why not let jQuery's hide function do it for us? This could definitely be made to work better, but it communicates the thought.
JavaScript
$('.container').on('click', '.loaded-content', function(){
$this = $(this);
//clone.html(data)
var clone = $this.clone().html('<p>Ajax loaded content</p>').attr("id", '');
$this.after(clone);
$this.hide('slow');
});​
HTML
<div class="container">
<div id="main" class="loaded-content">
<p>Click here to start</p>
</div>
</div>​
CSS
#main, .loaded-content{
width:460px;
min-height:200px;
background:#3F9FD9;
margin:0 auto;
float: left;
}
.container {
position:relative;
width: 920px;
}
​If this is not the desired functionality, then you might be interested in a slider. There are a number of good slider plugins already out there that you can use. The difficult part would probably be adding a addNewSlide function to your chosen slider, assuming it didn't already have one.

On mouseover, changing an image's opacity and overlaying text

I want to drop the opacity and overlay text on a thumbnail image when I mouse over it. I have several ideas about how to do it, but I'm fairly certain they're inefficient and clumsy.
Make a duplicate image in Photoshop with the text overlay and reduced opacity. Swap the original out for the duplicate on mouseover.
Use CSS to drop the opacity on mouseover. Use Javascript to toggle visibility of a div containing the overlay text.
The problem I see with 1 is it seems like an unnecessary use of space and bandwidth, and will cause slow load times. With 2, it seems like I'd have to hard-code in the location of each div, which would be a pain to maintain and update. I know this is a somewhat general question, but I'm at a loss about how to go about this. How can I do this relatively simple task in a way that will make it easy to add new thumbnails?
Wrap your image in a <div class="thumb">
Add position: relative to .thumb.
Add <div class="text> inside .thumb.
Add display: none; position: absolute; bottom: 0 to .text.
Use .thumb:hover .text { display: block } to make the text visible on hover.
Like this: http://jsfiddle.net/dYxYs/
You could enhance this with some JavaScript/jQuery: http://jsfiddle.net/dYxYs/1/
$('.text').hide().removeClass('text').addClass('text-js');
$('.thumb').hover(function(){
$(this).find('.text-js').fadeToggle();
});
This way, the basic effect still works without JavaScript, and users with JavaScript get the appealing fade effect.
Go with option 2. There are ways to do it to not have to write a jQuery function for each image. As seen in my jsfiddle.
http://jsfiddle.net/daybreaker/dfJHZ/
HTML
<img src="http://placekitten.com/300/300" />
<span class="text" style="display:none">THIS IS A KITTEN</span>
<br><br>
<img src="http://placekitten.com/200/200" />
<span class="text" style="display:none">THIS IS A KITTEN</span>
jQuery
$('img').mouseover(function(){
$(this).css('opacity','.2');
$(this).next('span.text').show();
}).mouseout(function(){
$(this).css('opacity','1');
$(this).next('span.text').hide();
});
You would need to modify the span.text css to overlay it on top of the image, but that shouldnt be too bad.
Wrap it in an element and do something like this:
var t;
$('div.imgwrap img').hover(function(){
t = $('<div />').text($(this).attr('title')).appendTo($(this).parent());
$(this).fadeTo('fast',0.5);
},function(){
$(this).fadeTo('fast',1);
$(t).remove();
});
with a markup similar to:
<div class="imgwrap">
<img src="http://www.gravatar.com/avatar/3d561d41394ff0d5d0715b2695c3dcf0?s=128&d=identicon&r=PG" title="text" />
</div>
example: http://jsfiddle.net/niklasvh/Wtr9W/
Here's an example. You can position the text however you want, but the basic principle below.
http://jsfiddle.net/Xrvha/
#container { position: relative; }
#container img, #container div {
position: absolute;
width: 128px;
height: 128px;
}
#container img { z-index -1; }
#container div {
z-index 1;
line-height: 128px;
opacity: 0;
text-align: center;
}
#container:hover img {
opacity: 0.35;
}
#container:hover div {
opacity: 1;
}
If you don't want to change your HTML wraping things etc, I suggest you this way. Here is the jQuery:
$(function() {
$(".thumb").mouseenter(function() {
var $t = $(this);
var $d = $("<div>");
$d.addClass("desc").text($t.attr("alt")).css({
width: $t.width(),
height: $t.height() - 20,
top: $t.position().top
});
$t.after($d).fadeTo("fast", 0.3);
$d.mouseleave(function() {
$(this).fadeOut("fast", 0, function() {
$(this).remove();
}).siblings("img.thumb").fadeTo("fast", 1.0);
});
});
});
2 is a good solution, have done about the same as this and it isn't as hard as you would've tought;
Drop de opacity with css indeed, than position a div relative to the img, and over it. It can be done with plain css. The z-index is the trick. That div can just be shown with $('#div').slideUp() ie.

Categories