/    Sign up×
Community /Pin to ProfileBookmark

childnode loop in IE6

Copy linkTweet thisAlerts:
Feb 08.2012

Hello

I was wondering why the following code takes up to a few seconds to process in IE, but almost instant in firefox.

[CODE]

var getchild = document.getElementById(‘specselector’).getElementsByTagName(‘div’);
for (x=1;x<=100;x++){
if (getchild[x]){getchild[x].style.backgroundColor = ”;}
}
[/CODE]

It’s function is to remove all background colours from the various divs that are selectable in a rather large (sortof) menu system. I know a few seconds delay doesn’t sound serious, but it’s a delay that will keep happening over and over, depending on where you are in the larger code. Really annoying.

Does anyone have a faster workaround/idea?

Thanks,
Nils

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@Logic_AliFeb 08.2012 — You can try it like this but I'm not guaranteeing anything:

<i>
</i>var getchild = document.getElementById('specselector').getElementsByTagName('div'),
x,
cn;

for ( x = 1; ( cn = getchild[ x ] ); x++ ) <br/>
cn.style.backgroundColor = ""; <br/>
Copy linkTweet thisAlerts:
@rtretheweyFeb 08.2012 — And I think you need to use:

getchild[x].style.backgroundColor = 'transparent';

or

getchild[x].style.backgroundColor = 'inherit';

to achieve the effect you're after. Setting backgroundColor to '' is invalid and it might be ignored.
Copy linkTweet thisAlerts:
@mrhooFeb 08.2012 — Old IE's reflow the whole page on [B]every [/B]iteration of the loop.

If you can separate the code for IE6,you could deep clone the parent, replace the styles offscreen, and swap the clone for the parent, reducing the reflows to one.

Or you could replace the innerHTML of the parent with a regular expression replace.

In general, its a bad idea to have hundreds of inline style assignments on a page. Do they all need unique background colors? You may find a better solution by using classes and stylesheets.

PS- It is perfectly valid to set an inline style property to the empty string.
Copy linkTweet thisAlerts:
@Nils84authorFeb 09.2012 — Thanks everyone for your replies. So much of this seems to be working around Mircosoft quirks.

I've now solved the issue by setting up a check to see which section of the menu system is currently visible, and then only applying the original code i had to the elements inside that particular div. Still really the same code, but only has to process approx. 1/8th of the number of divs.

Thanks for the point about 'transparent' too - I'd forgotten about that, I'd been using it elsewhere but must have temporarily slipped my mind. ?
×

Success!

Help @Nils84 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...