Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.09.2011, 22:10
Профессор
Отправить личное сообщение для Александр х@к Посмотреть профиль Найти все сообщения от Александр х@к
 
Регистрация: 24.08.2011
Сообщений: 159

Ресайз элементов, как?код есть но не работает
<!DOCTYPE HTML>
<html>
<body>
<div id="block">    <div id="lt" class="angle"></div>
    <div id="tr" class="angle"></div>
    <div id="rb" class="angle"></div>
    <div id="bl" class="angle"></div>
  </div>
<script>
window.onload = function () { 
  function gID(id) { return document.getElementById(id); }
 
  var block = gID('block'),
      lt = gID('lt'),
      tr = gID('tr'),
      rb = gID('rb'),
      bl = gID('bl');
 
 
 
 
  // Ресайз за левый верхний уголок
  function resizeLT(e) {
    if (e.which == 1) {
      var mousePositionX = e.pageX,
          mousePositionY = e.pageY;
 
      function moveOnDocument(e) {
        var moveX = e.pageX - mousePositionX,
            moveY = e.pageY - mousePositionY,
            blockWidth = block.offsetWidth - 2 - moveX,
            blockHeight = block.offsetHeight - 2 - moveY,
            blockLeft = block.offsetLeft + moveX,
            blockTop = block.offsetTop + moveY;
 
        mousePositionX = e.pageX,
        mousePositionY = e.pageY;
 
        block.style.width = blockWidth + 'px';
        block.style.height = blockHeight + 'px';
 
        block.style.left = blockLeft + 'px';
        block.style.top = blockTop + 'px';
      }
 
      document.addEventListener('mousemove', moveOnDocument, false);
 
      function upOnDocument() {
        document.removeEventListener('mousemove', moveOnDocument, false);
      }
 
      document.addEventListener('mouseup', upOnDocument, false);
 
      e.preventDefault();
      e.stopPropagation();
      return false;
    }
  }
  lt.addEventListener('mousedown', resizeLT, false);
 
 
 
 
  // Ресайз за верхний правый уголок
  function resizeTR(e) {
    if (e.which == 1) {
      var mousePositionX = e.pageX,
          mousePositionY = e.pageY;
 
      function moveOnDocument(e) {
        var moveX = e.pageX - mousePositionX,
            moveY = e.pageY - mousePositionY,
            blockWidth = block.offsetWidth - 2 + moveX,
            blockHeight = block.offsetHeight - 2 - moveY,
            //blockLeft = block.offsetLeft + moveX,
            blockTop = block.offsetTop + moveY;
 
 
        mousePositionX = e.pageX,
        mousePositionY = e.pageY;
 
        block.style.width = blockWidth + 'px';
        block.style.height = blockHeight + 'px';
 
        //block.style.left = blockLeft + 'px';
        block.style.top = blockTop + 'px';
      }
 
      document.addEventListener('mousemove', moveOnDocument, false);
 
      function upOnDocument() {
        document.removeEventListener('mousemove', moveOnDocument, false);
      }
 
      document.addEventListener('mouseup', upOnDocument, false);
 
      e.preventDefault();
      e.stopPropagation();
      return false;
    }
  }
  tr.addEventListener('mousedown', resizeTR, false);
 
 
 
 
  // Ресайз за прваый нижний уголок
  function resizeRB(e) {
    if (e.which == 1) {
      var mousePositionX = e.pageX,
          mousePositionY = e.pageY;
 
      function moveOnDocument(e) {
        var moveX = e.pageX - mousePositionX,
            moveY = e.pageY - mousePositionY,
            blockWidth = block.offsetWidth - 2 + moveX,
            blockHeight = block.offsetHeight - 2 + moveY;
            //blockLeft = block.offsetLeft + moveX,
            //blockTop = block.offsetTop + moveY;
 
        mousePositionX = e.pageX,
        mousePositionY = e.pageY;
 
        block.style.width = blockWidth + 'px';
        block.style.height = blockHeight + 'px';
 
        //block.style.left = blockLeft + 'px';
        //block.style.top = blockTop + 'px';
      }
 
      document.addEventListener('mousemove', moveOnDocument, false);
 
      function upOnDocument() {
        document.removeEventListener('mousemove', moveOnDocument, false);
      }
 
      document.addEventListener('mouseup', upOnDocument, false);
 
      e.preventDefault();
      e.stopPropagation();
      return false;
    }
  }
  rb.addEventListener('mousedown', resizeRB, false);
 
 
 
 
  // Ресайз за нижний левый уголок
  function resizeBL(e) {
    if (e.which == 1) {
      var mousePositionX = e.pageX,
          mousePositionY = e.pageY;
 
      function moveOnDocument(e) {
        var moveX = e.pageX - mousePositionX,
            moveY = e.pageY - mousePositionY,
            blockWidth = block.offsetWidth - 2 - moveX,
            blockHeight = block.offsetHeight - 2 + moveY,
            blockLeft = block.offsetLeft + moveX;
            //blockTop = block.offsetTop + moveY;
 
        mousePositionX = e.pageX,
        mousePositionY = e.pageY;
 
        block.style.width = blockWidth + 'px';
        block.style.height = blockHeight + 'px';
 
        block.style.left = blockLeft + 'px';
        //block.style.top = blockTop + 'px';
      }
 
      document.addEventListener('mousemove', moveOnDocument, false);
 
      function upOnDocument() {
        document.removeEventListener('mousemove', moveOnDocument, false);
      }
 
      document.addEventListener('mouseup', upOnDocument, false);
 
      e.preventDefault();
      e.stopPropagation();
      return false;
    }
  }
  bl.addEventListener('mousedown', resizeBL, false);
 
}
</script> 

</body>
</html>


Но блок вообще не выводит
Я хочу,как здесь: http://dl.dropbox.com/u/6001712/demo/resize/index.html
Ответить с цитированием
  #2 (permalink)  
Старый 02.09.2011, 22:15
Аватар для Magneto
Люмус, Емаксос Developer!
Отправить личное сообщение для Magneto Посмотреть профиль Найти все сообщения от Magneto
 
Регистрация: 06.05.2010
Сообщений: 677

Щас я прикрою лавочку

У тебя таблицы стилей не хватает. Вот ссылка на архив http://dl.dropbox.com/u/6001712/demo/resize.zip
Ответить с цитированием
  #3 (permalink)  
Старый 03.09.2011, 16:30
Профессор
Отправить личное сообщение для Александр х@к Посмотреть профиль Найти все сообщения от Александр х@к
 
Регистрация: 24.08.2011
Сообщений: 159

подскажи код, а то качать не хочу
Ответить с цитированием
  #4 (permalink)  
Старый 03.09.2011, 16:36
Аватар для Magneto
Люмус, Емаксос Developer!
Отправить личное сообщение для Magneto Посмотреть профиль Найти все сообщения от Magneto
 
Регистрация: 06.05.2010
Сообщений: 677

Что там качать? 1,54 КБ? Я тебе на блюдечке свой скрипт даю так ты еще носом ворочаеш.
Ответить с цитированием
  #5 (permalink)  
Старый 03.09.2011, 17:00
Профессор
Отправить личное сообщение для Александр х@к Посмотреть профиль Найти все сообщения от Александр х@к
 
Регистрация: 24.08.2011
Сообщений: 159

а мне можно кодом)))
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выборка элементов у которых есть данные установленные через дата TicTac jQuery 2 02.05.2011 23:45
ява-скрипт выборочно работает-не работает zeta777 Internet Explorer 0 20.01.2010 11:41
не работает функц. календаря если в имение есть [] kotjke Я не знаю javascript 2 04.06.2009 11:43
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37
Скрипт меню-гармошки работает выборочно Extern Элементы интерфейса 2 23.02.2009 15:32