Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.01.2015, 19:16
Новичок на форуме
Отправить личное сообщение для Mangust Посмотреть профиль Найти все сообщения от Mangust
 
Регистрация: 17.01.2015
Сообщений: 4

Конфликт скриптов на jquery
Добрый день! Прошу помощи у знатоков, т.к. самому не хватает знаний в джаваскриптах (профан)

Дело в том, что у меня на сайте стоял слайдер jquery.nivo.slider.pack и небольшой скрипт для выпадающего меню, все это выглядело примерно следующим образом:

Код:
<script type="text/javascript" src="{THEME}/js/nivo-slider/jquery.nivo.slider.pack.js"></script>
	<script>
		// nivo-slider
		$(window).load(function() {
		        $('#slider').nivoSlider({
		        effect: 'random',
		        slices: 15,
		        boxCols: 8,
		        boxRows: 4,
		        animSpeed: 700,
		        startSlide: 0,
		        directionNav: false,
		        controlNav: true,
		        controlNavThumbs: false,
		        pauseOnHover: true,
		        manualAdvance: false,
		        prevText: 'Prev',
		        nextText: 'Next',
		        randomStart: false,
		        pauseTime: 4500
		    });
		    });
		// end nivo-slider
		//tags
		$(document).ready(function(){
		    var spoiler = $('.tags_block');
		        spoiler.hide();
		        $('#tags_btn').click(function(){spoiler.slideToggle("slow");return false;}); 
	        //end tags
                // dropdown menu	
		  if (!('ontouchstart' in document.documentElement)) {
		      $('.dropdown').hover(
		          function() {
		              $(this).addClass("active");
		              $(this).find('ul').stop(true, true);
		              $(this).find('ul').slideDown();
		          },
		          function() {
		              $(this).removeClass("active");
		              $(this).find('ul').slideUp('slow');
		          }
		      );
		    };
		  });
                // end dropdown menu	
	 </script>
Выпадалка жутко бесила, т.к. вызывалась любым движением курсора над пунктами менюхи и постоянно мигала при движении по странице, и я решил заменить его на другой скрипт, который вызывает выпадающее меню только через определенную задержку курсора на пунктами (как тут). То есть при случайном мгновенном пересечении курсором меню не реагирует. Для этого использовался скрипт fancydropdown.js.

При подключении этого скрипта на сайте вырубается скрипт слайдера, а на форуме конфликтует еще и со скриптом jquery-1.7.2.min.js и lightbox.js. В общем, как ни прикручивай, сплошная жопа по всем фронтам. При этом 2х суточное гуглование проблемы и методы типа jQuery.noConflict() не помогли проблеме, вырубаются сразу оба скрипта. Одно ясно, что, судя по всему, конфликт библиотек jquery, но как выяснить где и как исправить?

Ребята, прошу у вас помощи, помогите или настроить первый скрипт выпадалки так, чтобы он не реагировал на пересечение мыши, а реагировал только на фокусировку более 0.8s или помогите убрать конфликт скриптов на сайте! Заранее спасибо всем, кто отзовется!

Последний раз редактировалось Mangust, 17.01.2015 в 21:46.
Ответить с цитированием
  #2 (permalink)  
Старый 17.01.2015, 19:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

Mangust,
jquery на странице должно быть одно -- и сделайте полноценный макет что вам смогли помочь.
Ответить с цитированием
  #3 (permalink)  
Старый 17.01.2015, 21:34
Новичок на форуме
Отправить личное сообщение для Mangust Посмотреть профиль Найти все сообщения от Mangust
 
Регистрация: 17.01.2015
Сообщений: 4

рони, пардон, полный макет выглядит так:
<ul id="main_menu">
	<li class="menu_item1"><a href="/index.php">Главная</a></li>
	<li class="menu_item1 menu_item2"><a href="/forum/index.php">Форум</a></li>
	<li class="menu_item1 menu_item2 dropdown">
		<a href="/gallery/">Галерея</a>
		<ul class="droplist">
			<li><a href="/gallery/screenshots/">Скриншоты</a></li>
			<li><a href="/gallery/fanart/">Фан-арт</a></li>
			<li><a href="/gallery/comics/">Комиксы</a></li>
		</ul>
	</li>
	<li class="menu_item1 menu_item2 dropdown">
		<a href="/video">Видео</a>
		<ul class="droplist">
			<li><a href="/video/offvideo/">Официальные трейлеры</a></li>
			<li><a href="/video/fanvideo/">Фан-видео</a></li>
			<li><a href="/video/video_tutorial/">Видео-уроки</a></li>
		</ul>
	</li>
	<li class="menu_item1 menu_item2 dropdown">
		<a href="/stati/">Статьи</a>
		<ul class="droplist">
			<li><a href="/stati/obzory/">Обзоры</a></li>
			<li><a href="/stati/tutorial/">Уроки</a></li>
			<li><a href="/stati/code/">Чит-коды</a></li>
		</ul>
	</li>
	<div style="clear:both;"></div>
</ul>

Код:
#main_menu {
	color:#fff;
	font:bold 15px Tahoma;
	text-transform:uppercase;
	text-shadow:1px 1px 0px #000;
	margin:0 auto;
	padding:4px 0 0 0;
	width:820px;
}
#main_menu>li {
	float:left;
}
.menu_item1 {
	background: url(../images/menu_separator.gif) right center no-repeat;
	margin-top:14px;
}
.menu_item2 {
	margin:0 0 0 0px;
	margin-top:14px;
}
.menu_item1>a, .menu_item2>a {
	padding:14px 15px 15px 15px;
}
#main_menu li a {
	color:#fff;
	text-decoration:none;
    -webkit-transition: text-shadow 0.5s ease;
    -moz-transition: text-shadow 0.5s ease;
    -o-transition: text-shadow 0.5s ease;
    transition: text-shadow 0.5s ease;
}
#main_menu li a:hover {
	color:#dffffb;
	text-shadow: 0px 0px 20px #f68dff,0px 0px 35px #f68dff;
}

/* Menu dropdown */
.dropdown {
	position:relative;
}
.dropdown ul {
	display: none;
	position:absolute;
	top: 33px;
	z-index:30;
	left:0px;
	text-align:left;
	background:url(../images/informer_gradient.png) 0 0 repeat #fff;
	border-radius:3px; 
	border:1px solid white;
    -moz-box-shadow:0 0 0 1px #acbac4, 0px 0px 10px #61666a;
    -webkit-box-shadow:0 0 0 1px #acbac4, 0px 0px 10px #61666a;
	box-shadow:0 0 0 1px #acbac4, 0px 0px 10px #61666a;
}
.dropdown ul li{
	display:block;
	background: url(../images/plumbob_green.png) 0px 12px no-repeat;
	list-style:none;
	padding: 0px 0px 0px 0px;
	margin: 0px 0 0px 5px;
}
.dropdown ul li a {
	display:block;
	padding: 11px 9px 11px 14px;
	color:#660099 !important;
	text-decoration:none;	
	white-space:nowrap;
	text-transform:none;
	text-shadow:1px 1px 0px #fff;
    -webkit-transition:color 0.5s ease !important;
    -moz-transition:color 0.5s ease !important;
    -o-transition:color 0.5s ease !important;
    transition:color 0.5s ease !important;
}
.dropdown ul li a:hover {
	color:#6d99cc !important;
	text-shadow:none !important;
	text-shadow:1px 1px 0px #fff !important;
}
.dropdown.active {
	z-index:100;
}
Скрипт, который первый рабочий представлен в первом посте в коде с ссылкой на ниво-слайдер. Чуть ниже скрипт fancydropdown.js, который пытался подключить и конфликтует. Дело в том, что я понимаю, что где-то в коде идет повтор библиотек jquery, но понятия не имею как их найти и удалить.
Перестали работать слайдер справа в информере вверху (пустое окно) и выпадающие ключевые внизу раскрылись.

Скрипты на данный момент выглядят так:
Код:
	<script type="text/javascript" src="{THEME}/js/nivo-slider/jquery.nivo.slider.pack.js"></script>
	<script type="text/javascript" src="{THEME}/js/fancydropdown.js"></script>
	<script>
		// nivo-slider
		$(window).load(function() {
		        $('#slider').nivoSlider({
		        effect: 'random',
		        slices: 15,
		        boxCols: 8,
		        boxRows: 4,
		        animSpeed: 700,
		        startSlide: 0,
		        directionNav: false,
		        controlNav: true,
		        controlNavThumbs: false,
		        pauseOnHover: true,
		        manualAdvance: false,
		        prevText: 'Prev',
		        nextText: 'Next',
		        randomStart: false,
		        pauseTime: 4500
		    });
		    });
		// end nivo-slider
		//tags
		$(document).ready(function(){
		    var spoiler = $('.tags_block');
		        spoiler.hide();
		        $('#tags_btn').click(function(){spoiler.slideToggle("slow");return false;}); 
	       //end tags
	 </script>

Последний раз редактировалось Mangust, 17.01.2015 в 22:38.
Ответить с цитированием
  #4 (permalink)  
Старый 17.01.2015, 21:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

Mangust,
$(document).ready незакрыто - строка 58
строка 31 -- зашита версия jquery 1.3.2 -- если её аккуратно вырезать всё заработает
Ответить с цитированием
  #5 (permalink)  
Старый 17.01.2015, 22:19
Новичок на форуме
Отправить личное сообщение для Mangust Посмотреть профиль Найти все сообщения от Mangust
 
Регистрация: 17.01.2015
Сообщений: 4

Сообщение от рони Посмотреть сообщение
$(document).ready незакрыто - строка 58
действительно, спасибо! работает
Сообщение от рони Посмотреть сообщение
строка 31 -- зашита версия jquery 1.3.2 -- если её аккуратно вырезать всё заработает
прошу прощения, может я тупень, но не вижу, где это? и как ее аккуратно вырезать?
Ответить с цитированием
  #6 (permalink)  
Старый 17.01.2015, 22:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

Mangust,
открыть fancydropdown.js и вырезать всё до строки (function($){$.fn.hoverIntent=function(f
Ответить с цитированием
  #7 (permalink)  
Старый 17.01.2015, 22:36
Новичок на форуме
Отправить личное сообщение для Mangust Посмотреть профиль Найти все сообщения от Mangust
 
Регистрация: 17.01.2015
Сообщений: 4

рони, маэстро! все заработало! спасибо вам огромное!
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Конфликт двух скриптов veatone jQuery 2 24.05.2013 21:02
JQuery конфликт между версиями zurasan Элементы интерфейса 2 19.12.2012 15:12
Конфликт с jquery stvord Элементы интерфейса 3 01.09.2011 22:33
Конфликт скриптов, хотя точно не знаю McLotos Элементы интерфейса 2 06.04.2011 11:34
Конфликт Jquery и Mootools Bangoo jQuery 1 28.03.2011 13:03