Skip to content

Instantly share code, notes, and snippets.

@noahub
Last active August 29, 2015 14:22
Show Gist options
  • Save noahub/a12b620b7cf756b11e0a to your computer and use it in GitHub Desktop.
Save noahub/a12b620b7cf756b11e0a to your computer and use it in GitHub Desktop.
<script type="text/javascript">
$(function(){
var spacing = 20; // Spacing between fields
var submitNewLine = false; // Place the Submit button on a new line?
// There's usually no need to change anything beyond here.
// Grab all form fields and the submit button
var fields = $('div.lp-pom-form-field');
fields = fields.add( $('.lp-pom-form .lp-pom-button').eq(0) );
// Work out the horizontal offset of fields
var width = fields.eq(0).width() + spacing;
// Record the first field's height as tallest for now
var tallest = fields.eq(0).height();
// Get the maximum width the form can be
var maxWidth = $('.lp-pom-block').eq(0).width() - $('.lp-pom-form').eq(0).position().left;
var top = 0;
var left = 0;
// Loop through each field
for(var i=1; i<fields.length; i++){
field = fields.eq(i);
// Add a new 'width' amount to last field's left position for placement later
left = left + width;
// Check if the right edge of this field will be beyond maximum width
if(left + width > maxWidth){
// If so, start a new line under the tallest field on current line
top = top + tallest + spacing;
left = 0;
// Reset tallest to current field, for now
tallest = field.height();
}
// If the field is a button, either display it on a new line or alongside fields
if(field.attr('class').indexOf('lp-pom-button') != -1){
if(submitNewLine == true){
top = top + tallest + spacing;
left = 0;
}else{
// Adding 10px better aligns submit button with text fields
top = top + 10;
}
}
// Position the field
field.css('top', top+'px');
field.css('left', left+'px');
// If this field is taller than the others on this line so far, record it as the tallest
if(field.height() > tallest){
tallest = field.height();
}
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment