Log in

View Full Version : Adding javascript function within ontoggle function


piers
07-21-2009, 05:21 AM
1) Script Title: Animated Collapse

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

3) Describe problem:

I'm using the following code to execute some commands depending on the toggled state of the divs:


animatedcollapse.ontoggle=function($, divobj, state){
var oneisopen=false
$.each(animatedcollapse.divholders, function(){
if (this.$divref.css('display')!='none'){
oneisopen=true
}
})
if (!oneisopen){
$("div.fadeThis3").fadeOut('slow');
$("div.mt").fadeOut('slow');
$("div.fadeOut").fadeIn(3000);
}
if (oneisopen){
$("div.fadeThis3").fadeTo("fast", 1.0);
$("div.fadeOut").fadeOut(500);
}
}

However when I incude the javascript function


document.movie.Play();

(see: http://developer.apple.com/documentation/QuickTime/Conceptual/QTScripting_JavaScript/bQTScripting_JavaScri_Document/QuickTimeandJavaScri.html#//apple_ref/doc/uid/TP40001526-CH001-DontLinkElementID_14)

I get an alert from the browser saying that document.movie.Play() is not a function...

do I somehow have to convert it to a jquery function to nest it in the above code?

Thanks
ddadmin
07-21-2009, 08:51 AM
It shouldn't matter, no. Are you sure document.movie.Play(); works on the same page when moved outside the ontoggle() event?
piers
07-21-2009, 04:30 PM
Well I'm using it elsewhere with no problems - but to be sure I just called it on page load:


<body onload="document.movie.Play()">


and there's no alert from the browser...

I tried it again in FF and get the alert:


An error exists inside your "ontoggle" function:

TypeError: document.movie.Play is not a function

Aborting execution of function.


No problems, seemingly, in Safari tho'

the exact code I use is:


animatedcollapse.ontoggle = function ($, divobj, state) {
var oneisopen = false
$.each(animatedcollapse.divholders, function () {
if (this.$divref.css('display') != 'none') {
oneisopen = true
}
})
if (!oneisopen) {
$("div.fadeThis3").fadeOut('slow');
$("div.mt").fadeOut('slow');
$("div.fadeOut").fadeIn(3000);
}
if (oneisopen) {
document.movie.Play();
$("div.fadeThis3").fadeTo("fast", 1.0);
$("div.fadeOut").fadeOut(500);
}
}
ddadmin
07-21-2009, 06:55 PM
Is "movie" also the ID of the Flash object you're trying to reference? If so, what if you used:


document.getElementById("movie").Play()
piers
07-22-2009, 12:14 AM
It is (although it's a QuickTime object)....

In Firefox 3.0.1.1 -


An error exists inside your "ontoggle" function:

TypeError: document.getElementById("movie").Play is not a function

Aborting execution of function.


am I being boneheaded here....?



animatedcollapse.ontoggle = function ($, divobj, state) {
var oneisopen = false
$.each(animatedcollapse.divholders, function () {
if (this.$divref.css('display') != 'none') {
oneisopen = true
}
})
if (!oneisopen) {
$("div.fadeThis3").fadeOut('slow');
$("div.mt").fadeOut('slow');
$("div.fadeOut").fadeIn(3000);
}
if (oneisopen) {
document.getElementById("movie").Play();
$("div.fadeThis3").fadeTo("fast", 1.0);
$("div.fadeOut").fadeOut(500);
}
}
ddadmin
07-22-2009, 01:06 AM
One possibility is that the play() function of your player isn't ready yet when the ontoggle() event is fired, which is as soon as the document has loaded (not necessarily objects inside it such as images etc). To test this theory, try adding the condition in red below to your code:


if (oneisopen) {
if (document.getElementById("movie"))
document.getElementById("movie").Play();
$("div.fadeThis3").fadeTo("fast", 1.0);
$("div.fadeOut").fadeOut(500);
}

No errors should occur when the page first loads, and when you do manually expand a DIV, the movie should play...
piers
07-22-2009, 02:41 AM
Yes, I think it's possible that FF's optimization means the object isn't instantiated when display: none. Once the div is open, everything eventually works fine - but if the div is collapsed, then opened again, the problem re-emerges.

Even with your suggestion above I still get the error:


An error exists inside your "ontoggle" function:

TypeError: document.getElementById("movie").Play is not a function

Aborting execution of function.


Do you think there might be some way to test for the readiness of the object and delay the Play() function from firing until it is?