Плавная Прокрутка(стрелки вверх и вниз)

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

Модераторы: Vl@d1m1r, Lorem Ipsum, Atlas

Правила форума
----
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

Плавная Прокрутка(стрелки вверх и вниз)

Сообщение DeaDRoMeO »

Недавно накопал полезный скрипт плавной прокрутки страниц. Хорош он тем, что не надо круть колесиком мыши чтобы пролистать форум сверху донизу. Установка его проще некуда, справится даже новичок в этом деле. А пример работы вы сами сможете увидеть здесь, приглядитесь к левому нижнему краю своего экрана.
Установка скрипта
Скачиваем прикрепленный архив
110525224642.rar
(32.94 КБ) 358 скачиваний
и распаковываем его в любое место в папке с вашим форумом. После открываем шаблон вашего стиля под именем 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, по ЛС не отвечаю !!!
#1
Аватара пользователя
artcry
Активно общаюсь
Активно общаюсь
Сообщения: 287
Стаж: 12 лет 4 месяца

Плавная Прокрутка

Сообщение artcry »

прикольный мод, надо будет поставить себе на форум как-нить =)
#2
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

Плавная Прокрутка

Сообщение DeaDRoMeO »

Ну это будет полезно если на форуме много категорий и подфорумов, и в админке выставлено большое значение в поле отображения количества сообщений на страницу темы :smile: впринципе у меня это дополнение прижилось :smile:
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#3
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

Плавная Прокрутка

Сообщение DeaDRoMeO »

Добавил вторую инструкцию :smile:
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#4
Аватара пользователя
mixail
Свой на все 100
Свой на все 100
Сообщения: 693
Стаж: 12 лет 4 месяца
Контактная информация:

Плавная Прокрутка

Сообщение mixail »

Плавная прокрутка, это как у вас на форуме две голубенькие стрелки слева в низу.
Я себе поставил по второй инструкции, сейчас даже стоит, а ничего пока не работает, что такое не везет и как с ним бороться :x
#5
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

Плавная Прокрутка

Сообщение DeaDRoMeO »

Попробуйте лучше поставить по первой инструкции(ибо вторая стопроцентно работает на стилях на основе сабсильвер2, а вот насчет просильвера не знаю), проверьте правильно ли указан путь к скрипту и очистите кеш в админке :smile:
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#6
Аватара пользователя
mixail
Свой на все 100
Свой на все 100
Сообщения: 693
Стаж: 12 лет 4 месяца
Контактная информация:

Плавная Прокрутка

Сообщение mixail »

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

Плавная Прокрутка

Сообщение DeaDRoMeO »

Поглядел я ваш форум, ошибка сразу бросилась в глаза. У вас путь к картинкам прописан как (допустим)
background:transparent url(http://r-o-m.biz/stverx.png") no-repeat top left;
А надо так
background:transparent url(http://r-o-m.biz/stverx.png) no-repeat top left;
Видите разницу?? лишняя кавычка в конце ссылки на картинку :smile:
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#8
Аватара пользователя
mixail
Свой на все 100
Свой на все 100
Сообщения: 693
Стаж: 12 лет 4 месяца
Контактная информация:

Плавная Прокрутка

Сообщение mixail »

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

Все работает, можно сегодня спать спокойно....
#9
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

Плавная Прокрутка

Сообщение DeaDRoMeO »

Эт хорошо, будьте внимательней :?
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#10
Аватара пользователя
dream12
Зашел немного посидеть
Зашел немного посидеть
Сообщения: 82
Стаж: 12 лет 2 месяца
Откуда: Минск
Контактная информация:

Плавная Прокрутка

Сообщение dream12 »

На просильвере работает по двум инструкциям, вот только слева стрелки....а хочется справа!
#11
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

Плавная Прокрутка

Сообщение DeaDRoMeO »

Найдите в коде следущие строки

Код: Выделить всё

left:30px;
и

Код: Выделить всё

left:70px;
и замените их соотвественно на

Код: Выделить всё

right:30px;
и

Код: Выделить всё

right:70px;
кстати этими же строками регулируется положение стрелочек на экране, если надо будет их сдвинуть ближе к краю
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#12
Gena
Заглянул на огонек
Заглянул на огонек
Сообщения: 10
Стаж: 11 лет 10 месяцев

Плавная Прокрутка(стрелки вверх и вниз)

Сообщение Gena »

Круто
#13
Gena
Заглянул на огонек
Заглянул на огонек
Сообщения: 10
Стаж: 11 лет 10 месяцев

Плавная Прокрутка(стрелки вверх и вниз)

Сообщение Gena »

Давно искал
#14
Аватара пользователя
St_roy
Завсегдатай Форума
Завсегдатай Форума
Сообщения: 873
Стаж: 12 лет 2 месяца
Откуда: Москва
Контактная информация:

Плавная Прокрутка(стрелки вверх и вниз)

Сообщение St_roy »

Может из-за плавающей панели.. когда пишу так (скрипт в корне сайта): http://сайт.ru/110525224642.js вылезает панель в виде ссылок вверху над шапкой, когда пишу http://сайт.ru/[u]www[/u]/110525224642.js панель на месте))
Картинки не появились, но это дело пятнадцатое, потом разберусь, может формат gif не камильфо))
И самое главное: ставил по обеим инструкциям - кнопки даже портал до конца не прокручивают, а на странице темы (20 сообщений) вообще процентов 10, может быть, прокручивают.
Что-то у меня в последнее время проблемки с кодами :du_ma_et:
Последний раз редактировалось St_roy 16 авг 2012, 01:03, всего редактировалось 1 раз.
Зри в корень
#15
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

Плавная Прокрутка(стрелки вверх и вниз)

Сообщение DeaDRoMeO »

А попробуй вместо такого адреса

Код: Выделить всё

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

Код: Выделить всё

"/110525224642.js"
Ну и скрипт в корень
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#16
Аватара пользователя
St_roy
Завсегдатай Форума
Завсегдатай Форума
Сообщения: 873
Стаж: 12 лет 2 месяца
Откуда: Москва
Контактная информация:

Плавная Прокрутка(стрелки вверх и вниз)

Сообщение St_roy »

Попробовал по-разному только так работает http://сайт.ru/[u]www[/u]/110525224642.js
А адреса надо так http://сайт.ru/styles/st_roy 2/imageset/hide.png без www
Вставил кнопки в плавающую панель, глючит только ИЕ - панель при нажатие "вниз" плавно подпрыгивает на такую высоту, как она сама, "вверх" плавно опускается. При "подпрыгнутой2 панели видно счётчик))
И ещё кнопка "вниз" неправильно работает: прокручивает только на высоту страницы, а снизу прокручивает наверх))) Также было и когда отдельно от панели ставил кнопки
Последний раз редактировалось St_roy 17 авг 2012, 18:25, всего редактировалось 1 раз.
Зри в корень
#17
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

Плавная Прокрутка(стрелки вверх и вниз)

Сообщение DeaDRoMeO »

Дело видать в хостинге раз требует наличие в адресе www, а это уже за гранью моего понимания
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#18
Аватара пользователя
St_roy
Завсегдатай Форума
Завсегдатай Форума
Сообщения: 873
Стаж: 12 лет 2 месяца
Откуда: Москва
Контактная информация:

Плавная Прокрутка(стрелки вверх и вниз)

Сообщение St_roy »

А из-за этого может кнопка не работать?
Зри в корень
#19
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

Плавная Прокрутка(стрелки вверх и вниз)

Сообщение DeaDRoMeO »

Честно, без понятия :ny_tik:
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#20
Ответить