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

  • 22 Ответов
  • 454 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

kvizor

  • Захожу иногда
  • **
  • 14
  • 0
Здравствуйте уважаемые коллеги! ^-^
Задача следующая: есть рабочий сайт на 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

  • Профи
  • ********
  • 5508
  • 318
  • JoomlaNet
Re: Помогите прикрутить скрипт JS
« Ответ #1 : 17.07.2016, 16:45:59 »
Здравствуйте уважаемые коллеги! ^-^
Задача следующая: есть рабочий сайт на Joomla - http://emk34.ru
Нужно при прокрутке зафиксировать меню наверху

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

Очень простой и рабочий вариант. Анализировать ваш скрипт нет особого желания.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

kvizor

  • Захожу иногда
  • **
  • 14
  • 0
Re: Помогите прикрутить скрипт JS
« Ответ #2 : 17.07.2016, 16:53:59 »
http://joomlaforum.ru/index.php/topic,328541.msg1651206.html#msg1651206

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

*

kvizor

  • Захожу иногда
  • **
  • 14
  • 0
Re: Помогите прикрутить скрипт JS
« Ответ #3 : 17.07.2016, 17:16:10 »
http://joomlaforum.ru/index.php/topic,328541.msg1651206.html#msg1651206

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

*

vipiusss

  • Профи
  • ********
  • 5508
  • 318
  • JoomlaNet
Re: Помогите прикрутить скрипт JS
« Ответ #4 : 17.07.2016, 17:19:05 »
Я писал: Оборачиваете <div class="navbar-wrapper">***</div> то, что у вас будет залипать.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

kvizor

  • Захожу иногда
  • **
  • 14
  • 0
Re: Помогите прикрутить скрипт JS
« Ответ #5 : 17.07.2016, 17:23:40 »
Я писал: Оборачиваете <div class="navbar-wrapper">***</div> то, что у вас будет залипать.
У меня меню обёрнуто в <div class="menu_outer">***</div>, отдельного CSS файла я не создавал, в имеющемся дополнил класс:
Код: 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;
  }
}
Скрипт в хедере прикрутил (в конце)
Код: php
<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, 17:33:40 от kvizor »

*

vipiusss

  • Профи
  • ********
  • 5508
  • 318
  • JoomlaNet
Re: Помогите прикрутить скрипт JS
« Ответ #6 : 17.07.2016, 17:33:12 »
У меня меню обёрнуто в <div class="menu_outer">***</div>

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

И я не знаю, что именно вы там делаете:скрипт рабочий и у всех работает.
Вы сам скрипт скачали в той теме? Там выше постом он прикреплён.
Инициализацию сделали? CSS добавили?
Если вы всё правильно сделаете-всё будет работать!
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

kvizor

  • Захожу иногда
  • **
  • 14
  • 0
Re: Помогите прикрутить скрипт JS
« Ответ #7 : 17.07.2016, 17:42:07 »
так оберните сверху моим  дивом.

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

*

vipiusss

  • Профи
  • ********
  • 5508
  • 318
  • JoomlaNet
Re: Помогите прикрутить скрипт JS
« Ответ #8 : 17.07.2016, 19: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"> нужный код, который будет залипать.Всё.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

kvizor

  • Захожу иногда
  • **
  • 14
  • 0
Re: Помогите прикрутить скрипт JS
« Ответ #9 : 17.07.2016, 20:55:07 »
Ну там же в теме я всё пошагово написал, получиться тоже самое тут повторять?!
Закачали скрипт, добавили CSS, добавили в шаблон вызов скрипта  <script src="/желательно путь, а не пхпкодом/stickUp.min.js"></script>(вы его полный должны вызывать, а ниже инициализацию(я написал))+вызов цсс(или без вызова CSS, если вы сразу в шаблонный CSS добавили)
Тут же в индексе добавили инициализацию(вызов его)
И обернули дивом <div class="navbar-wrapper"> нужный код, который будет залипать.Всё.
Небольшое уточнение - я так понял что скрипт заменяет класс .navbar-wrapper на .isStuck? или объединяет их?

*

vipiusss

  • Профи
  • ********
  • 5508
  • 318
  • JoomlaNet
Re: Помогите прикрутить скрипт JS
« Ответ #10 : 17.07.2016, 21:03:41 »
Объеденяет.Посредник-див с css'ом.
Спойлер
[свернуть]
Дайте ваш индекс в спойлере, я вам расставлю, только укажите класс меню, а лучше ссылку на сайт!
« Последнее редактирование: 17.07.2016, 21:06:50 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

kvizor

  • Захожу иногда
  • **
  • 14
  • 0
Re: Помогите прикрутить скрипт JS
« Ответ #11 : 17.07.2016, 21:24:49 »
Объеденяет.Посредник-див с css'ом.
Спойлер
[свернуть]
Дайте ваш индекс в спойлере, я вам расставлю, только укажите класс меню, а лучше ссылку на сайт!
окей)
1 - скрипт и navbarwrapper.css положил прям в корень
2 - обернул блок в <div class="navbar-wrapper">...</div>
3 - всё это дело подключил и инициировал
Код: php
<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

  • Захожу иногда
  • **
  • 14
  • 0
Re: Помогите прикрутить скрипт JS
« Ответ #12 : 17.07.2016, 21:33:24 »
Объеденяет.Посредник-див с css'ом.
Спойлер
[свернуть]
Дайте ваш индекс в спойлере, я вам расставлю, только укажите класс меню, а лучше ссылку на сайт!
вот index.php в нём блок <div id="menu_outer">, уже обёрнутый
всё что нужно я прописал, последние строчки перед </header>
Спойлер
[свернуть]

*

vipiusss

  • Профи
  • ********
  • 5508
  • 318
  • JoomlaNet
Re: Помогите прикрутить скрипт JS
« Ответ #13 : 17.07.2016, 22: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.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

kvizor

  • Захожу иногда
  • **
  • 14
  • 0
Re: Помогите прикрутить скрипт JS
« Ответ #14 : 17.07.2016, 22: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

  • Захожу иногда
  • **
  • 14
  • 0
Re: Помогите прикрутить скрипт JS
« Ответ #15 : 17.07.2016, 23:25:30 »
И не будет работать.
1) Читайте внимательнее пост тот: подключение между <head> и </head>, т.е. сюда только 2 строчки:
В Вашем скрипте ошибка stickUp.min.js:1 Uncaught TypeError: $(...).on is not a function

*

vipiusss

  • Профи
  • ********
  • 5508
  • 318
  • JoomlaNet
Re: Помогите прикрутить скрипт JS
« Ответ #16 : 17.07.2016, 23:32:45 »
Не знаю, какая там ошибка, у меня на 4 сайтах работает, и те кто ставил-тоже работает.
Может у вас конфликт скриптов идёт?
Хотя может и в скрипте где-то что-то не так, но у всех работает.

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

Демка менюхи: http://templates.joomla-monster.com/joomla30/jm-apartments-v3/
JED: http://extensions.joomla.org/extension/dj-megamenu
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

kvizor

  • Захожу иногда
  • **
  • 14
  • 0
Re: Помогите прикрутить скрипт JS
« Ответ #17 : 17.07.2016, 23:39:18 »
Не знаю, какая там ошибка, у меня на 4 сайтах работает, и те кто ставил-тоже работает.
Может у вас конфликт скриптов идёт?
Хотя может и в скрипте где-то что-то не так, но у всех работает.

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

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

*

vipiusss

  • Профи
  • ********
  • 5508
  • 318
  • JoomlaNet
Re: Помогите прикрутить скрипт JS
« Ответ #18 : 17.07.2016, 23:42:46 »
Дал ссылку в ЛС
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

robert

  • Профи
  • ********
  • 4002
  • 371
Re: Помогите прикрутить скрипт JS
« Ответ #19 : 17.07.2016, 23:58:32 »
В Вашем скрипте ошибка stickUp.min.js:1 Uncaught TypeError: $(...).on is not a function
Метод on() введен только с версии 1.7.
Подключить остальные библиотеки только после самой jQuery.
При необходимости вызывать jQuery.noConflict().
  • Не будь паразитом, сделай что-нибудь самостоятельно!
  • В личке и по Skype не даю советов.

*

kvizor

  • Захожу иногда
  • **
  • 14
  • 0
Re: Помогите прикрутить скрипт JS
« Ответ #20 : 18.07.2016, 00:08:48 »
Дал ссылку в ЛС
УРААА!)) наконец!! работает - emk34.ru (еще вот доработать отступы)
Прикрутил 3 строчки:
Код: php
<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

  • Захожу иногда
  • **
  • 14
  • 0
Re: Помогите прикрутить скрипт JS
« Ответ #21 : 18.07.2016, 00:11:22 »
Метод on() введен только с версии 1.7.
Подключить остальные библиотеки только после самой jQuery.
При необходимости вызывать jQuery.noConflict().
Дадада) блин где Вы были раньше?)

*

vipiusss

  • Профи
  • ********
  • 5508
  • 318
  • JoomlaNet
Re: Помогите прикрутить скрипт JS
« Ответ #22 : 18.07.2016, 00:13:38 »
Ну и хорошо, что наконец-то получилось! Robertу тоже спасибо!
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями