Плавающий виджет. Версия 2.

Владимир | | CSS, HTML, JavaScript, Web разработка.

floating panel logo

Как и обещал, сегодня выкладываю новую версию плагина для jQuery, позволяющего создать плавающий виджет с кнопками. Но, прежде всего, хочу поблагодарить всех, кто принял участие в обсуждении плагина. Вы очень помогли мне замечаниями и советами!

Сразу приведу ссылку на архив с новой версией.

Source

Изменения и новые возможности

1) Плагин теперь называется floating_panel.

2) Исправлен баг с мерцанием виджета.

Тут отдельное спасибо хочу сказать Александру за подсказку о динамическом изменении свойства position. Подробное описание решения чуть ниже.

3) Добавлена возможность размещать виджет как слева, так и справа от контента страницы.

Для этого используется параметр 'location', которое может принимать значения 'left' или 'right'.

4) Параметр 'fromCenter' теперь указывает расстояние от центра страницы до левого края виджета, а не до его середины.

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

Пример использования

Создаём div, который будет содержать код кнопок виджета.

<div id="twitter_widget"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div>

Подключаем библиотеку jQuery и плагин.

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/floating_panel.jquery.js"></script>
<script type="text/javascript">
$(function() {
  $('#twitter_widget').floating_panel({
		'fromCenter': 520,
		'fromTop': 50,
		'minTop': 200,
		'location': 'left'
	});
});
</script>

В этом примере указаны все параметры, но вам не обязательно их использовать. Т.е. если вас устраивают значения по-умолчанию, вы можете подключить плагин так:

$('#twitter_widget').floating_panel();

Параметры имеют следующее значение.

fromCenter — расстояние от середины страницы до левого края виджета
fromTop — расстояние от виджета до верхней границы видимой части страницы
minTop — расстояние от виджета до начала страницы
location — размещение виджета (left или right)

На рисунке показано их влияние на размещение виджета.

floating panel

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

(function($) {
    $.fn.floating_panel = function(settings) {
    	//значения по-умолчанию
    	var config = {
    		'fromCenter': 580,
    		'fromTop': 50,
    		'minTop': 200,
    		'location': 'left'
    	};
    	//если пользователь указал свои параметры, то используем их
        if (settings) $.extend(config, settings);

    	var element = $(this);
    	
    	var curWindow = $(window);
    	//рассчитываем смещение от левого края окна браузера
    	if ('left' == config.location) {
    		var elementLeft = curWindow.width() / 2 - config.fromCenter;
    	}
    	else {
    		var elementLeft = curWindow.width() / 2 + config.fromCenter;
    	}
		element.css({'left':elementLeft});
    	updateElement();
    	
    	//изменяем положения виджета при прокрутке страницы 
    	curWindow.scroll(function() {
   			updateElement();
    	});
    	
    	function updateElement() {
    		//расстояние от начала страницы до верха её видимой части
    		var windowTop = curWindow.scrollTop();
    		if (windowTop + config.fromTop < config.minTop) {
    			//виджет нужно позиционировать абсолютно
    			if ('absolute' != element.css('position')) {
    				element.css('position', 'absolute');
    				element.css({'top':config.minTop});
    			}
    		} else {
    			//позиционируем виджет фиксированно
    			if ('fixed' != element.css('position')) {
    				element.css('position', 'fixed');
    				element.css({'top':config.fromTop});
    			}
    		}
    	}
    };
})(jQuery);

По сравнению с предыдущей версией немного изменился принцип работы. Раньше для перемещения виджета плагин постоянно изменял его свойство top, что и приводило к мерцаниям при прокрутке страницы.

Теперь используется два режима позиционирования. Если расстояние от виджета до начала страницы меньше значения, указанного в параметре minTop, то виджет позиционируется абсолютно (position: absolute), а значение свойства top выствляется равным minTop.

В противном случае виджет позиционируется фиксировано (position: fixed), а свойству top присваивается значение fromTop.

Идея заключается в том, чтобы как можно реже изменять CSS свойства с помощью JS кода. Поэтому перед изменением свойства position проверяется его значение (строки 36 и 42) и изменение происходит только если текущее значение не соответствует новому. Т.е. при прокрутке страницы это свойство будет изменяться только один раз.

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

  • Александр

    Теперь нормально.
    Только напрягает, что вы используете разные нотации для переменных (горбатую fromCenter и через подчёркивание floating_panel). Некрасиво. Для многих это будет необработанным камнем в их идеальных системах.

    • Обычно я стараюсь использовать CamelCase. Но желательно чтобы имя плагина совпадало и именем файла, а имя файла я разделил подчеркиванием. В общем, наверное, вы правы, учту на будущее.

  • Александр

    Теперь нормально.
    Только напрягает, что вы используете разные нотации для переменных (горбатую fromCenter и через подчёркивание floating_panel). Некрасиво. Для многих это будет необработанным камнем в их идеальных системах.

    • Обычно я стараюсь использовать CamelCase. Но желательно чтобы имя плагина совпадало и именем файла, а имя файла я разделил подчеркиванием. В общем, наверное, вы правы, учту на будущее.

  • Serator

    Хм, у сего решения есть один минус. Если разрешения (смотрю реализацию прямо в данной статье) по ширине <1280 px, то блок с id tweetmeme_button (кстати, зачем двойная обертка?) наползает на текст, что очень некрасиво. Возникает это, видимо, из-за использования относительных единиц измерения при верстке макета и абсолютных при позиционирования блока, а изменения этих абсолютных единиц при позиционировании блока по событию resize не предусмотрено (для малых экранов с разрешением <1280 по ширине, тоже).

    • Serator

      Пардон, с id напутал, не туда посмотрел. Id — twitter_widget и двойных оберток там нет, как и события готовности DOM'а, но позиционирование осталось…

  • Serator

    Хм, у сего решения есть один минус. Если разрешения (смотрю реализацию прямо в данной статье) по ширине <1280 px, то блок с id tweetmeme_button (кстати, зачем двойная обертка?) наползает на текст, что очень некрасиво. Возникает это, видимо, из-за использования относительных единиц измерения при верстке макета и абсолютных при позиционирования блока, а изменения этих абсолютных единиц при позиционировании блока по событию resize не предусмотрено (для малых экранов с разрешением <1280 по ширине, тоже).

    • Serator

      Пардон, с id напутал, не туда посмотрел. Id — twitter_widget и двойных оберток там нет, как и события готовности DOM'а, но позиционирование осталось…

  • Serator

    Ну и в конкретно данной реализации не вижу смысла ждать события load, дабы показать сей виджет. По готовности DOM'а было бы побыстрее…

  • Serator

    Ну и в конкретно данной реализации не вижу смысла ждать события load, дабы показать сей виджет. По готовности DOM'а было бы побыстрее…

  • А мне больше нравится, когда виджет плавно перемещается за скроллером. Например как на css-tricks. Там же есть ссылки на другие реализации плавающего меню.

  • А мне больше нравится, когда виджет плавно перемещается за скроллером. Например как на css-tricks. Там же есть ссылки на другие реализации плавающего меню.

  • Теперь намного лучше, круто что есть возможность разместить справа!
    И как уже было упомянуто, стиль переменных, стоит делать одинаковым — бросается в глаза, а так все супер!

  • Теперь намного лучше, круто что есть возможность разместить справа!
    И как уже было упомянуто, стиль переменных, стоит делать одинаковым — бросается в глаза, а так все супер!

  • Сейчас совсем другое дело! Отлично тепеь смотрицца! Спасибо за плагтн, буду пользоваться!

  • Сейчас совсем другое дело! Отлично тепеь смотрицца! Спасибо за плагтн, буду пользоваться!

  • Насчёт ширины страницы я согласен, это недостаток, но как побороть его не представляю. Если контент страницы имеет ширину, например, 960px и нужна поддержка разрешения 1024х786, то места для виджета попросту нет. Он либо окажется над контентом страницы, либо за пределами экрана. Оба варианта плохие. На мой взгляд, тут веб мастер должен принимать решение.

    Пример на css-tricks просто отличный. Но я не хотел использовать анимацию. Мне кажется, она немного отвлекает внимание от чтения текста. Хотя, наверное, это дело вкуса.

    • Правильно, не надо мерцаний никаких и анимации, так как, если почитать Якоба Нильсена, то это первое что вызывает отвращение у пользователя (при условии что рядом с текстом что-то мерцает).

  • Насчёт ширины страницы я согласен, это недостаток, но как побороть его не представляю. Если контент страницы имеет ширину, например, 960px и нужна поддержка разрешения 1024х786, то места для виджета попросту нет. Он либо окажется над контентом страницы, либо за пределами экрана. Оба варианта плохие. На мой взгляд, тут веб мастер должен принимать решение.

    Пример на css-tricks просто отличный. Но я не хотел использовать анимацию. Мне кажется, она немного отвлекает внимание от чтения текста. Хотя, наверное, это дело вкуса.

    • Правильно, не надо мерцаний никаких и анимации, так как, если почитать Якоба Нильсена, то это первое что вызывает отвращение у пользователя (при условии что рядом с текстом что-то мерцает).

  • И большое спасибо всем за отзывы! 🙂

  • И большое спасибо всем за отзывы! 🙂

  • отличный плагин, но у меня есть еще одно предложение! По-моему лучше было бы если бы панель начинала спускаться с самого начала скролинга!

    • Спасибо за предложение! Но тут сложно предугадать насколько посетитель сдвинет страницу, и, соответственно, не понятно на сколько нужно сдвинуть виджет. А если перемещать его по каждому событию scroll, то возникают мерцания.

  • отличный плагин, но у меня есть еще одно предложение! По-моему лучше было бы если бы панель начинала спускаться с самого начала скролинга!

    • Спасибо за предложение! Но тут сложно предугадать насколько посетитель сдвинет страницу, и, соответственно, не понятно на сколько нужно сдвинуть виджет. А если перемещать его по каждому событию scroll, то возникают мерцания.

  • Мне ваш блог нравится именно потому, что многие ваши публикации могут использовать люди не особо разбирающиеся в программировании. Давно искал человека, который просто и понятно обяснит как сделать плавающую кнопку, спасибо вам 🙂

  • Мне ваш блог нравится именно потому, что многие ваши публикации могут использовать люди не особо разбирающиеся в программировании. Давно искал человека, который просто и понятно обяснит как сделать плавающую кнопку, спасибо вам 🙂

  • Serator

    Вот еще одна интересна реализация похожего решения. В качестве виджета (по терминологии сего ресурса) используется меню навигации.

    + нет проблем с шириной страницы.
    — заметны тормоза при скроллинге в Fx 3.6.3, ибо еще нет аппаратного ускорения, а на моей машинке и быть не может.

    • При таком размещении можно попробовать с прозрачностью поиграться. Например, как здесь (верхнее меню).

  • Serator

    Вот еще одна интересна реализация похожего решения. В качестве виджета (по терминологии сего ресурса) используется меню навигации.

    + нет проблем с шириной страницы.
    — заметны тормоза при скроллинге в Fx 3.6.3, ибо еще нет аппаратного ускорения, а на моей машинке и быть не может.

    • При таком размещении можно попробовать с прозрачностью поиграться. Например, как здесь (верхнее меню).

  • Классный плагин, спасибо огромное! Прикрутил себе, здорово!

    • Пожалуйста! Если будут проблемы, пишите. Буду новые версии выпускать 🙂

  • Классный плагин, спасибо огромное! Прикрутил себе, здорово!

    • Пожалуйста! Если будут проблемы, пишите. Буду новые версии выпускать 🙂

  • Сергей

    плагин вполне, только в IE 6 не работает, можно как-то прикрутить фиксацию для него?

    • Спасибо за замечание, я потестирую. Если не сложно, вышлите, пожалуйста, скриншот.

  • Сергей

    плагин вполне, только в IE 6 не работает, можно как-то прикрутить фиксацию для него?

    • Спасибо за замечание, я потестирую. Если не сложно, вышлите, пожалуйста, скриншот.

  • Сергей

    добрый…
    там даже скрин не нужен, ИЕ6 не поддерживает position:fixed …

  • Сергей

    добрый…
    там даже скрин не нужен, ИЕ6 не поддерживает position:fixed …

  • Сергей

    ps видел пару вариантов исправление через абсолютное позиционирование, но как прикрутить не знаю…

    • Прикрутить не проблема… Но дело в том, что в тех решениях абсолютное позиционирование используется вместе с css expression, т.е. js код внутри css стилей. А когда я сделал первую версию этого плагина, только на js, виджет мерцал при прокрутке странице. Так что очень хотелось бы избежать использования expression…

      В любом случае, постараюсь что-то придумать 😉

  • Сергей

    ps видел пару вариантов исправление через абсолютное позиционирование, но как прикрутить не знаю…

    • Прикрутить не проблема… Но дело в том, что в тех решениях абсолютное позиционирование используется вместе с css expression, т.е. js код внутри css стилей. А когда я сделал первую версию этого плагина, только на js, виджет мерцал при прокрутке странице. Так что очень хотелось бы избежать использования expression…

      В любом случае, постараюсь что-то придумать 😉

  • Сергей

    может поставить ифик? сначала определяет браузер и версию, потом для ие6 (хоть и с мерцанием), ну а для остальных оставить как есть….
    что-то типа
    if ($.browser.msie && parseInt($.browser.version) < 7){
    ………….
    }else{
    element.css('position', 'fixed');
    element.css({'top':config.fromTop});
    }

    • Serator

      Условные комментарии (conditional comments) в помощь:


      Special instructions for IE 6 here

      почитать об этом

      • Внешние стили — за пределами плагина. Мне хотелось, чтобы виджет работал без дополнительных css файлов.

        • Serator

          Тогда уже через поддержку самого стиля, к примеру:


          var
          postitionFixed=(function(){
          var
          div=document.createElement('div');
          div.style.position='fixed';
          if(div.style.position!==''){
          delete div;
          return true;
          }
          return false;
          }());

          аль через:

          window.getComputedStyle(elem,null).getPropertyValue('position')

          где elem — элемент с position:fixed,

          аль что-то свое 🙂

          (в конкретно ie6 не проверял, но должно работать, нужно тестировать, а под рукой только Fx 🙂 )

        • Аналогично 🙂 С тестированием в ie6 проблемы. Есть программка IETester, но я не уверен, что она полностью поддерживает JS, поэтому приходится искать комп. с этим «продвинутым» браузером 🙂

    • Спасибо, я так и сделал 🙂
      В ближайшее время выложу обновление.

  • Сергей

    может поставить ифик? сначала определяет браузер и версию, потом для ие6 (хоть и с мерцанием), ну а для остальных оставить как есть….
    что-то типа
    if ($.browser.msie && parseInt($.browser.version) < 7){
    ………….
    }else{
    element.css('position', 'fixed');
    element.css({'top':config.fromTop});
    }

    • Serator

      Условные комментарии (conditional comments) в помощь:


      Special instructions for IE 6 here

      почитать об этом

      • Внешние стили — за пределами плагина. Мне хотелось, чтобы виджет работал без дополнительных css файлов.

        • Serator

          Тогда уже через поддержку самого стиля, к примеру:


          var
          postitionFixed=(function(){
          var
          div=document.createElement('div');
          div.style.position='fixed';
          if(div.style.position!==''){
          delete div;
          return true;
          }
          return false;
          }());

          аль через:

          window.getComputedStyle(elem,null).getPropertyValue('position')

          где elem — элемент с position:fixed,

          аль что-то свое 🙂

          (в конкретно ie6 не проверял, но должно работать, нужно тестировать, а под рукой только Fx 🙂 )

        • Аналогично 🙂 С тестированием в ie6 проблемы. Есть программка IETester, но я не уверен, что она полностью поддерживает JS, поэтому приходится искать комп. с этим «продвинутым» браузером 🙂

    • Спасибо, я так и сделал 🙂
      В ближайшее время выложу обновление.

  • Сергей

    Добрый день, Владимир.
    С прошедшими…
    может я потестирую в ие6?
    можно скинуть плагин на мыло gitas@i.ua

  • simplecoding

    Большое спасибо за предложение. Правда я уже выложил версию с поддержкой ie6. Но все-равно, буду благодарен, если вы потестируете.

    P.S. И вас с праздниками!

  • Lazy_elf

    Спасибо бро, выручил!

  • Eddifisher

    Неплохая вещь, но есть косяк, когда меняешь ширину браузера, то блок наезжает на текст, а это не очень приятно…

  • Babaev-2010

    Помогите пожалуйста. Всё подключил. Все добавил. Пути вроде все правильно указал. Картинка при прокрутке не остается на своем месте( в чем проблем?
    Это в хеад все.

    jQuery(function() {
    * jQuery('#twitter_widget').floating_panel({
    'fromCenter': 520,
    'fromTop': 50,
    'minTop': 200,
    'location': 'left'
    });
    });

    Это в боди

    • Уберите звездочку из строки
      * jQuery('#twitter_widget').floating_panel({

      Если не поможет, пришлите мне ссылку на ваш сайт, что бы я мог посмотреть в чем дело.

  • porter

    а как вам такой вариант http://html-css.info/uploads/2010/06/position-fixed-jquery.html ?

    • Очень хорошо получилось!

      Мерцания не заметны и движется блок плавно. В общем, удачный пример
      использования animate.

  • Chaos_id

    Установите разрешение в 1024х768 и обновите страницу или просто уменьшите размер окна и обновите)
    При позиционировании справа тоже вообще ничего нормального не получится без правки «скрипта». Удалите пост, чтобы люди время зря не тратили. В общем лажа полная, а не виджет.

    • Если у вас виджет выходит за рамки окна браузера измените параметр 'fromCenter': 520 (он для этих целей и предназначен).

      • Chaos_id

        уменьшите окно браузера находясь на этом блоге до такого предела, чтобы виджет находил на текст, обновите окно — результат: полное отсутствие виджета или он будет обрезан (смотря насколько заходил на контент перед обновлением)
        отступы отступами, а это просто бага — смиритесь) а лучше исправьте. ну или я слишком много прошу, достаточно поставить виджет по центру экрана и не ломать себе голову как это будет выглядеть на 15-шке любого ноутбука))))

        • Я не совсем понимаю. Этот виджет носит исключительно вспомогательный характер, он не является основным содержимым сайта.

          Т.е. если основное содержимое страницы занимает весь экран, то виджет виден не будет, т.к. он не должен мешать просматривать это содержимое. Вообще предполагалось, что сейчас у многих сайтов контент центрируется и справа и слева появляется пустое пространство. Это пространство я и хотел использовать.

          Идея, кстати, не оригинальная. Посмотрите, например, на mashable.com (любой пост). Слева находится похожий виджет и он также исчезает за пределами окна при ресайсе. Горизонтальная прокрутка появляется только когда в окне браузера перестает помещаться основной контент.

        • Chaos_id

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

        • Да, все правильно 😉

  • ВоВка

    приветствую, а в Опере у вас нормально работает?
    в фаерфоксе все ок, но в опере сначала меню есть когда проворачиваешь немного и включается тот второй механизм позиционирования (когда больше minTop) то меню просто пропадает, пока не разобрался в чем дело.

    • Я не смог воспроизвести эту ошибку (использовал последнюю версию оперы).

  • Alxi

    А есть ли способ просто оцентровать по центру страницы, без вычисления отступа влево, или вправо?
    У меня по какой-то причине — то, что ровно в опере, или хроме слишком сильно уезжает в IE.

    • Можно. Используйте
      'fromCenter': 0,
      только в этом случает виджет будет находится над контентом страницы.

      • Alxi

        Методом тыка сделал так:

        (function($) {
        $.fn.floating_panel = function(settings) {
        //значения по-умолчанию

        var config = {
        'fromTop': -3,
        'minTop': 175,
        };

        var element = $(this);
        var curWindow = $(window);

        curWindow.scroll(function() {
        updateElement();
        });

        function updateElement() {
        //расстояние от начала страницы до верха её видимой части

        var windowTop = curWindow.scrollTop();
        if (windowTop + config.fromTop < config.minTop) {
        //виджет нужно позиционировать абсолютно

        if ('absolute' != element.css('position')) {
        element.css('position', 'absolute');
        element.css({'top':config.minTop});
        }
        } else {
        //позиционируем виджет фиксированно
        //ie6 не поддерживает фиксированное позиционирование

        if ($.browser.msie && $.browser.version.substr(0,1)<7) {
        element.css({'top': windowTop + config.fromTop + "px"});
        }
        else {
        if ('fixed' != element.css('position')) {
        element.css('position', 'fixed');
        element.css({'top':config.fromTop});
        }
        }
        }
        }
        };
        })(jQuery);

        Помещаю нужный мне виджет в таблицу.
        (absolute почему-то мешает отцентровывать по горизонтали)
        В итоге таблица с 3я столбцами с шириной 100%. В центральном столбце нужный мне виджет (в моём случае это "плавающее" меню).
        Всё работает, всё, что нужно по центру, при изменении размера окна ведёт себя правильно.

        Спасибо за урок и за ответ.

        • Вообще странно. position:absolute позволяет разместить виджет в любой точке экрана, в т.ч. и по центру. Но, раз вы получили приемлемое решение, то мои поздравления 🙂

        • 4igo4ek

          Спасибо большое. Классный скрипт. У меня правда возникла проблема с позиционированием по горизонтали — мне необходимо было унаследовать значение родительского элемента, а не позиционировать от левой, правой или центральной части. Но я заюзал на 54 строчке скрипта вот это:  element.css({'left':'inherit'}); и заработало везде кроме старого IE6. 
          Вот пример: прокрутке элементы управления плавают. 
          http://patefon.org/the-beatles

        • Иван

          а как сделать так, чтобы элемент летал поверх остальной верстки? он у меня под ней(+ можно ли сделать кнопку закрыть?

        • Используйте z-index — значение должно быть больше чем у всех остальных элементов на странице.

          Кнопка закрыть — да, можно. Добавьте ссылку в виджет и установите для неё обработчик в котором установите для всего виджета display:none

        • Виктор

          Подскажите, пожалуйста, где должен лежать файл floating_panel.jquery.js и куда вписать $('#twitter_widget').floating_panel(); В футер, functions.php или еще куда??

        • Если вы подключали файл файл так:

          то файл должен быть в папке js.

          $('#twitter_widget').floating_panel();
          должен быть внутри тега script. Сделать это можно несколькими способами, самый простой — добавить в футер.

        • Виктор

          Здравствуйте. Не стал я экспериментировать с function.php и get_template_directory_uri() . Загнал все в футер примерно так как вы сказали. Собственно ничего не получилось.
          $('#twitter_widget').floating_panel();
          Я так понимаю это не то чтобы плагин, а некоторый пример, способ выведения чего-то. Подключение floating_panel.jquery.js собственно не дает вообще ничего пока не дописать нутро. То что я хотел вставить и как оно должно отображаться и тд.. То бишь допилить двумя страницами кода, ну может чуть меньше. А поскольку в этом 0, то потуги тщетны?

          07.05.2016, 23:07, «Disqus» :

        • Добрый день. А можете показать ваш сайт? Большинство ошибок довольно быстро решаются если посмотреть на разметку страницы и JS ошибки с помощью инструментов chrome.

        • Виктор

          Сайт Obinstrumente.ru Хочется расширить функциональное пространство. Например плавающее окно с правой стороны у линии прокрутки с дополнительными ссылками на тематические статьи. Можно, конечно, убрать рубрику «Популярное» и туда что-нибудь впихнуть.. Но и это не особенно понимаю как сделать. По всей видимости нужно физически в шаблоне ее найти и удалить.
          10.05.2016, 19:01, «Disqus» :

        • На сколько я вижу, floating_panel.jquery.js вообще не подключен.

          Чтобы стало понятнее, попробуйте на каком-нибудь сервисе вроде jsfiddle создать тестовую страничку с плавающим виджетом. Если возникнут проблемы, присылайте мне ссылку на этот jsfiddle, я смогу его отредактировать.

        • Виктор

          К сожалению не разобрался я с выше указанным сервисом. Вставил в одно окно код плагина в другое Вами предложенный div указал подключение библиотеки квери 2.2.0 , и ничего хз.. До сего момента мне казалось, что я в этом хоть что-то смыслю :))

        • Тогда посмотрите мой jsfiddle — https://jsfiddle.net/vladimir_s/y9et0m0n/

        • Виктор

          Спасибо, за демонстрацию. Был удивлен вашим ответом, и охота Вас со мной возиться 🙂 А что можно вставить вместо фразы «Плавающий виджет»? Ссылки и фото это понятно, а код java тоже можно впихнуть? А если он составной из двух частей первая из div вторая, в футер. Такое реально скомпоновать?
          13.05.2016, 19:08, «Disqus» :

        • Вставить можно любую html разметку, главное «завернуть» её в div к которому будет подключаться плагин.

        • Виктор

          Здравствуйте. Скажите, если запихнуть в футер такую конструкцию

          $(function() {

          $('#twitter_widget').floating_panel({

          'fromCenter': 520,

          'fromTop': 50,

          'minTop': 200,

          'location': 'left'

          });

          });

          а ниже
          ПЛАГИН

          То где-то ж оно должно вылезти?? Ан нет, не появилось..

        • Вставьте

          ПЛАГИН

          внутрь страницы (желательно ближе к началу), а не в футер.

        • Виктор

          Куда только не втыкал. Не шевелится. В header.php появляется неподвижное слово в шапке. В основной шаблон index.php вообще следов не найти. в page.php так же не понятно где отображается. single.php появляется между шапкой и содержанием страницы, но не двигается.. Похоже не судьба..
          16.05.2016, 16:10, «Disqus» :

        • Самый простой способ проверить — посмотреть исходный код страницы (в браузере) и поиском поискать вставленный блок и скрипты.

        • Виктор

          Еще раз здравствуйте. Может подскажете плагин оболочку в который можно вставить любой виджет и вывести в любом месте да так чтобы еще и плавал?? Проще объяснит принтскрин. У сайта куча не задействованного места. Хочу им воспользоваться
          07.05.2016, 23:07, «Disqus» :

        • Таких плагинов я не видел. Дело в том, что размещение и размеры виджетов сильно зависят от темы WP, поэтому проблематично сделать такой универсальный плагин.

  • choo

    помогите поставить)) в какие файлы прописывать?

  • choo

    помогите поставить, в какие фалы прописывать?)

  • choo

    Всем спасибо! Додумался сам методом проб и ошибок) Вот реализация с facebook like box: http://sher.uz/

  • Serega

    Очень круто, спасибо большое за ваш сайт!