Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.04.2014, 17:38
Новичок на форуме
Отправить личное сообщение для Kasper007 Посмотреть профиль Найти все сообщения от Kasper007
 
Регистрация: 14.04.2014
Сообщений: 3

Требуется помощь с 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, поэтому если можно чуть подробне) Заранее спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 14.04.2014, 20:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Просто добавь воды )))
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>
Ответить с цитированием
  #3 (permalink)  
Старый 15.04.2014, 16:11
Новичок на форуме
Отправить личное сообщение для Kasper007 Посмотреть профиль Найти все сообщения от Kasper007
 
Регистрация: 14.04.2014
Сообщений: 3

Спасибо, воды добавил)
Все разобрался) Спасибо
Ответить с цитированием
  #4 (permalink)  
Старый 15.04.2014, 17:57
Новичок на форуме
Отправить личное сообщение для Kasper007 Посмотреть профиль Найти все сообщения от Kasper007
 
Регистрация: 14.04.2014
Сообщений: 3

Не могли бы помочь мне снова)) Допустим если эти же элементы хочу поменять местами. При помощи onclick это делается просто, а вот мне нужно чтоб при перемещении мышью они поменялись местами) То есть я нажимаю на блок .news (не отпускаю) и начинаю передвигать этот блок в сторону .prepod и грубо говоря когда протошу до середины блока .prepod эти блоки поменялись местами. Это для меня пока сложновато, читал mousemove и mouseout но что то не подходит вроде..
Ответить с цитированием
  #5 (permalink)  
Старый 15.04.2014, 18:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Kasper007,
моя твоя непонимай - делай макет пожалуйста
Ответить с цитированием
  #6 (permalink)  
Старый 16.04.2014, 02:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Сообщение от Kasper007
нажимаю на блок .news (не отпускаю) и начинаю передвигать этот блок в сторону .prepod и грубо говоря когда протошу до середины блока .prepod эти блоки поменялись местами.
sortable?
<!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>

Последний раз редактировалось рони, 16.04.2014 в 02:50.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
требуется помощь по минимизации SQL запроса crack000 Серверные языки и технологии 2 18.02.2014 13:38
Требуется помощь bboulevard Ваши сайты и скрипты 14 02.12.2013 17:47
Работа с массивами. Требуется помощь. Кристи Общие вопросы Javascript 3 08.02.2011 18:00
Требуется помощь. Дмитрий Котов Работа 9 22.02.2010 20:02
Цитирование текста в комментариях. Требуется помощь. shinjuku Общие вопросы Javascript 3 07.07.2008 14:19