VPF::Управление z-index - Форум программистов

Glook

Дата 29.12.2007, 13:22 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 33
Регистрация: 12.9.2007

Репутация: нет
Всего: 1

Нашёл тут скрипт по управлению 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 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20

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

--------------------

Отдадим всё клиенту, пускай его машина мучается...

dstorm81

Дата 29.12.2007, 14:43 (ссылка)

(нет голосов)

Загрузка ...

бездельник

Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 20
Всего: 39

Код


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

--------------------

на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

Glook

Дата 29.12.2007, 15:13 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 33
Регистрация: 12.9.2007

Репутация: нет
Всего: 1

Прошу прощения... вот полность код

Код


<!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, то скрипт работает неверно... я так понимаю из=за того что кликнул дважды да ссылке.

Это сообщение отредактировал(а) Glook - 29.12.2007, 15:41

Ghirik

Дата 29.12.2007, 16:41 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20

Вот так работает везде.

Код


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

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

Это сообщение отредактировал(а) Ghirik - 29.12.2007, 16:42

--------------------

Отдадим всё клиенту, пускай его машина мучается...

ksnk

Дата 29.12.2007, 17:00 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Цитата(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>

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Ghirik

Дата 29.12.2007, 17:22 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20

ksnk, в IE не работает, наверное, className не понимает.

--------------------

Отдадим всё клиенту, пускай его машина мучается...

ksnk

Дата 29.12.2007, 17:29 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

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

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Glook

Дата 29.12.2007, 17:34 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 33
Регистрация: 12.9.2007

Репутация: нет
Всего: 1

ksnk, шайтан! smile

Спасибо. Почти идеально. (почти, потому что блоки каждый раз опускаются вниз, тоесть меняют каждый раз свой порядок на исходный. а хотелось бы чтобы они оставались в том порядке, который они получают. но это я попробую сам поковырять.)
спасибо большое

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

Это сообщение отредактировал(а) Glook - 29.12.2007, 17:47

Ghirik

Дата 29.12.2007, 17:36 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20

Сравните код с выложенным, возможно, он разный... не работает...

--------------------

Отдадим всё клиенту, пускай его машина мучается...

ksnk

Дата 29.12.2007, 17:41 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Цитата(Ghirik @ 29.12.2007, 17:36

)

он разный... не работает.

Не помогает smile

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

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Ghirik

Дата 29.12.2007, 17:52 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20

Чудеса, да и только, я даже комп перегрузил... не работает... smile

ksnk, а чем плох мой вариант? Так ведь проще... или "просто" счас не в моде... smile

--------------------

Отдадим всё клиенту, пускай его машина мучается...

Glook

Дата 29.12.2007, 18:03 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 33
Регистрация: 12.9.2007

Репутация: нет
Всего: 1

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

ksnk

Дата 29.12.2007, 18:25 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Цитата(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

)

а чем плох мой вариант?

В принципе - ничем, Он работает и он действительно - проще. А в частности - тем, что я его только сейчас посмотрел... Чукча, видите ли - писатель ;-)

Это сообщение отредактировал(а) ksnk - 29.12.2007, 18:29

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »