Comment On The Mentor

Which set of JS code crashed the cell phone? The looping code or the one-liner?

Furthermore, wouldn't it be easier just to layout the page such that the footer appears OUTSIDE the table? Thats what I normally do.

Of course, I've never written HTML that passes W3C validation bullsh#t, mostly because it never looks the same anyway, and the hoops you have to jump through to make it work breaks what I try to do with it, anyway. (It has to be just SO, and degrade properly, too)  

I'm guessing this code comes from EBay. I've had problems with a collapsing footer when visiting that site in Opera.

Tim Gallagher:

window.onload = function() {
	var winHeight = getWindowHeight();
	var spacer = document.getElementById('spacer');
	spacer.style.marginTop = "0px";
	spacer.style.height = "15px";
	var i = 1;
	while (spacer.style.height != (winHeight-50)+"px") {
		spacer.style.height = i + "px";
		i++;
	}
};

...

Moral of the story?

Just because a solution does what you want, doesn't mean it's a solution that does what you need

Is that code supposed to 'animate' the footer going down the page? If it does then it needs to have some sort of delay before the loop continues...

Also, why is it only in CODs that we have moral of the story? :)

If writing W3C compliant HTML code breaks your layout, then you're either using a broken browser to develop with (i.e IE) or you're an idiot. Try harder.

I think rather than

window.onload = document.getElementById('spacer').style.height = getWindowHeight()+"px";

a better solution might be

window.onload = document.getElementById('spacer').style.height = (getWindowHeight() - 50)+"px";

Seems to me that there is a bug. Or have I missed something? 

Darryl

Anonymous:

Of course, I've never written HTML that passes W3C validation bullsh#t, mostly because it never looks the same anyway, and the hoops you have to jump through to make it work breaks what I try to do with it, anyway. (It has to be just SO, and degrade properly, too)

Keep in mind that if IE would support the "W3C bullsh#t" you'd be able to use "position:fixed" in your stylesheet to plop the footer at exactly the bottom of the viewport with no javascript.

What happens when you resize the browser while viewing one of these pages?

Anonymous:

Which set of JS code crashed the cell phone? The looping code or the one-liner?

Furthermore, wouldn't it be easier just to layout the page such that the footer appears OUTSIDE the table? Thats what I normally do.

Of course, I've never written HTML that passes W3C validation bullsh#t, mostly because it never looks the same anyway, and the hoops you have to jump through to make it work breaks what I try to do with it, anyway. (It has to be just SO, and degrade properly, too)  

 

It was the original code that crashed the phone. 

window.onload = document.getElementById('spacer').style.height = getWindowHeight()+"px";

Did you claim the above works?

• The space occupies the entire window height, leaving no space for the footer.


• Shouldn't the that be of the form windows.onload = function () { ... }?


• The spacer size doesn't get adjusted when the window is resized.

It shouldn't animate anyway in IE, as IE evaluates the entire script before redrawing the page (exception: window.status is updated 'live'). Maybe other browsers do this though, which imho is a bad thing because you can generate a huge amount of flicker that way, even for 'faster' scripts.

There does not have to be a bug if 'getWindowHeight()' already removes the size of the footer, but as we cannot see that code, we don't know.

Seeing as we didn't get the whole HTML page, we do not know if there is as resize attribute on body, or a window.onresize somewhere else in the script.

Whats wrong with setting the margin people?

#footer {
   margin-top : 1px;
}

PS. Any chance of getting a plaintext input box so I could use BBCode? This WYSIWYG thing sucks, keeps entering lots of random lines amongst other things...

Anonymous:

PS. Any chance of getting a plaintext input box so I could use BBCode? This WYSIWYG thing sucks, keeps entering lots of random lines amongst other things...

I found it adds new lines mostly when you use backspace or delete to edit something at the end of a line. It's wierd.

Anyway, if you are logged in and go to your preferences, there's an option for "plain text" editor. Not sure if it works though... I just changed mine to that, but I still got the crappy WYSIWYG thing (though it said it could take 10 minutes to change settings). 

Hey, perhaps this mentor is one step ahead of his time. He just codes as the human brain works - just imagine you're on photoshop and you want to align some layers by dragging with the mouse ( and you haven't found any 'align to grid' option or whatever ). You just drag the thing one pixel at a time, until it's in place.

SilverDirk:

Keep in mind that if IE would support the "W3C bullsh#t" you'd be able to use "position:fixed" in your stylesheet to plop the footer at exactly the bottom of the viewport with no javascript.

Yes exactly. That would be the ideal, standardised, documented solution. You just put your piece of HTML code in a named DIV, and all the layout / presensation layer of your web app is handled by the CSS. It's a far better solution in terms of scalability and personalisation of the site, and works like a charm in a real browser, say, Firefox.

CAPTCHA: hacker (WTF ?)
 

The two real WTFs are:

· The IE<7 doesn't support the CSS position: fixed - the effect doesn't work for people without/with disabled JavaScript anyway.
· Solving a style problem with a scripting language

is nicer than that ugly JS crap, isn't it?

forum software ...


The two real WTFs are:

· The IE<7 doesn't support the CSS position: fixed - the effect doesn't work for people without/with disabled JavaScript anyway.
· Solving a style problem with a scripting language

<div style="position:fixed; bottom:0; top:auto;">content</div> is nicer than that ugly JS crap, isn't it?

Ah yes, the good old positionfixed CSS property.  I think people mean position: fixed :)

Anonymous:

Of course, I've never written HTML that passes W3C validation bullsh#t, mostly because it never looks the same anyway, and the hoops you have to jump through to make it work breaks what I try to do with it, anyway. (It has to be just SO, and degrade properly, too)  

 

This looks like a more serious WTF.  Struggling with noncompliant browsers is of course hard.  Struggling with non-compliant HTML/CSS webpages is tenfolds harder. 

The real wtf is who the hell publicly ridicules someone that is refered to as the Mentor. We all make stupid mistakes (except me of course), but I wouldn't expect someone I'd 'mentored' to make me look like a fool. Either this mentor guy wasn't all that good (he is described as amazing) or the guy delivering the code snippet is just a jerk.

I think you'll find that the "amazing" reference was sarcastic. 

Or one of us doesn't understand what sarcasm means.

Keep in mind that if IE would support the "W3C bullsh#t" you'd be able to use "positionfixed" in your stylesheet to plop the footer at exactly the bottom of the viewport with no javascript.

There is an easy CSS hack to make position: fixed work in IE (you can google it). I always get annoyed when I see people using JavaScript to emulate it.

Anonymous:

Keep in mind that if IE would support the "W3C bullsh#t" you'd be able to use "positionfixed" in your stylesheet to plop the footer at exactly the bottom of the viewport with no javascript.

There is an easy CSS hack to make position: fixed work in IE (you can google it). I always get annoyed when I see people using JavaScript to emulate it.

I wouldn't call it easy. Besides - it makes relative positions "fixed" as well :)
 

Pretty weak WTF.

Anonymous:

Keep in mind that if IE would support the "W3C bullsh#t" you'd be able to use "positionfixed" in your stylesheet to plop the footer at exactly the bottom of the viewport with no javascript.

There is an easy CSS hack to make position: fixed work in IE (you can google it). I always get annoyed when I see people using JavaScript to emulate it.

Problem is that it doesn't always work. There is interaction between other elements that may have used the position: attribute. I spent many hours swearing after finding code that works fine until you try and use it outside the example pages.

In the end we wrote some Javascript :(

 

Anonymous:

If writing W3C compliant HTML code breaks your layout, then you're either using a broken browser to develop with (i.e IE) or you're an idiot. Try harder.

Quoted for truth (and great justice!)

Pick a doctype (sounds like you'd like HTML 4.01), validate, and validate often. Use a browser like Opera that actually has "validate" in the right click menu.

Trust me, validation is not hard at all to achieve if that's what you're working towards from the start. Not only that, but it will provide cleaner code, and will help
a bit in error checking.

Volmarias:

Anonymous:

If writing W3C compliant HTML code breaks your layout, then you're either using a broken browser to develop with (i.e IE) or you're an idiot. Try harder.

Quoted for truth (and great justice!)

Pick a doctype (sounds like you'd like HTML 4.01), validate, and validate often. Use a browser like Opera that actually has "validate" in the right click menu.

Trust me, validation is not hard at all to achieve if that's what you're working towards from the start. Not only that, but it will provide cleaner code, and will help
a bit in error checking.

Very correct.  I would recommend going for XHTML however, the slightly more stringent (sp?) requirements are actually healthy for you.  Plus, when the code is XHTML compliant, it can be translated more easily and is usually more cross-browser compliant.

And coming from a guy who has to develop html emails that have to look the same from ie to ff to hotmail to yahoo to gmail to outlook, internationally distributed and translated, it works out.

But no bashing intended - the browser manufacturers (aside from Opera) are rather forgiving of crappy HTML code and do a lot of assumptions and "fixes" for badly written code.  Another WTF (Which The Fuck?):  Did the browser coders do that to help out the lazy html coders of the world or because they themselves couldn't write good code and wanted to be sure that their end product could display their own crappy code?  Which the Fuck is that???

Wow, I had no idea that O(n) == O(1)

There is no WTF here, any decent implementation of JavaScript would optimize that loop away...

CodeRage:

There is no WTF here, any decent implementation of JavaScript would optimize that loop away...

Why would it be optimized away? The JS implementation cannot make the assumption that setting the height property has no side-effects.

pauluskc:

But no bashing intended - the browser manufacturers (aside from Opera) are rather forgiving of crappy HTML code and do a lot of assumptions and "fixes" for badly written code.

Opera is forgiving and does code corrections too, just like the other browsers. There is way too much crappy code on the web to render everything strictly.

Problem is that quite often your customers will use IE, especially if you're coding for the computer illiterate. So having something that looks cruddy in IE can not be excused with a shrug and the remark that people should use proper browsers. That really doesn't work in the real world, especially if you're dealing with a webapp that's being used by marketing drones/CSRs, who probably don't do much more with computers than surf the InterTubes and chat on MSN...

pauluskc:

But no bashing intended - the browser manufacturers (aside from Opera) are rather forgiving of crappy HTML code and do a lot of assumptions and "fixes" for badly written code.  Another WTF (Which The Fuck?):  Did the browser coders do that to help out the lazy html coders of the world or because they themselves couldn't write good code and wanted to be sure that their end product could display their own crappy code?  Which the Fuck is that???

The former. If you pick up Newfangled Browser 3.14, and it turns your homepage into the steaming turd it should be, you're going to drop it and go back to ForgivingBrowser 8.76.

Basically, browsers have two modes. Strict, where they obey doctypes to the letter, and Quirks Mode, where they guess, and make assumptions on what you REALLY meant. If you're looking at someone's steaming turd and it looks nice, odds are the browser is in quirks mode.

Anonymous:

Of course, I've never written HTML that passes W3C validation bullsh#t

Well, well, well ... Joe turned up to make a contribution in person. (See today's other thread.)

phelyan:

Problem is that quite often your customers will use IE, especially if you're coding for the computer illiterate. So having something that looks cruddy in IE can not be excused with a shrug and the remark that people should use proper browsers. That really doesn't work in the real world, especially if you're dealing with a webapp that's being used by marketing drones/CSRs, who probably don't do much more with computers than surf the InterTubes and chat on MSN...

too too true :(

Even though I'm rewriting our product to be cross-browser compatable and use ajaxy web-2.0-y stuff, everyone's just going to use it in IE6 anyway for the next 3 years, in particular because all of our clients are corporate users.

Tim Gallagher:

window.onload = function() {
	var winHeight = getWindowHeight();
	var spacer = document.getElementById('spacer');
	spacer.style.marginTop = "0px";
	spacer.style.height = "15px";
	var i = 1;
	while (spacer.style.height != (winHeight-50)+"px") {
		spacer.style.height = i + "px";
		i++;
	}
};

[...]

Chris writes, "Just for fun I loaded on my mobile phone which has JavaScript and DOM support. It crashed. Probably more the fault of the browser's crummy JavaScript implementation, but all the same ..."

Duh, missed the line that set the spacer height to 15 in the sample.  Is it possible that your mobile phone browser starts off at something less than 65 pixels?  Possible, but I suppose that would still be a bug in the phone, unless the ivew port was really only 65 or fewer pixels tall ...

With all the talk relating to HTML standards ect. I thought I would take this opportunity to point out the garbage this site fills my JavaScript Console with... And I am using one of those so called 'proper browsers'...

ikegami:

window.onload = document.getElementById('spacer').style.height = getWindowHeight()+"px";

Did you claim the above works?

• The space occupies the entire window height, leaving no space for the footer.


• Shouldn't the that be of the form windows.onload = function () { ... }?


• The spacer size doesn't get adjusted when the window is resized.

Agreed.  At the moment this line is
executed, not at the moment that the onload event is triggered, two
things happen.  First, the spacer's height is set to a string like
"100px".  Second, window.onload is set to the same string. 
Then, when the onload event is triggered, we try to execute
window.onload, except it's not a function.

Submitter
Chris, not his mentor, ought to be the target of this WTF.  "Ha
ha, this other guy's code is so bad and I'm so much smarter."

 

"If writing W3C compliant HTML code breaks your layout, then you're either using a broken browser to develop with (i.e IE) or you're an idiot. Try harder."

 
You know what's strange is that I always develop my sites with Konqueror (and an HTML validator, of course), and then expect breakage on IE. But for some reason, that never happens. My valid sites always work fine with IE (even if I use AJAXy things from Prototype or Dojo). IE's certainly not a good browser, but if you code properly, things should work everywhere.

However, I've started mixing XML and XHTML (with XML namespaces), and that obviously breaks IE. Feature, I say :)

Anonymous:

Agreed.  At the moment this line is
executed, not at the moment that the onload event is triggered, two
things happen.  First, the spacer's height is set to a string like
"100px".  Second, window.onload is set to the same string. 
Then, when the onload event is triggered, we try to execute
window.onload, except it's not a function.

Submitter
Chris, not his mentor, ought to be the target of this WTF.  "Ha
ha, this other guy's code is so bad and I'm so much smarter."

I assumed that was just a transcription error. 

I'm also guessing that you're using HTML to try and lay out your pages.  Think about it, it stands for Hyper Text Markup Language.  It doesn't stand for Hyper Text Layout Language.  There are an order of better choices  to lay out pages, and it's not the W3C's fault if you're ignoring them.

Anonymous:

Pretty weak WTF.

QFT
 

Anonymous:

Agreed.  At the moment this line is
executed, not at the moment that the onload event is triggered, two
things happen.  First, the spacer's height is set to a string like
"100px".  Second, window.onload is set to the same string. 
Then, when the onload event is triggered, we try to execute
window.onload, except it's not a function.

Submitter
Chris, not his mentor, ought to be the target of this WTF.  "Ha
ha, this other guy's code is so bad and I'm so much smarter."

Correct. Furthermore, if (as is likely) this code is in a script in the document's head, document.getElementById('spacer')
will return null (as that part of the HTML will not yet be loaded), and
the code will simply produce an error.

Anonymous:

Wow, I had no idea that O(n) == O(1)

It does, but only for sufficiently small values of n.

It's easy to poke holes in the Mentor's code looking back at it from 2006. Nothing in the story mentions when the page was originally written or what the target browsers were when the Mentor wrote the page. If this was written in the NS3/4 IE4/5 era of 640 x 480 screens and 333MHz "barn-burner" PCs, this was not a bad way to get the footer to appear at the bottom of the page using a then-popular animation of "dropping" into place. Resizing a spacer image was about the only way to move things around on screen and place them precisely across browsers. Sometimes today's WTF is yesterday's really cool hack that made innovative use of the tools available when it was written.

Anonymous:

It's easy to poke holes in the Mentor's code looking back at it from 2006. Nothing in the story mentions when the page was originally written or what the target browsers were when the Mentor wrote the page. If this was written in the NS3/4 IE4/5 era of 640 x 480 screens and 333MHz "barn-burner" PCs, this was not a bad way to get the footer to appear at the bottom of the page using a then-popular animation of "dropping" into place. Resizing a spacer image was about the only way to move things around on screen and place them precisely across browsers. Sometimes today's WTF is yesterday's really cool hack that made innovative use of the tools available when it was written.

I agree, the wtf is pretty poor, did contain and still contains many inconsistancies.  The onload function would not affect "wherever the page was scrolled".

 The anti validation response is a total Joe-ism, and so are many of the other responses.
 

Using a resizing spacer to 'animate' a float-in footer may not be a WTF in itself (though if you ask me, it's a usability WTF – that would piss me right off), but setting the height to 15 then starting from 1 is definitely a WTF. If the browser redraws every 'frame' you're going to get a nasty jump at the start.

Huggie:

QFT 

 

BFD. 

Wow - mentored - that must have been nice.


The very first time I saw an 'array' - FORTRAN IV - 1972 - I asked the guy who's code it was what it, the array, was.

 
He wouldn't tell me.


It was an omen. It's always been every man for himself, devil take the hindmost in my career.

I found out about unit testing from a slash-dot article.  I once asked a stupid question and the guy I asked told my boss I was incompetent. I pointed out the Y2K problem to the instructor in a system analyst class in 1975 and was laughed at.

 I am damn careful to explain as much as I can to noobs - including the definition of an array once - 'it's an indexed variable' - every chance I get.

 
I read about the Resisters Club in the 60's  - run by Ted Nelson  by the way - their motto - 'Each one teach one'

NEVER ran into anything like that in real life.