We Keep Coding

Using iFrame local scripts within an iFrame requires `top` or `parent`?

As the title suggests, does anyone know how to eliminate the need for top or parent in iFrame localized scripts?
In the screenshot below, I get a "not defined" error unless I add top or parent as a prefix to my function call.
test(); does NOT work
top.test(); works OK

You must have some errors in different part of your code which you didn't post here (actually you didn't post ANY code, only meaningless screenshot of DOM inspector...). This should work just fine without top and parent.

ColorBox - Error: cboxElement missing settings object

What I'm trying to do is to play a video inside ColorBox lightbox.
My HTML code is as follows. When I click on the link it should play the video.
Video
What I do with Colorbox is as below. Load the video into lightbox.
jQuery(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
It gives me the below error.
Error: cboxElement missing settings object
ScreenShot
What should I do to fix this ? Given that there are no js errors except above one. jQuery is included correctly.

I had the same problem. I'm having a hard time trying to understand why exactly, but somewhere the colorbox is running in to a conflict because it also uses the name 'iframe' internally. Somehow this is causing a conflict when the classname 'iframe' is used as the class by which the function is called.
In my case changing
jQuery(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
to:
jQuery(".photo_link").colorbox({iframe:true, width:"80%", height:"80%"});
worked.

Well this worked for me. Even though everything was in place and all the code was generated in the backend, for some reason colorbox wasn't picking up the links properly because on my page the link was inside a div that shows/hide on mouseover. Anyway, the way it worked for me was this one:
$(".iframe").live('click', function(e){
$(this).colorbox({href: $(this).attr('href'), iframe:true, innerWidth:640, innerHeight:480, open:true});
e.preventDefault();
return false;
});
In this way you rebind the actions to the element and then forces colorbox to open the link.
I hope it works for you and it isn't too late.
PS: If you're using jQuery 1.9+ you must use on instead of live

I ran into this same error and solved it by removing a duplicate call to colorbox. I had included both the library as well as my colorbox function in two separate include files. I figured it must be a duplicate because I had to close each colorbox window twice after it launched.
Check your code and make sure that the jquery.colorbox-min.js is only included once, as well as your function that calls it. In my case, my function was simple:
$(document).ready(function(){
$("a.single_image").colorbox();
$("a.link_preview").colorbox({iframe:true, width:"80%", height:"90%"});
});
After removing the duplicate calls, the problem went away. Hope it helps!

I experienced this error Error: cboxElement missing settings object when making a second jQuery on document ready function call after the initial on document ready function call that holds the colorbox parameters.
My situation:
On my pages I use and call just one external .js file that holds all
my code.
Inside the external .js file I have the colorbox parameters within a
jQuery on document ready function.
On the troubled page (page with cboxElement missing settings object
error), immediately following the external .js file I had some
jQuery code that used the on document ready function: $(function(){});
My problem:
This second on document ready call caused and triggered the error Error: cboxElement missing settings object for me.
My solution:
The fix was as easy as changing the troubled pages code from using jQuery's on document ready function to using Javascript's native self-executing anonymous function.
(function(){
})();
Sure enough the error Error: cboxElement missing settings object went away and everything works perfect!

javascript iframe permission

I have a webpage (parent) on localhost,
with an iframe showing another url (child; which is part of a different webapp) on localhost.
Using javascript in parent-page, I am trying to "peek" into the iframe.contentDocument.
(The iframe is showing a list of items, and if the list is empty, I simply want to hide the iframe completely.)
Now, the problem is, when trying to retrieve the element iframe.contentDocument.body,
I get error-msg in firefox:
Permission denied to access property 'body'
In IE, I simply get:
Error: 'body' is null or not an object.
Anyone, knows how to get around this?
Thanks,

I've seen two potential work-arounds for this error where body returns null. One is to simply bury your script at the bottom of the body, so that it doesn't execute before body has been built out. But everybody hates inline scripts, no?
Another, from here, is to use an onload function for your body, which also ensures that body exists before the function is called.
Both seem to work equivalently well.

How to execute custom js after jQuery Mobile has created a new page div?

So I am using Django 1.3 and jQuery Mobile for a webapp. When trying to create new functionality or override some of jQM's functionality I don't seem to be able to get it to excute some code on page creation. I am still hackish at js, but it seems to be a bigger problem than myself
How to execute JavaScript after a page is transitioned with jQuery Mobile
I end up putting js snippets on the page itself which doesn't seem the correct way to handle they work sometimes and sometimes not. I have tried the same commands in the script console of Chrome and the selector and commands seem to work fine.
examples:
Hiding the numeric inputs on on sliders I end up putting this script tag in the template itself, I know this is bad form, but am unsure how to get it to work otherwise:
<script>
$('#form_div > input').hide();
</script>
Trying to do a similar snippet:
<script>
console.log("Focus snippet!");
$('.ui-input-text').blur(function(){
console.log("focus was changed!");
});
</script>
yields no results, except the initial console.log, but I can execute through the script console and it works fine.
I saw in this several other posts, but none have seemed to answer the question clearly and I am unsure how how to make this work the right way.
This seemed the closest suggestion, but I was unable to make it work:
Jquery mobile: how to execute custom jquery code in page
$(“body”).delegate(“div[data-role*='page']“, “pageshow”, function(){
// Your code here. It is good to check to not run unnecessary code
});
Any suggestions would be greatly appreciated.

Look at the documentation here: http://jquerymobile.com/demos/1.0a4.1/#docs/api/events.html
$('div').live('pageshow',function(event, ui){
alert('This page was just hidden: '+ ui.prevPage);
});
$('div').live('pagehide',function(event, ui){
alert('This page was just shown: '+ ui.nextPage);
});
One small note is that all the javascript executed on any page must go in the base page (like: index.html). If you add javascript for page2.html in page2.html it will not be executed. if you add the javascript for page2.html in index.html it will be executed.

ASP.net: ClientScript.RegisterClientScriptBlock fires before jQuery is loaded

Interesting problem here from some inherited code I recently looked at. I'm trying to add a compression module to a project. It is loading all the JS and CSS files, combining them, minifying them, and compressing them. I've tried a number of solutions, but all of them have one fatal problem.
I have some javascript that is being loaded via Page.ClientScript.RegisterClientScriptBlock in the PreRender of the MasterPage. The compression module is loading as a Script Tag link in the MasterPage, but when I run the page... the code from the PreRender is lopped on top and is giving me a '$ is undefined' error, telling me jQuery isn't loaded yet.
Furthermore, I can't seem to get past the same problem when it comes to inline javascript on content pages.
Any ideas as to what is causing this? Enlighten me as I have no clue.

If have done this before with RegisterStartupScript (instead of RegisterClientScriptBlock) and called the $(document).ready(function() from WITHIN that script.

If the script tag link that eventually expands out to jquery is not in the head, but in the body of the page, then $ will be undefined when the script block executes, unless it is included in the html before the opening <form /> tag in the rendered html, which I understand is where RegisterClientScriptBlock spits out its script (just after that opening tag).
If this is not the case, and the joined/minified script is in the head, then I'd use a browser debugger such as Firebug or IE Dev Tools to verify that the jquery script is being correctly included in your combined script.

I know this answer is late to the party, but try calling ClientScript.RegisterClientScriptBlock in your OnPreRenderComplete (rather than OnPreRender) handler. This inserts the code later in the page rendering process.

All your jQuery code should be written inside the DOM-ready function:
$(function() {
// your code here
});
indipendently from where you place it in the page, 'cause the jQuery() function isn't avalaible before.