.load problems

[Spiderian]

Quick question. If I use the .load to change the content of a div, after it loads I want to have things animate on it, how can I get around "cannot tween null object" error? I know the elements don't exist yet, but I am having trouble figuring where to put the $(document).ready function.

function animate_focalTag(event){
		focalTag.animate_focalTag(),
		$("#content").load("focalPoints.html"),
		$(document).ready(function(){
			var pTab = document.getElementById('pTab');
			var vTab = document.getElementById('vTab');
			var aTab = document.getElementById('aTab');
			TweenLite.to(pTab, 1, {left:0, delay:5});
		});
	}

I tried putting it at the end of the html I load, but then I get weird errors from jquery.

[Spiderian]

HA! I solved it myself. I was using an older version of jQuery. The solution is put the

$(document).ready(function(){
			var pTab = document.getElementById('pTab');
			var vTab = document.getElementById('vTab');
			var aTab = document.getElementById('aTab');
			TweenLite.from([pTab,vTab,aTab], 1, {left:0, delay:1});
		});

at the bottom of whatever page you want to load.

[Carl]

$(document).ready has no idea that you are doing an external separate load() (99% sure of this).

 

I would suggest using a load() callback as noted in the .load() documentation:

 

 

If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed. The callback is fired once for each element in the jQuery collection, and this is set to each DOM element in turn.

 

$( "#result" ).load( "ajax/test.html", function() {

  alert( "Load was performed." );

});

 

 

 

http://api.jquery.com/load/

 

So in your case I would try this (untested):

 

$("#content").load("focalPoints.html", function(){
alert("loaded");

var pTab = document.getElementById('pTab');
var vTab = document.getElementById('vTab');
var aTab = document.getElementById('aTab');
TweenLite.to(pTab, 1, {left:0, delay:0});
});