• Eugene (unregistered)

    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)  

  • Nerf (unregistered)

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

  • (cs)
    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


    <font face="tahoma,arial,helvetica,sans-serif">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? :)



    </font>
  • Ian (unregistered) in reply to Eugene

    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.

  • (cs) in reply to xrT

    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

  • (cs) in reply to Eugene
    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?
  • (cs) in reply to Eugene
    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. 

  • (cs) 
    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.
  • Drak (unregistered) in reply to ikegami

    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.

  • Wolven (unregistered)

    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...

  • (cs) in reply to Wolven

    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). 

  • aikii (unregistered)

    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.


    BTW, as far as I know, no browser redraws anything until you exit your javascript processing. That's why browsers becomes unresponsive when a javascript does an infinite loop ( well, if a javascript process takes too long, firefox allows the user to 'kill' it. Don't know if IE7 comes with that feature, I hope it's the case ). To animate anything you need to give control back to the browser after each step, and setup a callback with setTimeout.

  • Theo (unregistered) in reply to SilverDirk

    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 ?)
     

  • ratified (unregistered)

    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

    content
    is nicer than that ugly JS crap, isn't it?
  • ratified (unregistered) in reply to ratified

    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?

  • dsfgsddsfgsdfgdsffg (unregistered) in reply to ratified

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

  • Jon Haugsand (unregistered) in reply to Eugene
    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. 

  • noname (unregistered) in reply to ratified

    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.

  • Anon (unregistered) in reply to noname

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

  • CornedBee (unregistered) in reply to noname

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

  • reinis (unregistered)
    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.
  • (cs) in reply to reinis
    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 :)
     

  • Anonymous (unregistered)

    Pretty weak WTF.

  • Peter Hickman (unregistered) in reply to reinis
    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 :(

     

  • (cs) in reply to Ian
    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.
  • (cs) in reply to Volmarias

    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???

  • Big Oh (unregistered)

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

  • (cs) in reply to Big Oh

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

  • Anonymous (unregistered) in reply to CodeRage

    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.

  • Lars (unregistered) in reply to pauluskc
    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.
  • (cs) in reply to pauluskc

    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...

  • (cs) in reply to pauluskc
    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.
  • Dazed (unregistered) in reply to Eugene
    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.)

  • (cs) in reply to phelyan
    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.
  • Tom Dibble (unregistered)
    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 ..."


    Um, no, probably more the fault of the code.  The spacer height probably starts off as some non-0 value.  Say it starts off at 300.  Say your mobile phone is 240 pixels tall, with a window height of 200 pixels.  How many times do you have to increment spacer.style.height until it gets to 150?

    My guess is that eventually you give it a target size in pixels larger than it can handle, and it crashes.

    The final code is certainly more proper, although it still contains a bug when the window size is smaller than the 50px of the footer (while you could position the footer at -10px, you can't make the size of the spacer image -10px and not expect undefined behavior).  Realistically, the "spacer" should have a defined minimum size; presumably the content carries precedence over the footer, right?  I'd guess that if the window size is <100px you'll just want to hide the footer altogether.

    Does that happen?  Well, combine a popup ad window (sometimes very small, say 40px tall), and the default behavior of some browsers to open a new window as the same size as the last-closed window, and I imagine you can come up with a scenario where the user enters your site with an unintentionally small window.  Then, you're relying on their DOM object boundary-condition checking code for robustness, which is not generally 
    a good thing to rely on!

  • Tom Dibble (unregistered) in reply to Tom Dibble

    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 ...

  • Greytone (unregistered) in reply to Tom Dibble

    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'...

  • Anonymous (unregistered) in reply to ikegami
    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."
     

  • jrockway (unregistered) in reply to Ian

    "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 :)

  • (cs) in reply to Anonymous
    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. 

  • Anon Coward (unregistered) in reply to Eugene

    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.

  • Huggie (unregistered) in reply to Anonymous

    Anonymous:
    Pretty weak WTF.

    QFT
     

  • Mr. Accident (unregistered) in reply to Anonymous
    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.

  • (cs) in reply to Big Oh

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

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

  • AncientMariner (unregistered)

    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.

  • trav (unregistered) in reply to AncientMariner
    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.
     

  • (cs) in reply to AncientMariner

    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.

  • Anonymous (unregistered) in reply to Huggie

    Huggie:

    QFT 

     

    BFD. 

  • Terry Smith (unregistered)

    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.

     

  • Sjona (unregistered)

    Classic example of someone replacing a blunt stick with a sharper stick, while they should have been using CSS.

Leave a comment on “The Mentor”

Log In or post as a guest

Replying to comment #:

Log Out

« Return to Article