Javascript.RU

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

Изменение размера элемента при клике
Доброго времени суток! 3 дня не ем и не сплю пытаюсь сделать такую вещь:
есть элемент, при клике на него необходимо сделать увеличение его размеров, и уменьшение при очередном клике. НО! необходимо также сделать уменьшение, если человек щелкнул мышью вне этого элемента на экране. Все это должно работать одновременно. Сейчас код выглядит примерно так:
$('.float').click(function() {
 $('.float').toggleClass('size');
  });

При клике добавляю/убираю класс с увеличенным размером. Как сделать еще клик со свободной областью ума не приложу. Если делать общий клик по документу то он перебивает клик по селектору.
Помогите пожалуйста! Заранее благодарен!
Ответить с цитированием
  #2 (permalink)  
Старый 04.12.2013, 03:00
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Вероятно не самый лучший вариант..
<style>
.float{height: 20px;background: yellow}
.size{height:100px}
</style>
<div class="float"></div>
<script>
(function(){
var onDocumentClick = function() {
    setTimeout(function(){
        element.addEventListener('click', onElementClick);
    });
    document.removeEventListener('click', onDocumentClick);
    element.classList.remove('size');
};
var onElementClick = function() {
    setTimeout(function(){
        document.addEventListener('click', onDocumentClick);
    });
    element.removeEventListener('click', onElementClick);
    element.classList.add('size');
};

var element = document.querySelector('.float');
element.addEventListener('click', onElementClick);
})();
</script>
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 04.12.2013, 03:09
Новичок на форуме
Отправить личное сообщение для Derekovich Посмотреть профиль Найти все сообщения от Derekovich
 
Регистрация: 04.12.2013
Сообщений: 8

Спасибо за решение, буду сидеть разбираться... делаю на jquery, поэтому для чистого js нужно немного вникнуть.
Ответить с цитированием
  #4 (permalink)  
Старый 04.12.2013, 03:35
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Единственное, что возможно вызывает непонимание - это setTimeout в onElementClick.
Без него, событие тут же отрабатывает на документе и логика ломается.
Вместо setTimeout() можно просто остановить всплытие события: event.stopPropagation();
Причем в обработчике onDocumentClick setTimeout лишний - его можно удалить.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #5 (permalink)  
Старый 04.12.2013, 04:00
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

еще решение
<body>
    <style>
      .float {
        height: 20px;
        background: yellow
      }
      .size {
        height:100px
      }
    </style>
    <div class="float"></div>
    <script>
      (function () {
        var element = document.querySelector('.float');
        document.onclick = function (e) {
          var target = e && e.target || e.srcElement;
          element.classList[target.className == 'float' ? 'add' : 'remove']('size');
          return false;
        }
      })();
    </script>
  </body>

Последний раз редактировалось Vlasenko Fedor, 04.12.2013 в 04:21.
Ответить с цитированием
  #6 (permalink)  
Старый 04.12.2013, 04:54
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Забыл отметить что addEventListener нету в IE8, а classList - нету даже в IE9, и в старых версиях других браузеров. (но для всего этого есть костыли (polyfills))

Poznakomlus, твой вариант на мой взгляд, ибо нерационально - ловить все клики, когда есть возможность ловить не все.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #7 (permalink)  
Старый 04.12.2013, 07:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,078

Derekovich,
как сделать, чтобы при 2-м клике объект закрывался
Ответить с цитированием
  #8 (permalink)  
Старый 04.12.2013, 13:04
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

Сообщение от danik.js Посмотреть сообщение
Poznakomlus твой вариант на мой взгляд
эт смотря при каких условиях и задачах, можно еще тонн кода написать и фреймворки по подключать
<head>
    <style>
      .float {
        height: 20px;
        background: yellow
      }
      .size {
        height:100px
      }
    </style>
  </head>
<body>
<a href="http://mail.ru">Mail.ru</a>
<div class="float"></div>
<script>
  (function () {
	var element = document.querySelector('.float');
	document.onclick = function (event) {
	  event = event || window.event;
	  var target = event.target || event.srcElement;
	  element.className = 'float' + (target.className == 'float' ? ' size' : '');
	  return target.tagName == 'A';
	}
  })();
</script>
</body>

http://learn.javascript.ru/play/7BWXn
Поправил исходя из советов danik.js ниже

Последний раз редактировалось Vlasenko Fedor, 04.12.2013 в 14:43.
Ответить с цитированием
  #9 (permalink)  
Старый 04.12.2013, 13:34
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

<зануда_mode>
1) Элемент <style> не должен быть внутри <body> (разве что с атрибутом scoped)
2) Твой скрипт отключит переход по ссылкам, так как ты предотвращаешь действие по умолчанию
3) Нет смысла переобъявлять переменную event (она уже объявлена как параметр)
</зануда_mode>
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #10 (permalink)  
Старый 04.12.2013, 15:19
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Poznakomlus
это не так
Ты наверно не понял. Ты конечно же можешь. Но браузер будет вынужден в процессе парсинга исправить твой косяк и в конечном итоге твой <style> все-равно попадет в <head>. Это описано в стандарте.
Можешь открыть инспектор и убедиться в этом. Хотя в общем то ничто не мешает поместить его в любое место скриптом в уже сформированном DOM-е.

Между прочим, такая запись будет правильной:
<style>/* тут стили */</style>
<div>тут содержимое body</div>


Браузер автоматом сформирует <head> и <body>, причем ошибок парсинга не возникнет, в отличие от твоего варианта.
__________________
В личку только с интересными предложениями

Последний раз редактировалось danik.js, 04.12.2013 в 15:21.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Появление/исчезновение дива при клике на ссылку nickostyle jQuery 5 18.01.2016 03:03
Сворачивание блока при клике в любом месте страницы onuvidelsolnce Элементы интерфейса 6 15.04.2013 13:35
Предотвратить изменение размеров страницы при добавлении элемента NeVirus Events/DOM/Window 1 15.03.2013 08:33
Отлов изменения размера элемента. Какие способы есть? danik.js Events/DOM/Window 3 05.02.2013 11:00
При клике в любом месте документа должен удаляться определенный id DorianLeroy jQuery 2 24.12.2011 22:05