Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Конфликт скриптов на jquery (https://javascript.ru/forum/jquery/53018-konflikt-skriptov-na-jquery.html)

Mangust 17.01.2015 19:16
Конфликт скриптов на 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 или помогите убрать конфликт скриптов на сайте! Заранее спасибо всем, кто отзовется!

рони 17.01.2015 19:24
Mangust,
jquery на странице должно быть одно -- и сделайте полноценный макет что вам смогли помочь.

Mangust 17.01.2015 21:34
рони, пардон, полный макет выглядит так:
<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>

рони 17.01.2015 21:59
Mangust,
$(document).ready незакрыто - строка 58
строка 31 -- зашита версия jquery 1.3.2 -- если её аккуратно вырезать всё заработает

Mangust 17.01.2015 22:19
Цитата:
Сообщение от рони (Сообщение 351933)
$(document).ready незакрыто - строка 58
действительно, спасибо! работает
Цитата:
Сообщение от рони (Сообщение 351933)
строка 31 -- зашита версия jquery 1.3.2 -- если её аккуратно вырезать всё заработает
прошу прощения, может я тупень, но не вижу, где это? и как ее аккуратно вырезать?

рони 17.01.2015 22:30
Mangust,
открыть fancydropdown.js и вырезать всё до строки (function($){$.fn.hoverIntent=function(f

Mangust 17.01.2015 22:36
рони, маэстро! все заработало! спасибо вам огромное! :)


Часовой пояс GMT +3, время: 23:39.