17.01.2015, 19:16
|
Новичок на форуме
|
|
Регистрация: 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.
|
|
17.01.2015, 19:24
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
Mangust,
jquery на странице должно быть одно -- и сделайте полноценный макет что вам смогли помочь.
|
|
17.01.2015, 21:34
|
Новичок на форуме
|
|
Регистрация: 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.
|
|
17.01.2015, 21:59
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
Mangust,
$(document).ready незакрыто - строка 58
строка 31 -- зашита версия jquery 1.3.2 -- если её аккуратно вырезать всё заработает
|
|
17.01.2015, 22:19
|
Новичок на форуме
|
|
Регистрация: 17.01.2015
Сообщений: 4
|
|
Сообщение от рони
|
$(document).ready незакрыто - строка 58
|
действительно, спасибо! работает
Сообщение от рони
|
строка 31 -- зашита версия jquery 1.3.2 -- если её аккуратно вырезать всё заработает
|
прошу прощения, может я тупень, но не вижу, где это? и как ее аккуратно вырезать?
|
|
17.01.2015, 22:30
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
Mangust,
открыть fancydropdown.js и вырезать всё до строки (function($){$.fn.hoverIntent=function(f
|
|
17.01.2015, 22:36
|
Новичок на форуме
|
|
Регистрация: 17.01.2015
Сообщений: 4
|
|
рони, маэстро! все заработало! спасибо вам огромное!
|
|
|
|