Develop Reference

jQuery selector not working on iframe contents

This part of a script works fine on a normal page:
<script>
$(function() {
$(".counter").countimator();
});
</script>
But when that same page is loaded in an iframe on a page on another domain, it doesn't work.
Is there a way to get this selector/code work when the page is loaded within an iframe? I want to give people a iframe code that they can use on their personal websites to get the content of my page on their website.
Edit
I published the basic code on http://joomlaground.com/iframe_test/
The http://joomlaground.com/iframe_test/clock.php runs standalone like it should.
Then I created a very basic iframe page iframe.php which iframe the clock.php. However then the clock.php is not counting any more.
How can I fix this?

If '.counter' element is outside of the iframe you're running the internal iframe script has no access to this element as the current document and iframe are separate documents. If you'll have any questions don't hesitate to ask below.

When you move this script in an iframe then it means you are running your script in a new window.
Now in new window you are trying to access some library function:
$(".counter").countimator();
That can only be done if you have that library included in the source of that iframe.

jquery how do i collect the content of an iframe each time the iframe changes state?

I am working on a project which i will like to collect the content of an hidden iframe and make it the html of a div each time the iframe changes state while loading so it will act like the page is redirected and downloading its contents, but the heading and footing of the page will not refresh as well.
A good example is how facebook keep their heading and footing fixed while redirected.
i have achieved collecting the iframe content to the div using onload, but the problem is that, the content will not fully download from the iframe before collected i.e images, .css files and .js files.
Here is a code i tried:
THE SCRIPT USED TO COLLECT THE CONTENT WHEN LOADED
<script type="text/javascript">
function frame_loaded(){
var content=$('#iframe_id').contents().find('#body');
$('#my_div').html(content);
}
</script>
AND THE FRAME
<iframe id="iframe_id" src="some_url.php" style="display: hidden;" onload="frame_loaded()"></iframe>
AND THE DIV
So i used setTimeout() to slow time for 1 second so the frame will load the content and execute it's scripts fully before collecting it.
Here is the code:
setTimeout(function(){
$('#my_div').html(content);
},1000);
At times the content still won't complete downloading it's content from the iframe before collected.
I don't have any idea how to listen to the iframe if it's fully loaded or listen to it's ready state.
If any one can tell me the best way to do this, it will be very appreciative because i am very new to this.

I would suggest using portholejs which will help you interact with the iframe(domain xyz.com) and you can pass messages in between the iframe(domain xyz.com ) and the page which holds it (domain abc.com).For example in your case when the iframe loads you can pass a boolean (from xyx.com )to your page(abc.com) which holds the iframe and then download the content there is working example of how it porthole works here.
Hope it helps.

kind of "stupid" but try this (i don't have your code so it's a bit "hard" for me
$(document).on('load','#iframe_id',function(){
var content = $(this).content().find('#body');
$('my_div').html(content);
})

How to call a JS function on HTML page loaded inside OBJECT Tag

I am loading a HTML page inside an tag, Since iPAD not supporting iFrame i am using the tag to load External html pages inside a container. Everything works fine, Now i want to call a function from a Loaded Page (Page which loaded inside ). Can any one help me to find out the solution ?
"<object id='page' width='100%' height='100%' data='"+pageURL+"' style='position:absolute;'></object>";

Finally i GOT the Solution for accessing the Javascript function of HTML page loaded inside Object Tag.
window.objectID.functionName();
This will call the function ("But it is not working in IE8"). Use iframe for IE.

If you mean you want your code to call a JavaScript function in the context of the loaded page, you can't if the pages aren't from the same origin (which from the sound of it, they aren't). It's prohibited by the Same Origin Policy. The JavaScript code in your page can't interact with the other page.
If the pages are from the same origin, the object element's contentWindow and contentDocument properties are supposed to provide access to it, although I haven't used them on object elements and don't know how well-supported they are.

How to use JQuery included in the main page in another page being called in the iFrame

I have included JQuery on my main page which is a html page, in the main page there is an iFrame and in the iFrame I am calling another HTML page. I want to use jquery in the html page which is being called in the iFrame, is it possible to use the JQuery which is included in the main page? if it is then please let me know how?

Are the pages in the same domain? (Same origin policy.)
If so then from the iframe do parent.$(xxx) but be aware the jquery will be manipulating the top level document! Not the iframe!
If you want to manipulate the iframe do $(xxxx, $('iframe').contents()) - i.e. you set the context to the iframe, then use jQuery like usual. You would probably want to set $('iframe').contents() to a variable - and if you have more than one iframe give them an ID so jquery can find the right one.

Running JavaScript function before page load (setting background of appropriate size)

I've got an image background which content I want to be always visible, no matter what is the user's resolution. Therefore, I want to be able to determine what is the resolution and set appropriate background image file before page loads, on the very beginning. Is it possible somehow?

The earliest point at which you can run a Javascript function with access to the DOM (without waiting for page load) is by placing a <script> tag right after the opening <body> tag.
Scripts inside the <head> will run before this occurs, but there won't be access to the elements on the page.
Try this code
<body>
<script type="text/javascript">
alert("Some elements shouldn't even be visible when this shows");
</script>
... rest of the page
</body>
See this example with some Gangsta Lipsum text.

Check this article on getting screen resolution in Javascript: http://andylangton.co.uk/articles/javascript/browser-screen-resolution/
Script tags execute inline if you don't do anything special to defer them (and deferring script execution is not supported on all browsers). This means a script tag nested just inside the body tag will be executed before the rest of the body loads. You could have your script detect the screen resolution and set the background image for the body right there.

Using a JavaScript framework like MooTools you can utilize the DomReady event instead of onLoad (which waits for all image elements to load) you can fire an event when the page has loaded.
Alternatively with CSS you can position absolute top left and width:100% to win the day. :O

I realize you're specifically asking about JavaScript, but there's a pretty decent technique for doing this with CSS (and optionally a little JavaScript) described at the CSS Tricks site.