Salsa Blog

Success through Javascript: Optimizing Spacing on Action Pages

by Allen Leonard

Today our "Success through Javascript" blog post will tackle some extra space that appears on some action pages. If you are targeting the House and Senate, then there are typically no more than 3 targeted legislators. They fit onto an action page very nicely.

However, if you are targeting a whole crowd of custom targets (say a board or a city council), then the supporter's information gets shoved waaaaaaay down at the bottom of the left hand column on the action.

Sometimes, the information gets pushed down so far that he supporter doesn't see anything to fill out, and no place to take action. That can be very frustrating, both for the supporter ("I feel strongly, let me take action.") and you ("Where in the heck did all of that stuff go?!?")

The reason that this is happening is that the supporter information is in a box (<div> tag) after the comment. The comment is in a box that's the same height as the targeted legislators, so when the list of targets is really tall, then a lot of space gets puts after the comment to make sure that they stay the same height. (Anyone who's ever worn lifts in their shoes knows exactly what I'm talking about.)

What we need to do is to move all of the supporter information, and the submit button, into the bottom of the comment's box. That way, all of the significant stuff stays at the top, and the list of targets can grow as tall as it wants. This is another perfect place to use Javascript.

Challenge: Move personal information on an action to keep it by the comment

We will meet this week's challenge by finding the <div> tag ("box") that holds the personal information, and moving it right under the comment. Then we'll do the same thing with the submit button, and the challenge will be met.


This is the "before" condition. As before, notice that the list of targets is pretty long, and the input fields are smushed down to the bottom of the page.


  1. Since this script will run on any actions, then the best place for it to live is in a template. However, putting it in your current template could possibly cause problems on non-action pages.

    For that reason, I recommend that you make a copy of your template, name it the "Action Template", and put the changes there. Please send us a note at, if you need help copying your template.

  2. Edit the copy of your template.
  3. Copy this script using Control-C or Command-C:
    &lt;script type="text/javascript"&gt;
    // Script to append the input fields to the content div so that
    // they flow down the left. That will cause the targets to flow
    // down the right.
    var actionContent = $('div[class="actioncontent"]');
    var diaFields = $('div[class="diaFields"]');
    var submit = $('#sendTargeted');
  4. Paste the javascript just before the </body> tag in the template. When you are done, it will look something like this:
  5. Save your template.
  6. The last step is to assign this template to your action page. Start by editing the action page that you want to change.
  7. Next, change the template in your action page(s).
    1. Edit an action page.
    2. Click on the "Change" link in the yellow publishing box. You will be presented with a page of your templates.
    3. Click on the "Action Template" that you just created.
    4. Click on Save.
  8. You are done!


Now, when you run your action(s), you'll see that the input fields are on the left side of the page, and the targets are on the right side of the page. Here's a copy of my example after I installed the script into my actions template:


We've seen that it's possible to move stuff around in an action page, giving us a chance to move all of the data entry fields up where the supporter can see them, even when there are a bunch of targets on the right.

I hope that this was all very helpful to you. If you have questions or suggestions, then please send me some mail at Hope y'all have an excellent week!

Topics: Salsa Advocacy