| antserg | 02.11.2011 09:43 |
Перекрывание блока, z-index
Есть две страницы.
1. Первая страница:
http://178.162.248.149/~sergc578/22/sample.php
Есть желтый блок на все окно браузера. В нем находятся еще два блока (розовый и синий). Если кликнуть левой кнопкой мыши по розовому блоку, то синий блок скроется, если снова кликнуть мышью по розовому блоку, синий блок снова появится. Здесь все отлично.
Простенькая верстка:
Код jQuery:
2. Теперь вторая страница:
http://178.162.248.149/~sergc578/22/sample2.php
Это та же страница, но вместо желтого блока загружается Янлекс Карта. Для этого в теге body добавляем атрибут onload:
В результате розовый и синий блоки перекрыты желтым блоком (то есть картой).
А нужно, чтобы было как на первой странице, но вместо желтого блока была яндекс карта:
Почему на мой взгляд так происходит. Вначале загружаются все блоки (желтый, розовый и синий). Затем (так как у тега body есть атрибут onload) в желтый блок загружается карта, поэтому карта перекрывает розовый и синий блок.
Так как jQuery можно выполнить после загрузки всех блоков и карты (метод ready), то я так понимаю, что с помощью этого фрейворка можно выставить розовому и синиму блокам z-index, но это не помогло. Как можно решить данную проблему (то есть отобразить розовый и синий блоки НАД частью карты)? Или я что-то не правильно понимаю и проблема в другом?
1. Первая страница:
http://178.162.248.149/~sergc578/22/sample.php
Есть желтый блок на все окно браузера. В нем находятся еще два блока (розовый и синий). Если кликнуть левой кнопкой мыши по розовому блоку, то синий блок скроется, если снова кликнуть мышью по розовому блоку, синий блок снова появится. Здесь все отлично.
Простенькая верстка:
<body>
<div id="yellow">
<div id="pink">
<p>pink</p>
</div>
<div id="blue">
<p>cash</p>
<p>day</p>
<p>name</p>
</div>
</div>
</body>
Код jQuery:
<script type="text/javascript">
var f=0;
$(document).ready(function(){
var hyellow=$(window).height();
var hblue=hyellow-$('#pink').height();
$('#yellow').height(hyellow);
$('#blue').height(hblue);
$('#pink').click(function(){
if (f==1)
{
f=0;
$('#blue').show();
}
else
{
f=1;
$('#blue').hide();
}
});
});
</script>
2. Теперь вторая страница:
http://178.162.248.149/~sergc578/22/sample2.php
Это та же страница, но вместо желтого блока загружается Янлекс Карта. Для этого в теге body добавляем атрибут onload:
<body onload="initMap();">
В результате розовый и синий блоки перекрыты желтым блоком (то есть картой).
А нужно, чтобы было как на первой странице, но вместо желтого блока была яндекс карта:
Почему на мой взгляд так происходит. Вначале загружаются все блоки (желтый, розовый и синий). Затем (так как у тега body есть атрибут onload) в желтый блок загружается карта, поэтому карта перекрывает розовый и синий блок.
Так как jQuery можно выполнить после загрузки всех блоков и карты (метод ready), то я так понимаю, что с помощью этого фрейворка можно выставить розовому и синиму блокам z-index, но это не помогло. Как можно решить данную проблему (то есть отобразить розовый и синий блоки НАД частью карты)? Или я что-то не правильно понимаю и проблема в другом?
