Сергей16

Рейтинг
0
Регистрация
29.03.2016
jquery изменение размера div через input

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

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

<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>
jquery изменение размера div через input

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

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