We Keep Coding

how can fire event after end loading nested html page (page in object )

i want hide object after html page end loading not the man html tag
this is my code
$('<div id="content" ><object data="../06.html"></div>').appendTo('section')
i try use load but return after div loading i don't want this

With jQuery, you can start some action after the DOM is loaded. The content (e.g. images) isn't necessarily already there, but you can manipulate every DOM element after the DOM is ready. Use the following snippet for that:
$(document).ready(function() {
//some code
});
If you want to wait until the page is fully loaded (e.g. also images), you can use window.onload:
window.onload = function() {
//some code
};

To hide a <div> when your webpage is fully loaded:
$(window).load(function () {
$('div').fadeOut(); //or .hide()
});
To show a div when the page is fully loaded:
$(window).load(function (){
$('div').fadeIn(); //or show()
});
If that's not what you're looking for, then please do explain more about your problem.

Preloading a DIV

I'm using preloadme script to fadeOut my preloader div on window.load but I'm wondering if instead of waiting for the whole entire page to load I can target one specific div:
preloadme code
$(window).load(function() {
$('#status').fadeOut();
$('#preloader').delay(350).fadeOut('slow');
$('body').delay(350);
})
my idea that doesn't work
$('#img-container').load(function() {
Any suggestions greatly appreciated

I am afraid its not possible, since you can access the page element once DOM is initialize.
just go with $(function(){ //your code}), that will make your code run every time
$(function(){
$('#status').fadeOut(); // dont rely on this to hide the loaded, use css below
$('#preloader').delay(350).fadeOut('slow');
});
You can do this using CSS, to initially show the preloaded till page loads
#preloader {display:block}

check if .load has actually loaded content yet, then slide down

So I want to slide down some content that is loaded with jquery .load function
I have this where I load the content and then Hide it
function froth(){
$("#area").hide();
$("#area").load("test.html #enquiry1");
$("#area").hide();
}
Here I want to make sure that when i click the button it loads the document and then once its loaded then it slides down the content.
$(document).ready(function() {
$('#t1').on('click', function(){
froth();
$('#area').ready(function(){$("#area").slideDown('slow');})
});
});
Any ideas on how to do this.
I've been looking at the API's and it looks like i will probably have to use some ajax function instead... but i wanted to see if there was any other way.

.load accepts a callback as parameter http://api.jquery.com/load/
$("#area").load("test.html #enquiry1", function() {alert('done')});

use the callback function of load to make sure the load content is loaded first.. and then do the animation
try this
$(document).ready(function() {
$('#t1').on('click', function(){
froth();
});
});
function froth()
{
$("#area").hide();
$("#area").load("test.html #enquiry1",function(){
$(this).slideDown('slow')
});
}
OR
$(document).ready(function() {
$('#t1').on('click', function(){
$("#area").hide().load("test.html #enquiry1",function(){
$(this).slideDown('slow')
});
});
});

.load() animation with external web page?

Here is basically what I want to do:
I want to slideUp() a div with my content. I want to .load() an external web page (on the same server) in that div and .slideDown() that div.
For now here is what I have:
$(document).ready(function() {
$('a').click(function(){
$('.content').slideUp('1000');
$('.content').hide().load('about.html');
$(".content").slideDown('1000');
});
});
Basically here's what I get: the div .content hides itself, loads the about.html page, and appears. But no slideUps or slideDowns.
Anyone has an idea?
Sorry if this is a noob question, this is the first real time I'm trying js/jquery.
Thanks in advance.

That's because those are asynchronous actions. You have to continue execution in callbacks:
$('a').click(function(){
$('.content').slideUp('1000', function() {
this.hide().load('about.html', function() {
this.slideDown('1000');
});
});
});

try:
$('a').click(function(){
var el = $('.content'), //cache content to avoid multiple calls
slidetime = 1000;
el.slideUp(slidetime,function(){ //slide up
el.hide().load('about.html',function(){ //afterwards, load
el.slideDown(slidetime); //afterwards, slide
});
});
});

you are passing string '1000' to slideUp or slideDown.
It should be number or string that it can take like 'slow'...

Try This
$(document).ready(function() {
$('a').click(function(){
$('.content').slideUp(1000);
$('.content').hide().load('index2.html');
$(".content").slideDown(1000);
});
});
Cheers :)

Load javascript animation ONLY when entire site (images) loaded

I'm building this hotsite that relies heavily on 'heavy' images and animations.
It has some "Curtains" covering all the site, then i want to open these curtains (animate, already coded it), but only when all my site (specially images) is loaded.
Would also like to create a simple loader (no progress at all, just say "loading");
UPDATE:
$.ready(function() {
$("#loading").fadeOut();
$(".leftcurtain").stop().animate({ width: '374px', left: '-60px' }, 6200);
$(".rightcurtain").stop().animate({ width: '374px', right: '-60px' }, 6200);
$(".leftback").stop().animate({ width: '60px' }, 6500);
$(".rightback").stop().animate({ width: '60px' }, 6500);
});

Using
window.onload = function() {
// initialize site
};
Will work. It fires once everything embedded into the site (HTML, CSS, images...) has finished loading.
You will then need to hide your website content while it loads. If you place everything within a DIV, you can toggle the visibility of it with "visibility: hidden". You should not use "display: none", as with some browsers (if I can remember correctly, Opera), they won't load content that has no display value.
You should then be able to place a DIV containing your "Loading" content at the top of the page, then simply either toggle off the display of it, or remove it from the DOM once the page is loaded.
As a side note, you should not use the jQuery.ready() function, as pointed out by RobG, as this only waits for the DOM to load, and not the images.

try combining jQuery`s ready and load
$(document).ready(function()
{
var images = $('img');
var loadedImgs = [];
images.each(function()
{
$(this).load(function() //image load callback
{
loadedImgs.push('');
});
// we are interested only if the images is loaded,
// so we need to place something in the loadedImgs array;
});
var interval = setInterval(function()
{
if(loadedImg.length == loadedImgs.length)
{
clearInterval(interval);
//your code here ... images were loaded !!!
}
},10);
});

Put your handlers inside window.load. This is triggered only after the page is fully loaded, including graphics.
$(window).load()

Use Prototype's Event.observe like
Event.observe(window, 'load', function()
{
//add javascript script tags to the document here
}
Function in Event.observe will be called only after all the images in the DOM are loaded.

Just use:
window.onload = function(){
// javascript code will be executed only after the whole dom is loaded
}
With Jquery:
$.ready(function(){
// some code
});