Skip to content

Instantly share code, notes, and snippets.

@noahub

noahub/Horizontal form layouts.html

Last active August 29, 2015 14:22
Download ZIP

Revisions

  1. @markwainwright markwainwright revised this gist Mar 17, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions Horizontal form layouts.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    <script>

    // unbounce-horizontal-forms 8cc88e0
    function HorizontalForm(a,b){var c=this;this.spacing=a,this.submitPlacement=b,this.$=window.lp.jQuery,this.$(function(){c.form=c.$(".lp-pom-form").eq(0),c.fields=c.$("div.lp-pom-form-field"),c.button=c.$(".lp-pom-form .lp-pom-button").eq(0),"manual"!==c.submitPlacement&&(c.fields=c.fields.add(c.button)),c.layout()}),this.$(window).resize(function(){c.layout()})}HorizontalForm.prototype.layout=function(){for(var a=this.fields.eq(0).width()+this.spacing,b=this.fields.eq(0).height(),c=this.$(".lp-pom-block-content").eq(0).width()-this.form.position().left,d=0,e=0,f=0;f<this.fields.length;f++){field=this.fields.eq(f),e=0===f?e:e+a,e+a>c&&(d=0===f?d:d+b+this.spacing,e=0,b=field.height());var g=d;if(field.is(".lp-pom-button"))if("newline"===this.submitPlacement)g=d+b+spacing,e=0;else{g=d+19;var h=this.form.find(":text").eq(0).height();field.css("height",h-1+"px")}else this.$(field).children("label").length||(g=d+19);field.css({top:g+"px",left:e+"px"}),field.height()>b&&(b=field.height())}this.form.css({right:"0",width:"auto",height:d+b+"px"})};
    // unbounce-horizontal-forms 7453328
    function HorizontalForm(a,b){var c=this;this.spacing=a,this.submitPlacement=b,this.$=window.lp.jQuery,this.$(function(){c.$form=c.$(".lp-pom-form").eq(0),c.$fields=c.$("div.lp-pom-form-field"),c.$button=c.$(".lp-pom-form .lp-pom-button").eq(0),"manual"!==c.submitPlacement&&(c.$fields=c.$fields.add(c.$button)),c.doLayout()}),this.$(window).resize(function(){c.doLayout()})}HorizontalForm.prototype.doLayout=function(){for(var a=this.$fields.eq(0).width()+this.spacing,b=this.$fields.eq(0).height(),c=this.$form.parent().width()-this.$form.position().left,d=0,e=0,f=0;f<this.$fields.length;f++){field=this.$fields.eq(f),e=0===f?e:e+a,e+a>c&&(d=0===f?d:d+b+this.spacing,e=0,b=field.height());var g=d;if(field.is(".lp-pom-button"))if("newline"===this.submitPlacement)g=d+b+spacing,e=0;else{g=d+19;var h=this.$form.find(":text").eq(0).height();field.css("height",h-1+"px")}else this.$(field).children("label").length||(g=d+19);field.css({top:g+"px",left:e+"px"}),field.height()>b&&(b=field.height())}this.$form.css({right:"0",width:"auto",height:d+b+"px"})};

    // First parameter is spacing between fields, e.g. 20px
    // Second parameter is submit button placement. Options:
  2. @markwainwright markwainwright revised this gist Feb 25, 2015. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions Horizontal form layouts.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,13 +1,13 @@
    <script>

    // unbounce-horizontal-forms f137124
    function HorizontalForm(a,b){var c=this;this.spacing=a,this.submitPlacement=b,this.$=window.lp.jQuery,this.$(function(){c.form=c.$(".lp-pom-form").eq(0),c.fields=c.$("div.lp-pom-form-field"),c.button=c.$(".lp-pom-form .lp-pom-button").eq(0),"manual"!==c.submitPlacement&&(c.fields=c.fields.add(c.button)),c.layout()}),this.$(window).resize(function(){c.layout()})}HorizontalForm.prototype.layout=function(){for(var a=this.fields.eq(0).width()+this.spacing,b=this.fields.eq(0).height(),c=this.$(".lp-pom-block-content").eq(0).width()-this.form.position().left,d=0,e=0,f=0;f<this.fields.length;f++){field=this.fields.eq(f),e=0===f?e:e+a,e+a>c&&(d=d+b+this.spacing,e=0,b=field.height());var g=d;if(field.is(".lp-pom-button"))if("newline"===this.submitPlacement)g=d+b+spacing,e=0;else{g=d+19;var h=this.form.find(":text").eq(0).height();field.css("height",h-1+"px")}else this.$(field).children("label").length||(g=d+19);field.css({top:g+"px",left:e+"px"}),field.height()>b&&(b=field.height())}this.form.css({right:"0",width:"auto",height:d+b+"px"})};
    // unbounce-horizontal-forms 8cc88e0
    function HorizontalForm(a,b){var c=this;this.spacing=a,this.submitPlacement=b,this.$=window.lp.jQuery,this.$(function(){c.form=c.$(".lp-pom-form").eq(0),c.fields=c.$("div.lp-pom-form-field"),c.button=c.$(".lp-pom-form .lp-pom-button").eq(0),"manual"!==c.submitPlacement&&(c.fields=c.fields.add(c.button)),c.layout()}),this.$(window).resize(function(){c.layout()})}HorizontalForm.prototype.layout=function(){for(var a=this.fields.eq(0).width()+this.spacing,b=this.fields.eq(0).height(),c=this.$(".lp-pom-block-content").eq(0).width()-this.form.position().left,d=0,e=0,f=0;f<this.fields.length;f++){field=this.fields.eq(f),e=0===f?e:e+a,e+a>c&&(d=0===f?d:d+b+this.spacing,e=0,b=field.height());var g=d;if(field.is(".lp-pom-button"))if("newline"===this.submitPlacement)g=d+b+spacing,e=0;else{g=d+19;var h=this.form.find(":text").eq(0).height();field.css("height",h-1+"px")}else this.$(field).children("label").length||(g=d+19);field.css({top:g+"px",left:e+"px"}),field.height()>b&&(b=field.height())}this.form.css({right:"0",width:"auto",height:d+b+"px"})};

    // First parameter is spacing between fields, e.g. 20px
    // Second parameter is submit button placement. Options:
    // - 'inline': in line with the fields
    // - 'newline': on a new line
    // - 'manual': wherever you place the button in the page builder
    new HorizontalForm(20, 'inline');
    new HorizontalForm(20, 'manual');

    </script>
  3. @markwainwright markwainwright revised this gist Jan 15, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions Horizontal form layouts.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    <script>

    // unbounce-horizontal-forms 9698416
    function HorizontalForm(a,b){var c=this;this.spacing=a,this.submitPlacement=b,this.$=lp.jQuery,this.form=this.$(".lp-pom-form").eq(0),this.fields=this.$("div.lp-pom-form-field"),this.button=this.$(".lp-pom-form .lp-pom-button").eq(0),"manual"!==this.submitPlacement&&(this.fields=this.fields.add(this.button)),this.$(function(){c.layout()}),this.$(window).resize(function(){c.layout()})}HorizontalForm.prototype.layout=function(){for(var a=this.fields.eq(0).width()+this.spacing,b=this.fields.eq(0).height(),c=this.$(".lp-pom-block-content").eq(0).width()-this.form.position().left,d=0,e=0,f=0;f<this.fields.length;f++){field=this.fields.eq(f),e=0===f?e:e+a,e+a>c&&(d=d+b+this.spacing,e=0,b=field.height());var g=d;if(field.is(".lp-pom-button"))if("newline"===this.submitPlacement)g=d+b+spacing,e=0;else{g=d+19;var h=this.form.find(":text").eq(0).height();field.css("height",h-1+"px")}else this.$(field).children("label").length||(g=d+19);field.css({top:g+"px",left:e+"px"}),field.height()>b&&(b=field.height())}this.form.css({right:"0",width:"auto",height:d+b+"px"})};
    // unbounce-horizontal-forms f137124
    function HorizontalForm(a,b){var c=this;this.spacing=a,this.submitPlacement=b,this.$=window.lp.jQuery,this.$(function(){c.form=c.$(".lp-pom-form").eq(0),c.fields=c.$("div.lp-pom-form-field"),c.button=c.$(".lp-pom-form .lp-pom-button").eq(0),"manual"!==c.submitPlacement&&(c.fields=c.fields.add(c.button)),c.layout()}),this.$(window).resize(function(){c.layout()})}HorizontalForm.prototype.layout=function(){for(var a=this.fields.eq(0).width()+this.spacing,b=this.fields.eq(0).height(),c=this.$(".lp-pom-block-content").eq(0).width()-this.form.position().left,d=0,e=0,f=0;f<this.fields.length;f++){field=this.fields.eq(f),e=0===f?e:e+a,e+a>c&&(d=d+b+this.spacing,e=0,b=field.height());var g=d;if(field.is(".lp-pom-button"))if("newline"===this.submitPlacement)g=d+b+spacing,e=0;else{g=d+19;var h=this.form.find(":text").eq(0).height();field.css("height",h-1+"px")}else this.$(field).children("label").length||(g=d+19);field.css({top:g+"px",left:e+"px"}),field.height()>b&&(b=field.height())}this.form.css({right:"0",width:"auto",height:d+b+"px"})};

    // First parameter is spacing between fields, e.g. 20px
    // Second parameter is submit button placement. Options:
  4. @markwainwright markwainwright revised this gist Oct 15, 2014. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions Horizontal form layouts.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    <script>

    // unbounce-horizontal-forms 95bde91
    function HorizontalForm(a,b){var c=this;this.spacing=a,this.submitPlacement=b,this.$=lp.jQuery,this.form=this.$(".lp-pom-form").eq(0),this.fields=this.$("div.lp-pom-form-field"),this.button=this.$(".lp-pom-form .lp-pom-button").eq(0),"manual"!==this.submitPlacement&&(this.fields=this.fields.add(this.button)),this.$(function(){c.layout()}),this.$(window).resize(function(){c.layout()})}HorizontalForm.prototype.layout=function(){for(var a=this.fields.eq(0).width()+this.spacing,b=this.fields.eq(0).height(),c=this.$(".lp-pom-block-content").eq(0).width()-this.form.position().left,d=0,e=0,f=0;f<this.fields.length;f++){field=this.fields.eq(f),e=0===f?e:e+a,e+a>c&&(d=d+b+this.spacing,e=0,b=field.height());var g=d;if(field.is(".lp-pom-button"))if("newline"===this.submitPlacement)g=d+b+spacing,e=0;else{g=d+19;var h=this.form.find(":text").eq(0).height();field.css("height",h-1+"px")}else this.$(field).children("label").length||field.find(":input").css("top","21px");field.css({top:g+"px",left:e+"px"}),field.height()>b&&(b=field.height())}this.form.css({right:"0",width:"auto",height:d+b+"px"})};
    // unbounce-horizontal-forms 9698416
    function HorizontalForm(a,b){var c=this;this.spacing=a,this.submitPlacement=b,this.$=lp.jQuery,this.form=this.$(".lp-pom-form").eq(0),this.fields=this.$("div.lp-pom-form-field"),this.button=this.$(".lp-pom-form .lp-pom-button").eq(0),"manual"!==this.submitPlacement&&(this.fields=this.fields.add(this.button)),this.$(function(){c.layout()}),this.$(window).resize(function(){c.layout()})}HorizontalForm.prototype.layout=function(){for(var a=this.fields.eq(0).width()+this.spacing,b=this.fields.eq(0).height(),c=this.$(".lp-pom-block-content").eq(0).width()-this.form.position().left,d=0,e=0,f=0;f<this.fields.length;f++){field=this.fields.eq(f),e=0===f?e:e+a,e+a>c&&(d=d+b+this.spacing,e=0,b=field.height());var g=d;if(field.is(".lp-pom-button"))if("newline"===this.submitPlacement)g=d+b+spacing,e=0;else{g=d+19;var h=this.form.find(":text").eq(0).height();field.css("height",h-1+"px")}else this.$(field).children("label").length||(g=d+19);field.css({top:g+"px",left:e+"px"}),field.height()>b&&(b=field.height())}this.form.css({right:"0",width:"auto",height:d+b+"px"})};

    // First parameter is spacing between fields, e.g. 20px
    // Second parameter is submit button placement. Options:
  5. @markwainwright markwainwright revised this gist Oct 15, 2014. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions Horizontal form layouts.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    <script>

    // unbounce-horizontal-forms 15-10-2014 (1f9124a)
    function HorizontalForm(a,b){var c=this;this.spacing=a,this.submitPlacement=b,this.$=lp.jQuery,this.form=this.$(".lp-pom-form").eq(0),this.fields=this.$("div.lp-pom-form-field"),this.button=this.$(".lp-pom-form .lp-pom-button").eq(0),"manual"!==this.submitPlacement&&(this.fields=this.fields.add(this.button)),this.$(function(){c.layout()}),this.$(window).resize(function(){c.layout()})}HorizontalForm.prototype.layout=function(){for(var a=this.fields.eq(0).width()+this.spacing,b=this.fields.eq(0).height(),c=this.$(".lp-pom-block-content").eq(0).width()-this.form.position().left,d=0,e=0,f=0;f<this.fields.length;f++){field=this.fields.eq(f),e=0===f?e:e+a,e+a>c&&(d=d+b+this.spacing,e=0,b=field.height());var g=d;if(field.is(".lp-pom-button"))if("newline"===this.submitPlacement)g=d+b+spacing,e=0;else{g=d+19;var h=this.form.find(":text").eq(0).height();field.css("height",h-1+"px")}else this.$(field).children("label").length||field.find(":input").css("top","21px");field.css({top:g+"px",left:e+"px"}),field.height()>b&&(b=field.height())}this.form.css({right:"0",width:"auto",height:d+b+"px"})};
    // unbounce-horizontal-forms 95bde91
    function HorizontalForm(a,b){var c=this;this.spacing=a,this.submitPlacement=b,this.$=lp.jQuery,this.form=this.$(".lp-pom-form").eq(0),this.fields=this.$("div.lp-pom-form-field"),this.button=this.$(".lp-pom-form .lp-pom-button").eq(0),"manual"!==this.submitPlacement&&(this.fields=this.fields.add(this.button)),this.$(function(){c.layout()}),this.$(window).resize(function(){c.layout()})}HorizontalForm.prototype.layout=function(){for(var a=this.fields.eq(0).width()+this.spacing,b=this.fields.eq(0).height(),c=this.$(".lp-pom-block-content").eq(0).width()-this.form.position().left,d=0,e=0,f=0;f<this.fields.length;f++){field=this.fields.eq(f),e=0===f?e:e+a,e+a>c&&(d=d+b+this.spacing,e=0,b=field.height());var g=d;if(field.is(".lp-pom-button"))if("newline"===this.submitPlacement)g=d+b+spacing,e=0;else{g=d+19;var h=this.form.find(":text").eq(0).height();field.css("height",h-1+"px")}else this.$(field).children("label").length||field.find(":input").css("top","21px");field.css({top:g+"px",left:e+"px"}),field.height()>b&&(b=field.height())}this.form.css({right:"0",width:"auto",height:d+b+"px"})};

    // First parameter is spacing between fields, e.g. 20px
    // Second parameter is submit button placement. Options:
    @@ -10,4 +10,4 @@
    // - 'manual': wherever you place the button in the page builder
    new HorizontalForm(20, 'inline');

    </script>
    </script>
  6. @markwainwright markwainwright revised this gist Oct 15, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Horizontal form layouts.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    // unbounce-horizontal-forms 15-10-2014 (1f9124a)
    function HorizontalForm(a,b){var c=this;this.spacing=a,this.submitPlacement=b,this.$=lp.jQuery,this.form=this.$(".lp-pom-form").eq(0),this.fields=this.$("div.lp-pom-form-field"),this.button=this.$(".lp-pom-form .lp-pom-button").eq(0),"manual"!==this.submitPlacement&&(this.fields=this.fields.add(this.button)),this.$(function(){c.layout()}),this.$(window).resize(function(){c.layout()})}HorizontalForm.prototype.layout=function(){for(var a=this.fields.eq(0).width()+this.spacing,b=this.fields.eq(0).height(),c=this.$(".lp-pom-block-content").eq(0).width()-this.form.position().left,d=0,e=0,f=0;f<this.fields.length;f++){field=this.fields.eq(f),e=0===f?e:e+a,e+a>c&&(d=d+b+this.spacing,e=0,b=field.height());var g=d;if(field.is(".lp-pom-button"))if("newline"===this.submitPlacement)g=d+b+spacing,e=0;else{g=d+19;var h=this.form.find(":text").eq(0).height();field.css("height",h-1+"px")}else this.$(field).children("label").length||field.find(":input").css("top","21px");field.css({top:g+"px",left:e+"px"}),field.height()>b&&(b=field.height())}this.form.css({right:"0",width:"auto",height:d+b+"px"})};

    // First parameter is spacing between fields
    // First parameter is spacing between fields, e.g. 20px
    // Second parameter is submit button placement. Options:
    // - 'inline': in line with the fields
    // - 'newline': on a new line
  7. @markwainwright markwainwright revised this gist Oct 15, 2014. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions Horizontal form layouts.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    <script>

    // unbounce-horizontal-forms 24-06-2014
    function HorizontalForm(a,b){var c=this;this.spacing=a,this.submitPlacement=b,this.$=lp.jQuery,this.form=this.$(".lp-pom-form").eq(0),this.fields=this.$("div.lp-pom-form-field"),this.button=this.$(".lp-pom-form .lp-pom-button").eq(0),"manual"!==this.submitPlacement&&(this.fields=this.fields.add(this.button)),this.$(function(){c.layout()}),this.$(window).resize(function(){c.layout()})}HorizontalForm.prototype.layout=function(){for(var a=this.fields.eq(0).width()+this.spacing,b=this.fields.eq(0).height(),c=this.$(".lp-pom-block").eq(0).width()-this.form.position().left,d=0,e=0,f=1;f<this.fields.length;f++){field=this.fields.eq(f),e+=a,e+a>c&&(d=d+b+this.spacing,e=0,b=field.height());var g=d;field.is(".lp-pom-button")?"newline"===this.submitPlacement?(g=d+b+spacing,e=0):(g=d+19,field.css("height","32px")):this.$(field).children("label").length||(g=d+19),field.css({top:g+"px",left:e+"px"}),field.height()>b&&(b=field.height())}this.form.css({right:"0",width:"auto",height:d+b+"px"})};
    // unbounce-horizontal-forms 15-10-2014 (1f9124a)
    function HorizontalForm(a,b){var c=this;this.spacing=a,this.submitPlacement=b,this.$=lp.jQuery,this.form=this.$(".lp-pom-form").eq(0),this.fields=this.$("div.lp-pom-form-field"),this.button=this.$(".lp-pom-form .lp-pom-button").eq(0),"manual"!==this.submitPlacement&&(this.fields=this.fields.add(this.button)),this.$(function(){c.layout()}),this.$(window).resize(function(){c.layout()})}HorizontalForm.prototype.layout=function(){for(var a=this.fields.eq(0).width()+this.spacing,b=this.fields.eq(0).height(),c=this.$(".lp-pom-block-content").eq(0).width()-this.form.position().left,d=0,e=0,f=0;f<this.fields.length;f++){field=this.fields.eq(f),e=0===f?e:e+a,e+a>c&&(d=d+b+this.spacing,e=0,b=field.height());var g=d;if(field.is(".lp-pom-button"))if("newline"===this.submitPlacement)g=d+b+spacing,e=0;else{g=d+19;var h=this.form.find(":text").eq(0).height();field.css("height",h-1+"px")}else this.$(field).children("label").length||field.find(":input").css("top","21px");field.css({top:g+"px",left:e+"px"}),field.height()>b&&(b=field.height())}this.form.css({right:"0",width:"auto",height:d+b+"px"})};

    // First parameter is spacing between fields
    // Second parameter is submit button placement. Options:
    @@ -10,4 +10,4 @@
    // - 'manual': wherever you place the button in the page builder
    new HorizontalForm(20, 'inline');

    </script>
    </script>
  8. Mark Wainwright revised this gist Jun 24, 2014. 1 changed file with 2 additions and 3 deletions.
    5 changes: 2 additions & 3 deletions Horizontal form layouts.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,7 @@
    <script>

    // unbounce-horizontal-forms 12-06-2014

    function HorizontalForm(a,b){this.spacing=a,this.submitPlacement=b,this.form=$(".lp-pom-form").eq(0),this.fields=$("div.lp-pom-form-field"),this.button=$(".lp-pom-form .lp-pom-button").eq(0),"manual"!==this.submitPlacement&&(this.fields=this.fields.add(this.button));var c=this;lp.jQuery(function(){c.layout()}),lp.jQuery(window).resize(function(){c.layout()})}HorizontalForm.prototype.layout=function(){for(var a=this.fields.eq(0).width()+this.spacing,b=this.fields.eq(0).height(),c=$(".lp-pom-block").eq(0).width()-this.form.position().left,d=0,e=0,f=1;f<this.fields.length;f++){field=this.fields.eq(f),e+=a,e+a>c&&(d=d+b+this.spacing,e=0,b=field.height());var g=d;field.is(".lp-pom-button")?"newline"===this.submitPlacement?(g=d+b+spacing,e=0):(g=d+19,field.css("height","32px")):$(field).children("label").length||(g=d+19),field.css({top:g+"px",left:e+"px"}),field.height()>b&&(b=field.height())}this.form.css({right:"0",width:"auto",height:d+b+"px"})};
    // unbounce-horizontal-forms 24-06-2014
    function HorizontalForm(a,b){var c=this;this.spacing=a,this.submitPlacement=b,this.$=lp.jQuery,this.form=this.$(".lp-pom-form").eq(0),this.fields=this.$("div.lp-pom-form-field"),this.button=this.$(".lp-pom-form .lp-pom-button").eq(0),"manual"!==this.submitPlacement&&(this.fields=this.fields.add(this.button)),this.$(function(){c.layout()}),this.$(window).resize(function(){c.layout()})}HorizontalForm.prototype.layout=function(){for(var a=this.fields.eq(0).width()+this.spacing,b=this.fields.eq(0).height(),c=this.$(".lp-pom-block").eq(0).width()-this.form.position().left,d=0,e=0,f=1;f<this.fields.length;f++){field=this.fields.eq(f),e+=a,e+a>c&&(d=d+b+this.spacing,e=0,b=field.height());var g=d;field.is(".lp-pom-button")?"newline"===this.submitPlacement?(g=d+b+spacing,e=0):(g=d+19,field.css("height","32px")):this.$(field).children("label").length||(g=d+19),field.css({top:g+"px",left:e+"px"}),field.height()>b&&(b=field.height())}this.form.css({right:"0",width:"auto",height:d+b+"px"})};

    // First parameter is spacing between fields
    // Second parameter is submit button placement. Options:
  9. Mark Wainwright revised this gist Jun 12, 2014. 2 changed files with 14 additions and 85 deletions.
    14 changes: 14 additions & 0 deletions Horizontal form layouts.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    <script>

    // unbounce-horizontal-forms 12-06-2014

    function HorizontalForm(a,b){this.spacing=a,this.submitPlacement=b,this.form=$(".lp-pom-form").eq(0),this.fields=$("div.lp-pom-form-field"),this.button=$(".lp-pom-form .lp-pom-button").eq(0),"manual"!==this.submitPlacement&&(this.fields=this.fields.add(this.button));var c=this;lp.jQuery(function(){c.layout()}),lp.jQuery(window).resize(function(){c.layout()})}HorizontalForm.prototype.layout=function(){for(var a=this.fields.eq(0).width()+this.spacing,b=this.fields.eq(0).height(),c=$(".lp-pom-block").eq(0).width()-this.form.position().left,d=0,e=0,f=1;f<this.fields.length;f++){field=this.fields.eq(f),e+=a,e+a>c&&(d=d+b+this.spacing,e=0,b=field.height());var g=d;field.is(".lp-pom-button")?"newline"===this.submitPlacement?(g=d+b+spacing,e=0):(g=d+19,field.css("height","32px")):$(field).children("label").length||(g=d+19),field.css({top:g+"px",left:e+"px"}),field.height()>b&&(b=field.height())}this.form.css({right:"0",width:"auto",height:d+b+"px"})};

    // First parameter is spacing between fields
    // Second parameter is submit button placement. Options:
    // - 'inline': in line with the fields
    // - 'newline': on a new line
    // - 'manual': wherever you place the button in the page builder
    new HorizontalForm(20, 'inline');

    </script>
    85 changes: 0 additions & 85 deletions Horizontal form layouts.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,85 +0,0 @@
    $(function(){

    // Spacing between fields, in pixels:
    var spacing = 20;

    // Options for the submit button placement are 'inline', 'newline' or 'manual':
    // Manual means the script won't touch the submit button - it can be positioned in the builder.
    var submitPlacement = 'inline';

    // There's usually no need to change anything beyond here.

    // Grab all form fields and the submit button
    var form = $('.lp-pom-form').eq(0);
    var fields = $('div.lp-pom-form-field');
    var button = $('.lp-pom-form .lp-pom-button').eq(0);
    if(submitPlacement != 'manual') fields = fields.add(button);

    // 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() - form.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();
    }

    var thisTop = top;

    if(field.is('.lp-pom-button')){

    if(submitPlacement == 'newline'){
    // Put button on new line
    thisTop = top + tallest + spacing;
    left = 0;
    }else{
    // Format button to better align with form fields
    thisTop = top + 19;
    field.css('height', '32px');
    }

    // If it's a field without a label, add additional vertical offset
    }else if(!$(field).children('label').length){
    thisTop = top + 19;
    }

    // Position the field
    field.css({
    'top': thisTop + 'px',
    '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();

    }

    // Resize the form container so error boxes are positioned better
    form.css({
    'right': '0',
    'width': 'auto',
    'height': top + tallest +'px'
    });

    });
  10. @markwainwright markwainwright revised this gist Apr 1, 2014. 1 changed file with 0 additions and 2 deletions.
    2 changes: 0 additions & 2 deletions Horizontal form layouts.js
    View file
    Original file line number Diff line number Diff line change
    @@ -61,9 +61,7 @@ $(function(){

    // If it's a field without a label, add additional vertical offset
    }else if(!$(field).children('label').length){

    thisTop = top + 19;

    }

    // Position the field
  11. @markwainwright markwainwright revised this gist Apr 1, 2014. 1 changed file with 2 additions and 6 deletions.
    8 changes: 2 additions & 6 deletions Horizontal form layouts.js
    View file
    Original file line number Diff line number Diff line change
    @@ -13,9 +13,7 @@ $(function(){
    var form = $('.lp-pom-form').eq(0);
    var fields = $('div.lp-pom-form-field');
    var button = $('.lp-pom-form .lp-pom-button').eq(0);
    if(submitPlacement != 'manual'){
    fields = fields.add(button);
    }
    if(submitPlacement != 'manual') fields = fields.add(button);

    // Work out the horizontal offset of fields
    var width = fields.eq(0).width() + spacing;
    @@ -31,7 +29,6 @@ $(function(){

    // 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
    @@ -46,12 +43,11 @@ $(function(){

    // Reset tallest to current field, for now
    tallest = field.height();

    }

    var thisTop = top;

    if(field.attr('class').indexOf('lp-pom-button') != -1){
    if(field.is('.lp-pom-button')){

    if(submitPlacement == 'newline'){
    // Put button on new line
  12. @markwainwright markwainwright revised this gist Mar 26, 2014. 1 changed file with 12 additions and 6 deletions.
    18 changes: 12 additions & 6 deletions Horizontal form layouts.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,16 +1,22 @@
    $(function(){

    var spacing = 20; // Spacing between fields, in pixels
    var submitNewLine = false; // Place the Submit button on a new line?

    // Spacing between fields, in pixels:
    var spacing = 20;

    // Options for the submit button placement are 'inline', 'newline' or 'manual':
    // Manual means the script won't touch the submit button - it can be positioned in the builder.
    var submitPlacement = 'inline';

    // There's usually no need to change anything beyond here.

    // Grab all form fields and the submit button
    var form = $('.lp-pom-form').eq(0);
    var fields = $('div.lp-pom-form-field');
    var button = $('.lp-pom-form .lp-pom-button').eq(0);
    fields = fields.add(button);

    if(submitPlacement != 'manual'){
    fields = fields.add(button);
    }

    // Work out the horizontal offset of fields
    var width = fields.eq(0).width() + spacing;

    @@ -47,7 +53,7 @@ $(function(){

    if(field.attr('class').indexOf('lp-pom-button') != -1){

    if(submitNewLine === true){
    if(submitPlacement == 'newline'){
    // Put button on new line
    thisTop = top + tallest + spacing;
    left = 0;
  13. @markwainwright markwainwright revised this gist Mar 17, 2014. 1 changed file with 58 additions and 60 deletions.
    118 changes: 58 additions & 60 deletions Horizontal form layouts.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,87 +1,85 @@
    $(function(){

    var spacing = 20; // Spacing between fields, in pixels
    var submitNewLine = false; // Place the Submit button on a new line?
    var spacing = 20; // Spacing between fields, in pixels
    var submitNewLine = false; // Place the Submit button on a new line?

    // There's usually no need to change anything beyond here.
    // There's usually no need to change anything beyond here.

    // Grab all form fields and the submit button
    var form = $('.lp-pom-form').eq(0);
    var fields = $('div.lp-pom-form-field');
    var button = $('.lp-pom-form .lp-pom-button').eq(0);
    fields = fields.add(button);
    // Grab all form fields and the submit button
    var form = $('.lp-pom-form').eq(0);
    var fields = $('div.lp-pom-form-field');
    var button = $('.lp-pom-form .lp-pom-button').eq(0);
    fields = fields.add(button);

    // Work out the horizontal offset of fields
    var width = fields.eq(0).width() + spacing;
    // 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();
    // 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() - form.position().left;
    // Get the maximum width the form can be
    var maxWidth = $('.lp-pom-block').eq(0).width() - form.position().left;

    var top = 0;
    var left = 0;
    var top = 0;
    var left = 0;

    // Loop through each field
    for(var i=1; i<fields.length; i++){
    // Loop through each field
    for(var i=1; i<fields.length; i++){

    field = fields.eq(i);
    field = fields.eq(i);

    // Add a new 'width' amount to last field's left position for placement later
    left = left + width;
    // 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){
    // 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;
    // 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();
    // Reset tallest to current field, for now
    tallest = field.height();

    }
    }

    var thisTop = top;
    var thisTop = top;

    if(field.attr('class').indexOf('lp-pom-button') != -1){
    if(field.attr('class').indexOf('lp-pom-button') != -1){

    if(submitNewLine === true){
    // Put button on new line
    thisTop = top + tallest + spacing;
    left = 0;
    }else{
    // Format button to better align with form fields
    thisTop = top + 19;
    field.css('height', '32px');
    }
    if(submitNewLine === true){
    // Put button on new line
    thisTop = top + tallest + spacing;
    left = 0;
    }else{
    // Format button to better align with form fields
    thisTop = top + 19;
    field.css('height', '32px');
    }

    // If it's a field without a label, add additional vertical offset
    }else if(!$(field).children('label').length){
    // If it's a field without a label, add additional vertical offset
    }else if(!$(field).children('label').length){

    thisTop = top + 19;
    thisTop = top + 19;

    }
    }

    // Position the field
    field.css({
    'top': thisTop + 'px',
    'left': left + 'px'
    });
    // Position the field
    field.css({
    'top': thisTop + 'px',
    '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();
    }
    // 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();

    }
    }

    // Resize the form container so error boxes are positioned better
    form.css({
    'right': '0',
    'width': 'auto',
    'height': top + tallest +'px'
    });
    // Resize the form container so error boxes are positioned better
    form.css({
    'right': '0',
    'width': 'auto',
    'height': top + tallest +'px'
    });

    });
  14. @markwainwright markwainwright revised this gist Mar 13, 2014. 2 changed files with 87 additions and 91 deletions.
    91 changes: 0 additions & 91 deletions Horizontal form layouts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,91 +0,0 @@
    <script>

    $(function(){

    var spacing = 20; // Spacing between fields, in pixels
    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 form = $('.lp-pom-form').eq(0);
    var fields = $('div.lp-pom-form-field');
    var button = $('.lp-pom-form .lp-pom-button').eq(0);
    fields = fields.add(button);

    // 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() - form.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();

    }

    var thisTop = top;

    if(field.attr('class').indexOf('lp-pom-button') != -1){

    if(submitNewLine === true){
    // Put button on new line
    thisTop = top + tallest + spacing;
    left = 0;
    }else{
    // Format button to better align with form fields
    thisTop = top + 19;
    field.css('height', '32px');
    }

    // If it's a field without a label, add additional vertical offset
    }else if(!$(field).children('label').length){

    thisTop = top + 19;

    }

    // Position the field
    field.css({
    'top': thisTop + 'px',
    '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();
    }

    }

    // Resize the form container so error boxes are positioned better
    form.css({
    'right': '0',
    'width': 'auto',
    'height': top + tallest +'px'
    });

    });

    </script>
    87 changes: 87 additions & 0 deletions Horizontal form layouts.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,87 @@
    $(function(){

    var spacing = 20; // Spacing between fields, in pixels
    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 form = $('.lp-pom-form').eq(0);
    var fields = $('div.lp-pom-form-field');
    var button = $('.lp-pom-form .lp-pom-button').eq(0);
    fields = fields.add(button);

    // 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() - form.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();

    }

    var thisTop = top;

    if(field.attr('class').indexOf('lp-pom-button') != -1){

    if(submitNewLine === true){
    // Put button on new line
    thisTop = top + tallest + spacing;
    left = 0;
    }else{
    // Format button to better align with form fields
    thisTop = top + 19;
    field.css('height', '32px');
    }

    // If it's a field without a label, add additional vertical offset
    }else if(!$(field).children('label').length){

    thisTop = top + 19;

    }

    // Position the field
    field.css({
    'top': thisTop + 'px',
    '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();
    }

    }

    // Resize the form container so error boxes are positioned better
    form.css({
    'right': '0',
    'width': 'auto',
    'height': top + tallest +'px'
    });

    });
  15. @markwainwright markwainwright revised this gist Mar 13, 2014. 1 changed file with 63 additions and 55 deletions.
    118 changes: 63 additions & 55 deletions Horizontal form layouts
    View file
    Original file line number Diff line number Diff line change
    @@ -2,81 +2,89 @@

    $(function(){

    var spacing = 20; // Spacing between fields
    var submitNewLine = false; // Place the Submit button on a new line?
    var spacing = 20; // Spacing between fields, in pixels
    var submitNewLine = false; // Place the Submit button on a new line?

    // There's usually no need to change anything beyond here.
    // There's usually no need to change anything beyond here.

    // Grab all form fields and the submit button
    var form = $('.lp-pom-form').eq(0);
    var fields = $('div.lp-pom-form-field');
    var button = $('.lp-pom-form .lp-pom-button').eq(0);
    fields = fields.add(button);
    // Grab all form fields and the submit button
    var form = $('.lp-pom-form').eq(0);
    var fields = $('div.lp-pom-form-field');
    var button = $('.lp-pom-form .lp-pom-button').eq(0);
    fields = fields.add(button);

    // Work out the horizontal offset of fields
    var width = fields.eq(0).width() + spacing;
    // 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();
    // 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() - form.position().left;
    // Get the maximum width the form can be
    var maxWidth = $('.lp-pom-block').eq(0).width() - form.position().left;

    var top = 0;
    var left = 0;
    var top = 0;
    var left = 0;

    // Loop through each field
    for(var i=1; i<fields.length; i++){
    // Loop through each field
    for(var i=1; i<fields.length; i++){

    field = fields.eq(i);
    field = fields.eq(i);

    // Add a new 'width' amount to last field's left position for placement later
    left = left + width;
    // 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){
    // 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 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;
    var thisTop = top;

    if(field.attr('class').indexOf('lp-pom-button') != -1){

    if(submitNewLine === true){
    // Put button on new line
    thisTop = top + tallest + spacing;
    left = 0;
    }else{
    // Format button to better align with form fields
    thisTop = top + 19;
    field.css('height', '32px');
    }

    // If it's a field without a label, add additional vertical offset
    }else if(!$(field).children('label').length){

    thisTop = top + 19;

    }

    }
    // Position the field
    field.css({
    'top': thisTop + 'px',
    'left': left + 'px'
    });

    // Position the field
    field.css({
    'top': top + 'px',
    '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();
    }

    // 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();
    }

    }

    // Resize the form container so error boxes are positioned better
    form.css({
    'right': '0',
    'width': 'auto',
    'height': top + tallest +'px'
    });
    // Resize the form container so error boxes are positioned better
    form.css({
    'right': '0',
    'width': 'auto',
    'height': top + tallest +'px'
    });

    });

  16. @markwainwright markwainwright revised this gist Mar 10, 2014. 1 changed file with 79 additions and 79 deletions.
    158 changes: 79 additions & 79 deletions Horizontal form layouts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,83 +1,83 @@
    <script>

    $(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 form = $('.lp-pom-form').eq(0);
    var fields = $('div.lp-pom-form-field');
    var button = $('.lp-pom-form .lp-pom-button').eq(0);
    fields = fields.add(button);
    // 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() - form.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',
    '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();
    }
    }
    // Resize the form container so error boxes are positioned better
    form.css({
    'right': '0',
    'width': 'auto',
    'height': top + tallest +'px'
    });
    });
    $(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 form = $('.lp-pom-form').eq(0);
    var fields = $('div.lp-pom-form-field');
    var button = $('.lp-pom-form .lp-pom-button').eq(0);
    fields = fields.add(button);

    // 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() - form.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',
    '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();
    }

    }

    // Resize the form container so error boxes are positioned better
    form.css({
    'right': '0',
    'width': 'auto',
    'height': top + tallest +'px'
    });

    });

    </script>
  17. @markwainwright markwainwright revised this gist Mar 10, 2014. 1 changed file with 76 additions and 62 deletions.
    138 changes: 76 additions & 62 deletions Horizontal form layouts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,68 +1,82 @@
    <script>

    $(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();
    }
    }

    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 form = $('.lp-pom-form').eq(0);
    var fields = $('div.lp-pom-form-field');
    var button = $('.lp-pom-form .lp-pom-button').eq(0);
    fields = fields.add(button);

    // 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() - form.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',
    '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();
    }

    }

    // Resize the form container so error boxes are positioned better
    form.css({
    'right': '0',
    'width': 'auto',
    'height': top + tallest +'px'
    });

    });

  18. @markwainwright markwainwright revised this gist Mar 10, 2014. 2 changed files with 69 additions and 65 deletions.
    69 changes: 69 additions & 0 deletions Horizontal form layouts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,69 @@
    <script>

    $(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>
    65 changes: 0 additions & 65 deletions Horizontal form layouts.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,65 +0,0 @@
    $(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();
    }
    }

    });
  19. @markwainwright markwainwright revised this gist Mar 7, 2014. 2 changed files with 65 additions and 69 deletions.
    69 changes: 0 additions & 69 deletions Horizontal form layouts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,69 +0,0 @@
    <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>
    65 changes: 65 additions & 0 deletions Horizontal form layouts.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,65 @@
    $(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();
    }
    }

    });
  20. @markwainwright markwainwright revised this gist Mar 7, 2014. 1 changed file with 25 additions and 4 deletions.
    29 changes: 25 additions & 4 deletions Horizontal form layouts
    View file
    Original file line number Diff line number Diff line change
    @@ -2,42 +2,63 @@

    $(function(){

    var spacing = 20; /* Spacing between fields */
    var submitNewLine = false; /* Place the Submit button on a new line? */
    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 */
    // 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{
    top = top + 10; /* Better aligns submit button with text field */
    // 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();
    }
  21. @markwainwright markwainwright revised this gist Mar 4, 2014. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions Horizontal form layouts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    <script>
    <script type="text/javascript">

    $(function($){
    $(function(){

    var spacing = 20; /* Spacing between fields */
    var submitNewLine = false; /* Place the Submit button on a new line? */
  22. @markwainwright markwainwright revised this gist Mar 4, 2014. 1 changed file with 39 additions and 10 deletions.
    49 changes: 39 additions & 10 deletions Horizontal form layouts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,19 +1,48 @@
    <script type="text/javascript">

    $(function(){
    var gap = 20; /* Horizontal space between fields */
    <script>

    $(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 */

    var fields = $('div.lp-pom-form-field');
    var button = $('.lp-pom-form .lp-pom-button').eq(0);
    var offset = fields.eq(0).width()+gap;
    fields = fields.add( $('.lp-pom-form .lp-pom-button').eq(0) );
    var width = fields.eq(0).width() + spacing;
    var tallest = fields.eq(0).height();
    var maxWidth = $('.lp-pom-block').eq(0).width() - $('.lp-pom-form').eq(0).position().left;

    var top = 0;
    var left = 0;

    for(var i=1; i<fields.length; i++){
    fields.eq(i).css('top','0');
    fields.eq(i).css('left',offset*i+'px');
    field = fields.eq(i);
    left = left + width;

    if(left + width > maxWidth){
    top = top + tallest + spacing;
    left = 0;
    tallest = field.height();
    }

    if(field.attr('class').indexOf('lp-pom-button') != -1){
    if(submitNewLine == true){
    top = top + tallest + spacing;
    left = 0;
    }else{
    top = top + 10; /* Better aligns submit button with text field */
    }
    }

    field.css('top', top+'px');
    field.css('left', left+'px');

    if(field.height() > tallest){
    tallest = field.height();
    }
    }

    button.css('top',fields.eq(0).height()-button.height()+'px');
    button.css('left',offset*fields.length+'px');
    });

    </script>
  23. @markwainwright markwainwright created this gist Mar 4, 2014.
    19 changes: 19 additions & 0 deletions Horizontal form layouts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    <script type="text/javascript">

    $(function(){
    var gap = 20; /* Horizontal space between fields */

    var fields = $('div.lp-pom-form-field');
    var button = $('.lp-pom-form .lp-pom-button').eq(0);
    var offset = fields.eq(0).width()+gap;

    for(var i=1; i<fields.length; i++){
    fields.eq(i).css('top','0');
    fields.eq(i).css('left',offset*i+'px');
    }

    button.css('top',fields.eq(0).height()-button.height()+'px');
    button.css('left',offset*fields.length+'px');
    });

    </script>