Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.11.2016, 12:45
Аватар для xShift
Профессор
Отправить личное сообщение для xShift Посмотреть профиль Найти все сообщения от xShift
 
Регистрация: 22.11.2016
Сообщений: 212

IE и Edge не устанавливают свойство zIndex в цикле
Здравствуйте.

Решил написать свой микрофреймворк и столкнулся с небольшой проблемой при создании одного из модулей для вращения какого-либо контента.

Вот код модуля:

// Micro module rotate some contents 
// [element] :: ( #parents fixed container -> .slide selector )
rotate: function(e,c,t) {
    var e = this.htmlObj(e);
    var t = t || 3000;
    var ind = 0;

    setInterval(function() {
            e[ind].style.zIndex++;
            $.callback(c, e[ind]);
            if(ind++ >= e.length - 1) {
                for(var i in e) e[i].style.zIndex = 0;
                ind = 0;
            };
    }, t); 
},
htmlObj: function(e) {
    return this.isO(e) ? e : this.get(e);
},


Вот пример вращаемого конетнта:

<div id="presentation">
        <p>lorem.</p>
        <p>ipsum.</p>
        <p>dolor.</p>
    </div>


А вот стили отображения:

Код:
    /* rotation */
#presentation {
    border-radius: 8px;
    position: relative;
    margin: 20px 0;
    padding: 12px;
    height: 90px;
    width:95%;
}

    #mainContents #presentation p {
    box-shadow: 0 0 5px #999;
    background: #FFFFFF;
    position: absolute;
    border-radius:8px;
    padding: 10px;
    top: 0px;
}
Что происходит в Internet Explorer и Edge браузерах:
после первого срабатывания и корректного изменения zIndex у свойств HTML-элементов, при повторных итерациях, браузер как бы не обращает внимания на обхъекты и zIndex перестает меняться вообще .

В Opera, Firefox, Android browser, Chrome и Safari все работает великолепно! Помогите мне пожалуйста устранить эту ошибку в браузере IE и Edge. Хотя бы в Edge так как писать я буду еще долго, а осел к тому времени, я надеюсь, сдохнет окончательно.
Ответить с цитированием
  #2 (permalink)  
Старый 22.11.2016, 14:47
Аватар для xShift
Профессор
Отправить личное сообщение для xShift Посмотреть профиль Найти все сообщения от xShift
 
Регистрация: 22.11.2016
Сообщений: 212

переписал код без участия моего фреймворка и добавил проверку на тип объекта в цикле. код в IE начал работать исправно , но после того, как я поместил его назад во фреймворк - ничего не изменилось. два срабатывания и никаких ошибок в консоли. что делать с этим поганым ослом ?

<script type="text/javascript">

		var e = document.getElementsByTagName('p');
		var t = 900;
		var ind = 0;

	    setInterval(function() {

            e[ind].style.zIndex++;

            if(ind++ === e.length - 1) {

                for(var i in e) if(typeof(i) === 'object') e[i].style.zIndex = 0;

                ind = 0;

            };

    }, t);


</script>


то есть код отдельно работает, но в программе работать комплексно снова отказывается. помогите найти ошибку плиз! у меня используется свой движок для выборки HTML элементов из DOM. И в нем я ошибку найти не смог ):

Вот весь фреймворк с примерами: https://drive.google.com/file/d/0B4F...ew?usp=sharing

Может кто-то найдет немного своего времени чтобы помочь справиться с ошибкой?

Последний раз редактировалось xShift, 22.11.2016 в 14:53.
Ответить с цитированием
  #3 (permalink)  
Старый 22.11.2016, 15:07
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

xShift,
Вы утверждаете, что этот код работает? Странно... Проверьте значения typeof(i) и i
В Chrome typeof(i) всегда string

Последний раз редактировалось Dilettante_Pro, 22.11.2016 в 15:51.
Ответить с цитированием
  #4 (permalink)  
Старый 22.11.2016, 15:29
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

<style>
    #presentation   {
        border-radius: 8px;
        position: relative;
        margin: 20px 0;
        padding: 12px;
        height: 90px;
        width: 95%;
    }
    
    #mainContents #presentation p    {
        box-shadow: 0 0 5px #999;
        background: #FFFFFF;
        position: absolute;
        border-radius: 8px;
        padding: 10px;
        top: 0px;
    }
</style>
    <div id="mainContents">
        <div id="presentation">
            <p>lorem.</p>
            <p>ipsum.</p>
            <p>dolor.</p>
        </div>
    </div>
    <script>
        var e = document.getElementsByTagName('p');
        var t = 900;
        var ind = 0;
        setInterval(function () {
            e[ind].style.zIndex = 0;
            ind++;
            if (ind == e.length) { ind = 0; }
            e[ind].style.zIndex = 1;
        }, t);
    </script>
Ответить с цитированием
  #5 (permalink)  
Старый 22.11.2016, 15:51
Аватар для xShift
Профессор
Отправить личное сообщение для xShift Посмотреть профиль Найти все сообщения от xShift
 
Регистрация: 22.11.2016
Сообщений: 212

Сообщение от Dilettante_Pro Посмотреть сообщение
xShift,
Вы утверждаете, что этот код работает? Странно... Проверьте значения typeof(i) и i
Он и в правда работает. Я сделал саначала проверку чтобы это не оказалось length, но потом туда пролезло item и, в итоге, проверка на объект весьма сработала.

Спасибо вам огромное! У вас как-то понятнее получилось Я все мозги об этот код сломал
Ответить с цитированием
Ответ


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

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