?
Solved

Resizing not working in FF (Really needed)

Posted on 2009-12-16
11
Medium Priority
?
674 Views
Last Modified: 2012-05-08
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
0
Comment
Question by:furmiga
  • 6
  • 4
11 Comments
 
LVL 14

Expert Comment

by:TanLiHao
ID: 26069214
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
 
LVL 18

Expert Comment

by:Antonio Estrada
ID: 26069268
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
 
LVL 14

Expert Comment

by:TanLiHao
ID: 26069350
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 14

Expert Comment

by:TanLiHao
ID: 26069364
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
 
LVL 7

Author Comment

by:furmiga
ID: 26070518
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
 
LVL 14

Accepted Solution

by:
TanLiHao earned 2000 total points
ID: 26070671
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
 
LVL 14

Expert Comment

by:TanLiHao
ID: 26070686
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
 
LVL 7

Author Comment

by:furmiga
ID: 26073095
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
 
LVL 7

Author Closing Comment

by:furmiga
ID: 31666836
Work Work Work
0
 
LVL 14

Expert Comment

by:TanLiHao
ID: 26077533
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
 
LVL 7

Author Comment

by:furmiga
ID: 26078996
Thx a lot man.

You did a great help here.
see ya next time

Ralph
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The goal of the tutorial is to teach the user how to select which audio input to use. Once you have an audio input plugged into the laptop or computer, you will go into the audio input settings and choose which audio input you want to use.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question