Полезная информация


----

Начать новую тему Ответить на тему
АвторСообщение

 Сообщение Плавная Прокрутка(стрелки вверх и вниз) 
#1 

Аватар пользователя

Недавно накопал полезный скрипт плавной прокрутки страниц. Хорош он тем, что не надо круть колесиком мыши чтобы пролистать форум сверху донизу. Установка его проще некуда, справится даже новичок в этом деле. А пример работы вы сами сможете увидеть здесь, приглядитесь к левому нижнему краю своего экрана.
Установка скрипта
Скачиваем прикрепленный архив
Вложение :
110525224642.rar [32.94 KiB]
Скачиваний: 335

и распаковываем его в любое место в папке с вашим форумом. После открываем шаблон вашего стиля под именем overall_footer.html и перед тегом </body> вставляем следущий код
Цитата:
<style type="text/css">
.nav_up{
padding:7px;
background-color:white;

position:fixed;
background:transparent url(http://полный путь до картинки "стрелка вверх") no-repeat top left;
background-position:50% 50%;
width:40px;
height:42px;
bottom:10px;
opacity:0.7;
left:30px;
white-space:nowrap;
cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.nav_down{
padding:7px;
background-color:white;

position:fixed;
background:transparent url(http://полный путь до картинки "стрелка вниз") no-repeat top left;
background-position:50% 50%;
width:40px;
height:42px;
bottom:10px;
opacity:0.7;
left:70px;
white-space:nowrap;
cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
</style><div style="display:none;" class="nav_up" id="nav_up"></div><div style="display:none;" class="nav_down" id="nav_down"></div>
<script src="http://полный путь до скрипта, скачанного выше/110525224642.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function() {
var overelem = jQuery('body');

jQuery('#nav_up').fadeIn('slow');
jQuery('#nav_down').fadeIn('slow');

jQuery(window).bind('scrollstart', function(){
jQuery('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
jQuery(window).bind('scrollstop', function(){
jQuery('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});

jQuery('#nav_down').click(
function (e) {
jQuery('html, body').animate({scrollTop: overelem.height()}, 800);
}
);
jQuery('#nav_up').click(
function (e) {
jQuery('html, body').animate({scrollTop: '0px'}, 800);
}
);
});
</script>

Этот вариант подойдет для тех кому лень ковырять более 2-х файлов. А кому не лень и не всеравно на валидатор, то выкладываю другую, немного сложней инструкцию

Опять таки скачиваем, прикрепленный выше, архив и распаковываем его в любое место в папке с вашим форумом. После открываем шаблон вашего стиля под именем overall_footer.html и перед тегом </body> вставляем следущий код
Цитата:
<div style="display:none;" class="nav_up" id="nav_up"></div><div style="display:none;" class="nav_down" id="nav_down"></div>
<script src="http://полный путь до скрипта, скачанного выше/110525224642.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function() {
var overelem = jQuery('body');

jQuery('#nav_up').fadeIn('slow');
jQuery('#nav_down').fadeIn('slow');

jQuery(window).bind('scrollstart', function(){
jQuery('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
jQuery(window).bind('scrollstop', function(){
jQuery('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});

jQuery('#nav_down').click(
function (e) {
jQuery('html, body').animate({scrollTop: overelem.height()}, 800);
}
);
jQuery('#nav_up').click(
function (e) {
jQuery('html, body').animate({scrollTop: '0px'}, 800);
}
);
});
</script>

Открываем файл по пути /styles/ваш стиль/theme/stylesheet.css и в самый конец добавляем
Цитата:
.nav_up{
padding:7px;
background-color:white;

position:fixed;
background:transparent url(http://полный путь до картинки "стрелка вверх") no-repeat top left;
background-position:50% 50%;
width:40px;
height:42px;
bottom:10px;
opacity:0.7;
left:30px;
white-space:nowrap;
cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.nav_down{
padding:7px;
background-color:white;

position:fixed;
background:transparent url(http://полный путь до картинки "стрелка вниз") no-repeat top left;
background-position:50% 50%;
width:40px;
height:42px;
bottom:10px;
opacity:0.7;
left:70px;
white-space:nowrap;
cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Обязательно после этого чистим кеш на форуме и радуемся полученным результатам :(


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!

Теги темы
прокрутка страниц phpbb3, стрелка вверх, стрелка вниз, плавная прокрутка
          Вернуться наверх  
 

#2 

Аватар пользователя

прикольный мод, надо будет поставить себе на форум как-нить =)


          Вернуться наверх  
 

#3 

Аватар пользователя

Ну это будет полезно если на форуме много категорий и подфорумов, и в админке выставлено большое значение в поле отображения количества сообщений на страницу темы :smile: впринципе у меня это дополнение прижилось :smile:


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
          Вернуться наверх  
 

#4 

Аватар пользователя

Добавил вторую инструкцию :smile:


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
          Вернуться наверх  
 

#5 

Аватар пользователя

Плавная прокрутка, это как у вас на форуме две голубенькие стрелки слева в низу.
Я себе поставил по второй инструкции, сейчас даже стоит, а ничего пока не работает, что такое не везет и как с ним бороться :x


          Вернуться наверх  
 

#6 

Аватар пользователя

Попробуйте лучше поставить по первой инструкции(ибо вторая стопроцентно работает на стилях на основе сабсильвер2, а вот насчет просильвера не знаю), проверьте правильно ли указан путь к скрипту и очистите кеш в админке :smile:


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
          Вернуться наверх  
 

#7 

Аватар пользователя

Сделал по первой инструкции, все равно не работает :oops:
Короче заметил, такую вещь в мозиле ничего нету, в хроме в место рисунков стрелок в формате png, показывается белый квадрат в место рисунков стрелок, в експолере тоже ни чего невидно, ни чего не работает, во общем не удачно, что то :shock:


          Вернуться наверх  
 

#8 

Аватар пользователя

Поглядел я ваш форум, ошибка сразу бросилась в глаза. У вас путь к картинкам прописан как (допустим)
Цитата:
background:transparent url(
Пожалуйста Зарегистрируйтесь чтобы увидеть ссылку
") no-repeat top left;

А надо так
Цитата:
background:transparent url(
Пожалуйста Зарегистрируйтесь чтобы увидеть ссылку
) no-repeat top left;

Видите разницу?? лишняя кавычка в конце ссылки на картинку :smile:


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
          Вернуться наверх  
 

#9 

Аватар пользователя

yes!!! Большой Респект вам.

Все работает, можно сегодня спать спокойно....


          Вернуться наверх  
 


Аватар пользователя

Эт хорошо, будьте внимательней :?


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
          Вернуться наверх  
 


Аватар пользователя

На просильвере работает по двум инструкциям, вот только слева стрелки....а хочется справа!


          Вернуться наверх  
 


Аватар пользователя

Найдите в коде следущие строки
left:30px;
 

и
left:70px;
 

и замените их соотвественно на
right:30px;
 

и
right:70px;
 

кстати этими же строками регулируется положение стрелочек на экране, если надо будет их сдвинуть ближе к краю


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
          Вернуться наверх  
 


Случайный аватар. Пользователю рекомендуется загрузить свой аватар в Настройках профиля

Круто


          Вернуться наверх  
 


Случайный аватар. Пользователю рекомендуется загрузить свой аватар в Настройках профиля

Давно искал


          Вернуться наверх  
 


Аватар пользователя

Может из-за плавающей панели.. когда пишу так (скрипт в корне сайта): http://сайт.ru/110525224642.js вылезает панель в виде ссылок вверху над шапкой, когда пишу http://сайт.ru/www/110525224642.js панель на месте))
Картинки не появились, но это дело пятнадцатое, потом разберусь, может формат gif не камильфо))
И самое главное: ставил по обеим инструкциям - кнопки даже портал до конца не прокручивают, а на странице темы (20 сообщений) вообще процентов 10, может быть, прокручивают.
Что-то у меня в последнее время проблемки с кодами :du_ma_et:


_________________
Подпись:
Зри в корень

Информация о редактировании
Последний раз редактировалось St_roy 16 авг 2012, 01:03, всего редактировалось 1 раз.
          Вернуться наверх  
 


Аватар пользователя

А попробуй вместо такого адреса
"http://полный путь до скрипта, скачанного выше/110525224642.js"
 

Вставить
"/110525224642.js"
 

Ну и скрипт в корень


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
          Вернуться наверх  
 


Аватар пользователя

Попробовал по-разному только так работает http://сайт.ru/www/110525224642.js
А адреса надо так http://сайт.ru/styles/st_roy 2/imageset/hide.png без www
Вставил кнопки в плавающую панель, глючит только ИЕ - панель при нажатие "вниз" плавно подпрыгивает на такую высоту, как она сама, "вверх" плавно опускается. При "подпрыгнутой2 панели видно счётчик))
И ещё кнопка "вниз" неправильно работает: прокручивает только на высоту страницы, а снизу прокручивает наверх))) Также было и когда отдельно от панели ставил кнопки


_________________
Подпись:
Зри в корень

Информация о редактировании
Последний раз редактировалось St_roy 17 авг 2012, 18:25, всего редактировалось 1 раз.
          Вернуться наверх  
 


Аватар пользователя

Дело видать в хостинге раз требует наличие в адресе www, а это уже за гранью моего понимания


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
          Вернуться наверх  
 


Аватар пользователя

А из-за этого может кнопка не работать?


_________________
Подпись:
Зри в корень
          Вернуться наверх  
 


Аватар пользователя

Честно, без понятия :ny_tik:


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
          Вернуться наверх  
 
 
Начать новую тему Ответить на тему


Дополнительные возможности

  Похожие темы  Автор  Ответов  Просмотров  Последнее сообщение 
Аватар пользователя Стрелки вверх и вниз

Рубцовск

4

457

Аватар пользователя

21 окт 2014, 06:33

Лена

Аватар пользователя Плавная прокрутка 2(стрелка вверх)

DeaDRoMeO

88

6818

Аватар пользователя

06 сен 2016, 06:02

DeaDRoMeO

Аватар пользователя Banner Scroll Mod phpbb3 (Прокрутка баннеров на главной)
Banner Scroll Mod - модификация для phpbb3, добавляющая на главную страницу форума блок, в котором прокручиваются баннеры рекламодателей

DeaDRoMeO

68

4314

Аватар пользователя

30 апр 2017, 13:17

SergeiS

Аватар пользователя Быстрая цитата и Обратиться по нику не проматывают вниз

ursego

14

591

Аватар пользователя

28 мар 2014, 08:50

DeaDRoMeO

Аватар пользователя Кнопка "вверх" для Белка
Специально для Белка

Милена

2

652

Аватар пользователя

15 янв 2015, 08:43

белк

Оставить свой комментарий

Поделиться темой с помощью

Ссылки на тему

Прямая ссылка:
BB-код для форумов, сайтов, блогов:
HTML ссылка:
 


cron

Самая неформальная поддержка phpBB :P