Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.08.2012, 12:55
Интересующийся
Отправить личное сообщение для notricky Посмотреть профиль Найти все сообщения от notricky
 
Регистрация: 27.08.2012
Сообщений: 15

Координаты элемента или абсолютный, но двигающийся с экраном блок.
Добрый день.
У меня есть два вопроса. Один - общий, то есть зачем все это делается. Второй - конкретный. Начну с общего.

Общий
Хочу сделать форму подписки, которая бы выезжала от верхней границы браузера. При этом оно бы не выезжало как 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, 27.08.2012 в 13:01.
Ответить с цитированием
  #2 (permalink)  
Старый 27.08.2012, 13:09
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

notricky, конкретный вопрос скорее всего
getElemPos()["left"];

Последний раз редактировалось lord2kim, 27.08.2012 в 13:13.
Ответить с цитированием
  #3 (permalink)  
Старый 27.08.2012, 13:13
Интересующийся
Отправить личное сообщение для notricky Посмотреть профиль Найти все сообщения от notricky
 
Регистрация: 27.08.2012
Сообщений: 15

Сообщение от lord2kim Посмотреть сообщение
notricky, конкретный вопрос скорее всего
getElemPos()["left"];

left в данном случае ключ возвращаемого функцией объекта
Добавил alert в <a onclick>:
var t = getElemPos('subscrId'); alert(t['left']);


И снова появляется ошибка.

Причем похоже любое обращение к t впоследствии вызывает ошибку. А если только оставить присвоение - то все ок. Может что не так в функции?

Последний раз редактировалось notricky, 27.08.2012 в 13:18.
Ответить с цитированием
  #4 (permalink)  
Старый 27.08.2012, 13:24
Интересующийся
Отправить личное сообщение для notricky Посмотреть профиль Найти все сообщения от notricky
 
Регистрация: 27.08.2012
Сообщений: 15

Вообще странная хрень какая-то.
Я даже поменял внутренности getElemPos и оно возвращает просто return 1000.

И все равно если
var t=getElemPos(''); alert(t); - ошибка

А если просто var t=0; alert(t);
то все ок. ошибка не появляется.
Что за странный косяк такой??????????
Ответить с цитированием
  #5 (permalink)  
Старый 27.08.2012, 13:30
Интересующийся
Отправить личное сообщение для notricky Посмотреть профиль Найти все сообщения от notricky
 
Регистрация: 27.08.2012
Сообщений: 15

Блин, бредятина.
Вызов t.left - правильные данные показывает, но при этом при загрузке все равно ошибка скрипта. Вот как такое может быть?
Ответить с цитированием
  #6 (permalink)  
Старый 27.08.2012, 14:31
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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

Последний раз редактировалось Deff, 27.08.2012 в 14:42.
Ответить с цитированием
  #7 (permalink)  
Старый 27.08.2012, 17:09
Интересующийся
Отправить личное сообщение для notricky Посмотреть профиль Найти все сообщения от notricky
 
Регистрация: 27.08.2012
Сообщений: 15

Спасибо.
Тоже вроде понятно, только разве в случае с absolute позиционированием, разве будет окно двигаться вместе с уменьшением/увелиечением размера окна?
Ответить с цитированием
  #8 (permalink)  
Старый 27.08.2012, 17:20
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

notricky,
Вставьте - попоробуйте, выскажите пожелания - желательна ссылка на страницу с пробой
Ответить с цитированием
  #9 (permalink)  
Старый 27.08.2012, 17:53
Интересующийся
Отправить личное сообщение для notricky Посмотреть профиль Найти все сообщения от notricky
 
Регистрация: 27.08.2012
Сообщений: 15

Сообщение от Deff Посмотреть сообщение
notricky,
Вставьте - попоробуйте, выскажите пожелания - желательна ссылка на страницу с пробой
Даже скопировать не получается нормально - символы разделители копируются вместе с кодом.
Ответить с цитированием
  #10 (permalink)  
Старый 27.08.2012, 18:08
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

notricky,
Копировать нун так => http://s1.uploads.ru/i/woZGR.png (правее начала кода юзер бар для копирования
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Координаты элемента n1ko jQuery 5 28.11.2011 09:11
Как определить уменьшение или увеличение элемента? Zhazhah jQuery 7 27.11.2011 18:03
Координаты элемента при прокрутке jDriver jQuery 3 22.12.2010 23:52
Пустой блок или нет tolen jQuery 11 18.11.2010 20:14
Блок с сообщением - Javascript или jQuery qwermjk Общие вопросы Javascript 3 12.07.2010 08:48