Плавающий модуль для левой и правой колонок сайта

Зачем нужен плавающий или фиксируемый модуль, думаю, объяснять не надо, но что интересно, что очень мало, кто пишет о фиксируемом - плавающем модуле, использует его на своем сайте. Этот модуль хорошо поставить под рекламу партнерской программы или блок популярных статей на партнерские программы.

В общем, разобраться, для чего он нужен не сложно, но если соберетесь ставить под рекламу Адсенс или Яндекс.Директ, то узнайте сначала, как они относятся к такой технике показа их рекламы. Агрессивная реклама им может не понравиться.
Теперь, когда разобрались, зачем оно нам надо приступим к установке фиксируемого - плавающего модуля на сайт.

После обновления Joomla до 3.4.* и выше, подключать библиотеку не надо.

Для установки плавающего модуля нам надо будет подключить библиотеку jQuery.
Для этого в шаблоне сайта между <head></head>, а точнее перед закрывающимся тегом </head> добавляем прямую ссылку на библиотеку в виде кода:

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

Или скачиваем библиотеку, размещаем ее в папке librari-js на сайте и указываем на нее путь в виде:

<script src="/librari-js/jquery.min.js" type="text/javascript"></script>

Оба способа работают одинаково, но если сайт с библиотекой работать не будет, то и плавающий модуль перестанет работать. Я все библиотеки храню на сайтах, потому что уже сталкивался с подобными ситуациями, когда клиенты жаловались, что на сайте переставали работать модули.

Подключить библиотеку jQuery, когда на сайте уже есть что-то подобное, может вызвать конфликт интересов библиотек, поэтому опишу два варианта подключения скриптов нашего плавающего модуля.
Первый будет чистым, он будет работать на сайтах, где нет других библиотек и нет конфликтов.
Второй пример подойдет для сайтов, где уже подключены какие-то библиотеки jQuery.

Сначала для обоих вариантов пропишем стиль нашему модулю, где стиль будет храниться, это ваш выбор, главное чтобы он тоже был подключен на сайте. В файле moduly.css или template.css добавляем следующие строки

#left_4 {
    margin:0;
    padding:0;
    width:307px;
}
/*-----------plav modul---------------*/
#fixed {
margin:7px 0;
    margin:10px 0;
    padding:0;
    width:307px;
background: url(../images/shov-vert.png) 50% 0 repeat-y;
    border: 1px solid #9A8F6B;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    box-shadow: 0 0 8px #787878;
}
#plav_mod_titl {
margin:10px 0 15px 27px;
    padding: 7px 0;
    width:250px;
    min-height:30px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:18px;
    text-align:center;
    color: #32160A;
    border: 1px solid #9A8F6B;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    box-shadow: 0 0 8px #787878;
background: url(../images/sd_menu.png) repeat;
}
#plav_txt {
margin:0 24px 10px 24px;
    padding:0;
}

Как Вы заметили, для него я выделил отдельную позицию на сайте left_4 и прописал ей свой стиль. Сам же стиль для плавающего модуля находится в #fixed.

Теперь рассмотрим код первого варианта:

<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">
В этом месте будет находиться Ваш новостной блок или рабочий скрипт с выводом рекламы.
</div>

Во втором варианте мы произведем некоторые замены, лучше их делать в текстовом редакторе Notepad, где все символы $ мы заменим на jQuery.
Так будет выглядеть наш скрипт после замены:

<script type="text/javascript">// <![CDATA[
jQuery(function() {
        var offset = jQuery("#fixed").offset();
        var topPadding = 7;
        jQuery(window).scroll(function() {
            if (jQuery(window).scrollTop() > offset.top) {
                jQuery("#fixed").stop().animate({marginTop: jQuery(window).scrollTop() - offset.top + topPadding});
            }
            else {jQuery("#fixed").stop().animate({marginTop: 7});};});
    });
// ]]></script>

Но после произведенной замены нам обязательно надо будет добавить следующий скрипт:

<script type="text/javascript">// <![CDATA[
jQuery.noConflict();
(function($){})(jQuery);
// ]]></script>

Где все это разместить.

В Joomle, заходим в Расширения - Менеджер модулей и создаем новый модуль Html-код. Выбираем для него позицию left_5 (у меня для нее есть свой стиль, у Вас это будет Ваша позиция с Вашим стилем). Открываем редактор Html и вставляем в него наши скрипты:

<div>
<script type="text/javascript">// <![CDATA[
jQuery(function() {
        var offset = jQuery("#fixed").offset();
        var topPadding = 15;
        jQuery(window).scroll(function() {
            if (jQuery(window).scrollTop() > offset.top) {
                jQuery("#fixed").stop().animate({marginTop: jQuery(window).scrollTop() - offset.top + topPadding});
            }
            else {jQuery("#fixed").stop().animate({marginTop: 12});};});
    });
// ]]></script>
<script type="text/javascript">// <![CDATA[
jQuery.noConflict();
(function($){})(jQuery);
// ]]></script>
</div>
<div id="fixed">
<div id="plav_mod_titl">Плавающий модуль</div>
<div id="plav_txt">Здесь должен быть Ваш фрейм, скрипт или блок рекламы</div>
</div>

Сохраняем, сохраняем и смотрим, как оно работает.
Проверять работу надо на страницах, где есть ротаторы, карусели или другие модули, которые используют библиотеку jQuery.  

Параметрами var topPadding и marginTop в скрипте можно регулировать отступы модуля, так же используйте margin и padding в таблицах стилей.

Мы делаем недорогие адаптивные сайты для бизнеса, а как на них зарабатывать в интернете Вы найдете в разделе Бизнес в интернете.

Яндекс.Метрика
© 2014-2017 "Сашкин Дом" Все права защищены
"Сашкин Дом" - недорогие сайты и сопровождение