Показать сообщение отдельно
  #1 (permalink)  
Старый 30.08.2016, 14:04
Новичок на форуме
Отправить личное сообщение для mn8156 Посмотреть профиль Найти все сообщения от mn8156
 
Регистрация: 23.06.2016
Сообщений: 7

проблема с расчетом размера окна браузера
День добрый! По задумке главный контейнер делиться на 2 равных части (это список сообщений и блок с 1-им сообщением). На устройствах с шириной < 768px всегда должна быть видна только одна часть. Сначала видна левая , а при клике на нее, общий контейнер сдвигается на ширину левой и на экране появляется правая. И в этом положении при клике на заголовок (titleSelector (левый верхний угол "СООБЩЕНИЯ")) происходит то же , только наоборот. Когда размер окна браузера становиться >= 768px блоки возвращаются в начальную позицию и их видно оба.

Проблема: после ресайза (c размера окна<768px в размер окна>=768px) можно кликать на titleSelector или на pointSelector и контейнер будет сдвигаться, хотя этого не должно происходить т.к. проверяется размер экрана, и функция срабатывает не только при загрузке , но и при изменении размера экрана. Подскажите, пожалуйста, как исправить проблему?

Как работает можно посмотреть здесь: http://testapi.innogest.ru/sites/def...ages_TEST.html

jQuery(document).ready(function (){

  // при клике на сообщение отодвигает влево
  function pullLeft(pointSelector){      
      $(pointSelector).on("click", function(e){      
        $(".pull_out-container").css({"transform":"translate(-100%)","transition":"0.5s"});
        $(".pull_out-container").addClass("pull_out-container_shifted");
      })      
  }

  // при клике на заголовок отодвигает вправо (обратно)  
  function pullRight(titleSelector){      
      $(titleSelector).on("click", function(){
        if ( $(".pull_out-container").hasClass("pull_out-container_shifted") ) {
          $(".pull_out-container").css({"transform":"translate(0%)","transition":"0.5s"});
          $(".pull_out-container").removeClass("pull_out-container_shifted");
        }
      })
  };

  // елси у контейнера есть класс "pull_out-container_shifted"  (т.е. он сдвинут)  
  // сдвигаем его в начальную позицию
  function pullToInitialPos(){
    if ( $(".pull_out-container").hasClass("pull_out-container_shifted") ) {
      $(".pull_out-container").css({"transform":"translate(0%)","transition":"0.5s"});
      $(".pull_out-container").removeClass("pull_out-container_shifted");
    }  
  }


  // Главная функция
  function pullOut(){
    var windowWidth = $(window).width();
    
     if ( windowWidth < 768 ){
      pullLeft(".dialog-list-point");
      pullRight(".category-header__title");
    }  
    else{      
      pullToInitialPos();
    }
  }



  // Запускаем при загрузке и при изменении размеров окна
  $(window).on("load", function(){
    pullOut();
  })

  $(window).resize(pullOut);


})

Последний раз редактировалось mn8156, 30.08.2016 в 15:22.
Ответить с цитированием