smart embed dimensions

[jAQUAN]

I'm working on a php site where the same .swf is loaded every page but a url variable is passed to flash via the swfobject. The flash movie, which is just a horizontal menu, loads various pieces of content depending on the page. The content can add up to any height because of some pages having dynamically repeated content.

I'm looking for a way to style the div holding the flash and/or the dimensions of the embed tag so that 100% of the flash content is shown followed by a plain html footer.

For now I'm going with a php array of predetermined heights so that I can show some progress to the client but using this would be imperfect and force me to use an ick flash scroll bar.

[catbert303]

Hi,

I guess the movie knows how to calculate the height of the content it's displaying? If so perhaps you could get it to call a javascript that updates the height of the object/embed tags.

I've attached example fla/swf/html files that shows this. The movie has a little blue box that is given a random height, it then adjusts the height of the swf in the page to fit the content. I called the javascript using getURL("javascript:functionName(value)"); But I guess newer versions of Flash have far slicker ways of doing this (ExternalInterface?)

I tried to comment it - so I hope it makes sense I guess the only kinda weird part is how the Javascript finds the right Flash element to resize, here's the function that does the resizing:

function resizeMovie(height) {
    // if the browser has no DOM support bail out here 
    if (!document.getElementById) return;

    // get the element displaying the movie (notice the id attributes set on the object and embed tags)
    // Moz/Opera/Others use embed, IE uses object - check embed first, then if we can't find that fall back on object
    var mov = document.getElementById('resize-embed') || document.getElementById('resize-object');
    // update the height
    mov.setAttribute('height', height);
}

The

var mov = document.getElementById('resize-embed') || document.getElementById('resize-object');

line relies on the way IE doesn't recognise the embed tag at all* - even though the element appears in the document, document.getElementById('resize-embed') doesn't find anything. This has a useful effect here. It means that if we try getting the embed tag first, and we find something then we have a browser that is using embed to display the movie (so that's the element we want to resize). If we don't find anything we can then try to get the object element instead.

I tested this in IE 6, Firefox 2 and Opera 9.

* it also relies on the way the || operator returns values - see the description here for details - http://javascript.crockford.com/survey.html

Hope it helps

[jAQUAN]

Thanks a lot once again cat.
I'm pretty familiar with external interface. I wrote a similar construct to pull off the javascript equivalent of swapDepths and called it from flash to handle the stacking order of two divs (each holder their own swf) depending on weather or not the top div had it's drop down menu exposed. If the drop down was hidden, the second div was stacked on top so as to not have its interactivity overridden by the blank space provided for the drop down.

It took an entire day to write only to have IE6 fail to respect z-depth and stack the divs anyway. It's precisely the reason I was looking for a smarter style, div, embed combo using some sort of a 100% here and overflow there. Are you sure there is no hope on that road?

I guess I'm still figuring what kinds things I should resist doing. Right now its javascript as a whole.

Would you go so far as to say that, since javascript needs to be running in order to use the swfobject anyway, as long as you have a universal function, use of js is good, even recommended practice?

For instance, I see that 'DOM sniffer' set up a lot. Using if(!document.getElementById) and then testing for responses to known give aways. Seems pretty standard but they each seem to have their little differences.

this function sends any div to any z-index if one is passed or the next highest depth if one is not passed.

var zInd = 300;

function upEl(theDiv, zDepth) {
	if( document.layers ) {
		theDiv = document.layers['myDiv6C'].document.layers[theDiv];
	} else {
		theDiv = getRefToDiv(theDiv);
	}
	if( !theDiv ) { window.alert( 'Nothing works in this browser.' ); return; }
	if( theDiv.style ) { theDiv = theDiv.style; }
	if(zDepth){
		theDiv.zIndex = zDepth;
	}else{
		theDiv.zIndex = zInd; zInd++;
	}
}

As you can see, it's a slightly different recipe than your resizeMovie technique. (I found this script so I have no idea what the myDiv6C is all about but it works)

Seeing differences like that is just enough to give me less than complete confidence and I'm getting pretty sick of not being able to guarantee my work. It's matter of pride and reputation.

Would you say you are at the point where your confident that no matter the need, you can predict for all the top 5 (opera, safari, IE6, IE7, FF)? Is that something that comes with time or is there an article out there that demystifies the whole thing?

[jAQUAN]

just looking at your sample, you say IE does not see embed and only sees object tags. Since the swfobject only writes an embed tag to the page does that mean your function wouldn't work?

[catbert303]

Hi,

I just had a quick look through the source of SWFObject (here - though I don't know if this is the latest version?) It looks like it does use the object element for IE. Actually, it also looks like it only writes the object tag for IE and only the embed tag for other browsers. This would simplify my function a little, since you would now only need a single value for the id attribute as SWFObject would handle setting up the id on the correct element. Then to get the movie all you'd need would be,

var mov = document.getElementById('the-movie-id');

As for the zIndex function, IE's z-indexing has been driving me nuts recently too. It was something I'd hoped IE 7 would sort - but apparently not. In your function the document.layers stuff is all to support netscape 4.x. To be honest, I don't know how many people still include that in their requirements as a browser that needs to be supported. I'm certain I haven't written any code for it in quite a while (which is something that makes me very happy )

For your general DOM access/modification/creation as long as you have a pretty much well formed document to begin with all the getElementById, getElementsByTagName, createElement, appendChild, removeChild, innerHTML and so on, should be reliable across all modern (and some not so modern) browsers - I'd reckon this would cover IE 5+, Firefox, Opera 7+ and Safari (off the top of my head the only common exception I can think of running into was that IE 5.x doesn't understand getElementsByTagName('*'))

Other areas are less solid. For example event handling, IE has it's own model that's frustratingly different (and lacking in features) compared with the W3C model. So you often find lot's of code that handles the differences there. Although this is one of the areas I think all the Javascript libraries really do a good job with (I think I mentioned YUI's event utility before )

In general I don't think it's nearly as hopeless a situation as with CSS

Oh yeah, http://www.quirksmode.org has excellent browser compatibility charts.