Форум русской поддержки Joomla!® CMS
08.12.2016, 20:12:31 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Помогите прикрутить скрипт JS

 (Прочитано 276 раз)
0 Пользователей и 1 Гость смотрят эту тему.
kvizor
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« : 17.07.2016, 15:37:42 »

Здравствуйте уважаемые коллеги! Smiley
Задача следующая: есть рабочий сайт на Joomla - http://emk34.ru
Нужно при прокрутке зафиксировать меню наверху.
Вот класс блока который содержит меню, а так-же класс который должен добавляться в случае прокрутки до определенного места:
Показать текстовый блок
p.s. проверял, если добавить "position: fixed; и top:0;" просто в класс ".menu_outer" то меню цепляется за верх страницы и фиксируется.

Далее сам menufix.js (взял из примера на ruseller), который по идее должен при скролле страницы добавлять ".fixed" к основному классу:
Показать текстовый блок
В index.php шаблона, прикрутил скрипт (все пути проверял, всё правильно):
Показать текстовый блок
И наконец кусок из index.php содержащий блок меню:
Показать текстовый блок
Почитал сначала тут http://ruseller.com/lessons.php?rub=2&id=2139 и сделал всё на основе демо примера http://codepen.io/stanislas-prime/pen/xrEcj
но увы, ничего не работает...
Помогите пожалуйста) я верстак начинающий, js знаю плохо.
Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #1 : 17.07.2016, 15:45:59 »

Здравствуйте уважаемые коллеги! Smiley
Задача следующая: есть рабочий сайт на Joomla - http://emk34.ru
Нужно при прокрутке зафиксировать меню наверху

http://joomlaforum.ru/index.php/topic,328541.msg1651206.html#msg1651206

Очень простой и рабочий вариант. Анализировать ваш скрипт нет особого желания.
Записан
kvizor
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #2 : 17.07.2016, 15:53:59 »

http://joomlaforum.ru/index.php/topic,328541.msg1651206.html#msg1651206

Очень простой и рабочий вариант. Анализировать ваш скрипт нет особого желания.
Спасибо, сейчас попробую
Записан
kvizor
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #3 : 17.07.2016, 16:16:10 »

http://joomlaforum.ru/index.php/topic,328541.msg1651206.html#msg1651206

Очень простой и рабочий вариант. Анализировать ваш скрипт нет особого желания.
Прочитал всю тему по Вашей ссылке, а так же внимательно изучил скрипт, но так и не понял, каким образом определяется блок, для которого должен присваиваться класс isStuck ?
Сделал по инструкции - не работает...
« Последнее редактирование: 17.07.2016, 16:20:15 от kvizor » Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #4 : 17.07.2016, 16:19:05 »

Я писал: Оборачиваете <div class="navbar-wrapper">***</div> то, что у вас будет залипать.
Записан
kvizor
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #5 : 17.07.2016, 16:23:40 »

Я писал: Оборачиваете <div class="navbar-wrapper">***</div> то, что у вас будет залипать.
У меня меню обёрнуто в <div class="menu_outer">***</div>, отдельного CSS файла я не создавал, в имеющемся дополнил класс:
Код
.menu_outer{
margin: 0 auto;
width:980px;
height:78px;
z-index:9;
background:url(../images/menu_bg.png) top center;
padding-top: 10px;
 .isStuck{
 position: fixed;
 top:0;
 }
}
Скрипт в хедере прикрутил (в конце)
Код
<script src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template?>/styles/<?php echo $this->params->get('template_style'); ?>/js/stickUp.min.js"
   <script type="text/javascript">
     jQuery(function($) {
       $(document).ready( function() {
         $('.navbar-wrapper').stickUp({});
       });
     });
   </script>
аааааа, дело в прикруте!))) сейчас попробую исправить класс
« Последнее редактирование: 17.07.2016, 16:33:40 от kvizor » Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #6 : 17.07.2016, 16:33:12 »

У меня меню обёрнуто в <div class="menu_outer">***</div>

так оберните сверху моим  дивом.

И я не знаю, что именно вы там делаете:скрипт рабочий и у всех работает.
Вы сам скрипт скачали в той теме? Там выше постом он прикреплён.
Инициализацию сделали? CSS добавили?
Если вы всё правильно сделаете-всё будет работать!
Записан
kvizor
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #7 : 17.07.2016, 16:42:07 »

так оберните сверху моим  дивом.

И я не знаю, что именно вы там делаете:скрипт рабочий и у всех работает.
Вы сам скрипт скачали в той теме? Там выше постом он прикреплён.
Инициализацию сделали? CSS добавили?
Если вы всё правильно сделаете-всё будет работать!
Пробывал в прикруте изменить ваш navbar-wrapper на свой menu_outer, потом попробовал просто обернуть вашим дивом (в прикрутке вернул всё на место), путь до вашего скрипта еще раз проверил, скрипт скачал постом выше в виде архива "stickUp.min.zip"
что может быть еще?
p.s. как должна осуществляться инициализация?
« Последнее редактирование: 17.07.2016, 16:46:45 от kvizor » Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #8 : 17.07.2016, 18:23:07 »

Ну там же в теме я всё пошагово написал, получиться тоже самое тут повторять?!
Закачали скрипт, добавили CSS, добавили в шаблон вызов скрипта  <script src="/желательно путь, а не пхпкодом/stickUp.min.js"></script>(вы его полный должны вызывать, а ниже инициализацию(я написал))+вызов цсс(или без вызова CSS, если вы сразу в шаблонный CSS добавили)
Тут же в индексе добавили инициализацию(вызов его)
   
    <script type="text/javascript">
      jQuery(function($) {
        $(document).ready( function() {
          $('.navbar-wrapper').stickUp({});
        });
      });
    </script>

И обернули дивом <div class="navbar-wrapper"> нужный код, который будет залипать.Всё.
Записан
kvizor
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #9 : 17.07.2016, 19:55:07 »

Ну там же в теме я всё пошагово написал, получиться тоже самое тут повторять?!
Закачали скрипт, добавили CSS, добавили в шаблон вызов скрипта  <script src="/желательно путь, а не пхпкодом/stickUp.min.js"></script>(вы его полный должны вызывать, а ниже инициализацию(я написал))+вызов цсс(или без вызова CSS, если вы сразу в шаблонный CSS добавили)
Тут же в индексе добавили инициализацию(вызов его)
И обернули дивом <div class="navbar-wrapper"> нужный код, который будет залипать.Всё.
Небольшое уточнение - я так понял что скрипт заменяет класс .navbar-wrapper на .isStuck? или объединяет их?
Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #10 : 17.07.2016, 20:03:41 »

Объеденяет.Посредник-див с css'ом.
Показать текстовый блок
Дайте ваш индекс в спойлере, я вам расставлю, только укажите класс меню, а лучше ссылку на сайт!
« Последнее редактирование: 17.07.2016, 20:06:50 от vipiusss » Записан
kvizor
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #11 : 17.07.2016, 20:24:49 »

Объеденяет.Посредник-див с css'ом.
Показать текстовый блок
Дайте ваш индекс в спойлере, я вам расставлю, только укажите класс меню, а лучше ссылку на сайт!
окей)
1 - скрипт и navbarwrapper.css положил прям в корень
2 - обернул блок в <div class="navbar-wrapper">...</div>
3 - всё это дело подключил и инициировал
Код
<script src="/stickUp.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/navbarwrapper.css" />
<script type="text/javascript">
 jQuery(function($) {
   $(document).ready( function() {
     $('.navbar-wrapper').stickUp({});
   });
 });
</script>
</head>

ну не работает) вот посмотрите пожалуйста emk34.ru через f12 если у вас Chrome.
блок меню в шаблоне <div id="menu_outer">
Записан
kvizor
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #12 : 17.07.2016, 20:33:24 »

Объеденяет.Посредник-див с css'ом.
Показать текстовый блок
Дайте ваш индекс в спойлере, я вам расставлю, только укажите класс меню, а лучше ссылку на сайт!
вот index.php в нём блок <div id="menu_outer">, уже обёрнутый
всё что нужно я прописал, последние строчки перед </header>
Показать текстовый блок
Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #13 : 17.07.2016, 21:23:49 »

И не будет работать.
1) Читайте внимательнее пост тот: подключение между <head> и </head>, т.е. сюда только 2 строчки:

Показать текстовый блок

Слеши уберите, если у вас в корне, вроде так должно быть!

А перед </body> внизу добавьте:

Показать текстовый блок

Это первые ошибки, теперь вторые, синтаксис:

У вас div имеет id, мой div имеет class, а по закону кода, что первое читается и что главнее? ID!, соответственно в CSS #.
Сделайте тогда уже <div id="navbar-wrapper">, в CSS измените точку на #, а сам скрипт внизу на :


Показать текстовый блок

А лучше ваши id(<div id="menu_outer"> и <div id="suckerfish">) на class поменяйте, чтоб везде классы были, будет и понятнее и изменять ничего не надо, кроме id и # на . в CSS.
Записан
kvizor
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #14 : 17.07.2016, 21:43:14 »

И не будет работать.
1) Читайте внимательнее пост тот: подключение между <head> и </head>, т.е. сюда только 2 строчки:

Показать текстовый блок

Слеши уберите, если у вас в корне, вроде так должно быть!

А перед </body> внизу добавьте:

Показать текстовый блок

Это первые ошибки, теперь вторые, синтаксис:

У вас div имеет id, мой div имеет class, а по закону кода, что первое читается и что главнее? ID!, соответственно в CSS #.
Сделайте тогда уже <div id="navbar-wrapper">, в CSS измените точку на #, а сам скрипт внизу на :


Показать текстовый блок

А лучше ваши id(<div id="menu_outer"> и <div id="suckerfish">) на class поменяйте, чтоб везде классы были, будет и понятнее и изменять ничего не надо, кроме id и # на . в CSS.
понял, пробую, сейчас везде классы выставлю.
Записан
kvizor
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #15 : 17.07.2016, 22:25:30 »

И не будет работать.
1) Читайте внимательнее пост тот: подключение между <head> и </head>, т.е. сюда только 2 строчки:
В Вашем скрипте ошибка stickUp.min.js:1 Uncaught TypeError: $(...).on is not a function
Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #16 : 17.07.2016, 22:32:45 »

Не знаю, какая там ошибка, у меня на 4 сайтах работает, и те кто ставил-тоже работает.
Может у вас конфликт скриптов идёт?
Хотя может и в скрипте где-то что-то не так, но у всех работает.

Могу дать модуль DJ MegaMenu, там эта функция встроенная и можно выбирать лого в меню перескакивает (только у вас лого оч большое)

Демка менюхи: http://templates.joomla-monster.com/joomla30/jm-apartments-v3/
JED: http://extensions.joomla.org/extension/dj-megamenu
Записан
kvizor
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #17 : 17.07.2016, 22:39:18 »

Не знаю, какая там ошибка, у меня на 4 сайтах работает, и те кто ставил-тоже работает.
Может у вас конфликт скриптов идёт?
Хотя может и в скрипте где-то что-то не так, но у всех работает.

Могу дать модуль DJ MegaMenu, там эта функция встроенная и можно выбирать лого в меню перескакивает (только у вас лого оч большое)

Демка менюхи: http://templates.joomla-monster.com/joomla30/jm-apartments-v3/
JED: http://extensions.joomla.org/extension/dj-megamenu
Если можно, дайте ссылку на один из четырёх сайтов где данный скрипт реализован.
Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #18 : 17.07.2016, 22:42:46 »

Дал ссылку в ЛС
Записан
robert
Профи
********

Репутация: +344/-11
Offline Offline

Пол: Мужской
Сообщений: 3591


« Ответ #19 : 17.07.2016, 22:58:32 »

В Вашем скрипте ошибка stickUp.min.js:1 Uncaught TypeError: $(...).on is not a function
Метод on() введен только с версии 1.7.
Подключить остальные библиотеки только после самой jQuery.
При необходимости вызывать jQuery.noConflict().
Записан
kvizor
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #20 : 17.07.2016, 23:08:48 »

Дал ссылку в ЛС
УРААА!)) наконец!! работает - emk34.ru (еще вот доработать отступы)
Прикрутил 3 строчки:
Код
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-noconflict.js"></script>
<script type="text/javascript" src="jquery-migrate.min.js"></script>
ну и соответствующие скрипты в корень залил, взял из Вашего примера, спасибо.
Остальным советую учить AJAX и jquery чтобы не тупить пол дня как я)
Записан
kvizor
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #21 : 17.07.2016, 23:11:22 »

Метод on() введен только с версии 1.7.
Подключить остальные библиотеки только после самой jQuery.
При необходимости вызывать jQuery.noConflict().
Дадада) блин где Вы были раньше?)
Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #22 : 17.07.2016, 23:13:38 »

Ну и хорошо, что наконец-то получилось! Robertу тоже спасибо!
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet