Animated Collapsible DIV 2.01: Works while editing/testing offline; not after upload!

[mauser319]

Script: Animated Collapsible DIV 2.01
http://www.dynamicdrive.com/dynamici...edcollapse.htm

Hi there,

I recently adapted Animated Collapsible DIV to show/hide an embedded Vimeo object of my demo reel on my portfolio site (http://jflynnpost.tumblr.com). While editing my page source offline and viewing the page from there, the script works beautifully and the effect is great. However, once I upload the new page source to Tumblr, the collapse-toggling link appears but doesn't function.

I've tried this using IE7, Firefox (Mac & PC), Chrome, and Safari; all these browsers seem to ignore the script altogether.

A factor that might matter, or not:

Originally, since Tumblr doesn't have a way (that I know of) of letting me upload and direct-link external files, I replaced the references to the two Javascript files (animatedcollapse.js and jquery-1.2.2.pack.js) with the actual code in my page source. That code still exists in the page source, although through my subsequent troubleshooting experiments I've commented it out and replaced the original references, citing the absolute URLs of the two files from dynamicdrive.com in place of the relative paths provided.

In both cases (having the script code present in the page source and just referencing the external files) the effect works perfectly during offline editing, but neither way works at all once it's uploaded.

Since I do not own any hosting space, it would be ideal if I'm able to adapt this script to run from one html file, as I originally attempted. If there is any trick to integrating full-on Javascript with an html page, that would be excellent knowledge to have at first!

I should admit here that I'm not much of a coder. I'm comfortable enough with xhtml, css and java that I was able to cannibalize the script to suit my needs just fine, but I may have done something terribly wrong, and my debugging skills are shaky at best. It may also have something to do with the way that Tumblr handles the pages it hosts, but I have no idea.

Any help you can provide would be much appreciated! Thanks very much in advance.

-Jared

[ddadmin]

Google does provide hosted versions of jQuery you can access, so first thing you should do is replace the following on your page:

<!--Script to enable jQuery 1.2.2-->

	
	<script type="text/javascript">
		/*
	 	* jQuery 1.2.2 - New Wave Javascript
	 	*
	 	* Copyright (c) 2007 John Resig (jquery.com)
	 	* Dual licensed under the MIT (MIT-LICENSE.txt)
	 	* and GPL (GPL-LICENSE.txt) licenses.
	 	*
	 	* $Date: 2008-01-14 17:56:07 -0500 (Mon, 14 Jan 2008) $
	 	* $Rev: 4454 $
	 	*/
		eval(all the jquery stuff here...)

	</script>

	<!--<script type="text/javascript" src="http://www.dynamicdrive.com/jquery/jquery-1.2.2.pack.js"></script>-->

<!--End jQuery-->

with just:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Let me know if that changes anything.

[mauser319]

Hi there,

Thank you so much for this advice! That did the trick right there. I had no idea that Google hosted so much material (although I suppose I should have guessed).

The effect now works flawlessly in Chrome and IE... the only thing in Firefox is that the Vimeo widget flickers a whole lot as it tries to load while the div animates. I wonder, is there a way to delay that object's visibility until the div has "settled"?

Either way, that really did the trick. Thanks again!

-Jared

[ddadmin]

Regarding hiding the DIV that's being animated until it's done, try replacing the default slideengine() function in the .js file:

slideengine:function(divid, action){
	var $divref=this.divholders[divid].$divref
	if (this.divholders[divid] && $divref.length==1){ //if this DIV exists
		var animateSetting={height: action}
		if ($divref.attr('fade'))
			animateSetting.opacity=action
		$divref.animate(animateSetting, $divref.attr('speed')? parseInt($divref.attr('speed')) : 500)
		return false
	}
},

with the following instead:

slideengine:function(divid, action){
	var $divref=this.divholders[divid].$divref
	if (this.divholders[divid] && $divref.length==1){ //if this DIV exists
		var animateSetting={height: action, visibility: 'hidden'}
		if ($divref.attr('fade'))
			animateSetting.opacity=action
		$divref.animate(animateSetting, $divref.attr('speed')? parseInt($divref.attr('speed')) : 500, function(){
			$(this).css({visibility: 'visible'})
		})
		return false
	}
},

Untested, but worth a shot.

[mauser319]

Hi,

Thanks again! Unfortunately it looks like this new code didn't have much of an effect. I see what you were after there, though.

Being more of a graphics guy, I'm frantically searching for the magical method of just throwing a black card over the widget when the div's animating and calling it good.

Although... this might not be the classiest option, but would there be a way of shoving the widget down beyond the bounds of the div each time the toggle button's clicked, and then removing all that blank space on completion? It's definitely not the same as actually hiding the widget, but if it can be pushed in and out of the div on command somehow, that might sell the effect just as well.

I can't thank you enough for your assistance so far!