We Keep Coding

Issues using a simple jQuery script to grab one div height & make another div the same size

Basically I want to get the height of .r-side and have it applied to the height of .l-side so that these two elements are always the same height even if the window is resized, and positioned on top of each other. I'm not sure what's wrong with my jQuery.
Here's what I got:
$(window).load(function(){
$(".l-side").css({'height':($(".r-side").height()+'px')});
});
Using jQuery 3.1.1. And here's a jsFiddle of the issue I'm having.
I'm open to other methods than jQuery to accomplish this but in my research I only found solutions that were specific to columns, and these divs need to be positioned directly on top of each other.

You have referenced .l-side and .r-side as classes in the jQuery, and coded them as ID's in the markup :)
In the snippet I altered your widths so it displays in the preview window, but you can see the heights now match.
$(window).load(function() {
$("#r-side").css({
'height': ($("#l-side").height() + 'px')
});
});
#l-side img {
width: 100px;
}
#r-side {
width: 100px;
height: 100px;
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="l-side"><img src="http://connor.la/sandbox/refsmaster/images/forever-2.jpg"></div>
<div id="r-side"></div>

Please use id selector '#' as you have used id not classes and use document.ready instead of window.load.$(document).ready(function(){
$("#r-side").css({'height':($("#l-side").height()+'px')});
});

jQuery not detecting div resize [duplicate]

This question already has answers here:
How to detect DIV's dimension changed?
(28 answers)
Closed 7 years ago.
UPDATE: since everyone is hung up on window resize
I've got a div inside a resizable div and I want to detect the resize of the child div. I know .on('resize') is only for the window. My question is solely based on the child div resize.
<div id='main_wrapper'>
<div id = 'child_div'>
</div>
</div>
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#main_wrapper {
height: 300px;
width: 300px;
background-color: blue;
}
#child_div{
height: 100%;
width: 100%;
}
$('#main_wrapper').resizable();
$('#child_div').on('resize', function() { //i know this isn't proper, how to do this is my question.
alert('i changed');
})
https://jsfiddle.net/cyclingpaper/2kksqoLs/
Thanks for your time.

The resize event is only targetted by the window object. You can't attach it to another DOM tree element than the most top.
https://developer.mozilla.org/en-US/docs/Web/Events/resize

Here you go:
https://jsfiddle.net/danhaswings/ejoxphov/2/
You can't bind the resize event to anything other than the window.
// cache objects
var $main_wrapper = $('#main_wrapper');
// on window resize
$(window).resize(function() {
console.log('The window has resized.');
// random example to run on window resize
$main_wrapper.css({
'background-color': 'red'
});
});

Post Edited: Downvoters please remove the downvotes for no reason / anger!
The resize event is for window only, not for elements. Use this code instead:
$(window).on('resize', function(){
alert('i changed');
});
Fiddle: https://jsfiddle.net/effsmpdm/
Take a look at this
http://benalman.com/code/projects/jquery-resize/examples/resize/
It has various examples. Try resizing your window and see how elements
inside container elements adjusted.
Example with js fiddle to explain how to get it work. Take a look at this fiddle
http://jsfiddle.net/sgsqJ/4/
In that resize() event is bound to an elements having class "test" and
also to the window object and in resize callback of window object
$('.test').resize() is called.
e.g.
$('#test_div').bind('resize', function(){
console.log('resized');
});
$(window).resize(function(){
$('#test_div').resize();
});
Source: How to detect DIV's dimension changed?

JS launches before CSS

This is currently happening in chrome, in firefox I haven't had this issue (yet).
Here is a VERY simplified version of my problem.
HTML:
<div class="thumbnail">
Click me!
</div>
CSS:
div {
width: 200px;
height: 300px;
background-color: purple;
}
a {
position: absolute;
}
#media (max-width: 991px) {
div {
height: 200px;
}
}
Javascript:
$(document).ready(function () {
var $parent = $('#clickMe').parent();
function resize() {
$('#clickMe').offset({
top: $parent.offset().top + $parent.height()-$('#clickMe').height()
});
}
$(window).on('resize', resize);
resize();
});
The problem:
So what does this give when I resize (without dragging)? Well javascript launches first and sets the position of the <a></a> , then CSS applies the height change if we are < 992 px.
Logically the button is now visually at the outside of the div and not on the border like I had originally defined it to be.
Temporary solution proposed in this post.
jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?
var doit;
$(window).on('resize', function(){ clearTimeout(doit); doit = setTimeout(resize, 500); });
Temporary solution is not what I'm looking for:
However, in my situation I don't really need to only call 'resize' when the resizing event is actually done. I just want my javascript to run after the css is finished loading/ or finished with it's changes. And it just feels super slow using that function to 'randomely' run the JS when the css might be finished.
The question:
Is there a solution to this? Anyone know of a technique in js to wait till css is completely done applying the modifications during a resize?
Additional Information:
Testing this in jsfiddle will most likely not give you the same outcome as I. My css file has many lines, and I'am using Twitter Bootstrap. These two take up a lot of ressources, slowing down the css application (I think, tell me if I'm wrong).
Miljan Puzović - proposed a solution by loading css files via js, and then apply js changes when the js event on css ends.

I think that these simple three steps will achieve the intended behavior (please read it carefully: I also suggest to read more about the mentioned attributes to deeply understand how it works):
Responsive and fluid layout issues should always be primarily (if not scrictly) resolved with CSS.
So, remove all of your JavaScript code.
You have positioned the inner a#clickMe element absolutely.
This means that it will be positioned within its closest relatively positioned element. By the style provided, it will be positioned within the body element, since there is no position: relative; in any other element (the default position value is static). By the script provided, it seems that it should be positioned within its direct parent container. To do so, add position: relative; to the div.thumbnail element.
By the script you provided, it seems that you need to place the a#clickMe at the bottom of div.thumbnail.
Now that we are sure that the styles added to a#clickMe is relative to div.thumbnail, just add bottom: 0px; to the a#clickMe element and it will be positioned accordingly, independently of the height that its parent has. Note that this will automatically rearrange when the window is resized (with no script needed).
The final code will be like this (see fiddle here):
JS:
/* No script needed. */
CSS:
div {
width: 200px;
height: 300px;
background-color: purple;
position: relative; //added
}
a {
position: absolute;
bottom: 0px; //added
}
#media (max-width: 991px) {
div {
height: 200px;
}
}
If you still insist on media query change detection, see these links:
http://css-tricks.com/media-query-change-detection-in-javascript-through-css-animations/
http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/
http://tylergaw.com/articles/reacting-to-media-queries-in-javascript
http://davidwalsh.name/device-state-detection-css-media-queries-javascript
Twitter Bootstrap - how to detect when media queries starts
Bootstrap: Responsitive design - execute JS when window is resized from 980px to 979px

I like your temporary solution (I did that for a similar problem before, I don't think half a second is too long for a user to wait but perhaps it is for your needs...).
Here's an alternative that you most likely have thought of but I don't see it mentioned so here it is. Why not do it all through javascript and remove your #media (max-width.... from your css?
function resize() {
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
if(width<992){
$("div").each(function(e,obj){$(obj).height(200);});
}
$('#clickMe').offset({
top: $parent.offset().top + $parent.height()-$('#clickMe').height()
});
}

In the html page, put the link to css file in head section; next, put the link to js file just before the /body tag and see what happens. In this way css will load always before js.
Hope this help you.

Did you try to bind the resize handler not to the window but to the object you want to listen to the resize ?
Instead of
$(window).on('resize', resize);
You can try
$("#clickMe").on('resize', resize);
Or maybe
$("#clickMe").parent().on('resize', resize);

var didResize = false;
$(window).resize(function() {
didResize = true;
});
setInterval(function() {
if (didResize) {
didResize = false;
console.log('resize');
}
}, 250);

I agree with falsarella on that you should try to use only CSS to do what you are trying to do.
Anyway, if you want to do something with JS after the CSS is applied, I think you can use requestAnimationFrame, but I couldn't test it myself because I wasn't able to reproduce the behavior you explain.
From the MDN doc:
The window.requestAnimationFrame() method tells the browser that you
wish to perform an animation and requests that the browser call a
specified function to update an animation before the next repaint. The
method takes as an argument a callback to be invoked before the
repaint.
I would try something like this:
var $parent = $('#clickMe').parent();
function resize(){
$('#clickMe').offset({
top: $parent.offset().top + $parent.height()-$('#clickMe').height()
});
}
window.onresize = function(e){
window.requestAnimationFrame(resize);
}
window.requestAnimationFrame(resize);

Anyone know of a technique to wait till css is completely done loading?
what about $(window).load(function() { /* ... */ } ?
(it executes the function only when the page is fully loaded, so after css loaded)

resize an html element on window resize

I found a similar question a few days ago, and I've been trying to implement one of the suggestions since then without an success. Any I have an ASPx page, not the master, that has two tables stacked one on top of the other. I've got the top formatted just the way I want. However, the bottom on I want to have it fit within the window, or better yet, show a vertical scrollbar.
I've wrapped the bottom table in a div with overflow-style: auto; in the CSS file. Then I'm using the following script in the page to manage the resizing:
$(function () {
$('.tblContent table').css({ 'height': (($(window).height()) - 50) + 'px' });
$(window).resize(function () {
$('.tblContent table').css({ 'height': (($(window).height()) - 50) + 'px' });
});
});
My div looks like:
<div class="tblContent">
The CSS file contains:
.tblContent
{
overflow-style: auto;
}

for the bottom div containing the table (assuming you want it as 50% of the screen. you can obviously adjust that.):
overflow:auto;
height:50%;
width:100%;
for the table itself:
width:100%;

I'm not a master of css, but make sure to give your table a specific height to cause overflow to occur.
.tblContent
{
overflow: auto;
height : 400px;
display : block;
}
Why display : block;? Because I suck at css and I use that for almost everything. Also, I use overflow: auto. I'm not sure what overflow-style is, although it could be correct.
Also, since we both are terrible at css, here is a css reference link.
http://www.w3schools.com/cssref/pr_pos_overflow.asp

Change div height onclick with animation

I'm trying to make a gallery using divs that change their height when you click on them. Ideally, this would include animation to smoothly expand the div's height. There will be several of each div on each page, so it needs to just expand that section.
It's actually supposed to turn out something like the news section on this page: http://runescape.com/
I'd like to do it with JavaScript/jQuery if possible.

$('div').click(function(){
$(this).animate({height:'300'})
})
Check working example at http://jsfiddle.net/tJugd/

Here's the code I ended up using:
JS:
document.getElementById("box").addEventListener("click", function() {
this.classList.toggle("is-active");
});
CSS:
#box {
background: red;
height: 100px;
transition: height 300ms;
width: 100px;
}
#box.is-active {
height: 300px;
}
HTML:
<div id="box"></div>
Fiddle:
https://jsfiddle.net/cp7uf8fg/

try
$('div').toggle(function(){
$(this).animate({'height': '100px'}, 100);
}, function(){
$(this).animate({'height': '80px'}, 100);
});
DEMO

jQuery rules. Check this out.
http://api.jquery.com/resize/

The complete solution:
Both spacer DIV and Margin or Padding on content DIV works but best to still have a spacer DIV.
Responsive design can be then applied to it in your CSS file.
This is mutch better as with JAVA the screen would flicker!
If you use a grid system there will be a media query part there you need to include your settings.
I use a little spacer on HD screen while its increasing till mobile screen!
Still if you have breadcrumb in header multiple lines can be tricky, so best to have a java but deferred for speed resons.
Note that animation is for getting rid of flickering of screen.
This java then would only fire if breadcrumb is very long otherwise single CSS applied via the grid and no flickering at all.
Even if java fired its doing its work via an elegant animation
var header_height = $('#fixed_header_div').height();
var spacer_height = $('#header_spacer').height() + 5;
if (header_height > spacer_height) {
$('#header_spacer').animate({height:header_height});
};
Note that I have applied a 5px tolerance margin!
Ho this helps :-)

I know this is old, but if anyone seems to find their way here. #JacobTheDev answer is great and has no jQuery! I have added a little more for use cases where the event is not being assigned at the same point your toggling the css class.
HTML
<div id='item' onclick='handleToggle()'> </div>
JS
handleToggle(event){
document.getElementById(event.target.id).classList.toggle('active')
}
CSS
#item {
height: 20px;
transition: 1s;
}
.active {
height: 100px;
}