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

kvizor

  • Новичок
  • 14
  • 0 / 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

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

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

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

kvizor

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

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

kvizor

  • Новичок
  • 14
  • 0 / 0
Re: Помогите прикрутить скрипт JS
« Ответ #3 : 17.07.2016, 15:16:10 »
http://joomlaforum.ru/index.php/topic,328541.msg1651206.html#msg1651206

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

vipiusss

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

kvizor

  • Новичок
  • 14
  • 0 / 0
Re: Помогите прикрутить скрипт JS
« Ответ #5 : 17.07.2016, 15: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, 15:33:40 от kvizor »
*

vipiusss

  • Гуру
  • 5749
  • 343 / 10
  • Скайп: renor_
Re: Помогите прикрутить скрипт JS
« Ответ #6 : 17.07.2016, 15:33:12 »
У меня меню обёрнуто в <div class="menu_outer">***</div>

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

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

kvizor

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

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

vipiusss

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

vipiusss

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

kvizor

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

vipiusss

  • Гуру
  • 5749
  • 343 / 10
  • Скайп: renor_
Re: Помогите прикрутить скрипт JS
« Ответ #13 : 17.07.2016, 20: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 / 0
Re: Помогите прикрутить скрипт JS
« Ответ #14 : 17.07.2016, 20: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 / 0
Re: Помогите прикрутить скрипт JS
« Ответ #15 : 17.07.2016, 21:25:30 »
И не будет работать.
1) Читайте внимательнее пост тот: подключение между <head> и </head>, т.е. сюда только 2 строчки:
В Вашем скрипте ошибка stickUp.min.js:1 Uncaught TypeError: $(...).on is not a function
*

vipiusss

  • Гуру
  • 5749
  • 343 / 10
  • Скайп: renor_
Re: Помогите прикрутить скрипт JS
« Ответ #16 : 17.07.2016, 21: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 / 0
Re: Помогите прикрутить скрипт JS
« Ответ #17 : 17.07.2016, 21:39:18 »
Не знаю, какая там ошибка, у меня на 4 сайтах работает, и те кто ставил-тоже работает.
Может у вас конфликт скриптов идёт?
Хотя может и в скрипте где-то что-то не так, но у всех работает.

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

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

vipiusss

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

robert

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

kvizor

  • Новичок
  • 14
  • 0 / 0
Re: Помогите прикрутить скрипт JS
« Ответ #20 : 17.07.2016, 22: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 / 0
Re: Помогите прикрутить скрипт JS
« Ответ #21 : 17.07.2016, 22:11:22 »
Метод on() введен только с версии 1.7.
Подключить остальные библиотеки только после самой jQuery.
При необходимости вызывать jQuery.noConflict().
Дадада) блин где Вы были раньше?)
*

vipiusss

  • Гуру
  • 5749
  • 343 / 10
  • Скайп: renor_
Re: Помогите прикрутить скрипт JS
« Ответ #22 : 17.07.2016, 22:13:38 »
Ну и хорошо, что наконец-то получилось! Robertу тоже спасибо!
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Joomla вырезает скрипт из <script> на <s-cript>

Автор aniangeless

Ответов: 16
Просмотров: 4569
Последний ответ 28.04.2017, 00:05:51
от not_love
Помогите с защитой админки

Автор sliverr_free

Ответов: 2
Просмотров: 311
Последний ответ 25.04.2017, 03:40:10
от almika
каноникл неправильное указание ссылки, ПОМОГИТЕ!

Автор Анатолий

Ответов: 0
Просмотров: 203
Последний ответ 10.09.2016, 11:53:10
от Анатолий
Не работает двухстрочный скрипт jQuery

Автор kvizor

Ответов: 2
Просмотров: 289
Последний ответ 18.07.2016, 15:17:40
от zomby6888
Помогите новичку (простой опрос запилить на сайт, из нескольких вопросов)

Автор nexirt

Ответов: 3
Просмотров: 641
Последний ответ 19.05.2016, 00:52:29
от darkghost