/Ugly/ + 'JavaScript'

A place for ugly, silly, or just-plain-crap JavaScript. Kindly supported by Web Design Agency, Imaginaire Digital in Nottingham.

Oracle Job Site JS - a new frontier in ugliness

One of the many highlights in oafcoreR121.js:

// Used for LOV. Should be removed when we move to new UIX LOV
function lov(a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, c, p)
{

And who needs CSS classes?

function makePressed(el) 
{
  with (el.style) 
  {
    borderLeft = "1px solid #555533";
    borderRight = "1px solid #ffffff";
    borderTop = "1px solid #555533";
    borderBottom = "1px solid #ffffff";
    paddingTop = "2px";
    paddingLeft = "2px";
    paddingBottom = "0px";
    paddingRight = "0px";
  }
}
//bug 9551575:Fix to avoid 'UNDEFINED' message warning box.
if(!message)
{
eval(decodeURI(document.getElementById(closeAnchorId).href));
return;
}

Thank goodness there’s a comment. Without it we might not understand what’s going on. Oh wait…

And awesome browser detection:

var ie5=document.all&&document.getElementById;
var ns6=document.getElementById&&!document.all;
Posted by Daniel on 10 Feb 2012 | linky

No errors here

<script type="text/javascript">
    function handleError() {
        return true;
    }
    window.onerror = handleError;
</script>
<script type="text/javascript" language="javascript">
    function doCallback1(param1, param2, param3) {
        Callback1.Callback(param1, param2, param3);
    }
    function doCallback2(param1, param2, param3) {
        Callback1.Callback(param1, param2, param3);
        Callback2.Callback(param1, param2, param3);
        Callback3.Callback(param1, param2, param3);
    }
    function doCallback3(param1, param2, param3) {
        Callback2.Callback(param1, param2, param3);
        Callback3.Callback(param1, param2, param3);
    }
    function InitLocation(division) {
        clbDivision.Callback(division);
    }
</script>

I’m not sure what’s worse - The fact that all JavaScript errors are silently ignored, doCallback2 having three callbacks and doCallback3 having two callbacks, or the use of globals (Callback1, Callback2, Callback3). The same site had JavaScript functions with names like “foo” and “bar”.

As a side note, an interesting oddity in JavaScript: When you return true in the window.onerror handler, this prevents the default event handler. This is the opposite to all the other DOM 0 events (such as onclick), where returning false prevents the default handler.

Posted by Daniel15 on 23 Dec 2011 | linky

Hating the back button, and exception abuse

Saw these snippets on the site of a company that provides “industry leading solutions”. Firstly a snippet that was in the <head> of every page, intentionally breaking the back button:

<script>window.history.forward(1);</script>

And there was also this function which abuses exceptions for control flow (I’m not too sure why):

function crossFrameScripting()
{
	// TT#157678 - Prevent Frame usage. (esamson)
	//if (AgentUtils.isIE)
	//{
		try
		{	
			if(self.document.domain.toString() != top.document.domain.toString())
			{
				throw "Access is denied";
			}
		}
		catch(exc) 
		{
			if (top != self)
			{
				top.location=self.location;
			}
		}
	//}
	// /TT#157678 - Prevent Frame usage. (esamson)
}
Posted by Web Agency on 22 Oct 2011 | linky

Links plus

Working on a recent project I kept coming across anchor tags like this:

<a href="#" onclick="visit_url(<?php echo $url; ?>)">

I was really curious as to what visit_url() would do, eventually I found it:

function visit_url(url) {
    window.location = url;
}
Posted by Gavin Logan (@tamewhale) on 13 Oct 2011 | linky

How NOT to implement styled checkboxes/radio buttons

While rescuing a project started by a straight-from-university intern, I came across his very enterprisy approach on creating nice and fancy styled checkboxes and/or radio buttons…

<div id="checkbox_unchecked_s" style="background: url('/./images/stories/checkbox/unchecked.png');display:none;width:31px;height:31px;" onclick="this.style.display = 'none';
    	document.getElementById('checkbox_checked_s').style.display = 'inline-block';
        document.getElementById('checkbox_unchecked_m').style.display = 'inline-block';
        document.getElementById('checkbox_checked_m').style.display = 'none';
        document.getElementById('checkbox_unchecked_l').style.display = 'inline-block';
        document.getElementById('checkbox_checked_l').style.display = 'none';
        document.getElementById('form_groesse').value = 's';"  ></div>
<div id="checkbox_checked_s" style="background: url('/./images/stories/checkbox/checked.png');display:inline-block;width:31px;height:31px;"  ></div>

Needless to say, this appeared multiple times on the same page… copy&pasted…

Posted by David Wosnitza (_druu) on 27 Sep 2011 | linky

Subscribe or follow @UglyJS!
.........
Fork then send a pull request to contribute.