Форум

Сергей16 · #1 (**permalink**) 29.03.2016, 10:34

Добрый день.
Пожалуйста, подскажите, как реализовать растягивающюся форму.
На странице есть окна-длина и ширина, куда пользователь вводит свой размер(к примеру макс. длинна 5000мм, а ширина - 600мм). Надо, чтоб после ввода этих параметров появилась пропорциональная форма. input с шириной практически не меняется(почти всегда 600мм),меняется в
основном длина от 1метра до 5м.
Спасибо заранее.
Форма нужна для дальнейшего заполнения ее блоками, методом перетаскивания Drag and drop.
И второй вопрос. Будет не одна форма, а три. Связанные между собой в виде буквы "П". Т.е. горизонтальная форма(основная), а две вертикальных формы спускаются от нее. И если с левой вер
тикалкой понятно, где начало формы, то при растягивании горизонтальной формы, как определить начало правой формы?
Пример такой [url="http://ruseller.com/lessons/les533/example/index.html"]
только без слайдера и без картинки

Сергей16 · #2 (**permalink**) 29.03.2016, 13:05

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

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

Сергей16 · #3 (**permalink**) 30.03.2016, 17:11

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

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

Форум

Справочник

Discord чат

Курсы javascript