Su questo script mi è stato dato un grande aiuto.

Ora un ulteriore problema.

All'aumentare dei riquadri, sia in lunghezza che in altezza, dovrebbe moltiplicarsi il numero dei riquardi.

Mi spiego meglio: Aumento la lunghezza --> Partenza = 1 --> Click = 2 --> Click --> 3 --> e cosi via...

Ora..se, giustamente, aumento contemporaneamente l'altezza, dovrebbe aumentare anche l'altezza. (Moltiplicandosi quindi..)

Quindi se: in lunghezza ho 10 riquadri e poi clicco su "aumenta altezza"..giustamente i riquadri diventano 20 !!! (Giusto??)

Ecco...come fare???

Il codice è bello che pronto. Basta copiare, incollare, aggiungere il tipico file nativo jQuery di base e partire con la pagina pronta e provare lo script.

codice:
<html>
<head>

<style type="text/css">
#box {
margin:0px;
padding:0px;
width:400px;
height:100px;
border-style:solid;
border-color:#000000;
border-width:1px;}
				 
#box_sp {
width:10px;
height:10px;
min-width:10px;
max-width:400px;
min-height:10px;
max-height:100px;
background-color:red;}

#prova { display:none;width:1px; }
#advice { 
width:500px;
height:80px;
padding:3px;
color:#FF0000;
border: solid #FF0000 2px;
position:absolute;
top:10px;
left:500px;
display:none;
z-index: 20; }

.inp {
width:25px;
height:25px;
background-color:#333333;
color:#ffffff;
border: 2px #ffffff ridge;
border-radius: 10px 10px 10px 10px;
font-size:16px;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:center; }
</style>	

<script type="text/javascript" src=" QUI METTETECI IL CODICE JQUERY TIPICO DI BASE"></script>

<script type="text/javascript">
var pixw = 400;
var pixh = 100;

function morewidth () {

var dimw = $("#box_sp").width();
var prova = $("#boxes").val();
					
$("#box_sp").width(dimw+10);
$("#lung").val(dimw+10);
$("#boxes").val(new Number(prova)+1);

if ($("#box_sp").width() >= 400) {
    $("#lung").val(400) && $("#boxes").val(40);
   }

if ($("#box_sp").width() === pixw) {
    $("#advice").show("slow");
 	}
}

function lesswidth () {

var dimw = $("#box_sp").width();
var prova = $("#boxes").val();

$("#box_sp").width(dimw-10);
$("#lung").val(dimw-10);
$("#boxes").val(prova-1);

if ($("#lung").val() <= 10) {
   $("#lung").val(10) && $("#boxes").val(1);
	}

if ($("#box_sp").width() < pixw) {
   $("#advice").hide("slow");
	}
}

function moreheight () {

var dimh = $("#box_sp").height();
var prova = $("#boxes").val();

$("#box_sp").height(dimh+10);
$("#altez").val(dimh+10);
$("#boxes").val(new Number(prova)+1);

if ($("#altez").val() >= 100) {
   $("#altez").val(100) && $("#boxes").val(10);
}

if ($("#box_sp").height() === pixh) {
   $("#advice").show("slow");
}
}

function lessheight () {

var dimh = $("#box_sp").height();
var prova = $("#boxes").val();

$("#box_sp").height(dimh-10);
$("#altez").val(dimh-10);
$("#boxes").val(prova-1);

if ($("#altez").val() <= 10) {
   $("#altez").val(10) && $("#boxes").val(1);
}

if ($("#box_sp").height() < pixh) {
   $("#advice").hide("slow");
}
}
</script>
	
</head>

<body>

<div id="box">
  <div id="box_sp"></div>
</div>

<div id="advice">
 <span style="font-weight:bold;">Avviso</span>
  

   

    <span style="font-size:11px;">Bla bla bla bla bla bla bla bla bla.
     

      

    </span>
</div>



<button type="button" onclick="morewidth()" class="inp">+</button>
  <span>Lunghezza</span>
<button type="button" onclick="lesswidth()" class="inp">-</button>

<button type="button" onclick="moreheight()" class="inp">+</button>
  <span>Altezza</span>
<button type="button" onclick="lessheight()" class="inp">-</button>





					
<span>Grandezza in pixel:</span>
  <input type="text" id="lung" style="width:30px;" value="10" readonly="readonly" />
<span>x</span>
  <input type="text" id="altez" style="width:30px;" value="10" readonly="readonly" />
								
<span>Numero riquadri:</span>
  <input type="text" id="boxes" style="width:30px;text-align:right;" value="1" readonly="readonly" />


</body>
</html>