jQuery resize handler does not operate on each element
Edited since original posting
I have written a resize handler that listens for a parent div being resized (as a result of an ancestor container div being dragged).
The handler relies on the iframe method described here, which I had employed in my own code: Resize on div element
I need to know that my divs have been resized as a result of the parent div being resized, and then do something as a result. Note that this is not a window/browser resize event.
When only one of my divs is on the page, it works fine. When multiples are used, only the last one is affected by my script. I cannot figure out why and am now asking for help in figuring this out.
This has all come about during my attempts to scope the code so that it does properly apply itself to each one of my affected divs in turn.
Fiddle here: https://jsfiddle.net/GrumJim/xpvt214o/939643/
The offending code begins with:
$('.rsg_testtiles_display_macro_container').each(function(index) {
There are two divs in my markup, but only the second one is processed (12 outputs to the console represent the 12 child divs, but the five child divs in the first div are ignored) and I don't know why.
All help much appreciated.
javascript jquery
asked Nov 13 '18 at 11:55
Graham CampbellGraham Campbell
104
add a comment |
Edited since original posting
I have written a resize handler that listens for a parent div being resized (as a result of an ancestor container div being dragged).
The handler relies on the iframe method described here, which I had employed in my own code: Resize on div element
I need to know that my divs have been resized as a result of the parent div being resized, and then do something as a result. Note that this is not a window/browser resize event.
When only one of my divs is on the page, it works fine. When multiples are used, only the last one is affected by my script. I cannot figure out why and am now asking for help in figuring this out.
This has all come about during my attempts to scope the code so that it does properly apply itself to each one of my affected divs in turn.
Fiddle here: https://jsfiddle.net/GrumJim/xpvt214o/939643/
The offending code begins with:
$('.rsg_testtiles_display_macro_container').each(function(index) {
There are two divs in my markup, but only the second one is processed (12 outputs to the console represent the 12 child divs, but the five child divs in the first div are ignored) and I don't know why.
All help much appreciated.
javascript jquery
asked Nov 13 '18 at 11:55
Graham CampbellGraham Campbell
104
1
Try to narrow this code, and create a working snippet that reproduces the issue you're trying to solve. It would make it much easier for people here to help you :-)
– Ronen Cypis
Nov 13 '18 at 12:25
Please add the markup to the snippet I created so we can give you better answers. WHY does your code repeat? (think that through)
– Mark Schultheiss
Nov 13 '18 at 12:59
@MarkSchultheiss The why of my code repeating is also the why I posted the question :) I'm very new to all this, and picking up bits from SO has gotten me to this point, but I'm absolutely stuck here now. I don't expect assigning this to be a recursive statement all its own, but it is appearing to act like that.
– Graham Campbell
Nov 13 '18 at 14:44
@RonenCypis Thank you for the tips, I will try to reduce the issue down. For the time being I've added a full implementation of my issue as a fiddle here, which includes the troublesome resize function as posted above: jsfiddle.net/GrumJim/xpvt214o/939554
– Graham Campbell
Nov 13 '18 at 14:46
add a comment |
Edited since original posting
I have written a resize handler that listens for a parent div being resized (as a result of an ancestor container div being dragged).
The handler relies on the iframe method described here, which I had employed in my own code: Resize on div element
I need to know that my divs have been resized as a result of the parent div being resized, and then do something as a result. Note that this is not a window/browser resize event.
When only one of my divs is on the page, it works fine. When multiples are used, only the last one is affected by my script. I cannot figure out why and am now asking for help in figuring this out.
This has all come about during my attempts to scope the code so that it does properly apply itself to each one of my affected divs in turn.
Fiddle here: https://jsfiddle.net/GrumJim/xpvt214o/939643/
The offending code begins with:
$('.rsg_testtiles_display_macro_container').each(function(index) {
There are two divs in my markup, but only the second one is processed (12 outputs to the console represent the 12 child divs, but the five child divs in the first div are ignored) and I don't know why.
All help much appreciated.
javascript jquery
asked Nov 13 '18 at 11:55
Graham CampbellGraham Campbell
104
Edited since original posting
I have written a resize handler that listens for a parent div being resized (as a result of an ancestor container div being dragged).
The handler relies on the iframe method described here, which I had employed in my own code: Resize on div element
I need to know that my divs have been resized as a result of the parent div being resized, and then do something as a result. Note that this is not a window/browser resize event.
When only one of my divs is on the page, it works fine. When multiples are used, only the last one is affected by my script. I cannot figure out why and am now asking for help in figuring this out.
This has all come about during my attempts to scope the code so that it does properly apply itself to each one of my affected divs in turn.
Fiddle here: https://jsfiddle.net/GrumJim/xpvt214o/939643/
The offending code begins with:
$('.rsg_testtiles_display_macro_container').each(function(index) {
There are two divs in my markup, but only the second one is processed (12 outputs to the console represent the 12 child divs, but the five child divs in the first div are ignored) and I don't know why.
All help much appreciated.
javascript jquery
javascript jquery
asked Nov 13 '18 at 11:55
Graham CampbellGraham Campbell
104
asked Nov 13 '18 at 11:55
Graham CampbellGraham Campbell
104
edited Nov 13 '18 at 17:38
Graham Campbell
asked Nov 13 '18 at 11:55
Graham CampbellGraham Campbell
104
asked Nov 13 '18 at 11:55
Graham CampbellGraham Campbell
104
asked Nov 13 '18 at 11:55
Graham CampbellGraham Campbell
104
104
1
Try to narrow this code, and create a working snippet that reproduces the issue you're trying to solve. It would make it much easier for people here to help you :-)
– Ronen Cypis
Nov 13 '18 at 12:25
Please add the markup to the snippet I created so we can give you better answers. WHY does your code repeat? (think that through)
– Mark Schultheiss
Nov 13 '18 at 12:59
@MarkSchultheiss The why of my code repeating is also the why I posted the question :) I'm very new to all this, and picking up bits from SO has gotten me to this point, but I'm absolutely stuck here now. I don't expect assigning this to be a recursive statement all its own, but it is appearing to act like that.
– Graham Campbell
Nov 13 '18 at 14:44
@RonenCypis Thank you for the tips, I will try to reduce the issue down. For the time being I've added a full implementation of my issue as a fiddle here, which includes the troublesome resize function as posted above: jsfiddle.net/GrumJim/xpvt214o/939554
– Graham Campbell
Nov 13 '18 at 14:46
add a comment |
1
Try to narrow this code, and create a working snippet that reproduces the issue you're trying to solve. It would make it much easier for people here to help you :-)
– Ronen Cypis
Nov 13 '18 at 12:25
Please add the markup to the snippet I created so we can give you better answers. WHY does your code repeat? (think that through)
– Mark Schultheiss
Nov 13 '18 at 12:59
@MarkSchultheiss The why of my code repeating is also the why I posted the question :) I'm very new to all this, and picking up bits from SO has gotten me to this point, but I'm absolutely stuck here now. I don't expect assigning this to be a recursive statement all its own, but it is appearing to act like that.
– Graham Campbell
Nov 13 '18 at 14:44
@RonenCypis Thank you for the tips, I will try to reduce the issue down. For the time being I've added a full implementation of my issue as a fiddle here, which includes the troublesome resize function as posted above: jsfiddle.net/GrumJim/xpvt214o/939554
– Graham Campbell
Nov 13 '18 at 14:46
1
1
Try to narrow this code, and create a working snippet that reproduces the issue you're trying to solve. It would make it much easier for people here to help you :-)
– Ronen Cypis
Nov 13 '18 at 12:25
Try to narrow this code, and create a working snippet that reproduces the issue you're trying to solve. It would make it much easier for people here to help you :-)
– Ronen Cypis
Nov 13 '18 at 12:25
Please add the markup to the snippet I created so we can give you better answers. WHY does your code repeat? (think that through)
– Mark Schultheiss
Nov 13 '18 at 12:59
Please add the markup to the snippet I created so we can give you better answers. WHY does your code repeat? (think that through)
– Mark Schultheiss
Nov 13 '18 at 12:59
@MarkSchultheiss The why of my code repeating is also the why I posted the question :) I'm very new to all this, and picking up bits from SO has gotten me to this point, but I'm absolutely stuck here now. I don't expect assigning this to be a recursive statement all its own, but it is appearing to act like that.
– Graham Campbell
Nov 13 '18 at 14:44
@MarkSchultheiss The why of my code repeating is also the why I posted the question :) I'm very new to all this, and picking up bits from SO has gotten me to this point, but I'm absolutely stuck here now. I don't expect assigning this to be a recursive statement all its own, but it is appearing to act like that.
– Graham Campbell
Nov 13 '18 at 14:44
@RonenCypis Thank you for the tips, I will try to reduce the issue down. For the time being I've added a full implementation of my issue as a fiddle here, which includes the troublesome resize function as posted above: jsfiddle.net/GrumJim/xpvt214o/939554
– Graham Campbell
Nov 13 '18 at 14:46
@RonenCypis Thank you for the tips, I will try to reduce the issue down. For the time being I've added a full implementation of my issue as a fiddle here, which includes the troublesome resize function as posted above: jsfiddle.net/GrumJim/xpvt214o/939554
– Graham Campbell
Nov 13 '18 at 14:46
add a comment |
2 Answers
2
active
oldest
votes
It seems like you shouldn't actually iterate over the $(this) instance, since is already referring to a single element.
Try to remove this line:
$(this).each(function() {
(and the appropriate closing of the function & parenthesis...)
answered Nov 13 '18 at 12:24
Ronen CypisRonen Cypis
14.6k11221
add a comment |
Mark Scultheiss's comment to the original question had the answer, thanks for letting me work that one out.
I was most definitely calling things in the wrong order, particularly where I was assigning this to the var. I have solved this by properly calling the on, then the each, then assigning this to the var and working through each of my divs in turn.
I have far to go on my JavaScript journey, but you put me on the right path there. Thanks folks!
answered Nov 13 '18 at 18:25
Graham CampbellGraham Campbell
104
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53280518%2fjquery-resize-handler-does-not-operate-on-each-element%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
It seems like you shouldn't actually iterate over the $(this) instance, since is already referring to a single element.
Try to remove this line:
$(this).each(function() {
(and the appropriate closing of the function & parenthesis...)
answered Nov 13 '18 at 12:24
Ronen CypisRonen Cypis
14.6k11221
add a comment |
It seems like you shouldn't actually iterate over the $(this) instance, since is already referring to a single element.
Try to remove this line:
$(this).each(function() {
(and the appropriate closing of the function & parenthesis...)
answered Nov 13 '18 at 12:24
Ronen CypisRonen Cypis
14.6k11221
add a comment |
It seems like you shouldn't actually iterate over the $(this) instance, since is already referring to a single element.
Try to remove this line:
$(this).each(function() {
(and the appropriate closing of the function & parenthesis...)
answered Nov 13 '18 at 12:24
Ronen CypisRonen Cypis
14.6k11221
It seems like you shouldn't actually iterate over the $(this) instance, since is already referring to a single element.
Try to remove this line:
$(this).each(function() {
(and the appropriate closing of the function & parenthesis...)
answered Nov 13 '18 at 12:24
Ronen CypisRonen Cypis
14.6k11221
answered Nov 13 '18 at 12:24
Ronen CypisRonen Cypis
14.6k11221
answered Nov 13 '18 at 12:24
Ronen CypisRonen Cypis
14.6k11221
answered Nov 13 '18 at 12:24
Ronen CypisRonen Cypis
14.6k11221
14.6k11221
add a comment |
add a comment |
Mark Scultheiss's comment to the original question had the answer, thanks for letting me work that one out.
I was most definitely calling things in the wrong order, particularly where I was assigning this to the var. I have solved this by properly calling the on, then the each, then assigning this to the var and working through each of my divs in turn.
I have far to go on my JavaScript journey, but you put me on the right path there. Thanks folks!
answered Nov 13 '18 at 18:25
Graham CampbellGraham Campbell
104
add a comment |
Mark Scultheiss's comment to the original question had the answer, thanks for letting me work that one out.
I was most definitely calling things in the wrong order, particularly where I was assigning this to the var. I have solved this by properly calling the on, then the each, then assigning this to the var and working through each of my divs in turn.
I have far to go on my JavaScript journey, but you put me on the right path there. Thanks folks!
answered Nov 13 '18 at 18:25
Graham CampbellGraham Campbell
104
add a comment |
Mark Scultheiss's comment to the original question had the answer, thanks for letting me work that one out.
I was most definitely calling things in the wrong order, particularly where I was assigning this to the var. I have solved this by properly calling the on, then the each, then assigning this to the var and working through each of my divs in turn.
I have far to go on my JavaScript journey, but you put me on the right path there. Thanks folks!
answered Nov 13 '18 at 18:25
Graham CampbellGraham Campbell
104
Mark Scultheiss's comment to the original question had the answer, thanks for letting me work that one out.
I was most definitely calling things in the wrong order, particularly where I was assigning this to the var. I have solved this by properly calling the on, then the each, then assigning this to the var and working through each of my divs in turn.
I have far to go on my JavaScript journey, but you put me on the right path there. Thanks folks!
answered Nov 13 '18 at 18:25
Graham CampbellGraham Campbell
104
answered Nov 13 '18 at 18:25
Graham CampbellGraham Campbell
104
answered Nov 13 '18 at 18:25
Graham CampbellGraham Campbell
104
answered Nov 13 '18 at 18:25
Graham CampbellGraham Campbell
104
104
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53280518%2fjquery-resize-handler-does-not-operate-on-each-element%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Try to narrow this code, and create a working snippet that reproduces the issue you're trying to solve. It would make it much easier for people here to help you :-)
– Ronen Cypis
Nov 13 '18 at 12:25
Please add the markup to the snippet I created so we can give you better answers. WHY does your code repeat? (think that through)
– Mark Schultheiss
Nov 13 '18 at 12:59
@MarkSchultheiss The why of my code repeating is also the why I posted the question :) I'm very new to all this, and picking up bits from SO has gotten me to this point, but I'm absolutely stuck here now. I don't expect assigning this to be a recursive statement all its own, but it is appearing to act like that.
– Graham Campbell
Nov 13 '18 at 14:44
@RonenCypis Thank you for the tips, I will try to reduce the issue down. For the time being I've added a full implementation of my issue as a fiddle here, which includes the troublesome resize function as posted above: jsfiddle.net/GrumJim/xpvt214o/939554
– Graham Campbell
Nov 13 '18 at 14:46