Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Проблемы со слоями в IE


Автор: Ace Wentura 6.4.2006, 14:18
Код
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>
<script language="JavaScript" type="text/JavaScript">
var all_layer_id=new Array('lay1','lay2','lay3','lay4');

function init() {
    IE = (document.all)
    NC = (document.layers)
    Opera = (document.getElementById)
}

function hiddenLayer(layer_id) {
    init();
    if(IE) {
        eval('document.all["'+layer_id+'"].style.position = "absolute"');
        eval('document.all["'+layer_id+'"].style.visibility = "hidden"');
    }
    if(NC) {
        eval('document.layers["'+layer_id+'"].position = "absolute"')
        eval('document.layers["'+layer_id+'"].visibility = "hidden"')
    }
    if(Opera) {
        eval('document.getElementById("'+layer_id+'").style.position = "absolute"')
        eval('document.getElementById("'+layer_id+'").style.visibility = "hidden"')
    }
}

function showLayer(layer_id) {
    init();
    if(IE) {
        eval('document.all["'+layer_id+'"].style.position = "relative"');
        eval('document.all["'+layer_id+'"].style.visibility = "visible"')
    }
    if(NC) {
        eval('document.layers["'+layer_id+'"].position = "relative"')
        eval('document.layers["'+layer_id+'"].visibility = "visible"')
    }
    if(Opera) {
        eval('document.getElementById("'+layer_id+'").style.position = "relative"')
        eval('document.getElementById("'+layer_id+'").style.visibility = "visible"')
    }
}

function changeLayers(layer_id){
    for(var i=0;i<all_layer_id.length;i++){
        if(layer_id==all_layer_id[i]){
            showLayer(all_layer_id[i]);
        }else{
            hiddenLayer(all_layer_id[i]);
        }
    }
    return false;
}
</script>
<table width="100%"  border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="#1" onClick="JavaScript: return changeLayers('lay1');">нажать</a></td>
  </tr>
  <tr>
    <td><div id="lay1" style="position: relative; visibility: visible; left:0px; top: 0px;">
      <table width="100%"  border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td><p>привет</p>
            <p>привет</p>
            <p>пориве</p></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
        </tr>
      </table>
    </div></td>
  </tr>
  <tr>
    <td><a href="#1" onClick="JavaScript: return changeLayers('lay2');">нажать</a></td>
  </tr>
  <tr>
    <td><div id="lay2" style="position: absolute; visibility: hidden; left:0px; top: 0px;"><table width="100%"  border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td><p>пока </p>
            <p>пока</p>
            <p>пока</p></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
        </tr>
      </table>
    </div></td>
  </tr>
  <tr>
    <td><a href="#1" onClick="JavaScript: return changeLayers('lay3');">нажать</a></td>
  </tr>
  <tr>
    <td><div id="lay3" style="position: absolute; visibility: hidden; left:0px; top: 0px;"><table width="100%"  border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td><p>салют</p>
            <p>саоют</p>
            <p>салют</p></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
        </tr>
      </table>
    </div></td>
  </tr>
  <tr>
    <td><a href="#1" onClick="JavaScript: return changeLayers('lay4');">нажать</a></td>
  </tr>
  <tr>
    <td><div id="lay4" style="position: absolute; visibility: hidden; left:0px; top: 0px;"><table width="100%"  border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td><p>салют</p>
            <p>саоют</p>
            <p>салют</p></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
        </tr>
      </table>
    </div></td>
  </tr>
</table>
</body>
</html>

Результат: показывается один из нужных слоёв. Их 4. НО
В IE происходит только расширение соответствующей строки таблицы. А в Mozilla и Opera всё нормально. В чём проблема?

Автор: Bangladesh 6.4.2006, 21:12
очень сложно поставлен вопрос, точнее вопрос то не сложно поставлен, а вот в коде разбираться очень долго, поэтому и ответов не видно. советую, создать отдельную страницу, где изобразить данную проблему... може быть еще и сам не разберешься, а если нет то помогут.. ;)

Автор: Ace Wentura 6.4.2006, 21:27
Делаю код меньше:
Код

<body>
<script language="JavaScript" type="text/JavaScript">
var all_layer_id=new Array('lay1','lay2');

function init() {
    IE = (document.all)
    NC = (document.layers)
    Opera = (document.getElementById)
}

function hiddenLayer(layer_id) {
    init();
    if(IE) {
        eval('document.all["'+layer_id+'"].style.position = "absolute"');
        eval('document.all["'+layer_id+'"].style.visibility = "hidden"');
    }
    if(NC) {
        eval('document.layers["'+layer_id+'"].position = "absolute"')
        eval('document.layers["'+layer_id+'"].visibility = "hidden"')
    }
    if(Opera) {
        eval('document.getElementById("'+layer_id+'").style.position = "absolute"')
        eval('document.getElementById("'+layer_id+'").style.visibility = "hidden"')
    }
}

function showLayer(layer_id) {
    init();
    if(IE) {
        eval('document.all["'+layer_id+'"].style.visibility = "visible"')
        eval('document.all["'+layer_id+'"].style.position = "relative"');
    }
    if(NC) {
        eval('document.layers["'+layer_id+'"].visibility = "visible"')
        eval('document.layers["'+layer_id+'"].position = "relative"')
    }
    if(Opera) {
        eval('document.getElementById("'+layer_id+'").style.visibility = "visible"')
        eval('document.getElementById("'+layer_id+'").style.position = "relative"')
    }
}

function changeLayers(layer_id){
    for(var i=0;i<all_layer_id.length;i++){
        if(layer_id==all_layer_id[i]){
            showLayer(all_layer_id[i]);
        }else{
            hiddenLayer(all_layer_id[i]);
        }
    }
    return false;
}
</script>
<table width="100%"  border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="#1" onClick="JavaScript: return changeLayers('lay1');">нажать</a></td>
  </tr>
  <tr>
    <td><div id="lay1" style="position: relative; visibility: visible; left:0px; top: 0px;">
      <table width="100%"  border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td><p>привет</p>td>
        </tr>
      </table>
    </div></td>
  </tr>
  <tr>
    <td><a href="#1" onClick="JavaScript: return changeLayers('lay2');">нажать</a></td>
  </tr>
  <tr>
    <td><div id="lay2" style="position: absolute; visibility: hidden; left:0px; top: 0px;"><table width="100%"  border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td><p>пока </p></td>
        </tr>
      </table>
    </div></td>
  </tr>
</table>
</body>

Скрипт отвечает за скрытие одного слоя и открытие другого.

Автор: Bangladesh 6.4.2006, 22:04
а что требуется создать. меню?

Автор: Ace Wentura 7.4.2006, 11:09
Ну да. Система такая: нажимаешь на одну кнопку - появляется одно меню. На другую - другое...
Но тока везде появляется, а в IE - нет. Возможно, что проблема в том, что у меня структура:
Код

<div>
  <table>
  </table>
</div>

Не уверен. И не знаю, как это обойти. А таблицы внутри слоёв необходимы как воздух...

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