Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Spiderian

.load problems

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

$(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});
});
  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×