Dynamically load content into a div area when div animation is complete.

Hello,

I would like to get some help on how I could load information dynamically after a div layer has animated.

So once I call the div layer using jquery...

<script type="text/javascript">
function position_1() {
    jQuery("#box").animate({left:"300px",top:"100px",width:"200px",height:"500px"}, 1000);
  }
</script>

how can I dynamically load and fade in information to fill into the div layer? I'm looking for an option that I can have an animated gif. and load the content from independent html files.

Thanks for the help...

Brian
brihol44Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

SleepinDevilCommented:
I shall help you make it do what you want but you need to help get me started by showing what you have so far. So could you upload what you have so far (either a zipped folder) or just the main files on here.
0
SleepinDevilCommented:
Or a link to those pages on your website or wherever, anything where I can see the HTML source
0
brihol44Author Commented:
Thanks for the help...

I did figure it out but I was wondering if you know how I can pause the content to load until the box expands completely and not during the animation.

http://www.brianhollett.com/x2/index3.cfm

Thank you,

Brian
0
Become a CompTIA Certified Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

SleepinDevilCommented:
I had a quick shot at it and this is what I came up with. Its much neater as well. If you try it out you should upload it onto your website to try it out as the images will not load properly if you just try it from your computer, but try it out and let me know what you think of it and what needs tweaking.

Im glad to help.


I made 2 new functions and changed your $(document).read() function quite abit. then I also changed how the onclick is added onto the menu items, i went for a more direct approach of adding the onclick to each element but I think it works more efficiently this way.
loadContent.htm
0
SleepinDevilCommented:
Oh and I changed the hrefs in your 3 menu item links to have your full address in it, but please change it to the short form again just (index.html) instead of (http://www.brianhollett.com/x2/index.html) , sorry I forgot to change this in the file I uploaded just before.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
brihol44Author Commented:
0
brihol44Author Commented:
I'm grateful... just one more thing I noticed before I had just #about as the extension... but now it's the complete URL after the #... any adjustments I can do to this for a cleaner navigation?

Thanks again!

Brian
0
SleepinDevilCommented:
I attached the 3 functions from the previous one again with the modified code. Try it out, it should work like that now (hopefully)
function $returnSize(page) {
	page = page.toLowerCase();
	if(page.indexOf("portfolio") > -1) {	//to add more pages to this list add them between this if statement and the next else if statement and copy the structure of the else if statement.
		return {left:"100px", top:"50px", width:"600px", height:"500px"};	//portfolio.html dimensions
	} else if(page.indexOf("about") > -1) {
		return {left:"150px", top:"50px", width:"500px", height:"500px"};	//about.html dimensions
	} else {
		return {left:"300px", top:"50px", width:"200px", height:"500px"};	//index.html dimensions
	};
};

function $loadIt(that) {
	page = that.href;
	window.location.hash = page.substring(page.lastIndexOf("/")+1, page.lastIndexOf("."));
	
	$("#load").remove();
	$("#wrapper").append("<span id=\"load\">LOADING...</span>");
	$("#load").fadeIn("normal");
	
	$("#content").hide(500);	//hide the current contents first and at same time...
	$("#box").animate($returnSize(page), 1000, function(){	//...animate the box to new size
		$("#content").load(page, function(){	//load the contents after box animation
			$("#content").show("normal", function(){	//show the contents after contents were loaded
				$("#load").fadeOut("normal");	//hide the loader effect after the contents are shown
			});
		});
	});
};

$(document).ready(function(){
	var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function(){
        var href = $(this).attr('href');
        //if(hash == href.substr(href.lastIndexOf("/")+1, href.lastIndexOf("."))){
		if(href.indexOf(hash)>-1) {
            var toLoad = hash+'.html';	//dont worry about adding the #contents thing after url, thats been depreciated for awhile now
			$("#box").animate($returnSize(toLoad), 100);	//i added in the box dimensions thing onto this part as well, the way you had it before it did not change size of the box
            $('#content').load(toLoad);
        };
    });
});

Open in new window

0
brihol44Author Commented:
Perfect! Thanks again!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.