Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Установка <div> в заданную позицию. (https://javascript.ru/forum/dom-window/20604-ustanovka-div-v-zadannuyu-poziciyu.html)

evgenybe 10.08.2011 23:11

Установка <div> в заданную позицию.
 
У меня на странице есть DIV с прокруткой, внутри которого находится GridView. Прокручивая див, я останавливаюсь в определенном положении прокрутки, потом перезагружаю страницу и позиция "убегает" на начало. Как сделать, чтобы между перезагрузками страницы положение сохранялось?

Magneto 10.08.2011 23:29

Сохраняйте положение внутреннего дива в cookies, при загрузке страницы считывайте значение и востанавливайте положение дива.

evgenybe 10.08.2011 23:44

Цитата:

Сообщение от Magneto (Сообщение 119627)
Сохраняйте положение внутреннего дива в cookies, при загрузке страницы считывайте значение и востанавливайте положение дива.

Неважно где сохранять. Можно и в скрытом поле, можно и в кукис, можно и в переменной сессии.
Вопрос в другом - как считать положение дива? И как потом установить в то же положение, имея сохраненную величину.

melky 11.08.2011 02:04

// перед загрузкой существующей страницы
window.onbeforeunload = function(){ 

    // получаете координаты div
   var dixX = ...
   var divY = ... 

   // там будут строки.. я про значения
   localStorage.setItem("divX", divX);
   localStorage.setItem("divY", divY);
};

// после загрузки страницы
window.onload = function(){
  // получаем из хранилища и преобразуем в числа
  var divX = +localStorage.getItem("divX");
  var divY = +localStorage.getItem("divY");

  // потом устанавливаете стиль
  if( divX && divY ) mydiv.setStyle(...);
};

evgenybe 12.08.2011 14:00

Цитата:

Сообщение от melky (Сообщение 119641)
// получаете координаты div
   var dixX = ...
   var divY = ...

Вот я именно об этом и спрашиваю:
Что должно быть вместо трех точек ... , как считать в переменные нужные мне координаты?

melky 12.08.2011 15:01

что используете ? jq ?

evgenybe 12.08.2011 15:20

Цитата:

Сообщение от melky (Сообщение 120040)
что используете ? jq ?

Нет. использую старый JavaScript

devote 12.08.2011 15:31

Цитата:

Сообщение от evgenybe
Нет. использую старый JavaScript

старый :D

evgenybe 12.08.2011 15:40

Цитата:

Сообщение от devote (Сообщение 120047)
старый :D

А что, новый?
По крайней мере. старше jq

devote 12.08.2011 15:41

Цитата:

Сообщение от evgenybe
По крайней мере. старше jq

дык jq это тоже JavaScript просто удобная для кого-то либа

evgenybe 12.08.2011 15:48

Цитата:

Сообщение от devote (Сообщение 120055)
дык jq это тоже JavaScript просто удобная для кого-то либа

Библиотека была представлена общественности на компьютерной конференции «BarCamp» в Нью-Йорке в 2006 году.
4 декабря 1995 года LiveScript переименовали в JavaScript[14], получив соответствующую лицензию у Sun. Анонс JavaScript со стороны представителей Netscape и Sun состоялся накануне выпуска второй бета-версии Netscape Navigator[11].

Ну и кто старше?

devote 12.08.2011 16:04

Цитата:

Сообщение от evgenybe
Ну и кто старше?

Вы не поняли, речь не о старшинстве... Речь о том что яваскрипт это язык встраиваемый в программное обеспечение такие как браузер. А JQuery это просто расширение для этого самого JavaScript тоесть это не язык это просто библиотека которая написана на самом же JavaScript и ее ну никак нельзя сравнивать с языком на котором она же и написана.

evgenybe 12.08.2011 16:15

Цитата:

Сообщение от devote (Сообщение 120063)
JQuery это просто расширение для этого самого JavaScript тоесть это не язык это просто библиотека которая написана на самом же JavaScript и ее ну никак нельзя сравнивать с языком на котором она же и написана.

А я и не сравнивал. Я просто сказал, что пользуюсь старым, добрым Javascript.
А когда я давал выписки из Википедии, то тоже имел ввиду лишь годы разработки продукта, а не то, является ли он библиотекой, скриптовым языком, языком программирования, или вообще, скажем, самолетом.
Да и основной мой вопрос все же был другой вообще. Меня интересовало как получить, а после перезагрузки восстановить координаты GridView, сидящего внутри Div-a.

melky 12.08.2011 16:20

Цитата:

Сообщение от evgenybe (Сообщение 120074)
А я и не сравнивал. Я просто сказал, что пользуюсь старым, добрым Javascript.

сладко, очень сладко звучит :)

Цитата:

Сообщение от evgenybe (Сообщение 120074)
координаты GridView, сидящего внутри Div-a.

прошу сюда html!

кстати, код можно было и нагуглить(это не мой код):

function getAbsolutePos(el)
	{
	var r = { x: el.offsetLeft, y: el.offsetTop };
	if (el.offsetParent)
		{
		var tmp = getAbsolutePos(el.offsetParent);
		r.x += tmp.x;
		r.y += tmp.y;
		}
	return r;
	}

или вот еще
var el = document.getElementById('login');
var x = findPosX(el);
var y = findPosY(el);
 
function findPosX(obj) {
    var curleft = 0;
    if (obj.offsetParent) {
        while (1) {
            curleft+=obj.offsetLeft;
            if (!obj.offsetParent) {
                break;
            }
            obj=obj.offsetParent;
        }
    } else if (obj.x) {
        curleft+=obj.x;
    }
    return curleft;
}
 
function findPosY(obj) {
    var curtop = 0;
    if (obj.offsetParent) {
        while (1) {
            curtop+=obj.offsetTop;
            if (!obj.offsetParent) {
                break;
            }
            obj=obj.offsetParent;
        }
    } else if (obj.y) {
        curtop+=obj.y;
    }
    return curtop;
}


а вот пример и статья от этого сайта

evgenybe 12.08.2011 16:44

Спасибо!
Гуглить - это конечно хорошо. Но для чего тогда форумы?

melky 12.08.2011 16:53

чтобы спросить то, что неясно в теории (замыкания, zum Beispiel )

или потроллить кого...

или за отсылкой к гуглу :)

...
вообще, как вы заметили, в последней строчке моего поста написано, что сабж уже решён Ильёй (статья написана им точно), так что следовало бы сначала проследовать в поиск по этому сайту.

evgenybe 12.08.2011 18:04

Цитата:

Сообщение от melky (Сообщение 120087)
вообще, как вы заметили, в последней строчке моего поста написано, что сабж уже решён Ильёй (статья написана им точно), так что следовало бы сначала проследовать в поиск по этому сайту.

А я так и сделал. Спасибо.
Вот теперь сижу разбираюсь.
К сожалению, не могу пошагово проходить функцию в javascript, а пользоваться все время алертами, а потом убирать их - забодался.

ваый 12.08.2011 19:23

Цитата:

Сообщение от evgenybe
а пользоваться все время алертами, а потом убирать их - забодался.

o_O
console.log() ?
debugger ?

evgenybe 12.08.2011 19:43

debugger я поставил давно. Но на нем не останавливается почему-то.
Зашел Internet Options в advanced и там убрал птичку на Disable Debugging - тоже не сработало.

melky 12.08.2011 21:02

firebug в этом плане намного удобнее.

и дебаггер там есть

попробуйте

evgenybe 13.08.2011 13:08

Цитата:

Сообщение от melky (Сообщение 120078)
сладко, очень сладко звучит :)



прошу сюда html!

кстати, код можно было и нагуглить(это не мой код):

function getAbsolutePos(el)
	{
	var r = { x: el.offsetLeft, y: el.offsetTop };
	if (el.offsetParent)
		{
		var tmp = getAbsolutePos(el.offsetParent);
		r.x += tmp.x;
		r.y += tmp.y;
		}
	return r;
	}

или вот еще
var el = document.getElementById('login');
var x = findPosX(el);
var y = findPosY(el);
 
function findPosX(obj) {
    var curleft = 0;
    if (obj.offsetParent) {
        while (1) {
            curleft+=obj.offsetLeft;
            if (!obj.offsetParent) {
                break;
            }
            obj=obj.offsetParent;
        }
    } else if (obj.x) {
        curleft+=obj.x;
    }
    return curleft;
}
 
function findPosY(obj) {
    var curtop = 0;
    if (obj.offsetParent) {
        while (1) {
            curtop+=obj.offsetTop;
            if (!obj.offsetParent) {
                break;
            }
            obj=obj.offsetParent;
        }
    } else if (obj.y) {
        curtop+=obj.y;
    }
    return curtop;
}


а вот пример и статья от этого сайта

Написал практически то же самое. Только алерты вставил.

Код:

    function findPosY(obj) {
        var curtop = 0;
        alert("2-y");
        if (obj.offsetParent) {

            while (1) {
                curtop += obj.offsetTop;
                if (!obj.offsetParent) {
                    break;
                }
                obj = obj.offsetParent;
            }
        } else if (obj.y) {
            alert("3-y");
            curtop += obj.y;
        }
        alert("4-y");
        return curtop;
    }

Первый alert("2-y"); срабатывает. А остальные нет. Следовательно из-за какой-то ошибки код туда не доходит. Подскажите, пожалуйста, что за ошибка

devote 13.08.2011 13:43

Цитата:

Сообщение от evgenybe
Первый alert("2-y"); срабатывает. А остальные нет. Следовательно из-за какой-то ошибки код туда не доходит. Подскажите, пожалуйста, что за ошибка

В вашем варианте скорее единственное это то что цикл while никогда не заканчивается, следовательно и alert'ы и не срабатывают. Возможно в цикле просто возникает ошибка и код останавливается, может просто не у всех есть offsetTop, это единственное объяснение, либо offsetParent присутствует всегда, что мало вероятно.

evgenybe 13.08.2011 14:46

Цитата:

Сообщение от devote (Сообщение 120285)
В вашем варианте скорее единственное это то что цикл while никогда не заканчивается, следовательно и alert'ы и не срабатывают. Возможно в цикле просто возникает ошибка и код останавливается, может просто не у всех есть offsetTop, это единственное объяснение, либо offsetParent присутствует всегда, что мало вероятно.

Ошибка возникает вот здесь:
if (obj.offsetParent)
Потому что сразу ни в if, ни в else алерты уже не срабатывают.

Как можно исправить?

devote 13.08.2011 15:20

if (obj && obj.offsetParent) {
} else if (obj && obj.y) {
}

devote 13.08.2011 15:30

function findPosY(obj) {
    if ( !obj ) return 0;
    var curtop = 0;
    if ( obj.offsetParent ) {
        while (1) {
            curtop += obj.offsetTop;
            if ( !( obj = obj.offsetParent ) ) {
                break;
            }
        }
    } else if ( obj.y ) {
        curtop += obj.y;
    }
    return curtop;
}

evgenybe 14.08.2011 15:32

Цитата:

Сообщение от melky (Сообщение 120139)
firebug в этом плане намного удобнее.
и дебаггер там есть
попробуйте

Так ведь это для браузера FireFox! А у меня Google Chrom

ваый 14.08.2011 15:42

Цитата:

Сообщение от evgenybe
Так ведь это для браузера FireFox! А у меня Google Chrom

В хроме есть все тоже самое. Пишете в js строчку debugger, F5, и вперед отлаживать.

evgenybe 14.08.2011 15:55

Цитата:

Сообщение от devote (Сообщение 120313)
function findPosY(obj) {
    if ( !obj ) return 0;
    var curtop = 0;
    if ( obj.offsetParent ) {
        while (1) {
            curtop += obj.offsetTop;
            if ( !( obj = obj.offsetParent ) ) {
                break;
            }
        }
    } else if ( obj.y ) {
        curtop += obj.y;
    }
    return curtop;
}

Я уж надоел всем, наверное.
Но ничего до сих пор не работает.
Если я делаю div, а внутри него GridView, то вообще не работает.
Если я делаю div, а внутри него еще div (с именем DivIn), а уж в нем GridView, то тогда координату Y я получаю. Но независимо от положения скролла самого наружного дива, результат в любом случае одно и то же число.

evgenybe 14.08.2011 22:00

Цитата:

Сообщение от ваый (Сообщение 120489)
В хроме есть все тоже самое. Пишете в js строчку debugger, F5, и вперед отлаживать.

Так в том-то и проблема - ставлю debugger, нажимаю F5 и... и не останавливается.

ваый 14.08.2011 23:19

Цитата:

Сообщение от evgenybe
Так в том-то и проблема - ставлю debugger, нажимаю F5 и... и не останавливается.

Консоль-то открыть надо предварительно (F12).

Magneto 15.08.2011 12:35

В этой теме началось не то что велосипедостроение, а уже какое то Шаттло-строение.

HTML:
<body>
  <div id="wrapper">
    <div id="content">
<!-- Здесь очень большой текст -->
    </div>
  </div>
</body>


CSS:
#wrapper{
  height:400px;
  overflow:hidden;
  overflow-y:scroll}



javascript:
//  Срипт запустится после загрузки документа
window.onload = function () {
  //  Получаем ссылки на DOM-элементы
  var wrapper = document.getElementById('wrapper');
  
  //  Возможно пользователь уже заходил на страницу. Проверим есть ли данные насчет скролла.
  //  Данные хранятся в localStorage
  var dataScroll = localStorage.getItem('dataScroll');
  
  //  Если данных нет то присвоем переменной dataScroll ноль
  if (dataScroll == undefined){
    dataScroll = 0;
  }
  
  //  Установим скролл в нужную позицию
  wrapper.scrollTop = dataScroll;
  
  //  Теперь нужно слушать событие onScroll  и заносить данные о положении скролла
  //  в локальную базу
  wrapper.onscroll = function () {
    localStorage.setItem('dataScroll', wrapper.scrollTop);
  }
  
  //  Вуаля, и не нужно ломать себе и другим мозг вычисляя положение сферического коня в вакууме.
}


Посмотреть пример

P.S. В некоторых браузерах localStorage локально не работает.

evgenybe 15.08.2011 16:43

Цитата:

Сообщение от ваый (Сообщение 120551)
Консоль-то открыть надо предварительно (F12).

Замечательно! Теперь буду учиться этим пользоваться.

Осталось только решить основную задачу. А она никак не хочет выдавать мне координаты внутреннего дива.


Часовой пояс GMT +3, время: 05:49.