Develop Reference

Select the root document from inside a secound level iframe

I'm trying to capture where the user clicks on the hole page but from an iframe inside an iframe.
so basically I can control where the user clicks on the 1st iframe from the 2nd iframe, but can't control where he clicks on the root document.
I've tried nearly everything and can't find an answer.
Here is my actuall javascript:
$(window, window.parent.document).document.click(function( event ) {
alert(event.target.nodeName );
});
for context, I'm using shadowbox as iframes and my objective is to control when a user clicks outside of the shadowboxes

$(window).document in itself already returns undefined, you would need to de-reference the jQuery object first to get the "DOM version" of window, $(window)[0].document
But turns out you can simply use $(parent.document, parent.parent.document).click()
That also kinda seems to be the most straight forward way to me.
(Don't know why top.document did not work, because that is always the topmost window instance, so from within an iframe-inside-iframe that should be the same as parent.parent.document ... or are there even more (i)frames involved, another level? Anyway, as long as you got something that works it doesn't really matter.)

Prevent child iFrame to get focus

Is it possible to prevent iFrame element to get focus or if not, at least to return focus instantly to parent window once such iFrame gets focus? Please advise with code example.

It depends upon what you're really trying to accomplish and which focus methods you are trying to prevent. There's no magic setting you can set that prevents focus going to an iframe.
You can put a transparent element over the top of the iframe and have it capture all clicks so nothing in the iframe is clickable. You can likely just position this with CSS and wouldn't necessarily need javascript unless the iframe size is dynamic or not known in advance. This won't prevent javascript code from setting focus to the iframe, but will prevent mouse clicks from moving the focus to the iframe.
You can regularly check (javascript polling) where focus is and if it's not in your own document, then put it back in your document. This is kind of a hack.
Here's a demo of the first option: http://bit.ly/10jzdlp

If the problem that you're encountering is due to script in the iframe's document focusing one of its element, then one solution may be to use the iframe's sandbox attribute to prevent the iframe's document from running script (that is, setting the attribute to a value that does not contain the flag 'allow-scripts'). Whether that's acceptable will depend on whether it will break other things, of course.

Intro.js in an iframe

I wanted it to work in an Iframe but if I define the js. in the parent document it does not recognize the elements that should be "introduced" inside the iframe. If I use it inside the iframe the effect is not what I expect (the overlay covers only the iframe).
[Intro.js being used inside an iframe.png] https://dl.dropboxusercontent.com/u/6421243/Intro.js%20being%20used%20inside%20an%20iframe.png
Is there something I can do with the plugin code so that it searches the elements inside an iframe but still shows the overlay over the parent?
UPDATE: I would like the black overlay over the WHOLE page (so the border of the iframe would also be covered by it).

Run intro.js in both iFrame and the parent.
In the parent, remove the toolTip and just highlight the iframe
In the iframe, run whatever toolTips you need
To communication between the two, have a look at this: How to communicate between iframe and the parent site?

First of all you should know that if you define your JavaScript codes outside of iframe, it's no longer available in the inner iframe because you don't have access to them.
So, you should put your codes inside the iframe only.
Update:
So I think you put the container element wrongly so the IntroJs define the overlay wrong wrongly too. Update and change your element container and then you will don't have any problem with that.

How to call an iframe from within.

I want to find the co-ordinates of an iframe relative to the page in which it resides.
I am trying to call this iframe from some click event inside it.
The page contains multiple iframes.
Any help will be appreciated.

Check out http://api.jquery.com/position/ and http://api.jquery.com/offset/, one of these should get you the coordinates you are looking for. As for the click. The click even should bubble to the iframe element of the dom, so you can listen there. Something like this:
$('#myIframe').on('click',function(){
var coordinates = [$(this).offset().top, $(this).offset().left];
});

I think the lack of knowledge on iframes and how frames communicate caused the problem on my part. Well the only way I was able to solve this was to use window.postmessage to allow cross -origin communication.
https://developer.mozilla.org/en-US/docs/DOM/window.postMessage
Appreciate the help.

Dynamically change iframe's content

I have an iframe tag and I want to dynamically change it using jquery animation. So for example the iframe sits on the home page, and if i click the about link, it will load the about.html and when its ready it will slide it down using animation.
I have the basic logic for it but then came about this
problem:
When I refresh the page it loads back the content of the index.html page, and what I want is that when I refresh it, it still keeps the contents of about.html.
About
<iframe id="content" name="content" align="top" src="index.html"
frameborder="0" width="100%" height="1200px" scrolling="no">
</iframe>
this is just the most basic logic, but I need help on how do I achieve the refreshing part/
and what if i dont include them in the same page but I still want to animate the page transitions. so when the users clicks a link to a new page, it will load it, and then animate it.How can I achieve this. Because recently I saw a jquery plugin callen LocalScroll and they achieve this effect, but i couldnt get it to work for new pages

Your reference to the jQuery plugin LocalScroll is on the right track. In fact, if you could implement it properly I think it would solve your problem.
Anchor-based navigation, as used in this plugin, jQuery Mobile, and other places, will update the window.location object and also be reflected in the browser's address bar so that, when an explicit page refresh occurs, the hashed location is preserved.
The answer, then, is to have a script which can parse this local link from the address. Here's a generic JavaScript code block to demonstrate this:
window.onload=function() {
var URLParts=window.location.toString().split('#');
if(URLParts.length>1)
var lastPage=decodeURI(URLParts[1]);
else
return false;
if(lastPage)
iframe_load(lastPage,'content');
}
function clear_last_page(location) {
var URLParts=location.split('#');
if(URLParts.length<=1)
return location;
URLParts.pop();
return URLParts.join('#');
}
function iframe_load(url,targetID) {
document.getElementById(targetID).src=url;
var location=clear_last_page(window.location.toString())+'#'+url;
window.location.href=location;
}
How it Works
When the window onLoad event is triggered, the URL is searched for anchor (hashed) links. If found, we will assume that this is a reference to a page and so then pass it to iframe_load().
This function does two things. First, it points your target inline frame to the page passed via url parameter. Second, it points the parent frame to a fictitious anchor, which will be preserved even after the page is refreshed.
Therefore, when you refresh the parent frame, that anchor text is grabbed, parsed, and used to re-load the last loaded inline page.
The function clear_last_page() is simply a helper function that prevents additional anchor links from being appended to the URL.
Demonstration
Visit this URL:
http://gocontactform.com/stackoverflow/dynamically-change-iframes-content/
Click the link "Page 2" to see the change. Then refresh the page.
Noteworthy
Be advised that this solution technically takes over the normal function of anchoring. So if you attempt to use anchor links normally on the page, you may get undesirable results.
You are forced to rely on iframe_load() for any links bound for that inline frame, instead of what you modeled in your question (traditional linking with a target attribute).
I might also suggest that you define no default src attribute inline. Rather, you could add to the onLoad handler a call to iframe_load('page1.html','content') and that will prevent the unnecessary attempt to load the default page when you are refreshing with anchored links in the address.
There are also other ways to accomplish what you are asking. But I believe that this solution is easy to understand and implement.
Hope that helps!

You can use the following to change the src attribute of the iFrame:
$("#content").attr('src', 'http://mysite.com/newpage.html');
Oops, looks like I misread the question.
If you want to slide it down, you can bind an event handler to the load event (jQuery doc) to do something when the frame loads.
$("#content").hide();
$("#loadLink").click(function() {
$("#content").hide();
$("#content").attr('src', 'http://mysite.com/newpage.html');
});
$("#content").load(function() {
$(this).slideDown();
});
In this example, the iframe is hidden when you click the link, and when it is ready, it slides down.
Demo
Edit: still misread it!
To save the state of which page is last shown in the iframe, you can use HTML5 localStorage.
In the load event of the iframe save the page that it's currently showing.
localStorage['lastPage'] = "about.html"
and then load it back using localStorage['lastPage'] on page load.
Updated demo showing both sliding and keeping the page after refresh.

Not possible. When you refresh a page, your browser is supposed to get the page from the server, dropping all JS data.
History API can help, but only for the newest browers.

Whenever the page loads you need to check something to know what the last src iframe loaded. By default, no browser can know this. One way to do this is to change the hash of your page when hit the click, and whenever page loads, you check if exists this hash and trigger some link with the hash.
I write this: http://jsfiddle.net/estevao_lucas/revsg/4/
Like said Michael, History API can help you.