Javascript-форум (https://javascript.ru/forum/)
-   Internet Explorer (https://javascript.ru/forum/css-html-internet-explorer/)
-   -   IE и Edge не устанавливают свойство zIndex в цикле (https://javascript.ru/forum/css-html-internet-explorer/66039-ie-i-edge-ne-ustanavlivayut-svojjstvo-zindex-v-cikle.html)

xShift 22.11.2016 12:45

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 перестает меняться вообще:help: .

В Opera, Firefox, Android browser, Chrome и Safari все работает великолепно! Помогите мне пожалуйста устранить эту ошибку в браузере IE и Edge. Хотя бы в Edge так как писать я буду еще долго, а осел к тому времени, я надеюсь, сдохнет окончательно.

xShift 22.11.2016 14:47

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

<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

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

Dilettante_Pro 22.11.2016 15:07

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

Dilettante_Pro 22.11.2016 15:29

<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>

xShift 22.11.2016 15:51

Цитата:

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

Он и в правда работает. Я сделал саначала проверку чтобы это не оказалось length, но потом туда пролезло item и, в итоге, проверка на объект весьма сработала.

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


Часовой пояс GMT +3, время: 00:57.