Killersites.com Homepage Welcome Guest   |   Register  |  Login
Login Name Password
  Search  
  Index  | Recent Threads  | Unanswered Threads  | Who's Online  | User List  | Help

  Killersites.com Forum
  Category: Programming
  Forum: AJAX, Dom Scripting and JavaScript
  Thread: Javascript / DOM bug with Firefox - please read for details.

Quick Go »

No member browsing this thread
Thread Status: Active
Total posts in this thread: 10
[ Jump to Last Post ]
Post new Thread
Author
Previous Thread This topic has been viewed 11241 times and has 9 replies Next Thread
Male admin
Advanced Member
Member's Avatar


Joined: Jun 14, 2003
Post Count: 2940
Status: Offline
Reply to this Post  Reply with Quote 
Javascript / DOM bug with Firefox - please read for details.
Hi,

Using the latest version of FF, I've come across what I believe is a bug-related-problem that only occurs when in standards compliant mode - that is to say, when in quirks mode, the DOM script works fine.

So if I have this doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

The script works in FF and IE6. On the flip side, if I have this doctype:

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

or

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">


The script does not work in FF, but it does continue to work in IE6. The scripts purpose is to even out <div> heights - a common problem with CSS layouts.


THE SCRIPT:
matchHeight=function(){

var divs,contDivs,maxHeight,divHeight,d;

divs=document.getElementsByTagName('div');

contDivs=[];
maxHeight=0;

for(var i=0;i<divs.length;i++){

if(/\bcontainer\b/.test(divs.className)){

d=divs;
contDivs[contDivs.length]=d;

if(d.offsetHeight){

divHeight=d.offsetHeight;

}

else if(d.style.pixelHeight){

divHeight=d.style.pixelHeight;

}

maxHeight=Math.max(maxHeight,divHeight);
}

}


for(var i=0;i<contDivs.length;i++){

contDivs.style.height=maxHeight;

}

}

window.onload=function(){

if(document.getElementsByTagName){
matchHeight();
}

}

----------------------------------------
Stefan Mischook

Video Tutorial Store | Web Templates
----------------------------------------
[Edit 8 times, last edit by admin at Mar 30, 2006 8:54:53 AM]
[Mar 30, 2006 8:37:04 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male admin
Advanced Member
Member's Avatar


Joined: Jun 14, 2003
Post Count: 2940
Status: Offline
Reply to this Post  Reply with Quote 
Re: Javascript / DOM bug with Firefox - please read for details.
CONTINUED FROM ABOVE:

My markup contains two <div>'s that are tagged with the class of 'container':

<div id="centerDoc" class="container"> ... </div>

<div class="mainmenu" class="container"> ...</div> ... </div>

The script iterates through the DOM and collects references of any <div> with the class of container and then does a little math to match their heights evening out the <div>s heights.

Anyway, the script simply does not work in FF when I use a proper doctype .. any ideas what could be wrong? confused

...

Problem solved. Needid to change this line:

contDivs.style.height=maxHeight;


to

contDivs.style.height=maxHeight + "px";


biggrin

WHY?

I got this reminder from a guy at mozilla:

"in standards compliace mode Firefox needs the unit, because not having a unit doesn't comply to the standards you see (is that maxheight em's, pixels, points?) IE of course just does whatever it feels like, as usual."

-

Ah, good old IE ... just like an overly forgiving mother covering up and making excuses for your mistakes!

;)

Would you guys be interested in a little video on how to use this script?

Thanks,

Stef
----------------------------------------
Stefan Mischook

Video Tutorial Store | Web Templates
----------------------------------------
[Edit 4 times, last edit by admin at Mar 30, 2006 9:02:19 AM]
[Mar 30, 2006 8:47:45 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male shelfimage
Advanced Member
Member's Avatar

USA
Joined: Mar 24, 2005
Post Count: 3000
Status: Offline
Reply to this Post  Reply with Quote 
Re: Javascript / DOM bug with Firefox - please read for details.
Were you able to test this in IE7b2 before adding the measurement unit, px? If so, did it work in IE7?

2nd Q:
When would you need this? I remember a post of yours from mid 2005 related to this subject... But, don't recall in what situation a js script is the only or preferred solution for the css problem you reported.
----------------------------------------
"The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo
Save the developers<!>
Maine Webworks
[Mar 30, 2006 11:14:22 AM] Show Printable Version of Post    View Member Profile    Send Private Message    mainewebworks    mainewebworks [Link] Report threatening or abusive post: please login first  Go to top 
Male tpattison
Advanced Member
Member's Avatar

UK
Joined: Dec 29, 2004
Post Count: 1662
Status: Offline
Reply to this Post  Reply with Quote 
Re: Javascript / DOM bug with Firefox - please read for details.
The script sets all columns to the height of the largest column. We all know that it is virtually impossible to really have DIVs the same height, without putting in fixed height values (which isn't good for people who set large default font sizes).
----------------------------------------
Pavonis Mons | Listen of the week: "Residue of Desire" by Acumen
[Mar 30, 2006 11:34:46 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male admin
Advanced Member
Member's Avatar


Joined: Jun 14, 2003
Post Count: 2940
Status: Offline
Reply to this Post  Reply with Quote 
Re: Javascript / DOM bug with Firefox - please read for details.
"Were you able to test this in IE7b2 before adding the measurement unit, px? If so, did it work in IE7?"

I havent' test in IE 7.

Matching <div> heights is a pain in the butt and this little script solves the problem without having to hack around with CSS tricks ...

Do you guys want a video on applying this or is it clear enough?

Stef
----------------------------------------
Stefan Mischook

Video Tutorial Store | Web Templates
[Mar 30, 2006 3:05:07 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male billyboy
Advanced Member
Member's Avatar


Joined: Sep 3, 2005
Post Count: 2206
Status: Offline
Reply to this Post  Reply with Quote 
Re: Javascript / DOM bug with Firefox - please read for details.
Well I thought I'd try this on an existing layout so I pasted the code between script tags into the head of an existing page that has columns, added a container class to each of them and.... do I need to add something, change a variable to get it to work?
----------------------------------------
Quiquid latine dictum sit altum viditur
[Mar 31, 2006 4:39:22 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male tpattison
Advanced Member
Member's Avatar

UK
Joined: Dec 29, 2004
Post Count: 1662
Status: Offline
Reply to this Post  Reply with Quote 
Re: Javascript / DOM bug with Firefox - please read for details.
window.onload=function()


This seems a bit strange. Shouldn't you put onload="matchHeight()" in the body tag?

And functions should be defined like this:

function name() {
.....
}
----------------------------------------
Pavonis Mons | Listen of the week: "Residue of Desire" by Acumen
[Mar 31, 2006 7:32:00 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male admin
Advanced Member
Member's Avatar


Joined: Jun 14, 2003
Post Count: 2940
Status: Offline
Reply to this Post  Reply with Quote 
Re: Javascript / DOM bug with Firefox - please read for details.
That is what you call an 'anonymous' function.

The advantage of anonymous functions is that it allows you to easily access variables within its' parent function.

It is like Java's anonymous inner class - if that helps at all?
----------------------------------------
Stefan Mischook

Video Tutorial Store | Web Templates
[Mar 31, 2006 10:17:10 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male chichilatte
Stranger




Joined: Jul 26, 2006
Post Count: 1
Status: Offline
Reply to this Post  Reply with Quote 
Re: Javascript / DOM bug with Firefox - please read for details.
Well I thought I'd try this on an existing layout so I pasted the code between script tags into the head of an existing page that has columns, added a container class to each of them and.... do I need to add something, change a variable to get it to work?



This script seems to be incomplete and broken. i've recoded it to work. how's about this...

Array.prototype.inArray = function (value)
// Returns true if the passed value is found in the
// array. Returns false if it is not.
{
var i;
for (i=0; i < this.length; i++) {
if (this === value) {
return true;
}
}
return false;
};

function matchHeight(group){

var divs,contDivs,maxHeight,divHeight,d;

divs=document.getElementsByTagName('div');

contDivs=[];
maxHeight=0;

for (var i=0; i<divs.length; i++){
var d=divs;
if(d.className.split(' ').inArray(group) ){
contDivs.push(d);

var divHeight=0;
if(d.offsetHeight){
divHeight=d.offsetHeight;
}
else if(d.style.pixelHeight){
divHeight=d.style.pixelHeight;
}

maxHeight=Math.max(maxHeight,divHeight);
}

}

for(var i=0;i<contDivs.length;i++){
contDivs.style.height=maxHeight+"px";
}
}

window.onload=function(){
if(document.getElementsByTagName){
matchHeight('group1');
}
}




I also put in a parameter to the matchHeight function so you can say which bunch of divs you want to make the same height. For example...

<style>
.menuContainer {
background-color:#f8a;
float: left;
}
.pictureContainer {
background-color:#79e;
float: left;
}
</style>

<div class="menuContainer group1">menu</div>
<div class="pictureContainer group1">picture<br/>picture<br/>picture</div>



and you'd run it by calling matchHeight('group1')

(this relies on the happy fact that you can give a div more than one class).
[Jul 26, 2006 9:16:20 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male billyboy
Advanced Member
Member's Avatar


Joined: Sep 3, 2005
Post Count: 2206
Status: Offline
Reply to this Post  Reply with Quote 
Re: Javascript / DOM bug with Firefox - please read for details.
I'm glad you dug this up, I realize now why Stef's script wasn't working (yours won't work either as posted, and I ran into the same problem when trying to post a javascript code). Notice how both are italicized? The forum uses BBcode and in BBcode [ i ] means italics. Since the script contains [ i ] it got eaten and rendered the rest in italics.

Source files containing the full code that works can be downloaded from the article and tutorial The Matching Columns Script: Matching CSS div Heights
I also put in a parameter to the matchHeight function so you can say which bunch of divs you want to make the same height.

The orginal code already has the ability of specifying which divs you want equal height by adding the class"column".
----------------------------------------
Quiquid latine dictum sit altum viditur
----------------------------------------
[Edit 2 times, last edit by billyboy at Jul 27, 2006 7:16:25 AM]
[Jul 26, 2006 10:30:50 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
[ Jump to Last Post ]
Show Printable Version of Thread  Post new Thread

RSS feeds Current timezone is GMT
May 23, 2013 3:46:42 AM

Powered by mvnForum 1.2.1 GA (Build: 20 November 2008)
Copyright © 2002-2008 by MyVietnam.net