Найти на сайте
  2. Форумы
  3. ГОТОВЫЕ РЕШЕНИЯ
  4. Шаблоны, графика, стили
  5. Кнопки "вверх" и "вниз", готовое решение

Кнопки "вверх" и "вниз", готовое решение

#1 23 июля 2014 в 10:12
Много раз уже обсуждалось на форуме по поводу этих кнопок. Вот еще одно очередное интересное решение данного функционала. Выглядит это вот так Если кому нужно, забирайте.
Установка:
1. Скопировать скачанный фаил в папку JS вашего шаблона.
2. В style.css добавить вот этот код 
  1. /*стили для кнопок вверх/вниз*/
  2. .arrow {
  3. position: fixed;
  4. width: 64px;
  5. right: -10px;
  6. bottom: 115px;
  7. z-index: 10;
  8. }
  9. .arrow img {
  10. opacity: 0.3;
  11. }
  12. .arrow img:hover{
  13. cursor: pointer;
  14. opacity: 1;
  15. filter: alpha(opacity=100);
  16. }
  17.  
3. В template.php вашего шаблона вставить 
  1. <script  type="text/javascript" src="http://Ваш домен/templates/Название вашей темы/js/arrow.js"></script>
Прикрепленный файл
arrow_87ka2.rar 1 Кб
0
#2 23 июля 2014 в 11:47
у меня на 2.0 не заработало.

Нашел другое решение с прямоугольной кнопкой:

1. в файле main.tpl.php шаблона вставляем внутри <HEAD> </HEAD>
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  2. <script type="text/javascript">
  3.  
  4. $(function() {
  5.  
  6. $(window).scroll(function() {
  7.  
  8. if($(this).scrollTop() != 0) {
  9.  
  10. $('#toTop').fadeIn();
  11.  
  12. } else {
  13.  
  14. $('#toTop').fadeOut();
  15.  
  16. }
  17.  
  18. });
  19.  
  20. $('#toTop').click(function() {
  21.  
  22. $('body,html').animate({scrollTop:0},800);
  23.  
  24. });
  25.  
  26. });
  27.  
  28. </script>
2. В этом же файле внутри <BODY> </BODY>:
  1. <DIV ID = "toTop" > ^ Наверх </DIV>
3. в файле theme-content.css шаблона вставляем стиль:
  1. #toTop {
  2. width:100px;
  3. border:1px solid #ccc;
  4. background:#f7f7f7;
  5. text-align:center;
  6. padding:5px;
  7. position:fixed;
  8. bottom:10px; /* отступ кнопки от нижнего края страницы*/
  9. right:10px;
  10. cursor:pointer;
  11. display:none;
  12. color:#333;
  13. font-family:verdana;
  14. font-size:11px;
  15. }
bebystok.ru Социальная сеть производителей товаров для детей
0
#3 23 июля 2014 в 11:48
Посмотреть кнопку можно здесь: bebystok.ru/posts
bebystok.ru Социальная сеть производителей товаров для детей
0
#4 23 июля 2014 в 14:57


Много раз уже обсуждалось на форуме по поводу этих кнопок. Вот еще одно очередное интересное решение данного функционала. Выглядит это вот так Если кому нужно, забирайте.
Установка:
1. Скопировать скачанный фаил в папку JS вашего шаблона.
2. В style.css добавить вот этот код 

  1. /*стили для кнопок вверх/вниз*/
  2. .arrow {
  3. position: fixed;
  4. width: 64px;
  5. right: -10px;
  6. bottom: 115px;
  7. z-index: 10;
  8. }
  9. .arrow img {
  10. opacity: 0.3;
  11. }
  12. .arrow img:hover{
  13. cursor: pointer;
  14. opacity: 1;
  15. filter: alpha(opacity=100);
  16. }
  17.  
3. В template.php вашего шаблона вставить

Apsent

Установил на 1.10.3 как полагается. Результата ноль. Никакие кнопки не появились. В чем может быть причина?
0
#5 23 июля 2014 в 15:54
данный скрипт я взял вообще с wordpressa, у меня на данный момент стоит версия 1.10.2. Поэтому в чем может быть проблема, к сожалению сказать не могу. У себя я устанавливал все как в инструкции что я описал. На всякий случай код стилей я добавил в style.css своего шаблона и в дефолтный шаблон. Этот код я вставил в template.php между Head.
  1. <script  type="text/javascript" src="http://Ваш домен/templates/Название вашей темы/js/arrow.js"></script>
. В остальном никаких действий не выполнял. В самом файле JS в самом конце ссылки на изображения кнопок, если кто вдруг захочет их изменить то соответственно указывайте к ним путь до своих изображений. На данный момент там стоят ссылки на яндекс фото, оттуда они и берутся, возможно в этом проблема. Но там я ничего не менял и у меня все заработало
0
#6 23 июля 2014 в 19:33


В остальном никаких действий не выполнял.

Apsent
выполняли, выполняли! laugh
где-то в template.php вставили нечто похожее не <div class="arrow"></div> — т.е. сами кнопки
Украинский для инстант
0
#7 26 июля 2014 в 02:26

у меня на 2.0 не заработало.

Adjuster
Попробуйте так — минимум вмешательства в шаблон (посты #29 и #32)
почему я задаю мало вопросов? потому, что на 90% из них уже кто-то ответил...
0
#8 26 июля 2014 в 19:27
Adjuster:
У меня прекрасно работает и без этого: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
0
У кого есть тестовый сайт на 2
Установка шаблона
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Похожие темы

Можно ли создать на типе контента обычный форум?

Виджеты, компоненты, плагины, модули Создана 3 года назад 29 сообщений

[ЕСТЬ РЕШЕНИЕ] Мы используем файлы куки. Есть ли готовое решение?

Виджеты, компоненты, плагины, модули Создана 6 месяцев назад 3 сообщения

Шаблон три колонки и решение Знакомства

Разработка и тестирование Создана 2 года назад 7 сообщений

[ЕСТЬ РЕШЕНИЕ] Кто имел дело с разработчиком Goodmade?

Критика и оценка работ Создана 2 года назад 30 сообщений

ТЗ на разработку поля - "время"

Разработка и тестирование Создана 1 год назад 19 сообщений

Кнопки html

HTML / CSS / PHP / JS / RegExp Создана 4 года назад 12 сообщений

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.