Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   увеличение z-index div слоёв при нажатии на них (https://javascript.ru/forum/dom-window/25436-uvelichenie-z-index-div-slojov-pri-nazhatii-na-nikh.html)

Ultor 05.02.2012 17:41

увеличение z-index div слоёв при нажатии на них
 
Даны 2 слоя, у первого z-index 100 у второго 101. Надо чтобы при нажатии на первый слой z-index у него стал больше чем у второго, к примеру 102, то есть чтобы он делался поверх второго. Затем нажатием на второй он тоже увеличивал свой z-index, например 103, становясь поверх первого и так до бесконечности.
Вобщем что-то вроде onclick : z-index +2 нужно на каждый слой. Как это реализовать?

NoResponse 05.02.2012 19:27

onclick="this.style.zInsex=this.style.zInsex+2"

Nanto 05.02.2012 19:55

Цитата:

Сообщение от NoResponse (Сообщение 155582)
onclick="this.style.zInsex=this.style.zInsex+2"

И Вы будете бесконечно повышать z-index верхнего элемента! :)
Нужный элемент находится ПОД другим элемнтом.
To ТС: Кусок кода покажите.

Aetae 05.02.2012 20:04

Вообще если элемента 2, то просто взаимозаменять их z-index, иначе:

<script> zindex = 102 </script>
<h1 style="position:relative;background:#eef;" onclick="style.zIndex = zindex++">1</h1>
<h1 style="position:relative;background:#fee;top:-1.2em" onclick="style.zIndex = zindex++">2</h1>

Ultor 05.02.2012 21:56

а если элементов больше чем 2? в моём случае их 5.. как бы сделать так, чтобы жмёшь на слой и он становился поверх всех, жмёшь на другой и он становился поверх всех..
может как-то можно сделать так, чтобы по клику на слой у него z-index прибавлялся, а у остальных слоёв при этом происходил возврат z-index к значению по-умолчанию? и так бы происходило у каждого слоя по которому кликаешь.
бесконечное прибавление z-index на практике оказалась не очень, так как если кликнуть допустим несколько раз, то и по другому надо кликать несколько раз и так как слоёв 5 штук, я не учёл, что для остальных слоёв, чтобы достич z-index предыдущих, надо будет кликать уже много раз, а не один, как было бы нужно..
цитировать кусок кода не вижу смысла, так как это не имеет значения, эта идея абсолютно отдельно идёт от других.

Nanto 06.02.2012 03:31

Потому что непонятно - чего Вы хотите!
Слои полностью перекрывают друг-друга? Как же тогда определять по какому слою Вы собирались кликать? [telepate mode]?
Если слои не перекрываются полностью (т.е. можно отследить клик по конкретному слою) - тогда тут и думать нечего...

T-sh 06.02.2012 05:09

слои как друг друга перекрывают? если полностью — на нижний просто невозможно кликнуть, а если частично:
var myelem = this.style.zIndex;
var allelem = getElementsByTagName('div').style.zIndex;
var leng = allelem.lenght;
while (leng--){
 if (myelem < allelem[leng]){
myelem.style.zIndex = allelem[leng]+2;
}
else { 
myelem.style.zIndex +=2 }
}


по синтаксису могу ошибаться, но логика такая :)

рони 06.02.2012 05:18

Цитата:

Сообщение от Ultor
а если элементов больше чем 2? в моём случае их 5.. как бы сделать так, чтобы жмёшь на слой и он становился поверх всех, жмёшь на другой и он становился поверх всех..

:write:Предложенное решение Aetae, подходит для любого количества элементов

Ultor 06.02.2012 17:19

да я наверное забыл сказать что все слои можно сворачивать и двигать, так что если они перекрывают друг друга, то можно слой отодвинуть и перекрывания не будет, вобщем задумка как в окнах ОС Windows. Не хватает только перемещения слоя на передний план при клике на него. чтож, попробую предложенные решения, потом скажу получилось или нет.
да вот код от Aetae вроде работает немного поменял значения и получилось, спасибо большое :)
всем + за внимание

Ultor 06.02.2012 19:30

и я ещё добавил onmousedown="style.zIndex = zindex++" так работает корректней)


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