Перейти к содержимому


- - - - -

jquery в IPB


  • Вы не можете ответить в тему
Сообщений в теме: 16

#1 R.Sergey

    Администратор

  • Администраторы
  • 2810 сообщений
Репутация: 332
Мастер

Отправлено 28 October 2012 - 06:44 PM

Насколько классный форум и насколько хреново реализована верстка.

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

Сама библиотека подключена т.к. вижу в шаблоне используются функции типа

<script type='text/javascript'>
if( $('primary_nav') ){ ipb.global.activateMainMenu(); }
</script>


но почему мои не срабатывают не пойму.
  • 0

#2 R.Sergey

    Администратор

  • Администраторы
  • 2810 сообщений
Репутация: 332
Мастер

Отправлено 28 October 2012 - 11:51 PM

Короче выяснил что jquery в IPB не подключен, подключен другой фреймворк prototype.js, который в добавок еще и конфликтует с jquery.
Есть вариант как их подружить но я пока в недоумении, т.к. в исходном коде страницы я не вижу где подключается prototype.js
  • 0

#3 eugene_wb

    Продвинутый пользователь

  • Модераторы
  • 827 сообщений
Репутация: 167
Мастер

Отправлено 29 October 2012 - 12:02 AM

если подключен prototype, то с вероятностью 95% необхожимо использовать jquery noconflict и проблемы сами собой решатся
  • 0
Изображение Изображение Изображение

#4 R.Sergey

    Администратор

  • Администраторы
  • 2810 сообщений
Репутация: 332
Мастер

Отправлено 29 October 2012 - 12:25 AM

если подключен prototype, то с вероятностью 95% необхожимо использовать jquery noconflict и проблемы сами собой решатся



Да я собственно это и пытаюсь сделать, но все равно что-то нихрена не получается пока.

Тупо как будто не видит подключения. Думал может в последовательности подключения дело, так не могу понять когда же подключается прототайп

Короче работает вот так

<script type="text/javascript" charset="utf-8">
jQuery.noConflict();  
jQuery(document).ready(function($){
   $(document).ready(function(){
   $("#id").click(function(){
	   alert ("test");
   });
  });
});
</script>

Не особо понимаю логику но хорошо хоть работает ))
  • 0

#5 eugene_wb

    Продвинутый пользователь

  • Модераторы
  • 827 сообщений
Репутация: 167
Мастер

Отправлено 29 October 2012 - 12:34 AM

пример, как я делаю

<script type="text/javascript">
  var $j=jQuery.noConflict();

  $j(function(){
    $j('#tabs').tabs();
  });

  $j(document).ready(function(){

  $j(".module-new .featuredborder").hover(function() {
    $j(this).find(".bg").stop().animate({ left: 16}, "normal");
   },function(){
    $j(this).find(".bg").stop().animate({ left: -236}, 300);
   });

  $j(function() {
  var offset = $j(".cart").offset();
  var topPadding = 135;
  $j(window).scroll(function() {
  if ($j(window).scrollTop() > offset.top) {
  $j(".cart").stop().animate({marginTop: $j(window).scrollTop() - offset.top + topPadding});
  }
  else {$j(".cart").stop().animate({marginTop: 0});};});
  });
 
  });

  </script>

  • 1
Изображение Изображение Изображение

#6 R.Sergey

    Администратор

  • Администраторы
  • 2810 сообщений
Репутация: 332
Мастер

Отправлено 29 October 2012 - 12:38 AM

Спасибо, но не самый лучший вариант. Т.к. придется менять весь код, а я верстаю одно и тоже на DLE и на IPB ))
"мой" вариант лучше тем что не нужно ничего менять, я подключил библиотеку, и файл с кодом в файле само-собой

jQuery.noConflict(); 
jQuery(document).ready(function($){


код скрипта

});
});

и все пучком ))
  • 0

#7 rtclub

    Новичок

  • Пользователи
  • Pip
  • 6 сообщений
Репутация: 0
Начинающий

Отправлено 16 April 2013 - 05:23 PM


Хочу сделать что-то типа этого:



http://gconverter.ru/



См. всплывающую навигацию слева.

Но если ставлю на IPB, то конфликтует.


Подскажите, пожалуйста, как побороть с помощью noConflict..


скрипт:


<script type="text/javascript" src="jquery.tools.min.js"></script>
	    <ul id="social-nav">
		    <li class="facebook"><a href="http://www.facebook.com/" target="_blank" title="Facebook"></a></li>
		    <li class="twitter"><a href="https://twitter.com/" target="_blank" title="Twitter"></a></li>
	    </ul>
	    <script type="text/javascript">
				    $(function() {
					    $('#social-nav a').stop().animate({'marginLeft':'-70px'},1000);
	   
					    $('#social-nav > li').hover(
						    function () {
							    $('a',$(this)).stop().animate({'marginLeft':'-15px'},200);
						    },
						    function () {
							    $('a',$(this)).stop().animate({'marginLeft':'-70px'},200);
						    }
					    );
				    });
	    </script>

  • 0

#8 R.Sergey

    Администратор

  • Администраторы
  • 2810 сообщений
Репутация: 332
Мастер

Отправлено 16 April 2013 - 06:18 PM

Ну я думаю как-то так.

jQuery.noConflict();
jQuery(document).ready(function($){

$(function() {
											$('#social-nav a').stop().animate({'marginLeft':'-70px'},1000);

											$('#social-nav > li').hover(
													function () {
															$('a',$(this)).stop().animate({'marginLeft':'-15px'},200);
													},
													function () {
															$('a',$(this)).stop().animate({'marginLeft':'-70px'},200);
													}
											);
									});


});
});

  • 0

#9 rtclub

    Новичок

  • Пользователи
  • Pip
  • 6 сообщений
Репутация: 0
Начинающий

Отправлено 17 April 2013 - 10:11 AM

Уже так делал, скрипт работает, а вот стандартные скрипты IPB Нет...
  • 0

#10 R.Sergey

    Администратор

  • Администраторы
  • 2810 сообщений
Репутация: 332
Мастер

Отправлено 17 April 2013 - 10:18 AM

Значит меняйте место размещения этого скрипта, т.е. сначала подгружайте скрипты IPB а потом этот.
  • 0

#11 rtclub

    Новичок

  • Пользователи
  • Pip
  • 6 сообщений
Репутация: 0
Начинающий

Отправлено 17 April 2013 - 10:27 AM

Проблему решил, спасибо!
Код теперь выглядит так:

<script>jQuery.noConflict();</script>
		<script type="text/javascript">
					jQuery(function() {
						jQuery('#social-nav a').stop().animate({'marginLeft':'-70px'},1000);
		
						jQuery('#social-nav > li').hover(
							function () {
								jQuery('a',jQuery(this)).stop().animate({'marginLeft':'-15px'},200);
							},
							function () {
								jQuery('a',jQuery(this)).stop().animate({'marginLeft':'-70px'},200);
							}
						);
					});
		</script>

  • 0

#12 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 17 April 2013 - 08:36 PM

Хм... Как интересно. А почему я вижу сообщения от 2:21-12:23 только сейчас, в 22:27 по Москве? Предыдущее мое нажатие на "просмотр новых публикаций" был весьма не так давно, с час назад. А если я что забыл и таки не нажимал, то уж на работе (13:00-19:00 по Москве) точно неоднократно эта кнопка нажималась. И - ничего. Нового. Давно у меня есть на этот предмет подозрения (кто-то по дороге хранит редко обновляемый кэш?), но тут стало очевидно.

Уж больно неестественно происходит появление новых сообщений в форумах. Обычно весь день нет, потом - хрясь! - сразу два-три-десять. На время сообщений внимания не обращал, а тут вдруг обратил.
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#13 R.Sergey

    Администратор

  • Администраторы
  • 2810 сообщений
Репутация: 332
Мастер

Отправлено 17 April 2013 - 08:38 PM

Не знам, у меня нормально обновляются. Сразу как только написали его появляется.
  • 0

#14 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 17 April 2013 - 08:41 PM

Это понятно, иначе бы ты давно заволновался. Мне вот и интересно, как так получается У МЕНЯ :). Т.е. сообщения в темах, где я не пишу не пропадают, но появляются ЗАМЕТНО позже момента написания и сразу пучком.
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#15 R.Sergey

    Администратор

  • Администраторы
  • 2810 сообщений
Репутация: 332
Мастер

Отправлено 17 April 2013 - 08:44 PM

Может у провайдера проксик какой-то кеширует коряво.
Я когда-то когда только начиналась эта интернет-эра и трафик был помегабайтный тоже экономил. Исходящий был по земле, входящий со спутника и всех через проксик с кешем, но там правда настраивалось что кешировать а что нет.
  • 0

#16 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 17 April 2013 - 08:54 PM

Может у провайдера проксик какой-то кеширует коряво.

Ну да, я что-то подобное и предполагаю. Хотя провайдер "хороший" и ни в чем подобном не замечен. Просто интересно, как это делается, чтобы бороться. Ведь оно может быть не у провайдера, а на любом из хопов между нами.
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#17 Witold

    Новичок

  • Пользователи
  • Pip
  • 1 сообщений
Репутация: 0
Начинающий

Отправлено 30 April 2013 - 06:11 PM

нашел вот красивое меню, но на IPB не работает хотя на XenForo на ура
Скажите как подключить библиотеки так чтоб можно было парсировть на форуме в боковую панель из темплейта
{parse template=
<div class="section">
   <div class="secondaryContent">
	   <h3>МЕНЮ</h3>
<script>
$(document).ready(function(){
	/* Скрипт будет выполнен после загрузки страницы */
		/* Смена эффекта для плагина easing */
	$.easing.def = "easeOutBounce";
	$('li.NavigationButton a').click(function(e){
	var dropDown = $(this).parent().next();
	/* Закрываем все другие списки, кроме текущего */
	$('.dropdown').not(dropDown).slideUp('slow');
	dropDown.slideToggle('slow');
	e.preventDefault();
	})
});

</script>
<!-- #1 -->
<li class="menu">
<ul>
<li class="NavigationButton">
<a href="#">Кнопка большая<span></span></a>
</li>
<li class="dropdown">
<ul>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
</ul>
</li>
<!-- конец #1 -->
<!-- #2 -->
<li class="menu">
<ul>
<li class="NavigationButton">
<a href="#">Кнопка большая<span></span></a>
</li>
<li class="dropdown">
<ul>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
</ul>
</li>
<!-- конец #2 -->
<!-- #3 -->
<li class="menu">
<ul>
<li class="NavigationButton">
<a href="#">Кнопка большая<span></span></a>
</li>
<li class="dropdown">
<ul>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>

</ul>
</li>
<!-- конец #3 -->
   </div>
</div>

<!-- CSS Стиль меню -->

<style>

li.NavigationButton a
{
margin: 4px 4px 0px 0px;/* Расстояние между кнопками */
}

/* Главные элементы списка */


li.NavigationButton a{
		width: 179px;
	-moz-box-shadow:inset 0px 1px 0px 0px #FFF;
	-webkit-box-shadow:inset 0px 1px 0px 0px #FFF;
	box-shadow:inset 0px 1px 0px 0px #FFF;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #585858), color-stop(1, #B00C0C) );
	background:-moz-linear-gradient( center top, #585858 5%, #B00C0C 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#585858', endColorstr='B00C0C');
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #000;
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size:14px;
	font-weight:bold;
	padding:6px 24px;
	text-align: center;
	text-decoration:none;
	text-shadow:1px 1px 0px #000;
}

li.NavigationButton a:hover{
	text-decoration:none;
}

li.NavigationButton a span{
	height:44px;
	position:absolute;
	right:0;
	top:0;
	width:4px;
	display:block;
}

li.NavigationButton:active {
	position:relative;
	top:1px;
}


/* Эффекты при наведении */
li.NavigationButton a:hover{ background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8c0909), color-stop(1, #8c0909) );
	background:-moz-linear-gradient( center top, #8c0909 5%, #8c0909 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8c0909', endColorstr='#8c0909');
	background-color:#585858;}
/* Расширяющиеся списки */
.dropdown{

	display:none;
	padding-top:5px;
	width:100%;
}
/* Каждый элемент в таких списках */
li.dropdown a{

	width: 179px;
	border:1px solid #40392C;
	color:#CCCCCC;
	margin:2px 0;
	padding:4px 18px;
		-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:11px;
	font-weight:bold;
	padding:6px 24px;
	text-align: center;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
}

li.dropdown a:hover
{
text-decoration:none;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}
li.dropdown a:active {
	position:relative;
	top:1px;
}
</style>

  • 0