Resizing not working in FF (Really needed)

Hi guys

I'm having some trouble trying to resize my page. (Dynamically)
In IE it works perfectly but in FF it fails.

It's a regular HTML page with a 100% width Flash attached.

Here the test page:
http://www.dermadoctor.com.br/lojas/index.asp?loja=131

Please take a look at the Source Code and tell me what is wrong. I'm just giving up here. It's a simple HTML with some JS's that I call from Flash and the JS I intended to resize the page.  Again, It works perfectly on IE but not in FF.

Sorry about the tables - I'm working on it

Ralph
LVL 7
furmigaAsked:
Who is Participating?
 
TanLiHaoConnect With a Mentor Commented:
SWFObject is a better way to embed .swfs as it is cross-browser. However, people would need to have javascript enabled. There are two kinds of publishing in SWFObject, one is static publishing and the other is dynamic publishing. I will recommend dynamic publishing usually but if you know that the users will not have javascript(most of the users have javascript enabled), then you will use the static publishing method.


You can actually resize Flash elements by their width and height property easily by setting their width and height.

First download http://swfobject.googlecode.com/files/swfobject_2_2.zip, then extract everything out, run index_dynamic.html.

To alter the width of the Flash element, enter javascript:alert(document.getElementById("myContent").width = 800);

800 is the width you want.

For height

javascript:alert(document.getElementById("myContent").height = 800);


myContent is the element ID if you haven't realise

swfobject.embedSWF("test.swf", "myContent", "100%", "100%", "9.0.0", "expressInstall.swf");

This is the code used to embed the swf, the second parameter is the element id.

To make the swf display 100% of the page,

You do this

javascript:alert(document.getElementById("myContent").width = "100%");
javascript:alert(document.getElementById("myContent").height = "100%");

There is a problem with changing the height to 100% on Firefox 3.5.6, I'm not sure if it works on the previous version but the height cannot be changed to 100% in my browser, there may be other issues but since your code do not need to change the height, do not bother with that. The changing of height to 100% works on IE though.

Read the documentation on swfobject for more information

http://code.google.com/p/swfobject/

In your original page, type this in the address bar of the browser to change the swf to display the width by 100%

javascript:alert(document.getElementById('tabela').width = "100%");

One thing you have to note, even if you set the width to 100%, the swf width will not go lower than 1000, which is the frame width you exported in.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title>SWFObject 2 dynamic publishing example page</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
		swfobject.embedSWF("test.swf", "myContent", "300", "120", "9.0.0", "expressInstall.swf");
		</script>
	</head>

	<body>
		<div id="myContent">
			<h1>Alternative content</h1>
			<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
		</div>
	</body>
</html>

Open in new window

0
 
TanLiHaoCommented:
Hmm, are you trying to resize the Flash element when the page is resized? Why are you putting the Flash element in the table?

You should also use SWFObject to embed the swf instead.

Apparently resizing works on Firefox for me. I tested on both IE and Firefox and they both work.
0
 
Antonio EstradaTech Leader / Senior Web DeveloperCommented:
They do work... but there's an offset on Firefox for some random reason. A dirty fix would be this:

function pageWidth()
{
      return window.innerWidth != null? window.innerWidth-20 : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
}

I'm just substracting 20px to the innerWidth (Firefox) and not messing around with the values that Explorer uses so that should work.

There's an interesting article that covers the browser dimensions here:

http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

Good luck!

-V
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
TanLiHaoCommented:
Actually it's not a random offset, it's the width of the page including the scrollbar.

To get the widht not including the scrollbar,

document.documentElement.clientWidth can be used, this seems to work with IE as well.

Although they do not return the same values on both IE and Firefox that are maximized, but that is because IE have a small bar at the left of the browser but Firefox do not have that.

So I think at the moment document.documentElement.clientWidth is the best way to get the width of the window.
0
 
TanLiHaoCommented:
I also just found another question on experts exchange related to this,

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_21474077.html

So depending on whether you want to have backward compatability, you might want to change your code accordingly.

See http://en.wikipedia.org/wiki/Quirks_mode
0
 
furmigaAuthor Commented:
Hi there

Thx for the answers so far.

FF here at version 1.5.0.7

If I load the page whithout maximize FF, I can resize the page up, but It never goes back to the original if I reduce the window size. That's happening if I load Maximized too.

I'm not even an aspirant to HTML / Javascript but, since I'm using a table, can't I just change the width of the table to 100% when the width get's higher then 1000 ? If so, how do I do that?

TanLiHao
"Why are you putting the Flash element in the table?
You should also use SWFObject to embed the swf instead."

What is the better approach? Can Flash interact with External Javascript using SWFObject method?

Thx

Ralph
0
 
TanLiHaoCommented:
I have seen that the exported version for your swf is 8.0, so people most likely require at least Flash Player 8 to see your site.

So your SWFObject embedding code is as follows,

swfobject.embedSWF("test.swf", "myContent", "1000", "1040", "8.0.0");
I removed the expressInstall.swf because I think it is not necessary, if you want, you can put that in. Please read the documentation for more information.
0
 
furmigaAuthor Commented:
Hi there!

Fully working here.
But (there is aways a but)
Could you please take a look to see if I'm doing some.... you know... ****?

Thx in Adv

btw, Is a Flash w/ Javascript e-commerce based page relaible enough ?

Ralph
0
 
furmigaAuthor Commented:
Work Work Work
0
 
TanLiHaoCommented:
Actually instead of innerWidth, you should use document.documentElement.clientWidth. It is actually the standard so browsers that are standard-compliant will follow this. For Firefox, this definitely works. For IE, in normal cases it would work, but it may not work in old browsers that do not conform with the standard.

innerWidth in Firefox includes the scrollbar, which is not supposed to be the case, so you either use document.documentElement.clientWidth or calculate the width without the scrollbar, the scrollbar size in my computer is 17, some others are 16 and 18. It differs for everyone so it is easier and better to use document.documentElement.clientWidth.

You can always include alternative content if the person do not have javascript or Flash Player. Generally it should be reliable because according to statistics, about 99% of users have Flash Player and for Javascript, popular browsers always have javascript enabled. For users that disabled javascript manually, they will know when to enable when needed. There are still people who do not know, but let's not consider the really small portion of people.

Gmail use javascript, likewise for Windows live mail. So a site like yours should be able to be viewed by most.


I do see some redundant weird code though.

<script type="text/javascript">

swfobject.registerObject("flashfile", "8.0.0");

</script>

This code should be removed entirely, as it is definitely not needed and useless because you do not have any object with an ID flashfile




Just to summarise, you should change

function pageWidth()
{
      return window.innerWidth != null? window.innerWidth-20 : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
}

I will prefer to use document.documentElement.clientWidth but that is not really backwards compatible, so if you want to be really backward compatible, look at the code below.

So you replace the above code with this code below.

function pageWidth()  {
    if (typeof(window.innerWidth) == "number") {
        return window.innerWidth - getScrollBarWidth ();
    } else if ( document.documentElement && document.documentElement.clientWidth) {
        return document.documentElement.clientWidth;
    } else if ( document.body && document.body.clientWidth) {
        return document.body.clientWidth;
     } else {
        alert("Unable to resize page properly, please contact the site.");
    }
}


function getScrollBarWidth () {
    var inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";

    var outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild (inner);

    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;

    document.body.removeChild (outer);

    return (w1 - w2);
};



Remember to remove this portion too

<script type="text/javascript">

swfobject.registerObject("flashfile", "8.0.0");

</script>
0
 
furmigaAuthor Commented:
Thx a lot man.

You did a great help here.
see ya next time

Ralph
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.