День добрый! По задумке главный контейнер делиться на 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);
})
