Как адаптировать vk виджет

@Cdelphi78 · Регистрация: 21.02.2014

Студворк — интернет-сервис помощи студентам

Здравсвуйте! Как мне адаптировать vk виджет я так понимаю внутрь фрейма мне не добраться?

@sad67man · 05.04.2017, 16:19

Cdelphi78, Внутрь ифрейма не добраться. Можно при ресайзе обновлять виджет. Вот я делал на этом сайте. Можно посмотреть как это работает в качестве примера.

@Cdelphi78 · 05.04.2017, 17:25 **[ТС]**

спасибо, было бы неплохо если бы вы код этого виджета скинули))

Добавлено через 55 минут
Подскажите где код достать плз

@mrtoxas · 05.04.2017, 18:04

Cdelphi78, документацию к виджету почитать - не вариант?

width — ширина блока в пикселах. Минимальное значение: 120. При значении "auto" подстраивается под ширину родительского блока.

@Cdelphi78 · 05.04.2017, 19:57 **[ТС]**

mrtoxas, да что вы говорите такое, стоит у меня уже auto результат на картинке выше толку от него

Добавлено через 3 минуты
sad67man, за сколько можете скинуть код???

@mrtoxas · 05.04.2017, 19:58

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

@Cdelphi78 · 05.04.2017, 20:03 **[ТС]**

mrtoxas, https://jsfiddle.net/Cdelphi78/5a9aqmy6/

HTML5
1
2
3
<div class="vk-vidjet">
  <div id="vk_groups"></div>
</div>

JavaScript
1
VK.Widgets.Group("vk_groups", {mode: 3, width: "auto"}, 126457308);

Комментарий модератора

Коды программ должны находиться на форуме! (Правила п.4.11)

@mrtoxas · 05.04.2017, 20:34

Я понял о чем вы - вы хотите сделать резиновый виджет.
Сейчас, при width:auto он адаптивный и откроется нормально при любой ширине экрана\контейнера. Но если надо, чтобы он менялся динамически при изменении ширины окна, это уже делается на JS и стили тут не помогут. Если интересно, я перенесу тему.

@Cdelphi78 · 05.04.2017, 20:39 **[ТС]**

В том том то и дело что он не открывается нормально, смотрите как кнопка уехала, нужно самой кнопке задать auto

@sad67man · 05.04.2017, 22:06

Cdelphi78, Как-то так

CSS
1
2
3
4
5
#vk_groups,#vkwidget1 {
  width:100%!important;
  height:184px;
  overflow:hidden;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
var VK_widget = {
  //настройки
  vk_id: 126457308,
  mode: 3,
  iframeId: 'vkwidget1', //посмотреть в инспекторе id ifrem-а
  containerId: "vk_groups",
  domain: 'fiddle.jshell.net', //прописать домен сайта
 
  //методы
  reload: function() {
    this.iframe = this.iframe || document.getElementById(this.iframeId);
    if (!this.ready || !this.iframe) {
      return false;
    }
    this.iframe.src = "https://vk.com/widget_community.php?" 
      + "width=" + this.container.offsetWidth 
      + "&height=" + this.container.offsetHeight 
      + "&gid=" + this.vk_id 
      + "&mode=" + this.mode 
      + "&url=http%3A%2F%2F" + this.domain;
  },
  init: function() {
    this.container = document.getElementById(this.containerId);
    VK.Widgets.Group(this.containerId, {
      mode: this.mode,
      width: this.container.offsetWidth,
      height: this.container.offsetHeight
    }, this.vk_id);
    this.ready = true;
  }
}
//рисуем виджет
VK_widget.init();
 
//добавляем событие resizeDelay на окончание ресайза
var resizeDelay;
var $window = $(window).resize(function() {
  clearTimeout(resizeDelay);
  resizeDelay = setTimeout(function() {
    $window.trigger('resizeDelay');
  }, 500)
});
 
//вешаем на событие resizeDelay перегрузку виджета
$window.on('resizeDelay', function() {
  VK_widget.reload();
});

https://jsfiddle.net/5a9aqmy6/5/

Добавлено через 15 минут
Что-то я не подумал, вместо домена можно указать location.hostname

Добавлено через 8 минут
Так будет без домена. Если можно модеры поправьте)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var VK_widget = {
  vk_id: 126457308,
  mode: 3,
  iframeId: 'vkwidget1',
  containerId: "vk_groups",
 
  reload: function() {
    this.iframe = this.iframe || document.getElementById(this.iframeId);
    if (!this.ready || !this.iframe) {
      return false;
    }
    this.iframe.src = "https://vk.com/widget_community.php?" 
      + "width=" + this.container.offsetWidth 
      + "&height=" + this.container.offsetHeight 
      + "&gid=" + this.vk_id 
      + "&mode=" + this.mode 
      + "&url=" + location.protocol + "//" + location.hostname;
  },
  init: function() {
    this.container = document.getElementById(this.containerId);
    VK.Widgets.Group(this.containerId, {
      mode: this.mode,
      width: this.container.offsetWidth,
      height: this.container.offsetHeight
    }, this.vk_id);
    this.ready = true;
  }
}

https://jsfiddle.net/5a9aqmy6/6/

@Cdelphi78 · 06.04.2017, 00:20 **[ТС]**

Да все заработало, спасибо большое, то что нужно.

Новые блоги и статьи Все статьи Все блоги /
Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444

	Как адаптировать vk виджет 05.04.2017, 15:33. Показов 3044. Ответов 10 Метки нет (Все метки) Здравсвуйте! Как мне адаптировать vk виджет я так понимаю внутрь фрейма мне не добраться? Миниатюры 0

@sad67man 2603 / 1507 / 689 Регистрация: 23.08.2015 Сообщений: 3,823
	05.04.2017, 16:19
	Cdelphi78, Внутрь ифрейма не добраться. Можно при ресайзе обновлять виджет. Вот я делал на этом сайте. Можно посмотреть как это работает в качестве примера. 1

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	05.04.2017, 17:25 [ТС]
	спасибо, было бы неплохо если бы вы код этого виджета скинули)) Добавлено через 55 минут Подскажите где код достать плз 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	05.04.2017, 19:57 [ТС]
	mrtoxas, да что вы говорите такое, стоит у меня уже auto результат на картинке выше толку от него Добавлено через 3 минуты sad67man, за сколько можете скинуть код??? 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	05.04.2017, 19:58
	Cdelphi78, тогда приведите не картинку, а код, который даст возможность воспроизвести то, что получается у вас на картинке. 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	05.04.2017, 20:34
	Я понял о чем вы - вы хотите сделать резиновый виджет. Сейчас, при width:auto он адаптивный и откроется нормально при любой ширине экрана\контейнера. Но если надо, чтобы он менялся динамически при изменении ширины окна, это уже делается на JS и стили тут не помогут. Если интересно, я перенесу тему. 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	05.04.2017, 20:39 [ТС]
	В том том то и дело что он не открывается нормально, смотрите как кнопка уехала, нужно самой кнопке задать auto Миниатюры 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	06.04.2017, 00:20 [ТС]
	Да все заработало, спасибо большое, то что нужно. 0

Как адаптировать vk виджет

Решение