We Keep Coding

Access elements within dynamically created iframe (jquery 1.x)

I created an iframe with content dynamically loaded with jquery like this and I want the iframe document to access its content as soon as it has been loaded:
jQuery('<iframe>', {
id: 'widgetFrm',
width: '100%'
})
.appendTo('#widgetDiv')
.on('load', function () {
jQuery(this).contents().find('body').append(data.html);
})
The frame document knows about jquery because I use
if (typeof(jQuery) == "undefined") {
var iframeBody = document.getElementsByTagName("body")[0];
var jQuery = function (selector) { return parent.jQuery(selector, iframeBody);
}
there. Within the iframe, I'd like to access its div elements after everything got loaded, I'm using jQuery(document).ready for that (within the dynamically loaded content).
Problem: Accessing its own elements in the frame document somehow does not work with jquery 1.x in document ready block!
document.getElementById('#someDiv') returns null and jQuery('#someDiv').prop('scrollHeight') returns undefined, although the frame content has that element (accessing it when clicking a button works!). With newer jQuery versions (for instance 3.3.1) it works, but I can't change that version currently. Is there another way to do that?
Thank you!

jquery colorbox and custom scrollbar

I would like to use a custom scrollbar with Colorbox
I am using Wordpress so Colorbox is loaded using this plugin. All the custom scrollbar files have been loaded as per the instructions. I'm guessing that I need to apply to the #cboxLoadedContent div so I've loaded as per this code, however it's not working:
(function(jQuery){
jQuery(window).load(function(){
jQuery("#cboxLoadedContent").mCustomScrollbar();
});
})(jQuery);
Using Firebug there's no alteration to the standard coding i.e. the JavaScript isn't firing. However if I add to the div #cboxContent the JavaScript fires and a class mCustomScrollbar _mCS_1 is added to the #cboxContent div. But this doesn't have a scrollbar so nothing is shown.
The question is why isn't it working on the right div i.e. #cboxLoadedContent?

#cboxLoadedContent is appended and removed dynamically each time a colorbox is opened or closed. Both plugins need to alter the markup and add their own wrappers, so simply calling mCustomScrollbar on either #cboxContent or #cboxLoadedContent won't work (mCustomScrollbar must wrap #cboxLoadedContent within .mCSB_container after #cboxLoadedContent is appended).
The best way is to call mCustomScrollbar function inside colorbox's onComplete callback. This way the scrollbar is added when colorbox has done its work which is append #cboxLoadedContent and load the actual content.
From colorbox examples:
$(".callbacks").colorbox({
onComplete:function(){
$("#cboxContent").mCustomScrollbar();
}
});

Just a quick note about the code in the accepted answer. I couldn't get it to work with $("#cboxContent") as shown; I needed to use $('#cboxLoadedContent').
$(".callbacks").colorbox({
onComplete:function(){
$("#cboxLoadedContent").mCustomScrollbar();
}
});

Make document.ready take into account elements from external iframe

The position I find my self in is the following. I have a jQuery plugin which needs to be nested within the document.ready function. This plugin applies some styling to elements of the page. One of elements affected by this plugin contains an iframe. This iframe is not from my website. The issue is that document.ready doesn't take into account contents of iframe, and when it gets loaded it's height changes, but jQuery plugin was already applied before this, therefore layout of the page is screwed up.
I tried the following to make sure plugin get's called only if document is ready and iframe is ready as well:
$(document).ready(function() {
$('#frameId').ready(function() {
//plugin code
});
});
But this doesn't work and I'm looking for another solution.

Only the document has a ready() event, for iFrame's it would be onload :
$(document).ready(function() {
$('#frameId').on('load', function() {
//plugin code
});
});
But why does your plugin require access to an iFrame ?

The solution is $.holdReady();
$.holdReady(true);
$(document).ready(function() {
//plugin code
});
$('#frameId').on('load', function() {
$.holdReady(false);
});
For accessing the height of cross-domain iFrame contents, you need the postMessage. Check out this post

Cannot get width of DIV in AngularJS modal window

I put this code into the index.html file or the view (html) file in my AngularJS web app and it works like a charm:
<div id="chart"></div>
<script>
var chart = document.getElementById("chart");
alert("width is : " + chart.offsetWidth);
</script>
I can resize my browser window and when I refresh, it tells me the new width.
However, when I put this code in with the code for a modal window in the view (html) file, I get "width is : 0"
Does anybody know why and how I can get the width of a DIV in a modal window?

The question is old but in case you or someone else haven't figured it out yet:
You need to make sure you get the value you're looking for AFTER the element(s) have been rendered. Otherwise you will always get '0'
That is why in jQuery you wrap your code in a block like this:
$(function() {
// your code here
});
There are a few variants of this;
In pure JS you would use 'document.onLoad'

If you're using jQuery you can use
$('#chart').width()
http://api.jquery.com/width/

Fancybox - Modify javascript to add options

I have the following Fancybox declarations in my page:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox().hover(function() {
$(this).click();
});
$("#fancybox-outer").fancybox().mouseleave( function() {
$("#fancybox-overlay").click();
});
});
</script>
I need to reduce the size of the image used by the modal box and I believe I can do that by setting the "autoDimensions", "width", and "height" options available with Fancybox, I just don't know how to integrate that with the hover function, since there isn't an option in Fancybox to specify a function for a hover event. (I hope this is making sense.)
Anyhow, does anyone know how I can modify the above javascript to control the width and height?
Thanks!

Sorry but images in fancybox don't use "autoDimensions", "width", and "height" API options. Those options are for ajax, iframe or inline content only.
Images in fancybox are displayed either, re-sized to fit into the viewport (when autoScale is set to true) or in their original size (when autoScale is set to false). If the original size is bigger than the height of the viewport, then you have to scroll down the parent page to see the whole image.
The only way you can re-size images in fancybox other than above is using jQuery css() API (which, I wouldn't advise ... it produces an odd behavior). You can call it using fancybox's callback option onComplete like:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
'onComplete': function(){
$("#fancybox-outer, #fancybox-content").css({'width':300,'height':150});
}
}).hover(function() {
$(this).click();
});
$("#fancybox-outer").fancybox().mouseleave( function() {
$("#fancybox-overlay").click();
});
});
</script>
Note that options mentioned above are for fancybox v1.3.x.
Use it at your own risk.

you can always add code to document.ready to trigger every time. so just check for the event and resize.
or since the elements are hidden at first, you can get the event trigger using the show event

Check for the event onstart. onstart will be called right before attempting to load the content, and you can add your resize operations there.