Форум Сайтостроение Веб-строительство

jquery изменение размера div через input

С1
На сайте с 29.03.2016
Offline
0
Сергей16
907

Добрый день.

Пожалуйста, подскажите, как реализовать растягивающюся форму.

На странице есть окна-длина и ширина, куда пользователь вводит свой размер(к примеру макс. длинна 5000мм, а ширина - 600мм). Надо, чтоб после ввода этих параметров появилась пропорциональная форма. input с шириной практически не меняется(почти всегда 600мм),меняется в

основном длина от 1метра до 5м.

Спасибо заранее.

Форма нужна для дальнейшего заполнения ее блоками, методом перетаскивания Drag and drop.

И второй вопрос. Будет не одна форма, а три. Связанные между собой в виде буквы "П". Т.е. горизонтальная форма(основная), а две вертикальных формы спускаются от нее. И если с левой вертикалкой понятно, где начало формы, то при растягивании горизонтальной формы, как определить начало правой формы?

С1
На сайте с 29.03.2016
Offline
0
Сергей16
#1

Вот похожий пример, только как-то надо заменить кнопку на окна 

<html>

<head>

<script type="text/javascript">

function changeSize()

{

document.getElementById("klematis").height="100";

document.getElementById("klematis").width="700";

}

</script>

</head>

<body>



<img id="klematis"  width="100" height="100" />

<br /><br />

<input type="button" onclick="changeSize()" value="Изменить размер изображения" />

<input type="text"  value="" required='true' regex="%5C-?%5Cd+(%5C.%5Cd%7B0,%7D)?" id="digit01" placeholder="1500" style="top:85px;left:100.817px;width:60px;height:25px;" class="cElementForSelect calcElement" />

<input type="text"  value="600" required='true' regex="%5C-?%5Cd+(%5C.%5Cd%7B0,%7D)?" id="digit02" placeholder="1500" style="top:85px;left:100.817px;width:60px;height:25px;" class="cElementForSelect calcElement" />

</body>

</html>
С1
На сайте с 29.03.2016
Offline
0
Сергей16
#2

Всем спасибо за просмотры.

Сам сделал, но не могу привязать правое окно к правой стороне верхнего окна. Может кто поможет? 

<html>

<head>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<style type="text/css">



#testcontainer{position:relative;}

#testcontainer1{position:absolute;left:250;}

#testcontainer

{

font-size:1em;

padding:0px;

width:370px;

height:130px;

border:1px solid grey;

overflow:hidden;

}

#testcontainer h2

{

margin-top:0px;

margin-bottom:13px;

padding:100%;



}

#testcontainer p

{

margin-top:0px;

margin-bottom:0px;

}

#testcontainer1

{

 float: left;

font-size:1em;

padding:0px ;

width:130px;

height:370px;

border:1px solid grey;

overflow:hidden;

}

#testcontainer1 h2

{

margin-top:0px ;

margin-bottom:13px;

padding:100%;

 }

 #testcontainer2

{

     

font-size:100em;

padding:0px ;

width:130px;

height:370px;

border:1px solid grey;

overflow:hidden;

}

#testcontainer2 h2

{

margin-top:0px ;

margin-bottom:13px;

padding:100%;

 }

 

#sizecont

{



font-size:0.8em;

}

.transfer-effect

{

border:2px solid grey;

}

select#effect1{

display:none;

}



</style>



<script type="text/javascript">



$(document).ready(function() {



   $("#effect1").change(function(){

      

      if ($("#effect1").val()==="size"){

         $("#sizecont").css("display","block");

         $("#transfercont").css("display","none");

         $("#scalecont").css("display","none");}

   });

   $("#but1").click(function(){

      var options={};

      if ($("#effect1").val()==="scale"){

         var options={percent:50};

         options.percent=$("#scalepercent").val();}        

      else if ($("#effect1").val()==="transfer"){

         var options={to:"#but1", className:"transfer-effect"}

         options.to=$("#trans1").val();

         options.className=$("#trans2").val();}       

      else if ($("#effect1").val()==="size"){

	  {

         var options={to:{width:200,height:200}};

         options.to.width=$("#size1").val();

         options.to.height=$("#size2").val();}

      $("#testcontainer").effect($("#effect1").val(), options ,1000);

      if ($("#effect1").val()==="size"){

         var options={to:{width:200,height:200}};

         options.to.width=$("#size4").val();

         options.to.height=$("#size3").val();}

      $("#testcontainer1").effect($("#effect1").val(), options ,1000);

      if ($("#effect1").val()==="size"){

         var options={to:{width:200,height:200}};

         options.to.width=$("#size6").val();

         options.to.height=$("#size5").val();}

      $("#testcontainer2").effect($("#effect1").val(), options ,1000);

   }

   });



});

</script>

</head>

<body>

<div id="testcontainer" class="ui-widget ui-corner-all">

<h2 class="ui-widget-header ui-corner-all"></h2>

</div>

<div id="testcontainer1" class="ui-widget ui-corner-all">

<h2 class="ui-widget-header ui-corner-all"></h2>

</div>

<div id="testcontainer2" class="ui-widget ui-corner-all">

<h2 class="ui-widget-header ui-corner-all"></h2>

</div>

<br /><br />



<select id="effect1" name="effect">



<option value="size"></option>



</select>

<br /><br />



<div id="sizecont">

Длинна:

<input id="size1" type="text" value="370"/>

<input id="size5" type="text" value="370"/>

<input id="size3" type="text" value="370"/>

<br /><br />

Ширина:

<input id="size2" type="text" value="130"/>

<input id="size6" type="text" value="130"/>

<input id="size4" type="text" value="130"/>

</div>

<br />



<input id="but1" type="button" value="Применить" />

</body>

</html>
Cygnus
На сайте с 19.08.2012
Offline
45
Cygnus
#3

Выкладывайте свои примеры на http://codepen.io/ так вам помогут быстрее

iOS приложения Оптимизация затрат на их создание

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий