Develop Reference

Jquery LOAD as alternative or similar to IFRAME

I have jquery to load user messages every 1 second but I would like to implement a solution to the messages load to act, similar as a: <iframe>, <object> or <embed> tags
<script>
setInterval(
function()
{
$('#chat').load('load_chat.php');
}, 1000);
</script>
The problem is as it loads every 1 second I can't just use a iframe of the page, I need to keep using jquery, somebody has a solution?
I tried with:
<script>
setInterval(
function()
{
//$('#chat').load('load_chat.php');
$("#frame").attr("src", "load_chat.php");
}, 1000);
</script>
But this is not what I need, it flash the iframe all the time.
I need to make jquery load method looks like a iframe.
but the problem with using iframe is because I need jquery to refresh the frame every 1 second. some body has an idea of how to make <div id="chat"></div> have a scroll bar as iframe ?

First off all I think this is not the correct way to do this.
Read up on streams, because this type of use case is exactly what they where made for.
Then, if you have your load-chat.php loaded in an iframe, you can use the window send message method to trigger a reloadin the page by jquery.
The downside is, that your iframe should also contain a jquery instance.
Check this -> https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

I solved with the following:
$('#chat').css("overflow-y", "scroll");
If someone has a better alternative it would be appreciated.

How to execute javascript before document fully loads but after element is there?

I'm trying to write a very simple user content script for google.com, but the problem is that google's source code is lengthy. I want to execute code in javascript the instant that an element is in the document, but before the whole document has loaded.
Essentially, I wan't to change the source of an image before the rest of the page loads. I also want to modify html in a certain other div with a specific id. But again, I don't want to wait for the rest of the document to load before I start doing it.
How can I accomplish this? I am using jquery.

Try this:
var element = $([TagName]) || document.getElementsByTagName([TagName])[[occurance]];
function doSomething() {
// Do some magic.
}
element.addEventListener("load", doSomething, false); // Notice no brackets after the function call.
This adds an event listener to the element, and will wait until it has fully loaded until it runs the function (doSomething()).
Hope this helps.

Intercepting HTTP event using JQuery

I have this JQuery code working however I need to know whether how to actually get the URL executed from the tags selected.
$("link, script, style, a, img").each(function () {
$(this).load(function () {
// get the URL and log it
console.log("Intercepted HTTP Event");
});
});
First thing I need to do it to get the actual URL during the load.
Next thing I may need to do is to actually catch before the load event happens, I mean before an image or link is loaded for example. Also, I need to modify the URL of the event that will be executed, for example, img tag has src="/somewhere/image.png" I mean, this will cause a GET /somewhere/image.png I may need to change it to GET/otherplace/image.png
Any ideas how to achive any of these?

$(this).load() will fire after the contents of the element have been loaded. So you may be able to grab the URL by doing $(this).attr("src") or $(this).attr("href"), but it's already too late to stop the HTTP requests from going out.
AFAIK, with modern browsers, there's no way for JavaScript to prevent assets from being loaded in the first place. At best, you may be able to change images and stylesheets after the page has been loaded, by changing the src attributes. If you do this, make sure that $(this).load() doesn't go into an infinite loop. (<a> links are less of a problem. Nothing is loaded, so just change the href attribute.)

.attr('src')
http://api.jquery.com/attr/

One way to approach this problem would be to have some dummy links/hidden controls with the source of your external resource and once the page loads you go through all such controls and then create the respective html elements, update the src attribute and then append it to the dom.
Dummy Controls:
<input type="hidden" source="/my/source/a.jpg" nodeType="img" class="specialControls"/>
<input type="hidden" source="/my/source/1.js" nodeType="script" class="specialControls" />
and the javascript
$(document).ready(function()
{
$(".specialControls").each(function(){
var elementType=$(this).attr("nodeType");
$('<'+elementType+'/>').attr('src', $(this).attr("source"))
.insertAfter($(this))
});
});
Hope this helps.

make sure an image is loaded while dynamically changing jquery

I'm changing the image src of an image node.
I want to be able to make sure that it's changed before executing somecode. How would i do that?
right now i have
function changePic(imgNode, newPic, desc){
var descNode = $("#description");
$(imgnode).fadeTo(500, 0, function(){
$(imgnode).attr("src", newPic);
$(imgnode).attr("alt", desc)
descNode.text(desc);
$(imgnode).fadeTo(500, 1);
});
}
Works great if the server's fast/ a local server. Works terribly if the server's slow, where the image will fade back in before changing...
any idea?
Edit: I'm loading the image when changePic is called. Any better ways to do it?
More: Also why is it not a good idea to put the last line,
$(imgnode).fadeTo(500, 1);
, outside of the callback function?

Preload the image, but to be sure it's completely loaded, use the .load() event.
Quote:
The load event is sent to an element
when it and all sub-elements have been
completely loaded. This event can be
sent to any element associated with a
URL: images, scripts, frames, iframes,
and the window object.
And don't miss this line:
It is possible that the load event
will not be triggered if the image is
loaded from the browser cache. To
account for this possibility, we can
use a special load event that fires
immediately if the image is ready.
event.special.load is currently
available as a plugin.
I put together an example of how I think you want it to work. I switch between three images I found through Google Images. I bind the load event before I change the src of the image to be sure it's triggered.
http://jsfiddle.net/xdjjR/1/

I guess, you can preload image in hidden elements, so that it's loaded with other html. When the source changed such image should be shown immediately.

Use the callback param
doc
ex from doc:
$('#clickme').click(function() {
$('#book').fadeOut('slow', function() {
// Animation complete.
});
});

Has window.onload fired yet?

I have a script that will be inserted into an unknown page at an unknown time. Is it possible to tell from this script if window.onload has fired yet?
I have no control over the host page. I can't add any markup or scripts to it. All I know is that my script will be inserted into the page at some point. It could be before window.onload or after; and I need to detect which side of that event I'm on.

Updated Answer:
Look at this site. He uses a trick by seeing if the last element of document.getElementsByTagName("*") is defined or not. It seems to work in Opera and IE.
Original Answer:
You can't check, but you can do:
window.setTimeout(function () {
// do your stuff
}, 0);
That will do your stuff definitely after the page has loaded.

jQuery's ready() will queue a function to be fired when the document is loaded, or fire immediately if the document is already loaded:
$(document).ready(function() {
//your code here
});
Just be sure jQuery is included before your script block. If you can't include any script resources directly, you can always copy the body of jQuery-min in your script itself.