jQuery not detecting div resize [duplicate] - javascript

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?

Related

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')});
});

Multiple scrolling panes in a window without jQuery / Javascript?

So, I'm faced with a dilemma of putting together a 3 column layout that has three independently scrolling panes. With a combination of the right HTML, CSS and jQuery, I can achieve the following (Fiddle link opens to another window, jQuery is below):
JSFiddle Link
$(document).ready(function() {
doResize();
});
// for the window resize
$(window).resize(function() {
doResize();
});
function doResize() {
var bodyheight = $(document).height();
$(".left").height(bodyheight);
$(".right").height(bodyheight);
$(".center").height(bodyheight);
}
The question is, can this be done without using jQuery to get the exact result?
Why not just add height: 100%; to each pane? Here is the same example with no JavaScript
.left, .center, .right {
height: 100%;
}
JSFiddle Link

How to detect clicks outside of a css modal? [duplicate]

This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 8 years ago.
Im using a very simple and clean code to render a modal in my page:
<div class="modal">I'm the Modal Window!</div>
.modal {
/* some styles to position the modal at the center of the page */
position: fixed;
top: 50%;
left: 50%;
width: 300px;
line-height: 200px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
background-color: #f1c40f;
text-align: center;
/* needed styles for the overlay */
z-index: 10; /* keep on top of other elements on the page */
outline: 9999px solid rgba(0,0,0,0.5);
}
http://jsfiddle.net/c89Ls0av/
Is there a clean and reliable way to detect when somebody clicks outside of the modal?
Probably the simplest way is to bind click event to body and see if it comes from the element (e.target) which has parent (walk up the tree with closest method) .modal:
$(document).click(function(e) {
if (!$(e.target).closest('.modal').length) {
alert('click outside!');
}
});
Demo: http://jsfiddle.net/c89Ls0av/4/
By the way, overlay made with outline is an interesting idea, but it's not real overlay, as it still allows to interact with underlying page elements. Here is an example of the overlay made with div container covering entire page: http://jsfiddle.net/c89Ls0av/5/. This one will prevent page interaction when modal is visible.
And here is an example of how open/close functionality can be use together: http://jsfiddle.net/c89Ls0av/7/.
WithOut jQuery
document.addEventListener('click', function (e) {
if(e.target.className === 'modal'){
alert('clicked in');
}else {
alert('clicked out');
}
}, false);
check it out:
http://jsbin.com/totonopili/1/edit?html,css,js,output
With the help of a javascript framework this is quite easy.
Follow these steps:
Attach a click event to the document which closes or hides the modal.
Attach a separate click event to the window which stops click propagation.
Example:
$('html').click(function(){
$('.modal').hide();
});
$('.modal').click(function(e){
e.stopPropagation();
});
http://jsfiddle.net/c89Ls0av/3/
Warning! Stopping propagation can introduce strange behaviour
Dfsq answer will work fine.. but if you want something to do with dialog boxes you may have a look at jQuery ui dialog boxes. It gives you many options with dialog boxes which you can configure as per your needs.
http://jqueryui.com/dialog/

Detect scroll-event on every parent-element

I have a directive which should detect a scroll-event on every parent element. The scrollable element could be div with overflow:scroll or the browser-window itself. So this solution does not work in all cases:
angular.element($window).bind("scroll", function() { ... });
You need to listen for the scroll event at the capture phase. To do this, pass true as the third parameter of addEventListener:
document.getElementById('parent').addEventListener('scroll', () => {
console.log('scrolling');
}, true);
Your example works when I replace your javascript with the code above, and there's no jQuery dependancy.
You need to add some specific height for the div elements to scroll
For example:
div{
height: 350px; // Specify div height as you want
overflow: scroll;
}
Okay, I found the solution. Here it is:
angular.element(document.querySelectorAll('*')).bind("scroll", $scope.myFunction);

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)

Categories