По поводу расположения элемента по центру экрана браузера
Начал изучение JavaScript написал первый примерчик и столкнулся с такой проблеммой - всё хорошо элемент появляется по середине экрана, но если изменять размер окна браузера то элемент не подстраивается под размеры. Как осуществить такое действо, вот пример моего творения:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<script type="text/javascript">
function opacity(e)
{
var opacity = document.getElementById('opacity');
var form = document.getElementById('form');
if(e == true)
{
opacity.removeAttribute('class');
form.removeAttribute('class');
var width = (document.documentElement.clientWidth - form.offsetWidth)/2;
var height = (document.documentElement.clientHeight - form.offsetHeight)/2;
form.style.top = height + 'px';
form.style.left = width + 'px';
}
else
{
opacity.setAttribute('class', 'hidden');
form.setAttribute('class', 'hidden');
}
}
</script>
<style type="text/css">
.hidden {
display: none;
}
#opacity {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.4;
filter: alpha(opacity=40);
z-index: 1;
}
#form {
position: absolute;
padding: 0px 10px 10px 10px;
background: #f0f;
z-index: 2;
}
.cursor {
cursor: pointer;
}
</style>
</head><body>
<div id="opacity" class="hidden"></div>
<div id="form" class="hidden">
<span class="cursor" onclick="opacity(0);">x</span>
<form action="" method="post">
Ваш логин:<br>
<input class="itext" type="text" name="login" maxlength="30"><br>
Ваш пароль:<br>
<input class="itext" type="password" name="password" maxlength="30"><br>
<br>
<input class="ibutton" type="submit" value="Войти">
</form>
</div>
<a href="#" onmousedown="opacity(1);">Затемнить окно?</a><br>
</body></html>
Предложения обратиться к jQuery не приветствуются, а то я туда сунулся было и чуть с ума не сошёл, надо сначало так JavaScript выучить. Заранее спасибо! |
используй событие onresize у документа
|
А можно подробнее на данном примере куда это вставлять
|
Я вот тут писал, как это можно легко делать :)
|
subzey,
спасибо, но для меня пока трудновато, можно по моему вопросу ответ |
POMAH-UST,
вам дали готовое решение уже, и одно полуготовое если вы не в состоянии в нем разобраться, то либо садитесь учить JS с самых азов, и усердно, либо обратитесь в раздел работа |
Ну например так.
onresize = function() { Здесь получайте размеры окна и позиционируйте своё, относительно. } |
Skipp,
спасибо за помощь сделал так:
function opacity(e)
{
var opacity = document.getElementById('opacity');
var form = document.getElementById('form');
if(e == true)
{
opacity.removeAttribute('class');
form.removeAttribute('class');
var width = (document.documentElement.clientWidth - form.offsetWidth)/2;
var height = (document.documentElement.clientHeight - form.offsetHeight)/2;
form.style.top = height + 'px';
form.style.left = width + 'px';
resize(true);
}
else
{
opacity.setAttribute('class', 'hidden');
form.setAttribute('class', 'hidden');
resize(false);
}
}
function resize(e)
{
if(e == true) window.onresize = function () { opacity(1); }
else window.onresize = function () { opacity(0); }
}
|
кривовато конечно:)
Можно было бы проще. Видно, что только начинаешь. Ничего со временем разберёшься |
| Часовой пояс GMT +3, время: 16:54. |