We Keep Coding

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.

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...)

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!

Create a link dynamically, click it and destroy it, possible?

I made some brackets for a tournament and I'm using Owl carousel to serve videos on each clicked match.
The problem I've been trying to solve is this: Create a link after each click on a match, have this link clicked (by itself) which will, in turn, activate a certain slide in the carousel. Unfortunately that's the only way this could be made to work, because the Owl carousel needs links for callbacks. It's something like in this fiddle: http://jsfiddle.net/EwFMn/9/ except that in my example I have the brackets loaded below.
Now (after searching for a solution and trying every method suggested here in other questions on SO) I couldn't find a way to get a link which was appended to a div to be clicked too immediately after being created. What I get is this: on clicking a match, a link is created which needs to be clicked separately to get the behaviour I described above.
I have tried all the methods which use
on('click', selector-to-your-element , function() { ... });
as well as simply:
$('.something').click();
as well as other methods using live and delegate. None of the solutions proposed on other similar questions on SO worked. It seems as if at the time when the click event is triggered jQuery doesn't find the link it has just created to click it, so the link only works after you click it manualy.
The problem is I need this to not only work on one single click but also I need this link to get destroyed after it automatically gets clicked. I'm not even sure this is possible with jQuery. I'm curious if anyone has a working solution for this.

You can't trigger the href with a javascript click event. You need to do something like this:
$('.button').on('click',function(){
location.href=$(this).attr('href');
});
$("[href=#seven]").trigger('click');

Toggle Open/Close JS function

I've never posted here before, and I'm hoping you can help me. I have a js function that on click will toggle display and hiding a paragraph. However, I need to nest them upon one another. In other words:
1) Some text here //Click to open
2)This text opens upon click //Click to open
3)This text opens upon click.
They way I have it written now, clicking 1 opens 2 up, but clicking 2 closes everything. I'm just learning JS now, so I'm now the best with it, so I'm hoping the pros here can help me. Here's what my function looks like now http://pastebin.com/ZUzp1pUJ Anyone got any ideas?

I noticed you included jQuery in your HTML but you're not using it anywhere, I'll assume you're new to jQuery and willing to use it.
Here's what you do.
First you should read up on the jQuery Reference. It is extremely useful.
The things you need to give extra attention to are these:
jQuery Selectors - use $('.myClass') instead of getElementsByClassName
jQuery Toggle - or any of it's companions (slideToggle, fadeToggle) to do exactly what you asked for.
and as to your question - stopPropagation - which allows you to trigger only the toggle that you clicked and stop the event from bubbling up through the dom. (and not to trigger it's parents.)
These three combined should do the work. Good luck.

disableSelection on everything but input[type=text]

I have a requirement to disable selection on a web page for everything except input[type=text] elements.
This accepted answer to a similar question almost does the trick, but it doesn't disable selection for containers that contain input[type=text] elements. Therefore the user can still select by starting a drag operation from within one of these containers.
Is this even possible, i.e. is it possible to disable selection for a container element, while enabling it for child elements (specifically, child input=text elements).
#Pointy, "Why not just take out that first .not() call?"
Taking out the first .not call, will give:
$('body').not('input').disableSelection();
which, as pointed out in the linked question, will still disable everything on the page, including the input[type=text] elements.
#David Thomas, "Do you have a live demo ..."
I don't have a live demo, but it's fairly trivial. For example, a div with a bit of padding that contains an input[type=text] element. The result is:
With $('body').not('input').disableSelection(); selectiopn is disabled for all the page, including the input elements.
With $('body *').not(':has(input)').not('input').disableSelection(); selection is disabled for all elements that don't contain an input element. But it is possible to select the whole page by starting a drag operation from within a container that contains an input element.

Well, cinch up your suspenders and get ready for a really dirty hack.
Disclaimer:
I don't think this is a good way to do things. I simply wanted to tackle the challenge of getting the OP's desired functionality. If someone else can get this to work in a cleaner way, please post it.
After playing around with the disableSelection() function, it seemed that if a parent element had been disabled, all of its children would be unselectable as well (please correct me if I'm wrong). So, I decided that if you wanted everything to be unselectable except small parts, you could put all of your markup in one unselectable <div> and use absolute positioning to place selectable clones of your <input> tags (or any tag, really) on top of the unselectable ones. These clones would reside in a second <div> that was not disabled.
Here's an example of this idea: http://jsfiddle.net/pnCxE/2/.
Drawbacks:
Styling becomes a big headache. Any element that relies on a parent's style (i.e., position, size, colors, etc.) cannot be cloned since the clones reside in a separate place.
Forms become much harder to manage since (again) the clone isn't in the same place as the cloned element.
You have to deal with naming collisions since the clone will have the same ID as the cloned element. (It's doable; I just didn't want to code it since it would probably need specific attention by anyone that uses this idea)
So, while you can work around the selectable limitations, you might be better off just accepting the container selection. I would think long and hard before putting this code into a production environment.

I've found a solution that appears to do what I want, and would be interested in comments / improvements from jquery / javascript experts.
$(document).ready(function () {
$("body").disableSelection();
$("body").delegate('input[type=text],textarea', "focus", function () {
$("body").enableSelection();
});
$("body").delegate("input[type=text],textarea", "blur", function () {
$("body").disableSelection();
});
});
When a textbox (input[type=text] or textarea) has the focus, then dragging with the mouse only selects text within the textbox. Therefore it's "safe" to enable selection for the whole page while a textbox has focus (between focus and blur events).
There is a noticeable delay when tabbing between textboxes on IE8/9. It's not noticeable on Google Chrome, which I understand has a faster javascript engine. So I can live with the performance hit, especially since IE10 is going to have a faster javascript engine.
UPDATE
When using ASP.NET UpdatePanel, this needs to be modified to disable selection after each partial postback:
Sys.Application.add_load(function () {
$("body").disableSelection();
});

Try this, although it is same with what you're already using:
$('* :not(input)').disableSelection();
I don't get though why do you have to use entire body element and not narrow it down to text nodes (p, h[..], ul, ol etc.)
And I agree with #David Thomas - it would be easier to see a test page you're working on.

Finding element beneath on page

Is there a way to determine which element is beneath a given element on a page? I have a tool that I would like to use over several elements which are visible only one at a time. I'd like to be able to determine which element is visible under that given element. Can this be done?

There is no way to reliably do this natively in JavaScript. CSS can effect the layout in ways that you can not predict.
I can think of one solution where you find all the elements on the page and their offsets and then try to work back from that, but that wont perform very well I suspect.

You can get the immediately following sibling (in a set of matched elements) with the jQuery .next() function:
http://api.jquery.com/next/

Depending on the use case I can think of several options.
One option would be triggering a click event onto the container and then selecting the event.target in the event handler. It should be the element on top.
like this:
http://jsfiddle.net/sm7gH/

My question was about finding the element closet to a point or an element. This plug-in does this:
jquery nearest.