Проблема с Браузерами
 

Доброго времени суток, дорогие друзья!

Делаю сайт для друга, столкнулся со следующей проблемой: в браузерах Mozilla Firefox и Яндекс мой сайт отображается некорректно. В первом случае не работает моя "чудо-прокрутка", во втором - какие-то жуткие проблемы с меню. Про IE вообще молчу!

подскажите пожалуйста в чем проблема и как нужно избегать подобного рода неприятностей. Особо приветствуются ссылки на материал по данной тематике, я ничего, ОСОБЕННО ПО ПРОБЛЕМЕ С ЯНДЕКСОМ, найти не могу.

вот собственно сайт: http://dropmefiles.com/4ZFtt

опыт нулевой, учебник прошел на 50% (+/-), судите строго :yes:

в хроме все ок в опере вроде тоже

забыл добавить, установлено левое бэкграунд-видео, оригинальное пока не слеплено. если ваше разрешение не 1366х768, оно, вероятнее всего, будет некорректно отображаться, прошу не обращать внимания!

да нет, оно и в хроме нормально не работает, если роликом мыши поиграть вверх-вниз)
посоветовать могу только найти нормальный плагин для скролла, раз свой написать не можете)

да, прокрутка немного косячная, работает через раз...

но меня больше интересует отображение меню в браузере яндекс! просто хочу понять в чем там проблема, посмотрите в яндексе пожалуйста

братцы, выручайте, не знаю шо делать

Начинай заново, из того что есть вряд ли что дельное получится, юзай jQuery, на чистом js у тебя возникнут серьезные проблемы с кроссбраузерностью.

По коду вижу, что куча лишнего. Полностью переписывай, лучше на jQuery

Могу помочь, обращайся в личку. Но всё делать не буду

спасибо за совет, выходит без JQuery ничего не выйдет? я не представляю пока еще что это такое)) не дошел. мне один знакомый уже говорил чтобы я переходил на JQuery, но он же говорил что именно с JS проблем не должно быть. не могу понять как так получается что один и тот же код в разных браузерах себя по-разному ведет.

мне не нужно чтобы за меня кто-то что-то делал, я делаю свои сайты чтоб набраться хоть какого-то опыта! скачивать какие-то штуки устанавливать и не понимать как они работают я умею, но мне это не нужно.

за совет конечно спасибо, но все ж хотелось бы знать в чем именно проблема, а JQuery я пожалуй сегодня и займусь.

YaroBest,
По мне так jQuery это плохо, она выполнена не самым лучшим образом, но для такого маленького сайта нет смысла писать трехэтажный кроссбраузерный код на чистом js

выходит все ж разные браузеры по-разному интерпретируют код?

YaroBest,
Нет, но по части скролла в браузерах трех-пятилетней давности целый цирк. Выделились мозилла и эксплорер

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

Не совсем. Код себя одинаково ведет. Но в старых браузерах ущербная объектная модель документа. Вот ты юзаешь 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, правда без анимации.

да, не думал я когда за js садился что будет все так сложно, может это все ж не мое, хз, уже 4 месяца учу, а толку 0.

уж подумал тут на меня забили :) спасибо за инфу, буду разбираться...

Не знаю, мне по коду показалось, что его написал понимающий человек. Да, новичек, да, неправильный подход, но для начала пойдет.

На старые браузеры не обращай внимания, их пора забывать уже. Изучи "классы" (конструкторы, прототипы) и события и будет проще.

Насчет интервалом. Там они должны быть, верней setTimeout, а еще верней - requestAnimationFrame. Нужны для анимации, покадровой. У меня в коде ее нет, я использовал css3 анимацию.

Сайт нормально работает, но берут сомнения что это ваш. Я его давно видел.

При чем тут яндекс-браузер? Такого браузера нет. Загляните в статистику сайта и увидите какие есть, а каких нет.

идея создания такого сайта с background-video возникла задолго до того как я начал изучать первые html тэги :)
прокрутку я увидел здесь. отсюда же, собственно говоря, и динамические слайды. я хз как у них там все написано, я и сам вижу что с интервалами косячно вышло, но, имхо, для маленького сайтика с маленьким кол-вом посетителей для начала было бы норм, если бы не...

вот этот браузер я имел ввиду. он меня подводить начал... а ну и мозилла... и експлорер :)

ладно, пофиг, будем лучше сразу делать как дядьки говорят