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>
Rispondi quotando