Customizing The Google Gadget for a Specific Election

The VIP Google Gadget has been one of the most recognizable aspects of VIP, partly because of its versatility. It can be customized a number of different ways and doing so is easy for both web developers and web novices. During large election cycles, like presidential elections, the gadget queries against a national set of election data. For smaller elections, the process of embedding the gadget is a bit different.

The Google Gadget customization form

The gadget has a form—see above image—below it that allows various points of customization. Skipping the obvious ones now, there is a form element that asks for an Election ID. For this example, we’ll use the upcoming election in OH which has an Election ID of 2006. In the following picture, there are a number of small customizations:

• The maximum width for a post on this blog is 538px, so the gadget size has been reduced to account for that.
• The title adds an additional link to the top of the gadget that takes the user to the Google Maps Nationwide Polling Place Locator, which isn’t connected to the intermediate elections and may cause some confusion.
• Preview State is set to OH in order to be clear about the purpose of this particular gadget.
• Gadget Type is set to Inline Gadget, but could be as easily set to Standard Gadget and is a matter of preference (and coding familiarity) and space.

The Google Gadget customization form with modifications

In the end, the finished product for the iframe gadget should look like this:

This is the code for the iframe as configured above:

<script src="http://www.gmodules.com/ig/ifr?url=http://election-gadgets.googlecode.com/hg/voter-info/voter-info-gadget.xml&up_gadgetType=inline&up_fontFamily=Arial%2Csans-serif&up_fontSize=16&up_fontUnits=px&up_state=OH&up_homePrompt=Get%20your%20polling%20place%20info!%20Enter%20the%20*full%20home%20address*%20where%20you%E2%80%99re%20registered%20to%20vote%2C%20including%20city%20and%20state%3A&up_example=Ex%3A%201600%20Pennsylvania%20Ave%2C%20Washington%20DC&up_submit=0&up_electionId=2006&synd=open&w=538&h=400&title=&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>

This is the code for the inline gadget, which is a bit more difficult to configure and may—or may not—work with many CMSs:

<!-- Begin Google Election Center gadget --> 
<!-- Copy this entire block of code into your HTML page --> 
 
<style type="text/css"> 
  /* Font */ 
  #Poll411Gadget, #Poll411Gadget * { font-family:Arial%2Csans-serif; font-size:16px;  } 
  /* Sizes */ 
  #Poll411Gadget, #Poll411Form { width:530px; } 
  #Poll411Frame { width:100%; height:320px; } 
  /* Colors */ 
  /*#Poll411Gadget { border:1px solid #AAA; }*/ 
  #Poll411Input.example { color:#666; } 
  #Poll411Frame { border-top:1px solid #DDD; } 
  /* Layout */ 
  #Poll411Gadget { margin:0; padding:4px 0 4px 2px; } 
  #Poll411SelectState { margin-bottom:4px; } 
  #Poll411Title { padding-bottom:4px; } 
  #Poll411Form { margin:0; padding:0; vertical-align:middle; } 
  #Poll411InputCell { width:99%; padding-right:8px; } 
  #Poll411ButtonCell { width:1%; } 
  #Poll411Input { width:100%; } 
  #Poll411Frame { display:none; margin-top:6px; } 
</style>

<div id="Poll411Gadget"> 
  <form id="Poll411Form" action="" onsubmit="return Poll411.submit()"> 
    
    <div class="Poll411SearchTitle removehelp"> 
      <span> 
        Get your polling place info! Enter the <b>full home address</b> where you’re registered to vote, including city and state: 
      </span> 
    </div> 
    
    <table class="Poll411SearchTable" cellpadding="0" cellspacing="0" style="width:100%;"> 
      <tr valign="middle"> 
        <td id="Poll411InputCell"> 
          <input type="text" id="Poll411Input" class="example" onfocus="Poll411.focus()" onblur="Poll411.blur()"> 
        </td> 
        <td id="Poll411ButtonCell"> 
          <button type="submit" id="Poll411Button"> Search</button> 
        </td> 
      </tr> 
    </table> 
  </form> 
  <div id="Poll411Frame"> 
  </div> 
</div>

<script type="text/javascript"> 
  (function() { 
    var fontFamily = 'Arial,sans-serif', fontSize = '16', fontUnits = 'px'; 
    function e( id ) { return document.getElementById('Poll411'+id); } 
    var label = e('Label'), input = e('Input'), button = e('Button'), frame = e('Frame'); 
    
    var example = "Ex: 1600 Pennsylvania Ave, Washington DC"; 
    input.value = example; 
    
    Poll411 = { 
      
      focus: function() { 
        if( input.value == example ) { 
          input.className = ''; 
          input.value = ''; 
        } 
      }, 
      
      blur: function() { 
        if( input.value ==  ''  ||  input.value == example ) { 
          input.className = 'example'; 
          input.value = example; 
        } 
      }, 
      
      select: function() { 
      }, 
      
      submit: function() { 
        var addr = input.value; 
        if( addr == example ) addr = addr.replace( /^.*: /, '' ); 
        frame.style.display = 'block'; 
        frame.innerHTML = [ 
          '<iframe ', 
            'src="http://www.gmodules.com/ig/ifr?url=http://election-gadgets.googlecode.com/hg/voter-info/voter-info-gadget.xml&synd=open&up_gadgetType=iframe&up_address=', encodeURIComponent(addr), '&up_fontFamily=', encodeURIComponent(fontFamily), '&up_fontSize=', fontSize, '&up_fontUnits=', fontUnits, '&up_submit=1" ', 
            'style="width:100%; height:100%;" ', 
            'frameborder="0" ', 
            'scrolling="no" ', 
          '/>' 
        ].join(''); 
        return false; 
      } 
    }; 
  })(); 
</script> 
<!-- End Google Election Center gadget -->

Happy embedding!

You must be logged in to post a comment.