Yet another "Yet another poorly designed corporate website" corporate website!
-
Take a look at http://www.virtualpressoffice.com/CES/index.jsp with javascript disabled, and you'll see the search box has gone a bit wrong: it has been replaced by this text
type="text" name="SEARCH_STRING" value=" Search CESweb.org" class="pressform" ONFOCUS="if(this.value==' Search CESweb.org')this.value=''; headerRollOver('button_search', 'http://cesweb.org/global_images2005/3.0.button_search_r.gif');" ONBLUR="if(this.value=='')this.value=' Search CESweb.org'; headerRollOff('button_search', 'http://cesweb.org/global_images2005/3.0.button_search.gif');" >
When you view the source, it becomes clear why:
<td width="173" align="right">
<!-- Script for setting correct search box size -->
<script LANGUAGE="JavaScript">
<!--
if (is_nav4) {
document.write("<input size=20 ");
}
else if (is_mac) {
document.write("<input size=30 ");
}
else if (is_safari) {
document.write("<input size=25 ");
}
else {
document.write("<input size=34 ");
}
function checkSearch() {
var searchForm = document.searchCESWeb;
if(searchForm.SEARCH_STRING.value.search(/\S/) == -1) {
alert("Please enter text to search for.");
return;
}
searchForm.submit();
}
//-->
</script>
type="text" name="SEARCH_STRING" value=" Search CESweb.org" class="pressform"
ONFOCUS="if(this.value==' Search CESweb.org')this.value=''; headerRollOver('button_search', 'http://cesweb.org/global_images2005/3.0.button_search_r.gif');"
ONBLUR="if(this.value=='')this.value=' Search CESweb.org'; headerRollOff('button_search', 'http://cesweb.org/global_images2005/3.0.button_search.gif');"
> </td>
Pretty WTFy to include the tag opening in the script-generated code, instead of just the single parameter for the width, considering that it's static and never changes...
-
I like how they then tried to solve it - by setting the background colour of that text to a very dark purple. Surely it won't be long before they discover that it's even harder to see on a black background.
-
Actually, you need to know why that's done. The various browsers don't assign the same physical width to a text box when the size is determined by the size attribute. In order to guarantee visual alignment, you want the rendered text box to be the same pixel width every time, hence this nasty hack. The real trick to a uniform width is using CSS--but apparently they don't know how to do that.
-
@mrprogguy said:
Actually, you need to know why that's done. The various browsers don't assign the same physical width to a text box when the size is determined by the size attribute. In order to guarantee visual alignment, you want the rendered text box to be the same pixel width every time, hence this nasty hack. The real trick to a uniform width is using CSS--but apparently they don't know how to do that.
Nono, I agree, it's a reasonable thing to want to do, that's not the WTF. The real WTF is... well, let me demonstrate:
<td width="173" align="right">
<!-- Script for setting correct search box size -->
<script LANGUAGE="JavaScript">
<!--
if (is_nav4) {
document.write("<input size=20 ");
}
else if (is_mac) {
document.write("<input size=30 ");
}
else if (is_safari) {
document.write("<input size=25 ");
}
else {
document.write("<input size=34 ");
}
function checkSearch() {
var searchForm = document.searchCESWeb;
if(searchForm.SEARCH_STRING.value.search(/\S/) == -1) {
alert("Please enter text to search for.");
return;
}
searchForm.submit();
}
//-->
</script>
type="text" name="SEARCH_STRING"
WRONGO!!!! NO NO NO BAD CODE MONKEY YOU GET NO BANANA!!!1!
<td width="173" align="right">
<input
<!-- Script for setting correct search box size -->
<script LANGUAGE="JavaScript">
<!--
if (is_nav4) {
document.write("size=20 ");
}
else if (is_mac) {
document.write("size=30 ");
}
else if (is_safari) {
document.write("size=25 ");
}
else {
document.write("size=34 ");
}
function checkSearch() {
var searchForm = document.searchCESWeb;
if(searchForm.SEARCH_STRING.value.search(/\S/) == -1) {
alert("Please enter text to search for.");
return;
}
searchForm.submit();
}
//-->
</script>
type="text" name="SEARCH_STRING"
YES!!!!1!2! HAPPY HAPPY JOY JOY HAPPY HAPPY JOY JOY HAPPY HAPPY JOY JOY JOY !!!!3!
...if you see what I mean.
-
I'm certain DaveK is joking, but for some unknown reason I still have a really strong desire to point out that the comment after "
<input" will close the input element, causing the script to fail even when JavaScript is enabled.
-
I like how they've included HTML comments around the script, to ensure that it doesn't get output on browsers that can't deal with script tags. Yet they've failed to understand that if it does degrade in that way, it completely fails are produced broken HTML.
It's like, they were almost there, but their brains cut out just as they came up with the final idea.
-
Thats kind of a different way to do it i guess......
I mean, why not just use document.getElementById('x').size = 20
-
@SpoonMeiser said:
I like how they've included HTML comments around the script, to ensure that it doesn't get output on browsers that can't deal with script tags. Yet they've failed to understand that if it does degrade in that way, it completely fails are produced broken HTML.
It's like, they were almost there, but their brains cut out just as they came up with the final idea.
I'd say that it's far more likely that they have no idea why the HTML comments are there in the first place and just insert them because that's what all the examples they've ever seen show. People seem to think that JavaScript isn't a "real" programming language, and therefore, you can have the junior data-entry guy code-by-Google. I've had the distinct displeasure of try to break some of the folks around my work place from including the HTML comments in linked script files! That and trying to reason with the jokers who write things like onclick="javascript: doSomething()" who just cannot seem to understand the difference between the href and onclick attribute. (Not that I want them using href="javascript:..." either.)
