jQuery Forum

Hey Guys,

I have a few inputs which allow people to input a number (in px) for width, one for the # of columns, and another input to set the margins for each div.. Using jquery, how do I take these numbers and create these divs with the proper width and margins?

Example:

[Input] Width: 960px [Input] # of Columns [Input] Margins

Basically I am trying to show how the set up will be so the user will see the divs with margins .

----Code-----

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">

<label for="width">Base Width (px)</label>   

<input type="text" name="width" id="width"><br>

<label for="columns">Number of Columns</label>   

<input type="text" name="columns" id="columns"><br>

<label for="gutter">Gutter (px)</label>   

<input type="text" name="gutter" id="gutter"><br>

<input type="text" name="test" id="test" class="result"><br>

</form>

<a id="calc">calculate</a>

<p> Width: <span id="width-text"></span> px</p>

<p> Number of Columns: <span id="columns-text"></span> px</p>

<p> Gutters: <span id="gutter-text"></span> px</p> 

<script type="text/javascript">

    $("input#width").keyup(function () {

      var value = $(this).val();

      $("span#width-text").text(value);

    }).keyup();

    $("input#columns").keyup(function () {

      var value = $(this).val();

      $("span#columns-text").text(value);

    }).keyup();

    $("input#gutter").keyup(function () {

      var value = $(this).val();

      $("span#gutter-text").text(value);

    }).keyup();

    $("input#gutter").keyup(function () {

      var value = $(this).val();

      $("span#gutter-text").text(value);

    }).keyup();

        $('a#calc').click(function(){

    var width = parseInt($('input#width').val());

    var col = parseInt($('input#columns').val());

var gutter = parseInt($('input#gutter').val());

    var newWidth = width / col;

    var colSize = (gutter + gutter);

    var colWidth = newWidth - colSize;

    $('#test').val(colWidth).append("px");

}); 

</script>