Показать сообщение отдельно
  #11 (permalink)  
Старый 24.03.2015, 09:00
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от YaroBest
спасибо за совет, выходит без JQuery ничего не выйдет?
Не слушай их. Разберись сначала с чистым js. Пиши под современные браузеры. Если нужно чтобы работало и в старье, но не хочешь разбираться в багах/различиях старых браузеров, тогда используй jquery.

Сообщение от YaroBest
не могу понять как так получается что один и тот же код в разных браузерах себя по-разному ведет (ну, почти )
Не совсем. Код себя одинаково ведет. Но в старых браузерах ущербная объектная модель документа. Вот ты юзаешь window.innerHeight. А в старых IE нет такого свойства.

У тя проблема не в этом. Во-первых, какого хрена ты напихал в код setInterval'ов? Их вообще не должно быть, это неправильный подход. Получается ты используешь что-то вроде "метода тыка". Еще ты почему-то боишься массивов. Вместо slides у тебя отдельно slide0, slide1 и т.д.
Почему ты меню выдвигаешь каждый пункт отдельно - неясно. Не проще ли задать -100% родителю?
Цитата:
автоматическое выравнивание слайдов (если застряли на пол экрана)
Это вообще порадовало. Это как вообще? Вот из-за твоих интервалов и появляется ненужная энтропия.

Изучай "классы". Вместо того чтобы раскидывать по всей страницы кучу переменных и функций для работы с ними, объединяй их по смыслу в группы - в объекты. Несколько свойств + методы для работы с ними. Допустим меню:

class Menu() {
    constructor(selector) {
        this.items = document.querySelector(selector).children;
        this.active = -1;
        this.setActive(0);
        this.setupListeners();
    }
    setActive(index) {
        this.active = index;
        this.items[index].classList.add('active');
    }
    setupListeners() {
        for (var i = 0; i < this.items; i++)
            this.items[i].onclick = this.setActive.bind(this, i); // ES5, не работает в старье
    }
}
var menu = new Menu('.menu');

menu.setActive(1);


Анимацию проще сделать на css3. В старье будет без анимации. Ну и че? Почти всегда старый браузер == старый комп == тормоза при анимации. Так что все справедливо.

Вот короче тебе заготовка: http://jsfiddle.net/danya_postfactum/z8cLa59g/
Только событие wheel не кроссбразерное. Нужны костыли для событий DOMMouseScroll (FF старый), mousewheel (chrome старый, ie8).
Работает во всех нормальных браузерах, в IE10+. Только меню я побыстрому отцентрировал через css3. Подключи classList.js с просторов инета и заработает в IE9. Подключи addEventListener.js и почти что заработает в IE8, правда без анимации.
__________________
В личку только с интересными предложениями

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