Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Не меняется zindex div элементов / 14 сообщений из 14, страница 1 из 1
19.09.2012, 17:16:23
    #37964483
S_A_V_e
S_A_V_e
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не меняется zindex div элементов
Здравствуйте.

Добавляю на форму 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
| Ответить | Цитировать | Написать  
20.09.2012, 08:32:50
    #37964985
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не меняется zindex div элементов
S_A_V_eЧто делаю не так ?
Например тестовый пример. Его вообще нет. А пора бы уже смастерить его и на нём все можно будет посмотреть...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.10.2012, 14:34:38
    #38002514
S_A_V_e
S_A_V_e
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не меняется zindex div элементов
Наконец то дошли руки пример сделать... Суть задачи немного поменялась. Сейчас элементы меняются местами. НО меняются только для последнего добавленного элемента (меняются 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:45:47
    #38002550
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не меняется zindex div элементов
S_A_V_eНо функция вызывается при любом клике с параметрами 8 и 7 (changeZIndex(8,7))
Так ты сам так и написал... Это именно последние значения у твоего цикла.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.10.2012, 14:47:40
    #38002557
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не меняется zindex div элементов
S_A_V_e , если тебе нужно менять местами блоки в одной "линии" - то твоя верстка вовсе плохая...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.10.2012, 14:51:09
    #38002572
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не меняется zindex div элементов
Вот так хотя бы нужные циферки передаются...

Код: javascript
1.
divEl.setAttribute("onclick", "changeZIndex('" + divId1 + "','" + divId2 + "')");
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.10.2012, 15:04:24
    #38002614
Програмёр
Програмёр
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не меняется zindex div элементов
Код: 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:08:40
    #38002628
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не меняется zindex div элементов
Я бы предложил такой вариант "перемены мест"...

 
Код: 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:34:37
    #38002696
Програмёр
Програмёр
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не меняется zindex div элементов
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, 16:13:42
    #38002798
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не меняется zindex div элементов
Програмёр , на случай ядерной войны я не закладывался...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.10.2012, 16:16:39
    #38002807
S_A_V_e
S_A_V_e
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не меняется zindex div элементов
Спасибо большое Програмёр !
Решение с замыканием отлично работает. То что нужно ! Самому и в голову не пришло бы так завернуть... Как показал krvsa то же можно , но с замыканием вариант более приемлемый.
Проблема решена. Тема закрыта.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.10.2012, 16:25:56
    #38002835
Програмёр
Програмёр
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не меняется zindex div элементов
krvsa Програмёр , на случай ядерной войны я не закладывался...

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

не спорю
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Не меняется zindex div элементов / 14 сообщений из 14, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 479ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1449223]:
 0ms
get settings:
 5ms
get forum list:
 19ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 176ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 59ms
get tp. blocked users:
 2ms
others: 200ms
total:  479ms
x
x
Закрыть


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