- Feature Articles
- CodeSOD
- Error'd
-
Forums
-
Other Articles
- Random Article
- Alex's Soapbox
- Announcements
- Best of…
- Best of Email
- Best of the Sidebar
- Bring Your Own Code
- Coded Smorgasbord
- Mandatory Fun Day
- Off Topic
- Representative Line
- News Roundup
- Editor's Soapbox
- Software on the Rocks
- Souvenir Potpourri
- Sponsor Post
- Tales from the Interview
- The Daily WTF: Live
- Virtudyne
Admin
There truly are some evil people in this world. And the majority of them are Javascript "programmers".
Admin
Believe it or not, I don't think this is bad considering some of the other javascript horrors I've seen but this guy should go learn CSS.
However, this is code is kinda old, before true CSS came around, it's understandable.
Admin
The fact that he is using the "Syle" property in the javascript, suggests to me that
a) CSS was definitely around, as I don't think javascript had ways to programatically manipulate stylesheets before they were invented.
b) the guy actually did know SOME css and just chose not to use it.
Regardless, the Javascript shouldn't have been copied & pasted all over the place, but put in one central location. "Don't repeat yourself" and "Once and only once" are good rules in any programming language.
Admin
document.getElementById(id).style.textDecoration = "underline";
umm, isn't this just modifying the stylesheet, which would not be possible before "true CSS" anyway?
Admin
I don't think this is actually true, because the person is programmatically setting the CSS attributes.
The one excuse/reason I see for this, is that the the style is being toggled for all elements, not just anchor tags. The special hover class aren't available on all tags. Soooo...this would provide the same functionality to the rest of the tags that is available for anchors.
Would be interesting to see if the coder is only using on anchors. In which case, they ought to be dragged into the street and shot.
Admin
It's a good thing he checks for the browser each time just in case the browser changed between the mouseover and the mouseout...
I also like the if/else if with no else.
Admin
Alex said that it would be only for links. But... anything is possible. (especially in the current setting)
Admin
Yay [<:o)], that post just gave me the first greenie ball [:D]
Admin
Why do you think the "if..else if" should have an "else"? You do realize this would not be the same logic as the statement given.
When both document.getElementId and document.all evaluate to false, what good would the else be? Writing to a random DOM node?
Admin
Yes it is. :hover works on every element. Though, some retarded browsers (read: IE) only support it for anchors.
Admin
I think you mean "HTML Programmers"
Admin
<!--StartFragment -->This is not true. :hover and other pseudo-classes *are* available on all tags, but IE doesn't recognize them. Go ahead, try it in Firefox with a div or what have you.
Here's the spec: http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes
Of course, this code is still a valid workaround for IE if you're trying to use hover attributes on non-anchor elements... but that doesn't meen its good, for all the reasons given above.
Admin
It is the "logic...as given" I'm taking issue with.
Typically, that code is testing for the browser. In my experience, there's IE and everyone else.
What browser supports neither .getElementById nor .all? I'm not being a wiseass, I simply haven't encountered this (yet).
Admin
Yes, the getElementById() method definitely indicates recent history.
Admin
Ah the joys of pseudo-compliant browsers and incomplete standards. I particularily like the fact that I have to have a hidden text field in one of my ASP.NET applications cause IE doesn't fire off the button-click event with single text-inputs (http://aspnet.4guysfromrolla.com/articles/060805-1.aspx). Of course, that's also cause the W3 specs don't get compeltely specific there either :(
Admin
Unless my memory is sorely lacking, Netscape 4 didn't understand getElementById.
However, you never know what atrocities of browsers might access your site. It's better to be safe than sorry, and this particular thing I really can't take offence at.
The "original" variable, though ...
Admin
Hmm...
As I remember, <FONT face="Courier New" size=2>document.all</FONT> check will never work because IE has <FONT face="Courier New" size=2>document.getElementById()</FONT> as well...
--
I hate Captcha!
Admin
No, it is creating an inline style attribute, which overrides the stylesheet (if there is one present). Style attributes (inline styles) win out in the "specificity" test of the cascade over element, class and id selectors.
Admin
IE4 had document.all; document.getElementByID didn't happen until IE5.
Admin
Given all the crappy browsers out there, and even scrapper scripting engines running on them and crappy DOM implementations... I'm not really excited by this wtf.
It would be fun to see how much the browser pegs the CPU out on a paragraph that has a lot of links when the user is rolling the mouse around the page.
Admin
My javascript skills is a little rusty, but it seems that the "original" variable is a global variable available for everyone. That's one ugly-ass race condition, and I know that on an ideal situation it should never happen a mixup between controls, but it's javascript it will fail whenever it can. I think it might be in part responsible of the source of the "stick" and "flip" bug.
Admin
Type in google "Changing Links' Color" and the first thing you've got is:
http://www.webreference.com/js/tips/000103.html
which is kinda of what we have here... [;)]
Admin
What are the colored balls for? I demand at least two balls!!.. [:@]and preferably not blue. [;)]
Admin
If it wen't for the fact that he is Using Java Script to manipulate the CSS of the page you might have a point. However you don't because he is dorectly editing the style in a way that is identical in effect to setting it with CSS. The only difference if he had used CSS would be that the site was easy to maintain and more efficient but these are obvioulsy not important requirements!
Admin
Maybe the "programmer" only knew CSS 1. An assumption based on that :hover wasn't included in CSS 1.
/Mirandir
Admin
IE 4 and Netscape 4 are two examples. Although they're ancient, people still use them.
Admin
now, that's a WTF.
Admin
IE4 and Netscape 4.X are not relevant browsers anymore. I pity the fool who gets a stubborn client that wants a site to work in those.
The modern browsers in which any site should work properly:
IE6
Gecko browsers (Firefox, Mozilla)
Opera 7+
Safari*
*) Safari has a nasty bug that precludes block elements from triggering overflow. Only text can cause scrolling. Use overflow:auto|scroll with caution.
Browsers in which a site could work properly:
IE5.5/Win (a little less than 100% of intended result, due to broken box model and some unsupported js)
IE5.2/mac (with some work, 100% of intended result, sometimes with CSS escape hack)
Browsers that should not be supported by anyone at all:
IE4
Netscape 4.N
So in effect, the WTF seems like very, very old code, because all relevant browsers support proper CSS and getElementById().
As for the usage of the orginial flag; if I create switches of that kind, I prefer storing the original data in a physical place, rather than forking the code. Sometimes an attribute (for img mouseovers, swapping the src and lowsrc is handy), sometimes a quick map/object. Keeps my code free of all those nasty if that else that else sch else so forks.
And yes, I am a javascript 'programmer' :). And yes, I know how JS relates to 'upper class' languages, but I enjoy the fact that it interacts with something graphical, making the interface tick in fancy ways.
Admin
That code reminds me of the Javascript that Adobe Imagestyler used to create for hovering over links and such. It was a hellacious mess and the single reason I stopped using ImageStyler and learned how to do such evil things "the hard way."
Admin
Haha, I find it particularly funny that people make fun of Javascript obscurities when their own forum needs Javascript for simple "next" and "previous" buttons.
Admin
Welcome to the WTF that is ASP.NET...
Admin
God, lay off the forum already, practically every single thread since Alex switched has someone complaining or making a crack about it. It's old news, dude.
This is fairly old code, but I'm almost certain it's copy-pasted from old pages into a new site. Why do you think we see shitty old html/js hacks in new pages? Because someone copy-pasted from somewhere else and it worked well enough! And the cycle of ignorance continues.
You're giving him too much credit; I doubt the guy ever considered any broswers except his own.
Also, hover-underlining everything just for the hell of it is the stupidest non-flash web deisgn feature I can think of. Okay, and maybe absolutely positioning and sizing everything with pixel measures. Sites that do either anger me greatly.
At least he isn't programmatically inserting a u tag or a font tag around it. That's horror.
Just for flamebait:
If Netscape didn't piss away 6 years of wanking trying to create the perfect browser with no advertising or support before Firebird/fox appeared and swept bloated Mozilla away in the ratings, maybe IE would have improved much earlier in the way that it's slated to in the near future. Instead for years we were stuck with bloated, buggy 4.7; bloated, half-finished Mozilla (incl. NS6/7); and buggy bundled IE 6.
Admin
This is hardly a WTF, this is just crappy code.
Admin
<FONT face=Arial size=2>
</FONT><FONT face=Arial size=2>All WTF's are crappy code, but not all crappy code is a WTF. This is clearly a case of WTF.</FONT>
<FONT face=Arial size=2>Need I go on?</FONT>
Admin
This is just sad...
And yes, these captchas are not colorblind-friendly
Admin
According to th elink to the specs posted elsewhere on this forum:
Interactive user agents sometimes change the rendering in response to user actions. CSS provides three pseudo-classes for common cases:
... (snip, this speaks about hover, active and focus pseudo classes)
CSS doesn't define which elements may be in the above states, or how the states are entered and left. Scripting may change whether elements react to user events or not, and different devices and UAs may have different ways of pointing to, or activating elements.
Seems to me that IE is in this case not retarted, but just implemented differently.
Drak
Admin
Oh yeah? I can think of worse.
We had a HTML page stored on the local shared drive at work, which had links to all sorts of very useful information. But, it took five minutes to open on a 700MHz 128Mb computer.
This was my own personal WTF. Managed to convince the manager to let me play with it, took out all 228 Java applets that were loaded each time the page opened.
Loading reduced from 300 seconds to about 0.01 seconds.
Anyone want to guess what the applets did?
Any guesses?
Changed colour when you moved the mouse over it. Admittedly, they were quite nice colours, with gradient shading and what not, but a five minute load time? (Mozilla's Java VM crunched....)
And that's why I had to learn what CSS was. So, they lost the pretty translucency effects, but gosh, it's a link
Admin
Oh, the applets also acted as a link when clicked on btw. Grrrr, can't edit.
Admin
If the links were event driven in elements such as SPAN and DIV, then surely :hover doesn't work in Internet Explorer, as that only plays nicely with A?
In which case, the programmer had the right idea in using JavaScript... but still should be shot for the terrible implementation.
If :hover isn't available because of non anchor elements being utilised, then he should've either added onmouseover and onmouseout events to the elements to change the CSS class and left the style in the stylesheet.
That said... if thet were anchor elements, then he should be shot, hung, drawn, quartered, and shot again. I'm a pacifist really... but he gives UI programmers a very bad name and taints ECMA as a result.
Admin
The real WTF here is "990000" and "000066" aren't valid colour names and should be "#990000" and "#000066".
Admin
<html>
<head>
<style>
a.dummylink
{
text-decoration:none;
color:black;
}
a.dummylink:hover
{
cursor: default;
border: 1pt solid black;
}
</style>
</head>
<body>
this is <a class="dummylink" href=BLOCKED SCRIPTvoid(0);> plain text with a hover style</a> for all of the kids to enjoy.
</body>
</html>
Admin
the "blocked script" above should say
j a v a s c r i p t : v o i d ( 0 );
Admin
Same exact thing I was thinking when I saw this.... "he musta ripped this code from somewhere"
Admin
This method isn't completely retarded, actually. Using the inline stylesheet properties of an element to change it's appearance works well and not only on anchors but other tags as well. What's retarted here is that it's not implemented properly.
JavaScript is a great scripting language and I prefer it over vbscript, php and even python. One of it's greatest strengths is the way you can extend functionality of existing (natively implemented) objects.
A better way of doing things would be to simply add the changeColor function to the element in question, making it a member function. You could even add the function to the prototype of the Element object (or HTMLElement or whatever it's called on your browser:) making it available to all elements. You can also abuse the name attribute to give multiple elements a certain name and have a javascript function select all elements with that name, and then add the event handlers.
I use custom tag attributes to identify wich stylesheet classes to apply on mouse over and mouse out. It's possible to add more than one style class to an element, so that doesn't even interfere with any class assigning you might be doing anyway.
And yes, there's still a shitload of things wrong with my methods. It's slow, and it's still not very readable. But then again, maybe you should use XML and XSL, wich pretty much solves the readbility content wise anyway.
Admin
uh... yeah .... I guess you could use custom elements, javascript, XML, and XSL .... or you could be a simpleton like myself and just use CCS.
Admin
Apart from all the other aspects why this is a WTF, what about the fact that he choose to implement a change-color function at all?
People above have bitched about the flag variable being global, but isn't it completely retarded to use a flag variable at all? Should there not be a function to highlight and one to un-highlight, one to be called when the mouse enters the element and the other when it leaves?
Admin
Don't come complaining if your eyes aren't w3-compliant.
Admin
Except that's about as meaningful as saying that you prefer drinking beetle juice to combing your hair with a garden hose. There's practically no overlap between what { PHP, Python } can do and what JS can do.
Admin
Zackly. JavaScript/JScript/ECMAScript is a relatively weak language; it's the browser-side object model and event bindings that are kewl -- whatever language gives one access to them. (Server-side drag'n'drop would be tree-mend-us pain to code, I'd think.)
Admin
There is, of course, JScript for ASP. Which I personally prefer over the clunky VB.