На этом блоге, в шаблоне для выпадающего меню MenuMatic используется Mootools - javascript-фреймворк. В этом можно было убедиться если посмотреть исходный код страницы и найти там вот такую строку:
<script src="https://elims.org.ua/wp-content/themes/Technologic/Technologic/menu/mootools-1.2.5-core-yc.js" type="text/javascript"> </script>
При этом для установки кнопки вверх/вниз я недавно подключил Jquery - javascript-библиотеку. И тут я сделал для себя открытие оказывается Mootools и Jquery в большинстве случаев конфликтуют между собой. Связано это с тем что для обращения к функциям этих библиотек\фреймворков и там, и там в большинстве случаев осуществляется через переменную "$". В результате скрипты использующие Mootools перестают работать.
Но есть возможность сделать так, чтоб Jquery и Mootools не конфликтовали между собой, для этого необходимо использовать функцию jQuery.noConflict(); , то есть добавить в файл header.php (файл шаблона в котором подключают js-скрипты) вот такую строчку:
<script type="text/javascript" >jQuery.noConflict();</script>
эта функция должна быть вызвана после подключения Javascript-файла jQuery, но ПЕРЕД подключением конфликтующих библиотек. То есть у меня сначала подключается jQuery, потом используется функция jQuery.noConflict(); и уже после этого подключается Mootools:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" >jQuery.noConflict();</script> <!-- ... какой-то код .... --> <script src="https://elims.org.ua/wp-content/themes/Technologic/Technologic/menu/mootools-1.2.5-core-yc.js" type="text/javascript"> </script>
Теперь осталось разобраться с кодом, который обращается к jquery через переменную "$". В нем необходимо "$" заменить на "jQuery". Код может находиться в любом месте, у меня он находиться в файле footer.php. Показываю на примере кнопки вверх\вниз.
ДО:
<!— Start: Кнопки вверх вниз —> <script type="text/javascript"> jQuery(function(){ if ($(window).scrollTop()>="250") $("#ToTop").fadeIn("slow") $(window).scroll(function(){ if ($(window).scrollTop()<="250") $("#ToTop").fadeOut("slow") else $("#ToTop").fadeIn("slow") }); if ($(window).scrollTop()<=$(document).height()-"999") $("#OnBottom").fadeIn("slow") $(window).scroll(function(){ if ($(window).scrollTop()>=$(document).height()-"999") $("#OnBottom").fadeOut("slow") else $("#OnBottom").fadeIn("slow") }); $("#ToTop").click(function(){$("html,body").animate({scrollTop:0},"slow")}) $("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()},"slow")}) }); </script> <div title="Вверх" id='ToTop'>⇧</div> <div title="Вниз" id='OnBottom'>⇩</div> <!— End: Кнопки вверх вниз —>
ПОСЛЕ:
<!— Start: Кнопки вверх вниз —> <script type="text/javascript"> jQuery(function(){ if (jQuery(window).scrollTop()>="250") jQuery("#ToTop").fadeIn("slow") jQuery(window).scroll(function(){ if (jQuery(window).scrollTop()<="250") jQuery("#ToTop").fadeOut("slow") else jQuery("#ToTop").fadeIn("slow") }); if (jQuery(window).scrollTop()<=jQuery(document).height()-"999") jQuery("#OnBottom").fadeIn("slow") jQuery(window).scroll(function(){ if (jQuery(window).scrollTop()>=jQuery(document).height()-"999") jQuery("#OnBottom").fadeOut("slow") else jQuery("#OnBottom").fadeIn("slow") }); jQuery("#ToTop").click(function(){jQuery("html,body").animate({scrollTop:0},"slow")}) jQuery("#OnBottom").click(function(){jQuery("html,body").animate({scrollTop:jQuery(document).height()},"slow")}) }); </script> <div class="go-up" title="Вверх" id='ToTop'>⇧</div> <div class="go-down" title="Вниз" id='OnBottom'>⇩</div> <!— End: Кнопки вверх вниз —>
После этих действий MenuMatic работающее на Mootools и кнопки Вверх\Вниз работающие на jQuery заработали не конфликтуя между собой.
P.S.: Справедливости ради скажу что я не пользовался в своем шаблоне возможностью реализации выпадающего меню, потому решил вообще убрать строки отвечающие за их реализацию, то есть не подключать js-скрипты отвечающие за Mootools и MenuMatic. Именно на этом шаге я и заметил конфликт, так как перед удалением Mootools решил проверить все ли работает, чтоб знать последствия отключения фреймворка.
Привет. Можно не по теме?)). Смотрю у тебя фавикон на черном фоне. Вот тут «favicon(точка)cc» можно сделать иконку без него.))
Привет, спасибо =) Да, есть такая оплошность, хоть дело и минутное но все откладываю правку фавикона, так как хотел найти какой-то смайлик по ярче, либо вообще попросить какого-то дизайнера что-то сделать эксклюзивное. Но раз уже меня в фавикон носом тычут (кстати не первый раз), значит нужно им срочно заняться =)
Сунь в фавикон свое лицо. Одно из самых уникальных вещей в мире)). Лично я лицо Владимир Демянович (в комментах) всегда узнаю))
Интересная идея, особенно если найти из своих фотографий что-то забавное =)
Кстати, зашел посмотреть фавикон на твоем сайте, думал вдруг тоже лицо и касперский ругнулся, почисти =)
Скриншот: https://dl.dropboxusercontent.com/u/5974898/temp-seo2011.ru.jpg
Стремно)). А как можно сайт на вирусы почистить? Я не знаю
Когда у меня зловред где-то заводился, то я просто скачивал все файлы с ftp и проверял эту папку касперским, те файлы на которые он ругался — удалял. Ну и потом восстанавливал поврежденный функционал: брал из бекапов эти же файлы но не зараженные или переустанавливал плагины, файлы которых вирус зацепил.
Главное устанавливать темы и плагины с официальных сайтов.
Огромное спасибо, очень помогли!
Владимир, теплое дружеское спасибо за подсказку!
В моём случае скрипт jQuery задавал работу спойлера. Честно говоря, я не ожидал, что ситуация с конфликтом, думал проблема в синтаксисе из-за обновления библиотек. Дня три голову ломал, а оказалось все просто.
Очень благодарен за статью, спасибо!
Денис, рад что Вам пригодилось. По Вашей записи в блоге вижу Вам пришлось повозится над решением проблемы =)
Большое спасибо! Помогло!