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

Good_user

  • Захожу иногда
  • 149
  • 5 / 1
Здравствуйте, уважаемые  ;) Случайно наткнулся на сайт ashkim.ru и увидел плавающий блок Адсенса (смотрите левая колонка, самая нижняя позиция), который при прокрутке страницы тоже движется. По идее это должно хорошо повлиять на конверсию рекламного блока, поэтому хочу такое реализовать на своем сайте. Фаербагом проанализировал тот модуль, но это мне ничего не дало. Я так и не понял, как там такое реализовано. Познания в HTML и CSS у меня небольшие, поэтому прошу помощи. Заранее спасибо!
*

Babyaka

  • Захожу иногда
  • 110
  • 3 / 0
Думаю это можно сделать на примере фиксированного меню. Тут вся фишка в том, что в CSS есть класс блока для обычного состояния, подключен jQuery код, который улавливает позицию скрола браузера и меняет класс блока рекламы. Т.е. сперва блок рекламы в обычном состоянии, а после прокрутки он становится фиксированным. Подключи оба класса к блоку рекламы и подредактируй jQuery код, в примере там выставлено значение 100, его и меняй. Думаю разберешься
*

Good_user

  • Захожу иногда
  • 149
  • 5 / 1
Думаю это можно сделать на примере фиксированного меню. Тут вся фишка в том, что в CSS есть класс блока для обычного состояния, подключен jQuery код, который улавливает позицию скрола браузера и меняет класс блока рекламы. Т.е. сперва блок рекламы в обычном состоянии, а после прокрутки он становится фиксированным. Подключи оба класса к блоку рекламы и подредактируй jQuery код, в примере там выставлено значение 100, его и меняй. Думаю разберешься
Большое спасибо, Babyaka!:-) Попробую сделать. Надеюсь получицца!)
*

Good_user

  • Захожу иногда
  • 149
  • 5 / 1
Здравствуйте, уважаемые! Прошел почти год с поры открытия темы. Тогда реализовать задуманное так и не получилось (обошелся без этого), но вот несколько дней назад возникла такая неотложная потребность. И в этот раз мне все таки пришлось разобраться в этом самому. Метод тыка творит чудеса, особенно для людей далеких от программирования)))) Тыкать пришлось почти 3 дня :-)

Для таких "непрошаренных" как я сделал подробную инструкцию, как организовать плавающий модуль рекламы в левой или правой колонке на Joomla 1.5 с помощью jQuery.

Шаг 1. Сначала нужно подключить jQuery.

Самый простой способ - это установить плагин plg_jqueryintegrator_j1.5. Вот тут можно скачать сам плагин и посмотреть видео урок по его настройке: http://vitaliykulikov.ru/jquery-joomla/plagin-podklyucheniya-jquery.html.
Или можно подключить jQuery вручную. Для этого нужно в файле index.php (лежит в папке с шаблоном) между тегами <head></head> прописать такой вот код:

Код
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

В данном случае jQuery будет подключаться с сервера Google, что должно обеспечить высокую скорость загрузки. jQuery можно также подключать и с Яндекса, и с официального сайта jQuery, и с собственного сайта. Об этом очень хорошо написано здесь: http://www.magentawave.com/2013/03/jquery.html.
Я пробовал подключать jQuery и плагином, и вручную. Разницы никакой, все работает!

Шаг 2. Прописываю класс стиля для модуля в CSS.

В моем случае прописывал класс в файле template_css.css, который лежит в папке CSS шаблона. Сам стиль:

Код
#fixed {
    background: #E7E7E7;
    padding: 10px;
    border: 3px solid #597D00;
}

Шаг 3. В менеджере модулей создаю новый модуль.

Можно создать стандартный custom_html модуль, но я использую скачанный mod_php_joomla 1.5, он мне больше нравиться.

Шаг 4. Вставляю код РСЯ и плавающий скрипт в сам модуль.

В настройках модуля вставляю оба скрипта. Сначала вставляю плавающий скрипт, а потом сразу же за ним скрипт РСЯ внутри тегов <div></div>. Получилось вот так:

Код
<script type="text/javascript">
    $(function() {
        var offset = $("#fixed").offset();
        var topPadding = 7;
        $(window).scroll(function() {
            if ($(window).scrollTop() > offset.top) {
                $("#fixed").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
            }
            else {$("#fixed").stop().animate({marginTop: 15});};});
    });
</script>
<div id="fixed"><!-- Яндекс.Директ -->
<script type="text/javascript">
//<![CDATA[
yandex_partner_id = xxxxxx;
yandex_site_bg_color = 'FFFFFF';
yandex_site_charset = 'utf-8';
yandex_ad_format = 'direct';
yandex_font_size = 1.4;
yandex_font_family = 'verdana';
yandex_direct_type = 'vertical';
yandex_direct_limit = 1;
yandex_stat_id = 3;
yandex_direct_title_font_size = 2;
yandex_direct_title_color = 'CC0000';
yandex_direct_url_color = '000000';
yandex_direct_text_color = '000000';
yandex_direct_hover_color = '990000';
yandex_direct_favicon = true;
yandex_no_sitelinks = true;
document.write('<sc'+'ript type="text/javascript" src="http://an.yandex.ru/system/context.js"></sc'+'ript>');
//]]>
</script>
</div>

Включаю модуль, назначаю позицию и вуаля - модуль плавно передвигается, как нам и надо. Методом тыка также удалось выяснить, что значение var topPadding = 7 делает отступ модуля (когда он в движении) от верхней границы окна браузера, а marginTop: 15 - это отступ модуля (в статичном положении) от верхнего предшествующего ему модуля.
Вместо рекламы подобным путем можно выводить все что угодно, например, формы подписки, контактов и другую важную информацию!

Возможно эта инструкция кому-то поможет и сэкономит драгоценное время!
*

kaaaaaljan

  • Осваиваюсь на форуме
  • 27
  • 0 / 0
  • прошу не судить меня строго
Ничего себе, завтра опробую на Joomla 2.5

Интересно почему ещё не создали готового решения по плавающему модулю, вроде бы актуально и вещь нужная. Все вот так вот приходится, через код впаивать

Автору предыдущего поста респект и однозначный плюс в карму ^-^
*

kaaaaaljan

  • Осваиваюсь на форуме
  • 27
  • 0 / 0
  • прошу не судить меня строго
вспомнил через месяц, только что попробовал на Joomla 2.5

Все Работает ^-^ ^-^ ^-^

Шикарно))))
*

Good_user

  • Захожу иногда
  • 149
  • 5 / 1
kaaaaaljan, спасибо) Первый ++++ :-)
Да сам удивляюсь, почему до сих пор нет нормальных готовых плавающих модулей)
*

Jokerrs

  • Захожу иногда
  • 94
  • 0 / 0
kaaaaaljan, спасибо) Первый ++++ :-)
Да сам удивляюсь, почему до сих пор нет нормальных готовых плавающих модулей)
Почему у меня модуль не фиксируется в нижнем положении?
_________________________________
Разобрался сам, все работает отлично.
« Последнее редактирование: 03.06.2014, 16:47:26 от Jokerrs »
*

jan_dax

  • Захожу иногда
  • 70
  • 2 / 4
Почему у меня модуль не фиксируется в нижнем положении?
_________________________________
Разобрался сам, все работает отлично.

Подскажите, каким образом решили данную проблему? Спасибо
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как сделать?

Автор Twins

Ответов: 3
Просмотров: 1471
Последний ответ 01.07.2021, 13:11:51
от xpank
Как сделать кнопку формы аккаунта?

Автор Evgen Kulibin

Ответов: 0
Просмотров: 675
Последний ответ 22.04.2021, 22:15:06
от Evgen Kulibin
Как сделать плавающий модуль?

Автор THeCMeX

Ответов: 2
Просмотров: 768
Последний ответ 08.03.2021, 22:21:01
от Flexderection
[Решено] Как сделать чтобы фотография открылась в отдельном окне?

Автор a-two

Ответов: 11
Просмотров: 1276
Последний ответ 03.11.2020, 16:57:40
от Nikolay89
Исчезает блок с видео

Автор diana1975

Ответов: 14
Просмотров: 1266
Последний ответ 11.12.2019, 10:29:55
от sivers