Координаты элемента или абсолютный, но двигающийся с экраном блок.
Добрый день.
У меня есть два вопроса. Один - общий, то есть зачем все это делается. Второй - конкретный. Начну с общего. Общий Хочу сделать форму подписки, которая бы выезжала от верхней границы браузера. При этом оно бы не выезжало как block, двигая весь сайт вниз, но и при этом двигалось вместе с раширением-сужением окна (а не стояло мертво на месте как если включить position: absolute; ) В общем не хватает мне мозгов, поэтому делают так:
<div class="subscr-leftslide" id="subscrId" >
<noscript></div><div class="subscr-leftslide"></noscript>
<table cellspan="0" colspan="0">
<tr id="subscr-leftslide-Row1">
<td>
<form id="sbs" class="subscr-leftslide-form" name="sbs" action="subscr.php" method="post">
<input class="" name="name" type="text" onBlur="if(this.value==''){this.value='Мое имя'}" onFocus="if(this.value=='Мое имя'){this.value=''}" value="Мое имя" />
<input class="" name="email" type="text" onBlur="if(this.value==''){this.value='Мой e-mail'}" onFocus="if(this.value=='Мой e-mail'){this.value=''}" value="Мой e-mail" />
</form>
<a href="#" onClick="document.forms.sbs.submit();">Подписаться</a>
</td></tr>
<tr id="subscr-leftslide-Row2" onClick="javascript: var t = getElemPos('subscrId'); alert(t); var e = getElem('subscrId'); if (e.style.height == '' || e.height < 120) {e.style.left=t.left+'px'; e.style.position = 'absolute'; smoothMinMax('subscrId', 10, 20, 120, 5, 0, 0, 0); ShowElementStyle('subscr-leftslide-Row1',200); }else{e.style.position = 'relative';e.style.left='0px'; smoothMinMax('subscrId', 10, 120, 25, -5, 0, 0, 0);HideElementStyle('subscr-leftslide-Row1',200);}"><td>Хочу новости!</td></tr>
</table>
</div>
Вставлено сразу после <body><table><tr><td> 1. При загрузке - окно (div в котором форма заключена) позиционируется как relative. Сверху торчит ярлычок "Хочу новости". Форма display: none; 2. При нажатии - получаю координаты (вот об этом второй вопрос) div проставляю к e.style.left, делаю его position: absolute. Показываю форму display: block по таймеру(иначе форма сразу выскакивает и почему-то overflow-y: hidden не работает), так же выезжает окно посредством smoothMinMax (расширяет или сужает div по height). 3. При клики снова на "Хочу новости" - все происходит в обратном порядке: уезжает окно. По таймеру прячется форма, меняем позицию окна и стиль позиционирования. Конкретный Есть код получения координат:
function getElemPos(elem){
elem = typeof elem == 'object' ? elem : document.getElementById(elem);
var w = elem.offsetWidth;
var h = elem.offsetHeight;
var l = 0;
var t = 0;
while (elem){
l += elem.offsetLeft;
t += elem.offsetTop;
elem = elem.offsetParent;
}
return {
"left":l,
"top":t,
"width": w,
"height":h
};
}
Почему-то при попытке получить координаты и присвоить какой либо переменной все ок. Но вот при попытке вызвать свойство у этой переменной left - возникает ошибка: Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /http/Header.php:78) in /http/db/config.php on line 3 Header - место где вставляется данный блок. А на 78 строке стоит include_once("Menu.php"). Где список для меню. И это вроде никак не связано с getElemPos().left; Но как только убираю доступ к свойству left - проблема исчезает, но я не могу тогда узнать координаты элемента. Как узнать координаты элемента, если нет другого способа решения вышеописанной задачи? |
notricky, конкретный вопрос скорее всего
getElemPos()["left"]; |
Цитата:
var t = getElemPos('subscrId'); alert(t['left']);
И снова появляется ошибка. :( Причем похоже любое обращение к t впоследствии вызывает ошибку. А если только оставить присвоение - то все ок. Может что не так в функции? |
Вообще странная хрень какая-то.
Я даже поменял внутренности getElemPos и оно возвращает просто return 1000. И все равно если var t=getElemPos(''); alert(t); - ошибка А если просто var t=0; alert(t); то все ок. ошибка не появляется. Что за странный косяк такой?????????? |
Блин, бредятина.
Вызов t.left - правильные данные показывает, но при этом при загрузке все равно ошибка скрипта. Вот как такое может быть? |
<!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" xml:lang="ru" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Общие вопросы от новичков (40)</title>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
body {
width:100%;
}
#Scroll {
padding:12px;
position:absolute;
margin:0;
width:95%;
height:88%!important;
overflow-y:auto;
/*border:red 2px solid!important;*/
}
#Yxo {
cursor:pointer;
z-index:100;
border:red 2px solid!important;
position:fixed;
top:0;
/*position:absolute;
top:100%;*/
left:50%;
margin-left:-50px;
width:100px;
height:50px;
margin-top:-0px;
text-align:center;
padding-top: 20px;
}
#Wrap{
position:fixed;
background-color:#fff;
top:0;
left:50%;
width:500px;
margin-left:-250px;
margin-top:-120%;/**/
min-height:200px;
border:red 2px solid;
border-radius:15px;
-webkit-border-radius:15px;
-khtml-border-radius:15px;
-moz-border-radius:15px;
-o-border-radius:15px;
-ms-border-radius:15px;
box-shadow: 0px 5px 18px #000;
-webkit-box-shadow:0px 5px 18px #000;
-khtml-box-shadow:0px 5px 18px #000;
-moz-box-shadow:0px 5px 18px #000;
-ms-box-shadow:0px 5px 18px #000;
position:absolute;z-index:100;
transition-duration: 0.96s;
-webkit-transition-duration: 0.96s;
-moz-transition-duration: 0.96s;
-o-transition-duration: 0.96s;
-ms-transition-duration: 0.96s; /* IE9+ */
}
#Wrap.Active{
margin-top:0;
}
</style>
</head>
<body>
<div id=Wrap>
<span id=Scroll>
dgdg<br>
dgdg<br>
dgdg<br>
dgdg<br>
dgdg<br>
dgdg<br>
dgdg<br>
dgdg<br>
dgdg<br>
dgdg<br>
dgdg<br>
dgdg<br>
dgdg<br>
dgdg<br>
dgdg<br>
dgdg<br>
</span>
<p id=Yxo>
Хочу</br>
Новость
</p></div>
<script type="text/javascript">
$("p#Yxo").click(function(){
$("#Wrap").toggleClass('Active');
if($("#Wrap").hasClass('Active')){
$("p#Yxo").css({
"position":"absolute",
"top":"100%"
});
} else $("p#Yxo").css({
"position":"fixed",
"top":"0"
});
});
</script>
</body>
</html>
|
Спасибо.
Тоже вроде понятно, только разве в случае с absolute позиционированием, разве будет окно двигаться вместе с уменьшением/увелиечением размера окна? |
notricky,
Вставьте - попоробуйте, выскажите пожелания - желательна ссылка на страницу с пробой |
Цитата:
|
notricky,
Копировать нун так => http://s1.uploads.ru/i/woZGR.png (правее начала кода юзер бар для копирования |
| Часовой пояс GMT +3, время: 18:50. |