Wriggling Mozilla- Redrawing Glitches in Netscape6
Code Comments
Problems with screen redraws have been around since Netscape Navigator 2 was a
pup.
It's old home week for Netscape users. Maybe you remember what happened when a user would
resize a page formatted with css positioning. Generally speaking, it was a mess. Like a
Salvadore Dali portrait, with noses where ears should be, and odd extra parts just about
anywhere.
In those days there was no good solution, just a bunch of more or less obnoxious workarounds. You could use up your virtual real-estate with tasteful warnings to the user, or you could reload the page after a resize, or pop up a message suggesting that the user reload. You mainly tried to avoid thinking about it, at least until you opened your e-mail. I hoped, with Netscape's new browser, that screen redraws would be automatic, and not a problem.
Imagine my embarassment- Netscape6 and Mozilla still show their end of the gene pool. When you change displayable style attributes on the fly, the Gecko browsers can cough up a furball. It's most noticable when you have elements with margins, borders and padding. Or if you change the font size. Or line height...
For instance, when you have a stack of div blocks, and you are showing and hiding them by switching their display attributes between none and block, you will often find that div number 3 has a halo, a tv screen ghost, which is the padding and margin left behind by div number 2. Something like the Cheshire cat's smile, but less amusing. If div 3 is bigger than div2, you may not see some of the lower part of div 3 at all.
If you futz around a while, max and min the window, say, or even scroll to the end and back home, it clears up and looks OK. But you know, it just won't do...
Fortunately, it is easy to fix, sort of. The funny thing is, you use what was broke in
Navigator to fix what's broke in N6. You resize the page. That seems to concentrate the
browser, tells it that you are serious
Actually, it forces the browser to redraw the whole screen, not just the parts Mozilla
thought needed drawing. Without the ghosts.
And you don't resize it by much. I experimented and settled on 10 pixels up and down. Or in and out, since you first shrink the page by 10 pixels, then, after you do your display stuff, you expand it by the same 10 pixels, north, south, east and west. Pull in your gut, then relax. Or, in script, precede the display change with:
window.resizeBy(-10,-10);
and follow it with: window.resizeBy(10,10);
If anything is changing on the display there won't be much to distract the eyeballs from it. Just a brief wriggle around the edges. Trust me, it's better than having your pages look like the newspaper they used to cut out the ransom note.
You won't find it happening in IE, which has always been the screen redrawing champ, so you ought to sniff out the browser before running the code. I show this below.
Stick it in anyplace you need it. I don't use it on every page, but it is easy to plug in when I do need it. And remember, this too shall pass, so keep these lines on their own, the better to remove them, someday. You can tell where you need it when you preview your pages in Netscape6 and SeaMonkey. You do preview your pages in Netscape and SeaMonkey, right?
I show here the code for a screen display change, and follow it with the code for the utility functions it uses.
If this is not the html page,or the script has not been included, you can see a demonstration at http://www.yankeeweb.net/_webshop/practical/tipsntricks/wriggle.html
Code
function showNews(e){
var who=Run.whoEver(e).title;
if(Yankee.iz('MOZ'))window.resizeBy(-10,-10);
who=document.getElementById(who);
who.style.display='block';
if(Yankee.iz('MOZ'))window.resizeBy(10,10);
}
/*
Run.whoEver(e) identifies the button that was clicked. (I show the code for Eve below.) Each button was given a title that is the same as the id of the element whose display property the button controls. That value (Run.whoEver(e).title) is assigned to who, so document.getElementById(who) is a reference to the paragraph or div the button controls.
who.style.display='block' displays the selection .
The two Yankee.iz('MOZ')) calls identify a Mozilla browser, and since you wouldn't have got this far without a browser that supports the DOM, you know it is N6 or Mozilla. The first call tightens up the display, the second relaxes it. So to speak. (Yankee.iz is shown after Eve)
*/
Utility code
Eve returns a reference to the element that triggered an event- in this case, the button that was clicked.
function Run.whoEver(e){
var trigger='';
if(!e && event.srcElement) trigger= event.srcElement;
else if(e.target) trigger= e.target;
return trigger;
}
Yankee.iz returns true if the case statement that corresponds to the argument is true. The double !! forces a boolean result.
function Yankee.iz(w){
var agt= navigator.userAgent.toLowerCase();
switch (wot){
case 'DOM': return !!(document.createElement);
case 'IE': return !!(agt.indexOf('msie')!=-1);
case 'MOZ': return !!(agt.indexOf('gecko')!=-1);
default: return false;
}
}
You can see a before and after page if you are still unsure of what the code does:
(It only affects in N6/Mozilla- IE shows no difference)
That's it for now- many happy returns!
More Articles