Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Запомнить позицию скроллинга, не получается :-( 
:(
    Опции темы
Се ля ви
Дата 26.1.2005, 15:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Java/SOAрхитектор
****


Профиль
Группа: Модератор
Сообщений: 2016
Регистрация: 5.6.2004
Где: place without tim e and space

Репутация: 5
Всего: 127



Задача - запомнить позицию скроллинга и вернуться к ней при обновлении страницы. Например, информация всё время меняется, но бегунок скроллера должен оставаться на месте при обновлении страницы.
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />... <!-- что бы в 1 экран не влезло -->

<a href="javascript:location.search = '?pos=' + document.body.scrollTop;">Перейти с сохранением позиции скроллинга</a><br />

1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />... <!-- что бы в 1 экран не влезло -->

<script type="text/javascript" language="javascript1.2">
<!--//[CDATA[
window.onload = function(){
 if (location.search)
  document.body.scrollTop = parseInt( (/\??pos=(\d+)&?/i).exec(location.search)[0] );
}
//]]-->
</script>
</body>
</html>

Возможно, в парсеньи ошибка - но до неё даж не доходит - document.body.scrollTop возвращает 0 вне зависимости от положения скроллинга почему-то smile

Это сообщение отредактировал(а) Се ля ви - 26.1.2005, 15:26


--------------------
  )
 (
[_])
проф. блог

Кролики думали, что занимаются любовью, а на самом деле их просто разводили...
PM MAIL WWW Skype GTalk   Вверх
Alx
Дата 26.1.2005, 17:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ajaxy
****


Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78



а что такое "[CDATA]"??
Добавлено @ 17:58
вот это:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

нафик убери и всё зарулит smile
Добавлено @ 17:59
ну и ещё в парсе проблема.


--------------------
PM MAIL WWW ICQ   Вверх
Alx
Дата 26.1.2005, 18:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ajaxy
****


Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78



Код

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript1.2">
function func()
{if (document.location.search)
{var re = new RegExp("\\?pos=","g");
document.body.scrollTop = document.location.search.replace(re,"");
}
}
</script>
</head>

<body onload="func();">

1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />... <!-- что бы в 1 экран не влезло -->

<a href="javascript:location.search = '?pos=' + document.body.scrollTop;">Перейти с сохранением позиции скроллинга</a><br />

1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />1<br />2<br />3<br />... <!-- что бы в 1 экран не влезло -->
</body>
</html>



--------------------
PM MAIL WWW ICQ   Вверх
Се ля ви
Дата 26.1.2005, 19:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Java/SOAрхитектор
****


Профиль
Группа: Модератор
Сообщений: 2016
Регистрация: 5.6.2004
Где: place without tim e and space

Репутация: 5
Всего: 127



Цитата(Alx @ 26.1.2005, 17:53)
а что такое "[CDATA]"??
Вообще-то [CDATA[...]]. Это XML-синтаксис - так в нём обозначаются данные, которые не надо анализировать, даже если там встречаются теги. Почитать можно тут. Использовать необязательно, но в XHTML-нотации рекомендуется скрипты и стили заключать в такую секцию, а комментарии я ставлю для браузеров, которые не понимают этого...


Так, проблема частично решилась - для Mozilla и FireFox`а - там есть свойство объекта window под названием scrollY - показывает в пикселах позицию, на которую сейчас пользователь прокрутил окно браузера относительно документа - если это значение передать методу window.scrollTo(xPos, yPos) - и документ прокрутится куда надо.
Код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head>

<body>

1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />0<br />1<br />2<br />3<br />4<br />5<br /> 6<br />7<br />8<br />9<br />0<br />1<br />2<br />3<br />4<br />5<br />

<a href="javascript:location.search = '?pos=' + window.scrollY;">Перейти с сохранением позиции скроллинга</a><br />

6<br />7<br />8<br />9<br />0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />

<script type="text/javascript" language="javascript1.2"> <!--//[CDATA[
window.onload = function(){
 //alert(location.search);
 if (location.search)
  window.scrollTo(0, parseInt(location.search.substr(location.search.lastIndexOf('pos=') + 4, location.search.length) ));
}
//]]-->
</script>
</body>
</html>


Но в IE оно не поддерживается, к тому же, насколько я понял, манипуляция со скроллингом не входит ни в DOM, ни в ECMAScript - так что это самодеятельность разработчиков браузеров...


--------------------
  )
 (
[_])
проф. блог

Кролики думали, что занимаются любовью, а на самом деле их просто разводили...
PM MAIL WWW Skype GTalk   Вверх
Се ля ви
Дата 26.1.2005, 19:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Java/SOAрхитектор
****


Профиль
Группа: Модератор
Сообщений: 2016
Регистрация: 5.6.2004
Где: place without tim e and space

Репутация: 5
Всего: 127



Офигеть... Значит, дело было в XHTML`е...


--------------------
  )
 (
[_])
проф. блог

Кролики думали, что занимаются любовью, а на самом деле их просто разводили...
PM MAIL WWW Skype GTalk   Вверх
Sardar
Дата 26.1.2005, 21:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Се ля ви просто без DOCTYPE браузер работает в quirksmode, который совместимый с прошлыми поколениями браузеров. Читай http://www.quirksmode.org там же ответ на твой вопрос.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Се ля ви
Дата 27.1.2005, 13:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Java/SOAрхитектор
****


Профиль
Группа: Модератор
Сообщений: 2016
Регистрация: 5.6.2004
Где: place without tim e and space

Репутация: 5
Всего: 127



Вобщем, если кому-то понадобится - можете копировать, что получилось. А получилось - следующее:
Код
window.onload = function(){
if (location.search)
 window.scrollTo(0, parseInt(location.search.substr(location.search.lastIndexOf('pos=') + 4, location.search.length) ));
}
function setPos(){
var ls = location.search;
location.search = (
 (ls) ? (
  (ls.indexOf('pos=') > -1) ? ls.substr(0, ls.indexOf('pos=')) : ls + '&'
 ) : '?' ) +
 'pos=' + document.body.scrollTop;
}
window.setTimeout(setPos, 5000); // Обновления каждые 5 секунд

Надо это всё добавить в тело скрипта, удалить или закомментировать !DOCTYPE - и больше ничего.
Довольно удобно смотреть всё время изменяемые документы так. Например, новости в реальном времяни - если их много на странице...
Если очень хочется вписать DOCTYPE, вариант, приведённый 3-мя постами выше будет работать, но только в Мазилле и Огненной Лисе, так что переходите на правильные браузеры smile

Это сообщение отредактировал(а) Се ля ви - 27.1.2005, 17:04


--------------------
  )
 (
[_])
проф. блог

Кролики думали, что занимаются любовью, а на самом деле их просто разводили...
PM MAIL WWW Skype GTalk   Вверх
Alx
Дата 27.1.2005, 16:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ajaxy
****


Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78



а чем то что я написал-то не подходит? smile
smile


--------------------
PM MAIL WWW ICQ   Вверх
Се ля ви
Дата 27.1.2005, 17:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Java/SOAрхитектор
****


Профиль
Группа: Модератор
Сообщений: 2016
Регистрация: 5.6.2004
Где: place without tim e and space

Репутация: 5
Всего: 127



Alx
Не достаточно тщательно проработаны детали для использования некомпетентным человеком во всех возможных случаях.

Например, что выдаст твой скриптик, если у страницы уже есть какие-то get-параметры запроса?

У моего скрипта тоже несколько незначительных ограничений, впрочем - например, если пользователь задал событие window.onload или как ты в body это указал - мой скрипт с ним законфлектует и нужно будет разделять их специально.

Просто привычка делать всё максимально универсально, что бы в похожих задачах можно было максимально не разбираясь использовать потом... smile


--------------------
  )
 (
[_])
проф. блог

Кролики думали, что занимаются любовью, а на самом деле их просто разводили...
PM MAIL WWW Skype GTalk   Вверх
Alx
Дата 27.1.2005, 17:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ajaxy
****


Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78



Се ля ви
это конечно хорошо, но вот насчет window.onload - никогда им не пользовался, поэтому не знаю - лозначает ли он просто успешное открытие документа или полную загрузку всех элементофф страницы? (как body.onload)


--------------------
PM MAIL WWW ICQ   Вверх
Се ля ви
Дата 27.1.2005, 17:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Java/SOAрхитектор
****


Профиль
Группа: Модератор
Сообщений: 2016
Регистрация: 5.6.2004
Где: place without tim e and space

Репутация: 5
Всего: 127



smile
Цитата(Alx @ 27.1.2005, 17:27)
означает ли он просто успешное открытие документа или полную загрузку всех элементофф страницы? (как body.onload)

Это синонимы с той разницей, что window.onload работает только в ЯваСцрипт 1.1 и выше, а в теге боди можно было прописать load и раньше...


--------------------
  )
 (
[_])
проф. блог

Кролики думали, что занимаются любовью, а на самом деле их просто разводили...
PM MAIL WWW Skype GTalk   Вверх
Alx
Дата 27.1.2005, 18:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ajaxy
****


Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78



Се ля ви
пасиб


--------------------
PM MAIL WWW ICQ   Вверх
Се ля ви
Дата 7.2.2005, 11:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Java/SOAрхитектор
****


Профиль
Группа: Модератор
Сообщений: 2016
Регистрация: 5.6.2004
Где: place without tim e and space

Репутация: 5
Всего: 127



Господа, новые решения и новые, т.е. хорошо забытые старые, проблемы.

Потребовало от меня начальство другого, более "чистого" решения данной задачи - что бы не портить строку запроса новыми параметрами. После мозгового штурма, решено было воспользоваться куками.

Не мудрствуя лукаво, нагло слизал скрипт с http://www.citforum.ru/internet/javascript/jscookie.shtml , приспособив под данную задачу:
Код
// API для работы с Cookies
function getCookie(name) { // Получить значение куки по её имяни
   
   var arg = name + "=";
   var alen = arg.length;
   var clen = document.cookie.length;
   var i = 0, j;
   
   do { j = i + alen;
           if (document.cookie.substring(i, j) == arg) return getCookieVal (j);
           i = document.cookie.indexOf(" ", i) + 1;
   } while (i < clen && i > 0);
   
   return null;
}

function getCookieVal(offset) { // Получить значение куки по позиции её начала

   var endstr = document.cookie.indexOf (";", offset);
   if (endstr == -1) endstr = document.cookie.length;
   
   return unescape(document.cookie.substring(offset, endstr));
}

function setCookie (name, value) { // Установить значение куки по имени, значению, а так же, возможно, дате стирания, пути, домену и параметру безопастности

   // Обрабатываем параметры
   var argv = setCookie.arguments;
   var argc = setCookie.arguments.length;
   
   var expires = (argc > 2) ? argv[2] : null;
   var path = (argc > 3) ? argv[3] : null;
   var domain = (argc > 4) ? argv[4] : null;
   var secure = (argc > 5) ? argv[5] : false;
   
   document.cookie =    name + "=" + escape (value) +
                                     ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
                                     ((path == null) ? "" : ("; path=" + path)) +
                                     ((domain == null) ? "" : ("; domain=" + domain)) +
                                     ((secure == true) ? "; secure" : "");
}


var position;
window.onload = function(){
   if (position = getCookie('position'))
       window.scrollTo(0, position);
}


function setPos(){
   
   position = document.body.scrollTop;
   pathname = location.pathname;
   myDomain = pathname.substring(0,pathname.lastIndexOf('/') + 1); //location.hostname;

   // Установка параметра expire на 15 секунд вперед.
   var largeExpDate = new Date ();
   largeExpDate.setTime(largeExpDate.getTime() + (15 * 1000)); // (365 * 24 * 60 * 60 * 1000), а 15 * 1000 - 15 секунд
   
   setCookie('position', position, largeExpDate, myDomain);
   //alert(' Кука установлена! ' + document.cookie);
}

// Перед обновлением устанавливаем для куки значение
window.onunload = function(){ setPos(); return true; }

Скрипт этот, к сожалению, не без изъяна. Дело в том, что в нём предполагается, что в начале документа стоит конструкция следующего вида:
Код
<meta http-equiv="refresh" content="10; URL=http://localhost/" />
. Я эту конструкцию напрямую не контролирую, она генерится скриптом, в который лезть нет никакого желания.
Но штука в том, что, как показала практика, ревреш, заданный тегом при этом скрипте почему-то перестаёт фурычить.
Есть, канешь, обход - вписать скрипт:
Код
// Обновляем  документ
var Metas = document.getElementsByTagName("meta");
for (var i = 0; i < Metas.length; i++)
if (Metas[i].httpEquiv == "refresh")
 window.setTimeout("location.reload()", parseInt(Metas[i].content) * 1000);
, но это, согласитесь, не так красиво...

Есть ещё идеи, как с этим бороться?


--------------------
  )
 (
[_])
проф. блог

Кролики думали, что занимаются любовью, а на самом деле их просто разводили...
PM MAIL WWW Skype GTalk   Вверх
Се ля ви
Дата 7.2.2005, 12:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Java/SOAрхитектор
****


Профиль
Группа: Модератор
Сообщений: 2016
Регистрация: 5.6.2004
Где: place without tim e and space

Репутация: 5
Всего: 127



Хм, небольшое уточнение - она не пашет после полного обновления страницы вручную по Ctrl-F5 и возможно, это очередной глюк IE...

Вопрос снят, скрипт рабочий, можете брать и юзать, если нужно, хотя объяснение этой странности поиметь было бы неплохо...

И при простом обновлении на F5 почему-то автообновление в IE теряется... В др. браузерах не тестил...

Это сообщение отредактировал(а) Се ля ви - 7.2.2005, 12:36


--------------------
  )
 (
[_])
проф. блог

Кролики думали, что занимаются любовью, а на самом деле их просто разводили...
PM MAIL WWW Skype GTalk   Вверх
Се ля ви
Дата 8.2.2005, 11:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Java/SOAрхитектор
****


Профиль
Группа: Модератор
Сообщений: 2016
Регистрация: 5.6.2004
Где: place without tim e and space

Репутация: 5
Всего: 127



 Кароче, вот финальный, пакетный вариант. Если разместить это перед закрывающим тегом "</body>", то при постоянном обновлении страницы позиция просмотра будет оставаться на том же месте:
Код
<script type="text/javascript" language="javascript1.2">
<!--[CDATA[
    
    // API для работы с Cookies
    
    // Получить значение куки по её имяни
    function getCookie(name) {
        
        var arg = name + "=",
            alen = arg.length,
            clen = document.cookie.length,
            i = 0, j;
        
        do {
            j = i + alen;
            if (document.cookie.substring(i, j) == arg) return getCookieVal (j);
            i = document.cookie.indexOf(" ", i) + 1;
        } while (i < clen && i > 0);
        
        return null;
    }
    
    // Получить значение куки по позиции её начала
    function getCookieVal(offset) {
    
        var endstr = document.cookie.indexOf (";", offset);
        if (endstr == -1) endstr = document.cookie.length;
        
        return unescape(document.cookie.substring(offset, endstr));
    }
    
    // Установить значение куки по имени, значению, а так же, возможно, дате стирания, пути, домену и
    // параметру безопастности
    function setCookie (name, value) {
    
        // Обрабатываем параметры
        var argv = setCookie.arguments;
            argc = setCookie.arguments.length,
        
            expires = (argc > 2) ? argv[2] : null,
            path = (argc > 3) ? argv[3] : null,
            domain = (argc > 4) ? argv[4] : null,
            secure = (argc > 5) ? argv[5] : false;
        
        document.cookie =
            name + "=" + escape (value) +
            ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
            ((path == null) ? "" : ("; path=" + path)) +
            ((domain == null) ? "" : ("; domain=" + domain)) +
            ((secure == true) ? "; secure" : "");
    }
    
    
    // Управление переходом области просмотра при обновлении
    
    function setPos(){
        
        position = document.body.scrollTop;
        pathname = location.pathname;
        myDomain = pathname.substring(0, pathname.lastIndexOf('/') + 1);
        
        // Установка параметра expire на 15 секунд вперед.
        var largeExpDate = new Date ();
        // (365 * 24 * 60 * 60 * 1000) - 1 год (максимальный срок жизни куки),
        // а (15 * 1000) - 15 секунд - более чем достаточно для того, что бы успела обновиться страница
        largeExpDate.setTime(largeExpDate.getTime() + (15 * 1000));
        
        setCookie('position', position, largeExpDate, myDomain);
    }
    
    // Перед обновлением устанавливаем для куки значение, после этого разрешаем браузеру обновить страницу
    window.onunload = function(){ setPos(); return true; }
    
    
    var position;
    
    /*
     // Установка перехода на событии полной загрузки страницы (с внешними элементами)
     window.onload = function(){
         if (position = getCookie('position'))
             window.scrollTo(0, position);
     }
     */
    
    // Установка перехода на событии частичной загрузки страницы (только контент и разметка)
    if (position = getCookie('position'))
        window.scrollTo(0, position);
    
    
    /*
     // Обновляем  документ - может понадобиться для страховки от случаев, когда документ почему-либо
     // не будет обновляться
     var Metas = document.getElementsByTagName("meta");
     for (var i = 0; i < Metas.length; i++)
         if (Metas[i].httpEquiv == "refresh") {
            window.setTimeout("location.reload()", parseInt(Metas[i].content) * 1000);
            break;
        }
     */
            
    /** Примечание: при тестировании был замечен странный глюк Explorer`а - если обновить страницу на F5 или Ctrl+F5
     * - т.е. вручную - то автообновление перестаёт выполняться. Последний блок в скрипте - заплатка против этого глюка,
     * хотя использовать её методологически не верно. Если это критично - нужно раскомментировать этот блок.
     **/
//]]-->
</script>


Это сообщение отредактировал(а) Се ля ви - 16.9.2008, 21:39


--------------------
  )
 (
[_])
проф. блог

Кролики думали, что занимаются любовью, а на самом деле их просто разводили...
PM MAIL WWW Skype GTalk   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0806 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.