Inline ad box sizing to test layouts

This is a stripped down service which only does one thing. Shows ad box sizes dynamically. It contains most of the standard sizes for Internet ads. A couple of the smaller standards like 80x15 and 88x31 which are typically used for link exchanges are not included. They are too small for the entire list of sizes to be displayed.

If the service used a drop down, or pop-up menu, instead of inline “buttons,” an arbitrary selection could fit of course. We leave that as an exercise for the reader.

The client’s service call

<script type="text/javascript"
 src="http://elektrum.org/js/adBoxSizer.js">
</script>

adBoxSizer.js in action

The service code, adBoxSizer.js

var boxStyle = new Object({ border:"1px solid black"
                           ,padding:'0'
                           ,textAlign:"center"
                           ,backgroundColor:"#cff"
                           ,position:"relative"
                           ,overflow:"hidden"
                           });

var aStyle = new Object({ border:"1px solid black"
                         ,fontFamily:'helvetica,sans-serif'
                         ,fontSize:'xx-small'
                         ,letterSpacing:'1px'
                         ,color:"black"
                         ,textDecoration:"none"
                         ,padding:'0 3px 0 3px'
                         ,margin:'1px'
                         ,lineHeight:"1.5em"
                         ,backgroundColor:"white"
                         });

var Menu = new Object({
                       "125x125":[125,125]
                      ,"180x150":[180,150]
                      ,"120x240":[120,240]
                      ,"250x250":[250,250]
                      ,"160x600":[160,600]
                      ,"120x600":[120,600]
                      ,"160x600":[160,600]
                      ,"234x60":[234,60]
                      ,"468x60":[468,60]
                      ,"728x90":[728,90]
                      });

var box = document.createElement('div');

for ( var item in Menu ) {
  var anchor = document.createElement('a');
  anchor.setAttribute('id', item);
  anchor.setAttribute('href', 'javascript:void(0)');
  var action = 'updateBox("' + item + '",[' + Menu[item].join(",") + '])';
  anchor.setAttribute('onclick', action);
  anchor.appendChild( document.createTextNode(item) );
  box.appendChild( anchor );
  for ( var prop in aStyle ) anchor.style[prop] = aStyle[prop];
  box.appendChild( document.createTextNode("\n") );
}

for ( var prop in boxStyle ) box.style[prop] = boxStyle[prop];

var scripts = document.getElementsByTagName('script');
var myScript = scripts[ scripts.length - 1 ];

var parent = myScript.parentNode || document.body;
parent.insertBefore( box, myScript );

// ----------------------------------
function updateBox ( caller, xy ) {
  box.style.width  = xy[0] + 'px';
  box.style.height = xy[1] + 'px';
  for ( var item in Menu ) {
    document.getElementById(item).style.color = 'black';
    document.getElementById(item).style.backgroundColor = 'white';
  }
  document.getElementById(caller).style.color = '#a00';
  document.getElementById(caller).style.backgroundColor = '#ff9';
}

Something new

While extremely basic it does demonstrate an interesting technique we haven’t seen yet. It uses Node() objects to find the proper place to insert the fake ad box. We use our old saw to get the script we’re called by.

var scripts = document.getElementsByTagName('script');
var myScript = scripts[ scripts.length - 1 ];

Then we use it to get the current Node() object, and we default to the body’s node in the strange case we can’t find one through the script object’s parentNode

Insert the box in the right place

var parent = myScript.parentNode || document.body;
parent.insertBefore( box, myScript );

Opera doesn’t like this script. Safari and FireFox do fine with it though.

This should really be dragable… don’t you think…?

« Inline web tinkering with ColorWheel · Automatic highlighting of search terms »