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/dynamici...edcollapse.htm

3) Describe problem:

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

Code:

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

Code:

document.movie.Play();

(see: http://developer.apple.com/documenta...nkElementID_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:

Code:

<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:

Code:

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:

Code:

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....?

Code:

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:

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?

Thread: Adding javascript function within ontoggle function

Thread Tools

Search Thread

Adding javascript function within ontoggle function

Bookmarks

Bookmarks

Posting Permissions