Detect canvas-sizes (NOT screen-sizes)

[Ruben]

A warm hello to all, am I the first person to post a thread here?? :confused:

Anyways, here's the situation:

If you'd have a flash-movie (sized 100% by 100%) embedded in a html-file and in the flash-movie there'd be a textbox displaying Stage.width and Stage.height then when I view the movie the text would be "976 x 753"...

Now my question is, could I get that values by detecting the canvas-sizes using javascript?

To clear things out: I'm NOT looking for flashmovies passing through values to htmlfiles. I only want to know if there is a way for javascript to check what the height and width of the canvas are, NOT the whole screen or anything, just the sizes of the space where my website is displayed...

:confused: - Ruben

[Timmee_3Styler]

Ruben - http://www.actionscript.org/forums/showthread.php3?t=50541

around the same principles?

[tg]

uhmmm, if your swf is set to 100%X100%, wouldn't that be the screen size?

[Ruben]

Ruben - http://www.actionscript.org/forums/...ad.php3?t=50541

around the same principles?

Thanks Timmy, but I'm not looking for scaling and sizes of 100% and stuff...I know how to do that...I'm looking for a way to read the px-size of the stage using javascript...

But thanks anyways :rolleyes:

uhmmm, if your swf is set to 100%X100%, wouldn't that be the screen size?

Well, the problem is that (for some weird-arse reason) FireFox won't read
width = "100%"
height = "100%"

...so I was wondering if I could see how many pixels the "100%" would mean for the height and width...because FireFox CAN read the sizes in pixels...

Thanks anyway

:confused: - Ruben

[tg]

right, gothcha, i don't do much with 100%, so i don't so if this sounds kinda sarcastic, its not meant to.


so if you use javascript to find window.innerHeight, and window.innerWidth, then that might give your the same size as your stage (but i don't know for sure). innerWidth/height should work for nav4+, so might work for mozilla/firefox. but it won't work for ie.

[Ruben]

right, gothcha, i don't do much with 100%, so i don't so if this sounds kinda sarcastic, its not meant to.

so if you use javascript to find window.innerHeight, and window.innerWidth, then that might give your the same size as your stage (but i don't know for sure). innerWidth/height should work for nav4+, so might work for mozilla/firefox. but it won't work for ie.

Thanks alot man! I can't test it because I haven't got firefox installed, my boss does, so I'll have to wait untill he comes online...but thanks anyway

So while we're at the browser-topic:

I got this piece of javascript from kirupa (http://www.kirupa.com) to check what browser the user's using:
function checkBrowser() {
var IE = document.all;
var oldNS = document.layers;
var newNS = !document.all && document.getElementById;
var opera = window.opera;
if (opera) {
window.location = "opera.html";
} else if (oldNS) {
window.location = "oldns.html";
} else if (newNS) {
window.location = "newns.html";
} else if (IE) {
window.location = "ie.html";
};
};

I was wondering: what browsers do oldNS and newNS stand for? And is there a way to check if someone is using firefox??

Thanks alot for reading/replying :) - Ruben

[tg]

just a guess, i'm not positive, but i'ld say <= net5

[Ruben]

just a guess, i'm not positive, but i'ld say <= net5

I lost you, come again?

:confused: - Ruben

[tg]

hehheh.

oldNS=all netscape browsers older than (and including) netscape 5.
newNS=all netscape/mozilla browsers based on netscape code newer than netscape 5 browser

again... i'm not positive about the number, but i think mozilla is based on the netscape 6 gecko engine, so thats why i figured 5 as the cuttoff for old.... maybe its 6 ... not sure.

[Ruben]

Oh, glad you could clear that one out for me, thanks heaps...

So no-one knows how I can check wether or not the user is viewing through FireFox??

:rolleyes: - Ruben

PS. I keep asking, don't I? ;)

[tg]

firefox will appear as newNS, unless someone is using the extension to spoof ie.
if you want to do some string manipulation, then use userAgent, that will list the details you want:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
function myType(){
window.alert(navigator.userAgent);
}
</script>
</head>

<body onload="myType();">

</body>
</html>

[Ruben]

Thanks man! I think that's what I'm looking for! I owe you!!!

:D - Ruben

[catbert303]

Well, the problem is that (for some weird-arse reason) FireFox won't read
width = "100%"
height = "100%"

...so I was wondering if I could see how many pixels the "100%" would mean for the height and width...because FireFox CAN read the sizes in pixels...

Thanks anyway

:confused: - Ruben
Hi,

if you're refering to firefox/mozilla not displaying flash movies set with the dimensions at 100% by 100% I *think* they're exhibiting the correct (albeit slightly annoying ;)) behaviour. - if this isn't the problem then please ignore my rambling :)

the % height should be based on the height of the parent element, which in most cases is the body of the page. since the body has no height (it is not the height of the viewport) it doesn't make sense to try to calculate a percentage based on it.

the simplest fix is to modify the doctype of the page to put firefox in quirks mode where it will render the page as desired.

I think a doctype like this will cause firefox to work in quirks mode,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

[Ruben]

think a doctype like this will cause firefox to work in quirks mode

Thanks catbert303 for the info, but what do you suggest I try??

- Ruben

[catbert303]

where you have a page with a doctype,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

you can delete it to make mozilla render in "quirks" mode (I thought it might also work if you just deleted the "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" part, but it seems it doesn't)

[Ruben]

hmm, interesting, I haven't been able to test it (yet) because I'm having problems with my swf (http://www.actionscript.org/forums/showthread.php3?t=51655), but thanks anyway

Question: what is the doctype-tag designed to do??

:rolleyes: - Ruben

[catbert303]

Hi,

the doctype is used to specify what language the page is written in (eg HTML 4.01 strict, XHTML 1.0 transitional etc...)

many modern browsers also use the doctype tag to detemine the rendering mode they should use when displaying the page, strict or quirks mode, with strict rendering the browser will try to render the page closely according to the W3C specs (how closely depends on the browser ;)) in quirks mode the browser will be more tolerent of errors in the page and will try to emulate some non standard behaviour from older browsers.

for example internet explorer 5.x for windows had a broken box model ( http://tantek.com/CSS/Examples/boxmodelhack.html ) this was fixed in internet explorer 6 when it is running in standards compliant mode, in its quirks mode however it reverts to the incorrect IE 5 version to try to maintain backwards compatability with sites designed based on the IE 5 box model.

[Ruben]

So how important do you recogn it is for a doctype-tag to be present in a file viewed through a browser?

Thanks for the info by the way...

:) - Ruben

[catbert303]

I guess it depends on the page, if you're building a standards compliant site in HTML/XHTML and CSS, then you need the doctype in order to validate the page (and since you're trying to follow the standards you'd probably want to make sure the browser was trying to follow the standards too by rendering in strict mode)

if your page is mostly flash then it's less important - generally the code used to display a flash movie won't validate anyway (the embed tag is non-standard), though if you're desperate for validation there are work arounds to replace the embed tag, eg http://www.alistapart.com/articles/flashsatay/ or http://ln.hixie.ch/?start=1081798064&order=-1&count=1

[Ruben]

Well, the whole page is flash, and some javascript like setfavorites and stuff, but nothing further really, so I might just take the doctype-thingie out...

Thanks for the feedback man, I really appreciate it...

:) - Ruben

[catbert303]

no problem :)

[Ruben]

I solved my swf-problem and tried deleting the doctype, when I set the sizes at 100% in firefox the site was displayed 800x600 (swf-stagesizes) and in IE at 100%x100%...then I inserted the doctype again and nothing changed :confused:

I think I'm gonna create some evil-arse browser-detection system:D

But thanks anyway catbert303 for your time

:) - Ruben

[catbert303]

are all the settings (width, height etc) correct in the embed tag?

[Ruben]

Yup, all 100%

- Ruben

[catbert303]

Do you have a link to the page?

[Ruben]

No, it's not online, but this is the code with which the movie is placed:

<object
classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase = "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
align = "middle"
id = "theMovie"
width = "100%"
height = "100%">
<param name="movie" value="new.swf">
<param name="quality" value="best">
<param name="salign" value="lt">
<param name="scale" value="noscale">
<param name="width" value="100%">
<param name="height" value="100%">
<embed
pluginspage = "http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"
src = "new.swf"
scale = "noscale"
salign = "lt"
align = "middle"
quality = "best"
name = "theMovie"
width = "100%"
height = "100%"
></embed>
</object>

Does that help?

- Ruben

[Ruben]

Sorry Catbert303, it was a problem in the script of the swf that caused the movie to behave abnormal, thanks though for your help, I really appreciate it

:) - Ruben

[catbert303]

glad its working now :)

[Ruben]

Yeah me too :D

:) - Ruben

[vapor]

Hi,

if you're refering to firefox/mozilla not displaying flash movies set with the dimensions at 100% by 100% I *think* they're exhibiting the correct (albeit slightly annoying ;)) behaviour. - if this isn't the problem then please ignore my rambling :)

the % height should be based on the height of the parent element, which in most cases is the body of the page. since the body has no height (it is not the height of the viewport) it doesn't make sense to try to calculate a percentage based on it.

the simplest fix is to modify the doctype of the page to put firefox in quirks mode where it will render the page as desired.

I think a doctype like this will cause firefox to work in quirks mode,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">


i worked around the firefox issue of not properly sizing the

height="100%"

properly, by simply adding

height: 100%;

to my body CSS style...and i was able to keep my DTD....

[djmorf]

I had the same problem with firefox, I substituted the first line of code from
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

to a simpler :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html140/DTD/loose.dtd">


Firefox was then able to process the "100%" size tags

I know this might not suit everyone, but I'm sure some will find it useful.

[Navin]

You may want to use this app for detecting Flash movie's width & height:

http://navin.biz/files/SWFParser.zip

It's a free tool written in C# (.NET Framework 2.0) and contains all source code.

http://navin.biz/files/SWFParser.png

P.S.: There is no way correctly detecting Flash movie's width & height with JavaScript, you may only do this by parsing SWF file on a server side (with PHP or Ruby or C# etc).

[CyanBlue]

As you have said, navin, that method won't work cuz the original question was asking for a way to detect that on the server side and your app, which does not have valid link, does not help much on that note...