Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Управление z-index


Автор: Glook 29.12.2007, 13:22
Нашёл тут скрипт по управлению z-index блоков. В кратце: на событие вешается функция которая выводит блок поверх остальных, я сделал так что по клику на разные ссылки разные блоки размещаются поврх других. Така как сам такого уровня мастерства не достиг, пришлось  воспользоваться чужим скриптом. К несчастью он работает только под IE.
Может кто-нибудь подсказать что нужно исправить, чтобы работало во всех браузерах? Или может кто-нибудь встречал готовое кроссбраузерное решение?

А вот код скрипта, который я сейчас использую
Код

function MachakTopZX(ime) {
//Copyright © 1999 m.milicevic [email protected] [email protected]
if (document.layers) {
    for (i=0; i<document.layers.length; i++){
    var broj=0;
    var brojx = document.layers[i].zIndex
        if(brojx>broj){
        broj=brojx}
        eval(ime).zIndex = broj+1;
                }
        }
if (document.all){var IEbroj=0;
var allDIV = document.all.tags("div")
    for (var i=0; i<allDIV.length; i++){
    var IEbrojx= allDIV[i].style.zIndex
        if(IEbrojx>IEbroj){
        IEbroj=IEbrojx}
        eval("ime=ime.replace(/.layers/gi, '.all')");
        eval(ime +".style.zIndex = IEbroj+1");
                      }
         }
}

Код

<a href="#" onclick="MachakTopZX('document.layers[\'bg-wrapper\'].document.layers[\'background-09\']');"></a>

Автор: Ghirik 29.12.2007, 14:21
Это Вы что такое выложили? Не понятно, как Вам на это отвечать. Вы нашли этот средневековый скрипт, применили, навероное, потратили немало времени, чтобы встроить его в страницу. Теперь предлагаете нам заняться тем же? Готовую страницу сложно выложить?

Автор: dstorm81 29.12.2007, 14:43
Код

<html>
<head>
<style>
#blk{position:relative;top:100px}
</style>
</head>
<body>
<div id="blk">
<div id="s1" style="position:absolute;width:200px;height:200px;background:red;top:0px;left:0px;z-index:1">1</div>
<div id="s2" style="position:absolute;width:200px;height:200px;background:blue;top:0px;left:150px;z-index:2">2</div>
<div id="s3" style="position:absolute;width:200px;height:200px;background:green;top:150px;left:0px;z-index:3">3</div>
<div id="s4" style="position:absolute;width:200px;height:200px;background:orange;top:150px;left:150px;z-index:4">4</div>
</div>
<a href="#" onclick="up('s1');return false">1</a>
<a href="#" onclick="up('s2');return false">2</a>
<a href="#" onclick="up('s3');return false">3</a>
<a href="#" onclick="up('s4');return false">4</a>
<script>
function up(x)
{
var zI=document.getElementById(x).style.zIndex;
var alles=document.getElementById('blk').getElementsByTagName('div');
for(var i=0;i<alles.length;i++)
    {
    if(zI<alles[i].style.zIndex){document.getElementById(x).style.zIndex=parseInt(alles[i].style.zIndex)+1}
    }
}
</script>
</body>
</html>

Автор: Glook 29.12.2007, 15:13
Прошу прощения...  вот полность код 

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
div{position:absolute; left:100px; top:50px; width:200px; height:200px; color:#FFF; }
div#one{ background:black;}
div#two{  background:red; }
div#three{  background:blue; }
</style>
<script type="text/javascript">
<!--
function MachakTopZX(ime) {
//Copyright © 1999 m.milicevic [email protected] [email protected]
if (document.layers) {
    for (i=0; i<document.layers.length; i++){
    var broj=0;
    var brojx = document.layers[i].zIndex
        if(brojx>broj){
        broj=brojx}
        eval(ime).zIndex = broj+1;
                }
        }
if (document.all){var IEbroj=0;
var allDIV = document.all.tags("div")
    for (var i=0; i<allDIV.length; i++){
    var IEbrojx= allDIV[i].style.zIndex
        if(IEbrojx>IEbroj){
        IEbroj=IEbrojx}
        eval("ime=ime.replace(/.layers/gi, '.all')");
        eval(ime +".style.zIndex = IEbroj+1");
                      }
         }
}
//-->
</script>
</head>
<body><a href="#" onclick="MachakTopZX('document.layers[\'one\']')">on</a> &nbsp;<a href="#" onclick="MachakTopZX('document.layers[\'two\']')">off</a> &nbsp;<a href="#" onclick="MachakTopZX('document.layers[\'three\']')">three</a>
<div id="one">Content  Goes Here</div>
<div id="two">Content  Goes Here</div>
<div id="three">Content Goes Here</div>
</body>
</html>


Добавлено @ 15:26
dstorm81, к сожалению ваш скрипт работае только при первом "прохождении". Если кликнуть по ссылкам 1, 2, 3, 4, а потом вернуться 4, 3, 2, 1, то скрипт работает неверно... я так понимаю из=за того что кликнул дважды да ссылке. 

Автор: Ghirik 29.12.2007, 16:41
Вот так работает везде.

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
div{position:absolute; left:100px; top:50px; width:200px; height:200px; color:#FFF; }
div#one{ background:black;}
div#two{  background:red; }
div#three{  background:blue; }
</style>
<script type="text/javascript">
<!--
$ = function (id) {
    return document.getElementById(id);
}
var zUpOldIndex = 1;
var zUpOldId = "one";
function up(obj) {
    $(zUpOldId).style.zIndex = zUpOldIndex;
    zUpOldId = obj.id;
    zUpOldIndex = obj.style.zIndex;
    obj.style.zIndex = 10;
}
//-->
</script>
</head>
<body>

<a href="#" onclick="up($('one'))">on</a>
&nbsp;
<a href="#" onclick="up($('two'))">off</a>
&nbsp;
<a href="#" onclick="up($('three'))">three</a>

<div id="container">
<div id="one" style="z-index: 1">Content Goes Here</div>
<div id="two" style="z-index: 2">Content Goes Here</div>
<div id="three" style="z-index: 3">Content Goes Here</div>
</div>

</body>
</html>


Если что непонятно, спрашивайте...

Автор: ksnk 29.12.2007, 17:00
Цитата(Glook @  29.12.2007,  15:13 Найти цитируемый пост)
то скрипт работает неверно... я так понимаю из=за того что кликнул дважды да ссылке. 

А патамучта неча грязными руками менять z-index. ;) проблема в том, что сложно уследить за тем увеличили чего-то там или нет и насколько... Пользуйтесь классами, к примеру - так:
Код

<html>
<head>
<style>
#blk{position:relative;top:100px}
/******** стили стильные ************/
.toppest {z-index:10;}

</style>
</head>
<body>
<div id="blk">
<div id="s1" style="position:absolute;width:200px;height:200px;background:red;top:0px;left:0px;">1</div>
<div id="s2" style="position:absolute;width:200px;height:200px;background:blue;top:0px;left:150px;">2</div>
<div id="s3" style="position:absolute;width:200px;height:200px;background:green;top:150px;left:0px;">3</div>
<div id="s4" style="position:absolute;width:200px;height:200px;background:orange;top:150px;left:150px;">4</div>
</div>
<a href="#" onclick="up('s1');return false">1</a>
<a href="#" onclick="up('s2');return false">2</a>
<a href="#" onclick="up('s3');return false">3</a>
<a href="#" onclick="up('s4');return false">4</a>
<script>
/**
 *  Магия для работы с классами
 */
function cls(cl){
    var reg; (reg=new RegExp("(^|\\b)"+cl+"(\\b|$)")).compile;
    return {
        add:function(x){
            if (typeof x.className =="string"){
                if (!x.className.match(reg)) // не хочу писать трим
                    x.className+=(x.className&&' '||'')+cl;
            } else        
                x.className=cl
        },
        have:function(x){
            if (typeof x.className =="string")
                return (x.className.match(reg))
            else    
                return false;    
        },
        remove:function(x){
            if (typeof x.className =="string") {
                if (x.className.match(reg))
                    x.className=x.className.replace(reg,'')
            }
        }
    }
}
var toppest=cls('toppest');
function up(y)
{
  // отпускаем все элементы "вниз"
  var x=document.getElementById('blk').getElementsByTagName('div');
  for(var i=0;i<x.length;i++){
    toppest.remove(x[i])
  }
  // поднимаем наш элемент "вверх"
  toppest.add(document.getElementById(y));
}
</script>
</body>
</html>

Автор: Ghirik 29.12.2007, 17:22
ksnk, в IE не работает, наверное, className не понимает.

Автор: ksnk 29.12.2007, 17:29
А у меня почему тогда работает? И в 6-м и в 7-м... Может я чего делаю неправильно? smile

Автор: Glook 29.12.2007, 17:34
ksnk, шайтан!  smile  Спасибо. Почти идеально. (почти, потому что блоки каждый раз опускаются вниз, тоесть меняют каждый раз свой порядок на исходный. а хотелось бы чтобы они оставались в том порядке, который они получают. но это я попробую сам поковырять.)
спасибо большое

Добавлено @ 17:36
Ghirik, всё работает в обоих версиях IE, Opera, Firefox, Safari (win)

Автор: Ghirik 29.12.2007, 17:36
Сравните код с выложенным, возможно, он разный... не работает...

Автор: ksnk 29.12.2007, 17:41
Цитата(Ghirik @  29.12.2007,  17:36 Найти цитируемый пост)
он разный... не работает.

Не помогает smile Специально скопировал в отдельный файл... - работает!

Автор: Ghirik 29.12.2007, 17:52
Чудеса, да и только, я даже комп перегрузил... не работает...  smile 
ksnk, а чем плох мой вариант? Так ведь проще... или "просто" счас не в моде... smile 

Автор: Glook 29.12.2007, 18:03
Ghirik, Ваш скрипт тоже отлично работает (правда по тому же принципу, общий сброс и "выдёргивание" блока наверх), спасибо, буду изучать.  smile 

Автор: ksnk 29.12.2007, 18:25
Цитата(Glook @  29.12.2007,  17:34 Найти цитируемый пост)
Почти идеально.

Чтобы заработало так как вам хочется, в общем случае, боюсь придется работать напрямую с z-index... В рамках моей "идеологии" можно внести еще пару-тройку классов с z-индексом последовательно уменьшающимися и при "подъеме" элемента наверх - отпускать остальные на "следующую" ступеньку. 

Код

.top10 {z-index:10;}
.top9 {z-index:9;}
.top8 {z-index:8;}
.top7 {z-index:7;}


Код

// первый элемент - самый верхний!
var ladder=[cls('top10'),cls('top9'),cls('top8'),cls('top7')]
function up(y){
  var y =document.getElementById(y);
  // отпускаем все элементы "вниз" на ступень
  var x=document.getElementById('blk').getElementsByTagName('div');
  for(var i=0;i<x.length;i++){
    var el= x[i],j=ladder.length;
    while(j--){
      var cl=ladder[j];
      if (cl.have(el)) { cl.remove(el) ; if((j<ladder.length-1) && (y!=x[i]))ladder[j+1].add(el); }
    }
  }
  // поднимаем наш элемент "вверх"
  ladder[0].add(y);
}

Правда выглядит это уже несколько, imho, менее элегантно, чем первый вариант... ;-)

Добавлено @ 18:29
Цитата(Ghirik @  29.12.2007,  17:52 Найти цитируемый пост)
а чем плох мой вариант?
 В принципе - ничем, Он работает и он действительно - проще. А в частности - тем, что я его только сейчас посмотрел... Чукча, видите ли  - писатель ;-)

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)