Перейти к содержанию

Хук "Кнопка наверх"

VORON13

Автор VORON13
в Форум запросов IP.Board

 Поделиться

Рекомендуемые сообщения

VORON13 Новобранец

VORON13

Опубликовано
Опубликовано

Интересует хук кнопки наверх, для возвращения к верху страницы. Нужна на jQuery с плавной прокруткой, никак не подружу IPB с jQuery noconflict :D

Ссылка на комментарий
Поделиться на другие сайты
_Dark_ Ветеран

_Dark_

Опубликовано
Опубликовано

JQuery не поддерживается IP.Board и никак подключить его нельзя.

Хук

Ссылка на комментарий
Поделиться на другие сайты
  • 1 год спустя...
Bichugan Энтузиаст

Bichugan

Опубликовано
Опубликовано (изменено)

ребята, может кто подскажет как реализовать вот этои кнопочки "наверх" и "вниз", очень бы хотелось иметь такое..!
интересует подробное описание: путь к файлам и возможность подключения кодов.
автор утверждает что можно поставить на любой движок.
 

__magentawave.com/2013/01/scroll-page-up-and-down.html

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

Изменено пользователем WOLF
Ссылка на комментарий
Поделиться на другие сайты
kgb Опытный

kgb

Опубликовано
Опубликовано


JQuery не поддерживается IP.Board и никак подключить его нельзя.
У себя подключил  JQuery и зафигачил кнопку наверх.

ipb 345

 

 

Global Templates -> includeJS

<if test="minifyjs:|:$this->settings['use_minify']">
	<if test="remoteloadjs:|:$this->settings['remote_load_js']">
		<script type='text/javascript' src='<if test="usehttpsprototype:|:$this->registry->output->isHTTPS">https<else />http</if>://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
		<script type='text/javascript' src='<if test="usehttpsprototype:|:$this->registry->output->isHTTPS">https<else />http</if>://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js'></script>
		<script type='text/javascript' src='<if test="usehttpsscriptaculous:|:$this->registry->output->isHTTPS">https<else />http</if>://ajax.googleapis.com/ajax/libs/scriptaculous/1.8/scriptaculous.js?load=effects,dragdrop,builder'></script>
	<else />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
		<script type='text/javascript' src='{$this->settings['js_base_url']}min/index.php?ipbv={$this->registry->output->antiCacheHash}&amp;g=js'></script>
	</if>
	<script type='text/javascript' src='{$this->settings['js_base_url']}min/index.php?ipbv={$this->registry->output->antiCacheHash}&amp;charset={$this->settings['gb_char_set']}&amp;f={parse expression="PUBLIC_DIRECTORY"}/js/ipb.js,cache/lang_cache/{$this->lang->lang_id}/ipb.lang.js,{parse expression="PUBLIC_DIRECTORY"}/js/ips.hovercard.js,{parse expression="PUBLIC_DIRECTORY"}/js/ips.quickpm.js<if test="hasjsmodules:|:count($jsModules)">,{parse expression="PUBLIC_DIRECTORY"}/js/ips.{parse expression="implode('.js,' . PUBLIC_DIRECTORY . '/js/ips.', array_unique( array_keys( $jsModules ) ) )"}.js</if>' charset='{$this->settings['gb_char_set']}'></script>
<else />
	<if test="nominifyremoteloadjs:|:$this->settings['remote_load_js']">
		<script type='text/javascript' src='<if test="nmusehttpsp:|:$this->registry->output->isHTTPS">https<else />http</if>://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
		<script type='text/javascript' src='<if test="nmusehttpsp:|:$this->registry->output->isHTTPS">https<else />http</if>://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js'></script>
	<else />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
		<script type='text/javascript' src='{$this->settings['js_base_url']}js/3rd_party/prototype.js'></script>
	</if>
	<script type='text/javascript' src='{$this->settings['js_base_url']}js/ipb.js?ipbv={$this->registry->output->antiCacheHash}&amp;load=quickpm,hovercard,{parse expression="implode(',', array_unique( array_keys( $jsModules ) ) )"}'></script>
	<if test="nominifyremoteloadjs2:|:$this->settings['remote_load_js']">
		<script type='text/javascript' src='<if test="nmusehttpss:|:$this->registry->output->isHTTPS">https<else />http</if>://ajax.googleapis.com/ajax/libs/scriptaculous/1.8/scriptaculous.js?load=effects,dragdrop,builder'></script>
	<else />
		<script type='text/javascript' src='{$this->settings['js_base_url']}js/3rd_party/scriptaculous/scriptaculous-cache.js'></script>
	</if>
	<script type="text/javascript" src='{$this->settings['cache_dir']}lang_cache/{$this->lang->lang_id}/ipb.lang.js?nck={$this->settings['noCacheKey']}' charset='{$this->settings['gb_char_set']}'></script>
</if>
{parse template="liveEditJs" group="global"}
<if test="isLargeTouch:|:$this->registry->output->isLargeTouchDevice()">
<script type="text/javascript" src='{$this->settings['js_base_url']}js/3rd_party/iscroll/iscroll.js'></script>
</if>

<script type="text/javascript">
<!--
(function($){
	$(function(){var e = $(".scrollTop");
	var	speed = 500;
	e.click(function(){
		$("html:not(:animated), body:not(:animated)").animate({ scrollTop: 0}, speed);
		return false; 
	    });
	
	function show_scrollTop(){
		($(window).scrollTop()>250 )?e.fadeIn(1000):e.hide();
		}
		$(window).scroll( function(){show_scrollTop()} ); 
		show_scrollTop();
	});
})(jQuery)
//-->
</script>

И в  ipb_styles.css у меня (правим под свое усмотрение)

/*кнопка вверх*/
a.scrollTop{
background: transparent url(путь до какртинки/стрелка.png') no-repeat center 50px;
display:block; width:5%; height:100%;
position:fixed; top:0px; left:0px;z-index:2000;
}
a.scrollTop:hover{opacity: 0.8;filter: alpha(opacity=80);}
/*-*/



ребята, может кто подскажет как реализовать вот этои кнопочки "наверх" и "вниз", очень бы хотелось иметь такое..! интересует подробное описание: путь к файлам и возможность подключения кодов.
там подробно описано, в принципе тоже самое, только не указали, что вначале надо jquery подключить.
Ссылка на комментарий
Поделиться на другие сайты
kgb Опытный

kgb

Опубликовано
Опубликовано (изменено)

забыл. В глобальный шаблон надо  где нибудь поcле body добавить  

<a class="scrollTop" href="#" style="display:none;"></a>

Изменено пользователем kgb
Ссылка на комментарий
Поделиться на другие сайты
Bichugan Энтузиаст

Bichugan

Опубликовано
Опубликовано

kgb, вот спасибки тебе добрый человек..!)) :yahoo:  :dance::good:



рано обрадовался.. что то не идёт у меня! не стукните в скайп если не трудно..! Skype: kolyan1972



или прикрепить свои файлы..

Ссылка на комментарий
Поделиться на другие сайты
Bichugan Энтузиаст

Bichugan

Опубликовано
Опубликовано

АЦ>Внешний вид>Мой стиль

 

1) первый код прописал в Global Templates после </head>
2) второй вставил в  ipb_styles.css  вниз перед    /* Skin by www.ipbforumskins.com */
3) опять в Global Templates после </body>

путь к картинке прописал public/style_images/Snapshot/ups.png

ничего не появляется, что сделал не так?

Ссылка на комментарий
Поделиться на другие сайты
andreuka Основной

andreuka

Опубликовано
Опубликовано

АЦ>Внешний вид>Мой стиль

 

1) первый код прописал в Global Templates после </head>

2) второй вставил в  ipb_styles.css  вниз перед    /* Skin by www.ipbforumskins.com */

3) опять в Global Templates после </body>

путь к картинке прописал public/style_images/Snapshot/ups.png

ничего не появляется, что сделал не так?

дай ссылку на форум посмотреть 

Ссылка на комментарий
Поделиться на другие сайты
shef9 Ученик

shef9

Опубликовано
Опубликовано 
<script type="text/javascript">
jQuery(document).ready(function() {

// Виджет кнопки вверх (Test-Templates)
// 1.0

jQuery('body').append('<div class="button-up" style="display: none;opacity: 0.7;width: 40px;height:100%;position: fixed;left: 0px;top: 0px;cursor: pointer;text-align: center;line-height: 30px;color: #d3dbe4;font-weight: bold;">▲ Вверх</div>');

jQuery (window).scroll (function () {
if (jQuery (this).scrollTop () > 100) {
jQuery ('.button-up').fadeIn();
} else {
jQuery ('.button-up').fadeOut();
}
});

jQuery('.button-up').click(function(){
jQuery('body,html').animate({
scrollTop: 0
}, 100);
return false;
});

jQuery('.button-up').hover(function() {
jQuery(this).animate({
'opacity':'1',
}).css({'background-color':'#e7ebf0','color':'#6a86a4'});
}, function(){
jQuery(this).animate({
'opacity':'0.7'
}).css({'background':'none','color':'#d3dbe4'});;
});

});
</script>
  • globalTemplate
Ссылка на комментарий
Поделиться на другие сайты
andreuka Основной

andreuka

Опубликовано
Опубликовано

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



JQuery не поддерживается IP.Board и никак подключить его нельзя.
Хук

Вы че тут рассказываете :) Все поддерживается, просто он работает в noconflict с другими идентификаторами.



Вот слева видите кнопку вверх, она на Jquery работает

Ссылка на комментарий
Поделиться на другие сайты
Bichugan Энтузиаст

Bichugan

Опубликовано
Опубликовано

да верно, стандартная кнопка имеется, я имел ввиду появляющаяся кнопка наверх после определённой прокрутки страницы.. там даже я ссылку на  пример давал.

Ссылка на комментарий
Поделиться на другие сайты
andreuka Основной

andreuka

Опубликовано
Опубликовано 

<script type="text/javascript">
jQuery(document).ready(function() {

// Виджет кнопки вверх (Test-Templates)
// 1.0

jQuery('body').append('<div class="button-up" style="display: none;opacity: 0.7;width: 40px;height:100%;position: fixed;left: 0px;top: 0px;cursor: pointer;text-align: center;line-height: 30px;color: #d3dbe4;font-weight: bold;">▲ Вверх</div>');

jQuery (window).scroll (function () {
if (jQuery (this).scrollTop () > 100) {
jQuery ('.button-up').fadeIn();
} else {
jQuery ('.button-up').fadeOut();
}
});

jQuery('.button-up').click(function(){
jQuery('body,html').animate({
scrollTop: 0
}, 100);
return false;
});

jQuery('.button-up').hover(function() {
jQuery(this).animate({
'opacity':'1',
}).css({'background-color':'#e7ebf0','color':'#6a86a4'});
}, function(){
jQuery(this).animate({
'opacity':'0.7'
}).css({'background':'none','color':'#d3dbe4'});;
});

});
</script>
  • globalTemplate

 

этого кода нету у тебя на форуме

Попробуй кэш почистить

Ссылка на комментарий
Поделиться на другие сайты
  • 1 год спустя...
mistudioru Восходящая звезда

mistudioru

Опубликовано
Опубликовано

Так и не понял есть ли рабочий хук?

Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

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

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

×
 Поделиться
Перейти к списку тем

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...