Firefox/JavaScript Issue

Question

gg3l 0 Newbie Poster

13 Years Ago

Hi,

This is a demo of what I'm trying to do:

<html>
<head>
<script type="text/javascript">
window.onresize = resize;
function resize()
{
if (document.getElementById('elm1').offsetWidth < 1000)
{
document.getElementById('elm2').style.width = 1000
}
if (document.getElementById('elm1').offsetHeight < 600)
{
document.getElementById('elm2').style.height = 600
}
if (document.getElementById('elm1').offsetWidth > 1000)
{
document.getElementById('elm2').style.width = "100%"
}
if (document.getElementById('elm1').offsetHeight > 600 )
{
document.getElementById('elm2').style.height = "100%"
}
}
</script>
<style type="text/css">
#elm2
{
width: 100%;
height: 100%;
background: red
}
</style>
</head>
<body id="elm1">
<div id="elm2"></div>
</body>
</html>

It works perfectly with all browsers except Firefox.
In Firefox, when this part of the code is executed:

if (document.getElementById('elm1').offsetHeight < 600)
	{
		document.getElementById('elm2').style.height = 600
	}

it sets the value to elm2 and elm1...

Firefox version: 7.0.1

Is there a way to go around this?

Thanks,
GG3L

javascript

Edited 13 Years Ago by gg3l because: n/a

4 Contributors
8 Replies
240 Views
4 Days Discussion Span
Latest Post 13 Years Ago Latest Post by raphie

Taywin 312 Posting Virtuoso

13 Years Ago

In firefox, you may need...

document.getElementById('elm2').style.height = 600+"px"

But that could break IE8 and below... So you may need to check for what browser it is being viewed from.

Edited 13 Years Ago by Taywin because: n/a

MartinRinehart 0 Junior Poster in Training

13 Years Ago

Not sure it's your problem, but here's a general thought.

All CSS measurements MUST have a dimension when they are non-zero. CSS will (theoretically) choke on 'width: 100;'. Therefore, JS will (theoretically) choke on 'xxx.style.width = 600'.

However, most browsers accept unlabeled widths for most tags, since most HTML accepts '<tag ... width=600 ...>'. Few (none that I've found) carry this over to also accept unlabeled dimensions for height. So two good rules:

1) Never 'element.height'. Always 'element.style.height'. (Ditto for width.)

2) Never use unlabeled dimensions. 'xxx.width = 600;' a while back passed Opera and MSIE, but not Chrome and Firefox. (Not checked recently.) 'xxx.width = "600px"' passes all.

Most browsers will allow most violations of these rules if you don't use a doctype. The results will not, however, be reliably cross-browser compatible.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

gg3l 0 Newbie Poster · Answer 1 · 2011-10-29T16:41:08+00:00

In firefox, you may need...
document.getElementById('elm2').style.height = 600+"px"
But that could break IE8 and below... So you may need to check for what browser it is being viewed from.

I don't think that's it. As you can see, the code is 99% identical, the only difference being "Width" and "Height". The idea is that it work fine (even on Firefox) for the Width but fails for the Height (only in Firefox). I'm looking for a way around this bug.

gg3l 0 Newbie Poster · Answer 2 · 2011-10-30T03:42:04+00:00

Not sure it's your problem, but here's a general thought.
All CSS measurements MUST have a dimension when they are non-zero. CSS will (theoretically) choke on 'width: 100;'. Therefore, JS will (theoretically) choke on 'xxx.style.width = 600'.
However, most browsers accept unlabeled widths for most tags, since most HTML accepts '<tag ... width=600 ...>'. Few (none that I've found) carry this over to also accept unlabeled dimensions for height. So two good rules:
1) Never 'element.height'. Always 'element.style.height'. (Ditto for width.)
2) Never use unlabeled dimensions. 'xxx.width = 600;' a while back passed Opera and MSIE, but not Chrome and Firefox. (Not checked recently.) 'xxx.width = "600px"' passes all.
Most browsers will allow most violations of these rules if you don't use a doctype. The results will not, however, be reliably cross-browser compatible.

I understand that... but this is a browser bug... I'm looking for a way to go around it.
I tried, with the same code as above, using "600px" and 600+"px" and the result was:

1. Chrome - works perfectly
2. Internet explorer - Works perfectly
3. Firefox - Fails with Height, though it work fine with Width...

I got the same result in all scenarios I could think of. Is there a workaround!?

raphie 3 Light Poster · Answer 3 · 2011-10-30T15:16:39+00:00

try:

<!DOCTYPE html>
<html>
<head>
<script>

function resize(){

var bodyWidth = document.body.offsetWidth;
var bodyHeight = document.body.offsetHeight;
var el = document.getElementById('elm2').style;

if( bodyWidth < 1000){
	el.width='1000px';	
} else {
	el.width='100%';
}
if( bodyHeight < 600){
	el.height='600px';	
} else {
	el.height='100%';
}

}
</script>
</head>
<body onResize="resize();">
<div id="elm2"></div>
</body>
</html>

In firefox if you set the element to 100% height tend to display the scrollbar so probably you should use like 98%

raphie 3 Light Poster · Answer 4 · 2011-10-30T15:49:19+00:00

I tried it an won't work... Then I tried it using jQuery and it works:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>

function resize(){

	var bodyWidth = $(document).width();
	var bodyHeight = $(document).height();
	var bodySize = $(document.body);
	var el = $('#elm2');
	
	if( bodyWidth < 1000){
		el.css('min-width', '1000px');
		bodySize.width(1000);
	} else {
		el.css('width','100%');
		bodySize.width(bodyWidth);
	}
	if( bodyHeight < 600){
		el.css('min-height', '600px');
		bodySize.width(600);	
	} else {
		el.css('height','100%');
		bodySize.height(bodyHeight);
	}

}
</script>
</head>
<body id="elm1" onResize="resize();" style="height:100%" >
<div id="elm2" style="border:1px solid black; width:100px; height:100px;"></div>
</body>
</html>

Also notice that I added the style height 100% inline in the body tag.

Taywin 312 Posting Virtuoso · Answer 5 · 2011-10-31T18:29:01+00:00

JQuery hides the way they manipulate with the DOM. If you feel comfortable with it, you should use it.

In your not-working script, the "width" is not a property for the tag. To define the "width" you must use "el.style.width" instead. That's why it doesn't work.

PS: I had problems with FF before when I do not add "px" at the end. That's the FF problem for a long time. Not sure if it is fixed in their newer rapidly increased version...

raphie 3 Light Poster · Answer 6 · 2011-11-02T05:50:43+00:00

The tag used in the el object is a div, sure you can set up the widht and the height, the thing is not the width... width is adjusted properly, the problem is the height...

Even though you force to add a height with JavaScript, FF doesn't like it either with 'px' or without.

I used to feel uncomfortable using a framework like jQuery but since I save like 700 lines of codes with it in one of my projects I forgot that. They handle the DOM elements like everybody else, targeting a browser, who ever return true that good and then a method for that browser is used.