Требуется помощь с resizable
Добрый день js программисты. Помогите с небольшой прблемой. Есть 2 блока, которые обтекают друг друга. Нужно сделать так чтобы мышью можно было увеличивать размер одного блока, в это время размер друго пропорционально должен уменьшаться. Вот пример кода
<div class="news">...</div> //float:left; <div class="prepod">...</div> //float:right; <script type="text/javascript"> $(function(){ $(".news").resizable({alsoResize:'.prepod'}); $(".prepod").resizable({alsoResize:'.news'}); }); </script> Скрипт работает, но при увеличении одного блока второй также начинает увеличиваться, а нужно чтоб уменьшался. Чтоб отличался от действий alsoResize с точностью да наоборот.. Я только познакомился с js, поэтому если можно чуть подробне) Заранее спасибо |
Просто добавь воды )))
Kasper007,
вы какой эффект хотите получить в результате ? а пока вариант пропорционального изменения ширины блоков ... добавьте воды или пива ))) потянув за жёлтый разделитель ... <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>resizable demo</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <style> .news { width: 50%; height: 100px; background: url(http://static.freepik.com/free-photo/alcohol--bubbles--beer-with-bubbles--yellow_349974.jpg); background-size: cover; float: left; overflow: hidden; border-right: #FFFF00 2px solid; } .prepod{ height: 100px; background: transparent; overflow: hidden; background: url(http://oboi.kards.qip.ru/images/wallpaper/06/62/25094_1280_800.jpg); background-size: cover; } </style> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <div> <div class="news"><img src="http://img-fotki.yandex.ru/get/4103/annaze63.34/0_3115c_beb2e096_S" alt="" height="100"></div> <div class="prepod"><img src="http://stat21.privet.ru/lr/0c1e75c69e35db581d7fa53ba2112a88" alt="" height="100"></div> </div> <script> $( ".news" ).resizable({ maxHeight: 100, minHeight: 100, handles:"e", resize: function(event, ui) { $(".prepod" ).css({"margin-left":$(ui).width()}) } }).trigger('resize'); </script> </body> </html> |
Спасибо, воды добавил)
Все разобрался) Спасибо
|
Не могли бы помочь мне снова)) Допустим если эти же элементы хочу поменять местами. При помощи onclick это делается просто, а вот мне нужно чтоб при перемещении мышью они поменялись местами) То есть я нажимаю на блок .news (не отпускаю) и начинаю передвигать этот блок в сторону .prepod и грубо говоря когда протошу до середины блока .prepod эти блоки поменялись местами. Это для меня пока сложновато, читал mousemove и mouseout но что то не подходит вроде..
|
Kasper007,
моя твоя непонимай - делай макет пожалуйста |
Цитата:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>resizable demo</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <style> .news { width: 50%; height: 100px; background: url(http://static.freepik.com/free-photo/alcohol--bubbles--beer-with-bubbles--yellow_349974.jpg); background-size: cover; float: left; overflow: hidden; border: #FFFF00 2px solid; } .prepod{ width: 49%; height: 100px; background: transparent; overflow: hidden; background: url(http://oboi.kards.qip.ru/images/wallpaper/06/62/25094_1280_800.jpg); background-size: cover; float: left; border: #0000FF 2px solid; } </style> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <div class="content"> <div class="news"><img src="http://img-fotki.yandex.ru/get/4103/annaze63.34/0_3115c_beb2e096_S" alt="" height="100"></div> <div class="prepod"><img src="http://stat21.privet.ru/lr/0c1e75c69e35db581d7fa53ba2112a88" alt="" height="100"></div> </div> <script> $(".content").sortable({ axis: "x" , opacity:0.5,tolerance:"pointer"}).disableSelection(); </script> </body> </html> |
Часовой пояс GMT +3, время: 18:49. |