jquery изменение размера div кнопкой

361

Samail

2 мая 2013, 07:03

6487

Кто знает, есть в jquery возможность изменять пользователю размеры блока не ползунком, а кнопкой/ссылкой. Не на произвольные, а на заранее заданные. Т.е. нужно, что бы по умолчанию стояло 100%х100%, по нажатию кнопки становилось к примеру 600х800пикс, по нажатию на другую опять 100%х100%.

...ну или не в jquery, а в другом скрипте.

S3

109

sok3535

2 мая 2013, 07:29

#1

<!DOCTYPE html>

<html>

<head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

</script>

<script> 

$(document).ready(function(){

  $("button").click(function(){

    var div=$("div");

    

    div.animate({height:'300px',opacity:'0.4'},"slow");

    div.animate({width:'300px',opacity:'0.8'},"slow");

  });

});

</script> 

</head>

 

<body>

<button>Start Animation</button>

<div style="background:#98bf21;height:100%;width:100%;position:absolute;"><p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>



</div>



</body>

</html>

361

Samail

2 мая 2013, 07:53

#2

sok3535, не это не совсем то, нужно что-бы было 2 кнопки, одна уменьшает до определённого размера, другая увеличивает.

S3

109

sok3535

2 мая 2013, 08:24

#3

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#start").click(function(){
    $("div").animate({
      
      opacity:'0.5',
      height:'450px',
      width:'450px'
    });
  });
});
</script>
<script> 
$(document).ready(function(){
  $("#stop").click(function(){
    $("div").animate({
      
      opacity:'0.5',
      height:'250px',
      width:'250px'
    });
  });
});
</script>  
</head>
 
<body>
<button id="start">Start Animation</button>
<button id="stop">Stop Animation</button>
<div style="background:#98bf21;height:100%;width:100%;position:absolute;"><p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

</div>

</body>
</html>

код разнесен - объедините по желанию

361

Samail

2 мая 2013, 08:33

#4

sok3535, спасибо :)

---------- Добавлено 02.05.2013 в 19:57 ----------

sok3535, ещё один вопрос, куда в этом скрипте id вставить? А то у меня все div'ы сейчас изменяются.

S3

109

sok3535

2 мая 2013, 09:05

#5

как то так

$("#moiID").animate

вместо этого "div" свой id пропишите вот так #вашiID - зависит от css

361

Samail

2 мая 2013, 09:32

#6

Я всё никак не отстану :) У меня теперь всё что расположено ниже.

<div style="background:#98bf21;height:100%;width:100%;position:absolute;"><p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

</div>

Отображается на странице на уровне этого блока,как если-бы его не было и перекрывается им.

S3

109

sok3535

2 мая 2013, 09:46

#7

перед и после блока вставьте

<div class="clear"></div>

361

Samail

2 мая 2013, 09:56

#8

Вот так?


 <div class="clear"></div>

    <div id="ххх" style="background:#98bf21;width: 100%; height: 100%;position:absolute;">

11111

</div>

<div class="clear"></div>

...не помогло.

S3

109

sok3535

2 мая 2013, 09:58

#9

а, блин вот это

width: 100%; height: 100%;

измените на нужный размер

width: 350px; height: 200px;

- по стилям сориентируйтесь

361

Samail

2 мая 2013, 10:04

#10

Так 100% это и есть нужный размер.

Все что нужно знать о DDоS-атаках грамотному менеджеру

Яндекс Вебмастер вынес товарные фиды в отдельный раздел