ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Не меняется zindex div элементов
14 сообщений из 14, страница 1 из 1
Не меняется zindex div элементов
    #37964483
S_A_V_e
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
S_A_V_e
Участник
Здравствуйте.

Добавляю на форму div элементы скриптом:

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
for(var i=0; i < day.length; i++){
......
var oDiv = document.createElement("DIV");
oDiv.id = ....
oDiv.onclick = function (e) { changeZIndex(divId1, divId2); };
......
document.getElementById("divSchData").appendChild(oDiv);
}



По клику на div мне надо поменять zindex div элемента (поменять 2 div местами на форме т.к. один под другим находится). Функция changeZIndex вызывается , но я не то что поменять их местами , даже удалить их не могу с формы.


Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
function changeZIndex(divId1, divId2) {
   
    var div1 = document.getElementById(divId1);
    var div2 = document.getElementById(divId2);     
    // Это то что мне нужно сделать - не работает
    //div1.style.zIndex = 1;
    //div2.style.zIndex = 2;


   // Пробовал удалить элементы с формы и добавить снова ,но в другом порядке (что бы нижний оказался верхним)
    var schData = document.getElementById("divSchData");
    // элементы не удаляются
    div1.parentNode.removeChild(div1);
    div2.parentNode.removeChild(div2);
   //schData.appendChild(div2);
    //schData.appendChild(div1);

    // перерисовка элемента
    schData.style.display = "none";
    schData.style.display = "block";  


}



С отображением вообще ничего не происходит. Индекс не меняется , а "удалённые" элементы продолжают висеть на форме и при клике на них вызывается changeZIndex... При этом если "удалять" второй раз , то Id элементов передаются правильные , но document.getElementById(...) их уже не находит.
Что делаю не так ? Как их поменять местами ? Браузер IE9. Заранее спасибо за ответы.
...
Рейтинг: 0 / 0
19.09.2012, 17:16:23
| Ответить | Цитировать | Написать  
Не меняется zindex div элементов
    #37964985
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
S_A_V_eЧто делаю не так ?
Например тестовый пример. Его вообще нет. А пора бы уже смастерить его и на нём все можно будет посмотреть...
...
Рейтинг: 0 / 0
20.09.2012, 08:32:50
| Ответить | Цитировать | Написать  
Не меняется zindex div элементов
    #38002514
S_A_V_e
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
S_A_V_e
Участник
Наконец то дошли руки пример сделать... Суть задачи немного поменялась. Сейчас элементы меняются местами. НО меняются только для последнего добавленного элемента (меняются 7 и 8 при клике на любом другом - 1 или 2 например). Хотя id элементов определяются правильно при передачи в changeZIndex(...) для каждого добавляемого div элемента. Но функция вызывается при любом клике с параметрами 8 и 7 (changeZIndex(8,7))
Вот собственно и пример:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>    

    <style type="text/css">
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0;
            overflow: hidden;
        }
        .el
        {
            FILTER: alpha(opacity=95);
            MARGIN: 1px;
            CURSOR: hand;
            POSITION: absolute;
            BACKGROUND-COLOR: #FFF3BD;
            BORDER: gray 1px solid;
            color: black;
            moz-opacity: .95;
            opacity: .95;
        }
    </style>
    <script type="text/javascript">
        function fillData() {
            
            var size = 50;
            var step = 0;
            for (var i = 1; i < 9; i++) {

                var selector = (i % 2);
                // Создаём элемент
                var divEl = document.createElement("DIV");
                divEl.id = i;
                divEl.className = "el";
                divEl.style.left = selector * size / 2;
                divEl.style.top = step * size;
                divEl.style.width = size;
                divEl.style.height = size;
                divEl.innerText = i;
                divEl.style.zIndex = selector == 0 ? 1 : 2;
                // Определяем какие элементы обменивать местами (1 и 2, 3 и 4, ...)
                var divId1 = i;
                var divId2 = selector == 0 ? (i - 1) : (i + 1);
                // Подписываем элемент на событие и передаём в функцию id элементов 
                divEl.onclick = function (e) { changeZIndex(divId1, divId2); }; 
                // Так не вызывается вообще (наличие одинарных кавычек вокруг параметров роли не играет)
                //divEl.setAttribute("onclick", "changeZIndex(" + divId1 + "," + divId2 + ")");
                if (selector == 0 && i > 0)
                    step++;
                
                // Добавляем элемент на страницу (в div data)
                document.getElementById("data").appendChild(divEl);
            }
        }

        function changeZIndex(divId1, divId2) {            
            // Обменять местами z-index элементов
            var div1 = document.getElementById(divId1);
            var div2 = document.getElementById(divId2);
            var zi = div2.style.zIndex;
            div2.style.zIndex = div1.style.zIndex;
            div1.style.zIndex = zi;
            
        }
    </script>
</head>

<body onload="fillData()">
    
    <div id="data" style="width: 100%; height: 100%; ">
    </div>

</body>
</html>



Почему так ? Как сделать что бы менялись нужные элементы. ( 1 и 2 , 3 и 4 , ...) ?
...
Рейтинг: 0 / 0
17.10.2012, 14:34:38
| Ответить | Цитировать | Написать  
Не меняется zindex div элементов
    #38002550
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
S_A_V_eНо функция вызывается при любом клике с параметрами 8 и 7 (changeZIndex(8,7))
Так ты сам так и написал... Это именно последние значения у твоего цикла.
...
Рейтинг: 0 / 0
17.10.2012, 14:45:47
| Ответить | Цитировать | Написать  
Не меняется zindex div элементов
    #38002557
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
S_A_V_e , если тебе нужно менять местами блоки в одной "линии" - то твоя верстка вовсе плохая...
...
Рейтинг: 0 / 0
17.10.2012, 14:47:40
| Ответить | Цитировать | Написать  
Не меняется zindex div элементов
    #38002572
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Вот так хотя бы нужные циферки передаются...

Код: javascript
1.
divEl.setAttribute("onclick", "changeZIndex('" + divId1 + "','" + divId2 + "')");
...
Рейтинг: 0 / 0
17.10.2012, 14:51:09
| Ответить | Цитировать | Написать  
Не меняется zindex div элементов
    #38002614
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Програмёр
Участник
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>    

    <style type="text/css">
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0;
            overflow: hidden;
        }
        .el
        {
            FILTER: alpha(opacity=95);
            MARGIN: 1px;
            CURSOR: hand;
            POSITION: absolute;
            BACKGROUND-COLOR: #FFF3BD;
            BORDER: gray 1px solid;
            color: black;
            moz-opacity: .95;
            opacity: .95;
        }
    </style>
    <script type="text/javascript">
        function fillData() {
            
            var size = 50;
            var step = 0;
            for (var i = 1; i < 9; i++) {

                var selector = (i % 2);
                // Создаём элемент
                var divEl = document.createElement("DIV");
                divEl.id = i;
                divEl.className = "el";
                divEl.style.left = selector * size / 2;
                divEl.style.top = step * size;
                divEl.style.width = size;
                divEl.style.height = size;
                divEl.innerText = i;
                divEl.style.zIndex = selector == 0 ? 1 : 2;
                // Определяем какие элементы обменивать местами (1 и 2, 3 и 4, ...)
                var divId1 = i;
                var divId2 = selector == 0 ? (i - 1) : (i + 1);
// -------------------- Замыкание - сильная штука :) :: начало -----------------------
		(function(divEl, divId1, divId2){
                	// Подписываем элемент на событие и передаём в функцию id элементов 
                	divEl.onclick = function (e) { changeZIndex(divId1, divId2); }; 
                	// Так не вызывается вообще (наличие одинарных кавычек вокруг параметров роли не играет)
               		//divEl.setAttribute("onclick", "changeZIndex(" + divId1 + "," + divId2 + ")");
		})(divEl, divId1, divId2);
// -------------------- Замыкание - сильная штука :) :: конец -----------------------
                if (selector == 0 && i > 0)
                    step++;
                
                // Добавляем элемент на страницу (в div data)
                document.getElementById("data").appendChild(divEl);
            }
        }

        function changeZIndex(divId1, divId2) {            
            // Обменять местами z-index элементов
            var div1 = document.getElementById(divId1);
            var div2 = document.getElementById(divId2);
            var zi = div2.style.zIndex;
            div2.style.zIndex = div1.style.zIndex;
            div1.style.zIndex = zi;
            
        }
    </script>
</head>

<body onload="fillData()">
    
    <div id="data" style="width: 100%; height: 100%; ">
    </div>

</body>
</html>
...
Рейтинг: 0 / 0
17.10.2012, 15:04:24
| Ответить | Цитировать | Написать  
Не меняется zindex div элементов
    #38002628
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Я бы предложил такой вариант "перемены мест"...

 
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.line {
	overflow: hidden;
}
.box {
	float: left;
	width: 100px;
	height: 100px;
	margin: 5px;
	border: 1px solid;
	cursor: pointer;
}
</style>
<script type="text/javascript">
function swap(Obj) {
	var ol=Obj.parentNode;
	var ob=ol.getElementsByTagName('div');
	ol.appendChild(ob[0]);
};
</script>
</head>
<body>
    <div class="line">
	    <div class="box" onclick='swap(this)'>1</div>
	    <div class="box" onclick='swap(this)'>2</div>
    </div>
    <div class="line">
	    <div class="box" onclick='swap(this)'>3</div>
	    <div class="box" onclick='swap(this)'>4</div>
    </div>
</body>
</html>

...
Рейтинг: 0 / 0
17.10.2012, 15:08:40
| Ответить | Цитировать | Написать  
Не меняется zindex div элементов
    #38002696
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Програмёр
Участник
krvsaЯ бы предложил такой вариант "перемены мест"...

+
 
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.line {
	overflow: hidden;
}
.box {
	float: left;
	width: 100px;
	height: 100px;
	margin: 5px;
	border: 1px solid;
	cursor: pointer;
}
</style>
<script type="text/javascript">
function swap(Obj) {
	var ol=Obj.parentNode;
	var ob=ol.getElementsByTagName('div');
	ol.appendChild(ob[0]);
};
</script>
</head>
<body>
    <div class="line">
	    <div class="box" onclick='swap(this)'>1</div>
	    <div class="box" onclick='swap(this)'>2</div>
    </div>
    <div class="line">
	    <div class="box" onclick='swap(this)'>3</div>
	    <div class="box" onclick='swap(this)'>4</div>
    </div>
</body>
</html>



это в случае решения узкой задачи... и вызовет проблемы, если делать например систему вкладок, где вкладка, на которую кликнули должна вылезти наверх (при этом таких вкладок 10, или вообще не ограниченное кол-во).
Но я бы тоже завязался на парента.
...
Рейтинг: 0 / 0
17.10.2012, 15:34:37
| Ответить | Цитировать | Написать  
Не меняется zindex div элементов
    #38002798
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Програмёр , на случай ядерной войны я не закладывался...
...
Рейтинг: 0 / 0
17.10.2012, 16:13:42
| Ответить | Цитировать | Написать  
Не меняется zindex div элементов
    #38002807
S_A_V_e
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
S_A_V_e
Участник
Спасибо большое Програмёр !
Решение с замыканием отлично работает. То что нужно ! Самому и в голову не пришло бы так завернуть... Как показал krvsa то же можно , но с замыканием вариант более приемлемый.
Проблема решена. Тема закрыта.
...
Рейтинг: 0 / 0
17.10.2012, 16:16:39
| Ответить | Цитировать | Написать  
Не меняется zindex div элементов
    #38002835
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Програмёр
Участник
krvsa Програмёр , на случай ядерной войны я не закладывался...

сорри... на прошлой работе приучили именно к такому :). Сделал чё, а через месяц говорят, что наименований не 100, а 100 000, а вложенность не двойная, а в 5 уровней... ну и всё такое :)
...
Рейтинг: 0 / 0
17.10.2012, 16:25:56
| Ответить | Цитировать | Написать  
Не меняется zindex div элементов
    #38002904
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Програмёрна прошлой работе приучили именно к такому :)
Так тут не работа...
Просили менять местами 2 дива - таки меняются. Идея проиллюстрирована... Т.ч. для теста вполне нормально...
...
Рейтинг: 0 / 0
17.10.2012, 16:44:10
| Ответить | Цитировать | Написать  
Не меняется zindex div элементов
    #38002930
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Програмёр
Участник
krvsa,

не спорю
...
Рейтинг: 0 / 0
17.10.2012, 16:55:05
| Ответить | Цитировать | Написать  
14 сообщений из 14, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Не меняется zindex div элементов
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=37964985&tid=1449223]:
 0ms
get settings:
 7ms
get forum list:
 16ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 184ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 65ms
get tp. blocked users:
 1ms
others: 236ms
total:  531ms
созд. / загр.: 531ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]