• Страница 3 из 4
  • «
  • 1
  • 2
  • 3
  • 4
  • »
Модератор форума: JonMagon  
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Замена переключателей бесконечной "простыней" (Меняем переключатели страниц на "простыню" как Вконтакте)
Замена переключателей бесконечной "простыней"
JacksonMihailov
Сообщений: 259
Репутация: 107

Сообщение # 31 | 01:31:18
скорее всего из за чпу и не работает. У меня отключен.

jmDB - Текстовая база данных для uCoz
Solaris(Olga)
Сообщений: 342
Репутация: 240

Сообщение # 32 | 01:34:23
webanet, ах вот оно что. Да, на главной подгружает 1 страницу. Дальше не хочет. Но подгружает. Вот и выяснилась проблема)
---
Заработало) Выкладываю рабочий код для главной страницы каталога статей. Данным кодом заменяем $BODY$:

Код
<span class="lenta">$BODY$</span>
<div id="ShowMore" pagenum="1"></div>
<div id="more1"></div>
<script type="text/javascript">
$(window).scroll(function(){
if ($(document).height() - $(window).height() <= $(window).scrollTop() + 50) {
var $showclick = $('#ShowMore').attr('pagenum');
$('#more'+$showclick).after('<div id="more'+(parseInt($showclick)+1)+'"></div>');
$showclick++;
$('#more'+$showclick).load('$MODULE_URL$0'+'-'+$showclick+' .lenta');
$('#ShowMore').attr('pagenum',parseInt($showclick));
return false;
} };)
</script>

Спасибо за помощь webanet и JacksonMihailov! Без вас бы не получилось.
Сообщение отредактировал Solaris(Olga) - Среда, 05 Июн 2013, 13:17:18
gasparean
Сообщений: 15
Репутация: 13

Сообщение # 33 | 07:03:11
Помогите :) ... Мне тоже нужна "простыня" :) В шаблоне архива материалов блога ставляю код не работает. обе версии кодов пробовал..чпу отключены. что не так делаю?

Код
<span id="lenta">$BODY$</span>  
<div id="more1"></div>  
<div id="ShowMore" pagenum="1"></div>  
<div style="display:none;">$PAGE_SELECTOR$</div>  
<script type="text/javascript">  
// Скрипт написан JacksonMihailov на forum.ucoz.ru  
       $(document).ready(function() {  
<?if($URI_ID$!=<?substr('blMain',-4)?>)?> //       
var CatId = ('$URI_ID$'.replace(/[^0-9]/gi, ''))  
<?endif?>  
var LstPage = $($(".swchItem").get($(".swchItem").length-2)).text()  
$(window).scroll(function() {  
           if  ($('#ShowMore').attr('pagenum') < LstPage) {  
           if  ($(window).scrollTop() == $(document).height() - $(window).height())       
           {  
               var $showclick = $('#ShowMore').attr('pagenum');  
$('#more'+$showclick).after('<div id="more'+(parseInt($showclick)+1)+'"></div>')  
$('#more'+$showclick).load('$HOME_PAGE_LINK$$MODULE_ID$/<?if($URI_ID$!=<?substr('blMain',-4)?>)?>'+CatId+'-<?endif?>0-'+(parseInt($showclick)+1)+' #lenta',function(){  
          $('#ShowMore').attr('pagenum',parseInt($showclick)+1);  
          });  
           }     } }); });  
</script>

Код
<?if($URI_ID$!=<?substr('blCat4',-4)?>)?> //       

$('#more'+$showclick).load('$HOME_PAGE_LINK$$MODULE_ID$/<?if($URI_ID$!=<?substr('blCat4',-4)?>)?>'+CatId+'-<?endif?>0-'+(parseInt($showclick)+1)+' #lenta',function(){

и еще..

Код
<span class="lenta">$BODY$</span>  
<div id="ShowMore" pagenum="1"></div>  
<div id="more1"></div>  
<script type="text/javascript">  
$(window).scroll(function(){  
if ($(document).height() - $(window).height() <= $(window).scrollTop() + 50) {  
var $showclick = $('#ShowMore').attr('pagenum');  
$('#more'+$showclick).after('<div id="more'+(parseInt($showclick)+1)+'"></div>');  
$showclick++;  
$('#more'+$showclick).load('$MODULE_URL$0'+'-'+$showclick+' .lenta');  
$('#ShowMore').attr('pagenum',parseInt($showclick));  
return false;  
} };)  
</script>
Сообщение отредактировал gasparean - Суббота, 06 Июл 2013, 07:09:12
fomir
Сообщений: 40
Репутация: 20

Сообщение # 34 | 18:04:06
Я знаю что нужно, но не знаю, как реализовать...
Собственно - Если "скрол" опустился к концу загруженной страницы ( страницы с материалами, а не самой Веб-страницы ), то происходит Ajax подгрузка div'a с материалами следующей страницы архива
Сообщение отредактировал fomir - Среда, 10 Июл 2013, 18:06:28
JacksonMihailov
Сообщений: 259
Репутация: 107

Сообщение # 35 | 18:08:29
Вот абсолютно рабочая версия!!! Которая переодически будет обновляться в зависимости от отзывов и пожеланий.
.
Давно не заходил на форумы, и за это время мне пришли вопросы по поводу данного скрипта. Так как нигде ничего не нашел, написал с новый скрипт с нуля. Теперь скрипт поддерживает разные модули. Все обсуждения ведутся там же. Если вам чего то не хватает, пишите, доработаю.

P.S. прошу не считать за рекламу.

jmDB - Текстовая база данных для uCoz
Сообщение отредактировал JacksonMihailov - Среда, 02 Окт 2013, 19:03:35
FOF
Сообщений: 1
Репутация: 0

Сообщение # 36 | 21:17:06
JacksonMihailov, Спасибо. Работает! http://tavaidienai.ucoz.com/
Solaris(Olga)
Сообщений: 342
Репутация: 240

Сообщение # 37 | 12:02:13
Подскажите пожалуйста. ОК, можно подгружать контент на одну единственную страницу. А удалить можно? Нашла вот что:

Код
div1.parentNode.removeChild(div1);

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

- кроме того, помимо "простыни" есть желание подгружать таким образом и все другие страницы сайта. Например, при переходе в раздел, загружать похожим образом страницу раздела. Проблема в том, что информация накапливается на текущей странице, скрывать ее не имеет смысла, нужно удалять но как это сделать? Вышеприведенный код решает эту проблему? Или это только видимость? Типа - удаляется код, а в памяти информация остается все равно?

- как лучше удалять информацию со страницы. Чтобы удаление было полное, без следа и освобождались ресурсы? И можно ли это сделать вообще? Направьте в каком-то направлении для дальнейших исследований =)
Сообщение отредактировал Solaris(Olga) - Воскресенье, 27 Окт 2013, 12:18:39
TommyPanda
Сообщений: 28
Репутация: 15

Сообщение # 38 | 14:01:53
Прочитав название, хотел было попрактиковаться, но вижу, что уже разобрались. Очень интересная и полезная функция.
Но я не могу понять зачем манипуляции с обёртками BODY и добавлением новых div?
Думаю, это нужно упростить всё до уровня скрипта - подгрузил файл JS и работает. Если нужно исправил в конфигурации скрипта, какие модули должны работать простыней, а какие по стандарту, если нужно и всё.

Обёртка для дива не нужна. Я не проверял во всех модулях, но насколько я понял, все материалы в модулях помещаются в общий Div с присвоенным ID allEntries. Даже если в каком-то модуле и не так, то при помощи jQuery легко отследить материалы на странице и сделать эту обёртку скриптом. Зачем заставлять школьников страдать и делать лишние действия?

Зачем нужны дополнительные дивы для подгружаемых материалов? Можно грузить их прямо после уже текущих (.append(elements)). Для удобства можно создать один скрытый див, в который будут грузиться материалы и после загрузки перемещать уже на правильное место, освобождая его для новых загрузок. Если постараться, то можно обойтись и без него.

Ольга борется за то, чтобы код был меньше, но параллельно Вы создаёте ненужные действия. Я в целом не эксперт в этой теме и это моё субъективное мнение (буду рад получить ссылку на доказательство обратного) - но я сильно сомневаюсь, что постепенно подгрузив на страницы 100500 анонсов мы как-то усложним работу сайту для воспроизводящего компьютера. Вы же будете загружать статичный HTML, а не какие-то выполняющиеся с интервалом скрипты, накладывюащиеся один на другой. Их достаточно загрузить один раз и всё - он не будет влиять на работу страницы! Переживания по поводу использования памяти вовсе неуместны. Да, могут быть какие-то странности с сохранением страницы в кеш (хотя и то вряд ли), но уж точно наличие большого куска кода не приведёт к тормозам страницы, после загрузки этого самого HTML.

По поводу удаления ненужных кусков "для освобождения памяти". Если это необходимо, то нужно это рассмотреть как задачу для другого скрипта, который может быть дополнением или параллельным независимым скриптом. Для большинства людей эта функция не нужна, значит незачем перегружать скрипт лишним функционалом. Для удобства работы (раз уж не будет дополнительных дивов moreN) можно к загруженным записям добавлять новый класс, что облегчит работу других скриптов с этими записями.

В целом реализация мне понравилась. Особенно плавная подгрузка по частям, а не загрузка сразу всего махов,а потом показ кусками, как это сделано на некоторых сайтах. Простите за тонну критики и ни строчки кода. В ближайшем будущем, если JacksonMihailovне вдохновиться моими нареканиями, то попробую сделать подобный код. Хотел бы только заметить, что я не могу назвать себя программистом и не говорю, что я сделаю лучше. Я рассуждаю больше с точки зрения конечного пользователя - взгляд каким бы я хотел видеть этот скрипт, а не как бы я его сделал.
Solaris(Olga)
Сообщений: 342
Репутация: 240

Сообщение # 39 | 09:17:52
TommyPanda, интересно, надо подумать. И еще было бы интересно посмотреть на вашу реализацию.

Недостатки того что есть
Вообще нужно написать библиотеку под Юкоз с настраиваемыми параметрами и дополнительными возможностями, которая будет легко подключаться и везде работать. Мой код небольшой (его можно еще оптимизировать), но недостаток в том, что его приходится поправлять каждый раз, так как он не заточен на все случаи жизни. У JacksonMihailov более универсальное решение, но тоже не везде работает, а главное - не работает с ЧПУ. В общем, нет универсальности.

К тому же хотелось бы добавить новые возможности. При скроллинге нужно менять через хистори АПИ УРЛ в браузере. В том числе с эмуляцией для старых браузеров ИЕ6 и т.д., что не так уж просто. Но это необходимость. Например, я прокрутила 30 страниц. Завтра хочу продолжить с этого же места. Делаю закладку. А после перехода по закладке, конечно, мне откроется страница с самого начала. Или, например, интернет выключился. После обновления страницы хочется продолжить изучения материалов, но теперь надо прокрутить вниз. Это не дело. ВКонтакте этим часто расстраивает smile

Что нужно сделать:
- менять УРЛ при прокрутке
- добавить нумерацию страниц столбиком слева, чтобы можно было сразу перейти к нужной странице
- добавить якоря с хешем, чтобы при клике на уже загруженные страницы происходила плавная прокрутка к ним. То есть, например, я просмотрела 30 страниц, нажимаю на страницу 4 и страница поднимается без перезагрузки, используя привоенный ей якорь. Нажимаю на 30 и страница перемещается вниз.
- кнопка наверх и вниз.
- кнопка назад с запоминанием позиции. Например, перешла по приведенной ссылке на странице 23, теперь хочу вернуться и продолжить с того же места, но, как вы понимаете, при этом откроется страница с самого начала и снова все мотать...

Чтобы это реализовать толково и чтобы работало хорошо, нужно... делать навигацию на скриптах полностью. То есть без перезагрузки страниц. Тогда можно все отслеживать, сохранять, делать закладки и работать с хистори АПИ более продвинуто. В общем, задача сложная, но зато интересная. Скоро покажу, что у меня уже есть на эту тему.

Что это дает
Кстати, навигация скриптами позволит
- сделать сайт очень быстрым
- сделать сайт плавным и непрерывным
- сделать продвинутую "простыню", она же - бесконечный скроллинг с любыми наворотами и возможностями
- проигрывать музыку или видео при переходе на другие страницы, как Вконтакте и причем без фреймов
- отслеживать, сколько посетитель просмотрел страниц, сколько времени пробыл на сайте, откуда и куда переходит и т.д. + кукис и получится очень мощная вещь для "умного" сайта, который во время его использования может реагировать на ваше поведение, пользовательские сценарии, адаптируется и т.д.
- возможность очень легкой настройки сайта пользователей без кукисов в рамках одной сессии. Как это использовать каждый придумает сам, но возможности почти безграничные)))
- закладки в рамках одной сессии. Что-то вроде корзины, но можно при клике занести не товар в закладки, а тот или иной материал, чтобы вернуться к нему позже и посмотреть внимательнее. Очень хорошая фишка, если у вас на сайте имеются боле-менее постоянные посетители или если посетители просматривают много страниц.

и и.д. и т.д. тут все зависит от вашей фантазии и творческого подхода. Например, если сайт рассчитан на подростков, можно попробовать сделать так, чтобы они больше страниц просматривали. Для этого, допустим, делаем счетчик, который добавляет +1 к каждой просмотренной страницы. И присваеваем рейтинг, типа - вы новичок, просмотрели 2 страницы. Если 25 страниц - продвинутый пользователь. Ну и завлекательная картинка статуса. Одним словом - что угодно можно вытворить) Это и так можно реализовать, наверно, но будет гораздо-гораздо проще.

Возникает проблема оптимизации
Кстати. тут еще один вопрос тогда всплывает - оптимизация.
- скрипты должны быть неблокируемыми и асинхронными.
- скрипты должны быть сами по себе небольшими и оптимизированными
- по возможности скриптов должно быть как можно меньше.
- нужно все кешировать
- сайт должен замечательно работать и без скриптов, просто с ограниченными возможностями
- также ничего не должно негативно влиять на СЕО

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

Например, после полной загрузки страницы, можно понемножку в фоновом режиме, пока посетитель просматривает анонсы и крутит "простыню", подгрузить на страницу служебные картинки, которые закешируются в его браузере. Теперь, при открытии статьи, их браузер качать не будет, тем самым снижается количество запросов на сервер и загрузка становится очень быстрой. А пока пользователь читает статью, незаметно подгружаем и кешируем комментарии и все, что с ними связано.

Ну и еще раз повторюсь - подгружаться должны только данные - никаких скриптов, разметки и стилей (разве что во время "простоя"). Это можно попробовать реализовать через Юкоз.АПИ. Надо разобраться...

----
Предлагаю делиться идеями ) Может кто-то уже себе такое реализовал? Хотелось бы посмотреть smile
Сообщение отредактировал Solaris(Olga) - Среда, 30 Окт 2013, 12:36:47
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 40 | 11:41:38
Solaris(Olga),
Цитата
а главное - не работает с ЧПУ.


Имеется в виду наверно работа с ЧПУ адресами а не с самим фактом что ЧПУ включено ...
При включении ЧПУ на сайте где небыло ЧПУ, адреса страниц остаются старые и скрипт работает, во всяком случае с Каталогом статей ...

Добавлено (30 Окт 2013, 11:41:38)
---------------------------------------------
Solaris(Olga),

Цитата
В общем, нет универсальности.
А вот универсальности следует избегать. Лучше сделать несколько скриптов но адаптированных под конкретные модули ...

Сообщение отредактировал Miss_Esq - Среда, 30 Окт 2013, 11:27:32
Solaris(Olga)
Сообщений: 342
Репутация: 240

Сообщение # 41 | 11:48:14
Miss_Esq, спасибо за подсказку, надо посмотреть...

И в принципе согласна на все 100%. Универсальность ведет к неизбежной громоздкости. Но тогда не все смогут легко и просто подключить себе какие-то возможности. Но лично я никогда бы не пользовалась громоздкими решениями. Просто у новичков не будет вариантов, или так, или никак... с другой стороны, могут заказать за оплату где-нибудь адаптацию в случае такой необходимости.

А вот если сделать несколько маленьких, это может сработать, да... почему-то не пришло в голову. Надо записать )
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 42 | 14:18:54
Solaris(Olga),
Цитата
А вот если сделать несколько маленьких

Мелкие проще модернизировать под возникающие проблемы ...
Сейчас отключила ЧПУ на сайте. Поставила скрипт в новости, в архив новостей, результат нулевой ....

В то же время, ЧПУ включено, скрипт стоит в блоге и всё работает. Точнее сначала заработало но мотало только первые 3 страницы
Сменила в скрипте

var i=$($(".swchItem").get($(".swchItem").length-2)).text();
на
var i=$($(".swchItem").get($(".swchItem").length-1)).text();

Начало листать всё подряд .. но есть баг, после последней страницы начинает грузить и дальше но только первую страницу ... biggrin

Сообщение отредактировал Miss_Esq - Среда, 30 Окт 2013, 14:50:21
Solaris(Olga)
Сообщений: 342
Репутация: 240

Сообщение # 43 | 23:23:02
Получилось оптимизировать и сократить скрипт.

Код
<script type="text/javascript"> var nx=2;
$(window).scroll(function() { if ($(window).scrollTop() == $(document).height() - $(window).height()){
$.get ('$HOME_PAGE_LINK$$MODULE_ID$/0-'+nx, function (data){ $(data).find("#allEntries").appendTo("#allEntries");          
};);nx++; } };); </script>


Как установить
Устанавливается в самом конце страницы перед </body> и все работает ))). Работать должно во всех модулях и вне зависимости ЧПУ или не ЧПУ. Но надо тестировать. Итак, все что надо сделать, это поправить урл в скрипте. Это легко. Легче и быстрее чем объяснять, но я объясню подробно на всякий случай и приведу примеры. Урл в третьей строчке скрипта формируется так:

Код
$HOME_PAGE_LINK$ + $MODULE_ID$ + /0- + nx

Но для адаптации под свои нужды, вам этот урл придется заменить своим. Урлы могут быть разными. Внимание следует обратить на последние цифры:
http://www.funnybottle.ru/publ/ 0-2
http://www.domstoy.ru/publ/landshaft/idei_dlja_sada/ 70-1-2
http://www.funnybottle.ru/publ/v_interer/4- 1-2

Допустим, вы хотите поставить скрипт на главную какого-нибудь модуля, в разделах или в категориях. Значит, вам нужно зайти в модуль, раздел или категорию. Затем перейти на вторую страницу и перейти на первую. Это может показаться странными манипуляциями, но так лучше сделать, чтобы избежать любых ошибок. После этого копируем урл из верхней строки браузера и вставляем в скрипт. Вне зависимости от того, две или три цифры имеет урл, оставляем только одну цифру и тире после нее. Вот как можно было бы модифицировать скрипт с вышеприведенными урлами. Все станет понятно.

Код
<script type="text/javascript"> var nx=2;
$(window).scroll(function() { if ($(window).scrollTop() == $(document).height() - $(window).height()){
$.get ('http://www.funnybottle.ru/publ/0-'+nx, function (data){ $(data).find("#allEntries").appendTo("#allEntries");         
};);nx++; } };); </script>


Код
<script type="text/javascript"> var nx=2;
$(window).scroll(function() { if ($(window).scrollTop() == $(document).height() - $(window).height()){
$.get ('http://www.domstoy.ru/publ/landshaft/idei_dlja_sada/70-'+nx, function (data){ $(data).find("#allEntries").appendTo("#allEntries");         
};);nx++; } };); </script>

Оказалось, что так намного проще, чем пытаться делать что-то универсальное, вычислять урлы, манипулировать с системными кодами и все такое)

Добавлено (30 Окт 2013, 23:23:02)
---------------------------------------------
Цитата Miss_Esq ()
но есть баг
Тоже такой баг встречался smile пробуйте тестировать новый скрипт )
Сообщение отредактировал Solaris(Olga) - Среда, 30 Окт 2013, 23:33:18
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 44 | 23:55:31
Solaris(Olga),
Цитата
пробуйте тестировать новый скрипт
Попробуем ... только применять вряд ли, материалы грузятся в память чем больше тем медленнее работает всё ...
250 материалов таким образом, простынёй, без выгрузки хоть какой части начальных затормозят компьютер насмерть ...

Solaris(Olga)
Сообщений: 342
Репутация: 240

Сообщение # 45 | 14:40:54
То, что хочется видеть в итоге в плане бесконечного скроллинга.Как можно сделать лучше? Какие недостатки могут быть в такой реализации? Кода почти нет еще, это просто картинка сделанная в ImageReady, концепция. Но зато можно посмотреть и что-то подсказать, как улучшить =) На картинку надо нажимать, так как это анимация.



Переключатели страниц - 1, 2, 3 будут кликабельными, конечно.
Прикрепления: 8580801.gif (198.7 Kb)
Сообщение отредактировал Solaris(Olga) - Пятница, 01 Ноя 2013, 16:55:32
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Замена переключателей бесконечной "простыней" (Меняем переключатели страниц на "простыню" как Вконтакте)
  • Страница 3 из 4
  • «
  • 1
  • 2
  • 3
  • 4
  • »
Поиск: