Как сделать адаптивные кнопки социальных сетей?

Question

[AleksMedovnik]

Скачал код для добавления кнопок соц. сетей

<div class="pluso" data-background="transparent" data-options="big,round,multiline,vertical,nocounter,theme=04" data-services="vkontakte,odnoklassniki,facebook,twitter,google,moimir,email,print"></div>

(Js- код я здесь не привожу).
Нужно сделать так, чтобы при уменьшении окна браузера изменялся размер кнопок. Т.е., чтобы data-options="big" менялся на data-options="medium". Я, так понимаю, что сделать это можно с помощью media screen. Но как прописать это в коде?

Comments

[Ankhena]

Посмотрите классы в инспекторе кода и перебейте стили в media

Answer 1

[Eugene Chefranov]

$(window).on('load resize', function () {
    if ($(window).width() > 900) {
       $('.pulso').attr("data-options", "big,round,multiline,vertical,nocounter,theme=04");
    } else {
        $('.pulso').attr("data-options", "medium,round,multiline,vertical,nocounter,theme=04");
    }
})

Comments

[AleksMedovnik]

Как его вставить в Js-код соц. сетей?

(function() {
  if (window.pluso)if (typeof window.pluso.start == "function") return;
  if (window.ifpluso==undefined) { window.ifpluso = 1;
    var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
    s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
    s.src = ('https:' == window.location.protocol ? 'https' : 'http')  + '://share.pluso.ru/pluso-like.js';
    var h=d[g]('body')[0];
    h.appendChild(s);
  }})();

[Eugene Chefranov]

Александр Медовник, после вашего кода

[AleksMedovnik]

Jack Brown, не получается

[Eugene Chefranov]

Александр Медовник, jQuery на сайте подключен?

[AleksMedovnik]

Jack Brown, да

[Eugene Chefranov]

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

Должно быть так:

<div class="pluso" data-background="transparent" data-options="big,round,multiline,vertical,nocounter,theme=04" data-services="vkontakte,odnoklassniki,facebook,twitter,google,moimir,email,print"></div>

<script>
$(document).ready(function () {

$(window).on('load resize', function () {
    if ($(window).width() > 900) {
       $('.pulso').attr("data-options", "big,round,multiline,vertical,nocounter,theme=04");
    } else {
        $('.pulso').attr("data-options", "medium,round,multiline,vertical,nocounter,theme=04");
    }
})

});

</script>

Ваш код

[AleksMedovnik]

Jack Brown, и так не получается))