Как динамически изменить ширину виджета комментариев Вконтакте?
-
Опишите поподробней задачу. Грубо говоря, открыта страничка в браузере, Вы хотите добавить в браузер кнопку, по нажатию на которую все блоки комментариев увеличатся? Или Вы придумали способ внедрения скрипта во ВК и хотите это сделать оттуда?– Михаил МCommented 11 сент. 2013 в 11:53
-
Нет, все просто. Есть виджет комментариев на своем сайте. встроен через JS - и соответственно IFrame. Вот как в Iframe изменить параметры длины. а то при растягивании страницы все сджимается/расжимается, а ширина виджета остается неизменной– postaCommented 11 сент. 2013 в 11:58
-
А там разве не параметрами и настройками приложения задаётся?– dlarchikovCommented 11 сент. 2013 в 12:34
-
в том то и дело, что параметрами задается, просто когда меняешь размер страницы - эти параметры остаются прежними. и виджет вылезает за пределы окна– postaCommented 11 сент. 2013 в 15:07
Добавить комментарий
|
6 ответов
У меня так :
<div width="100%" id="vk_groups"></div>
<script type="text/javascript">
jQuery(document).ready(function(e) {
var size_man = jQuery('#vk_groups').width();
VK.Widgets.Group("vk_groups", {mode: 0, height: "400",width: size_man, color1: 'FFFFFF', color2: '2B587A', color3: '5B7FA6'}, XXXXXXX);
});
</script>
Я просто убрал параметр width из скрипта
VK.Widgets.Comments("vk_comments", {limit: 20, attach: "*"});
и все - виджет стал на 100% по ширине.
Покопавшись в документации, не нашёл конкретного ответа, поэтому придумал данное решение. Может быть не самое лучшее, но с задачей справляется.
HTML:
<div id="vk_comments"></div>
JS:
var globalTimer = null;
window.onload = function() {
// при загрузке устанавливаем параметры по умолчанию
VK.Widgets.Comments("vk_comments", {limit: 5, width: "520", attach: "*"});
};
window.onresize = function () {
//при изменении размеров окна сначала очищаем наш блок с комментариями
document.getElementById('vk_comments').innerHTML = '';
// вызываем через таймер функцию отрисовки (для правки бага с двойной отрисовкой)
clearTimeout(globalTimer);
globalTimer = setTimeout(doneResize, 300);
};
function doneResize(){
//заново инициализируем комментарии с новой шириной
//тут можно придумать зависимость ширины комментариев от ширины чего-нибудь и вставлять вместо 320 любую другую велечину
VK.Widgets.Comments("vk_comments", {limit: 5, width: "320", attach: "*"});
}
Надеюсь суть ясна. Буду рад, если кто расскажет способ получше.
Наверняка кому-то мой ответ поможет. Сделал очень просто
VK.Widgets.Comments("vk_comments", {limit: 5, width: "100%", attach: "*"});
VK.Widgets.Comments("vk_comments", {limit: 5, width: "", attach: "*"});
Вот так очень качественный резиновый стиль
Можно использовать класс (.container) с динамически изменяемой шириной блока, равный ширине страничного документа. При изменении размера окна, виджет перегружается с новым размером по ширине контейнера.
<div width="100%" id="vk_comments"></div>
<script type="text/javascript">
jQuery(document).ready(function(e) {
size_man = $('.container').width();
VK.Widgets.Comments("vk_groups", {mode: 3, height: "400",width: size_man, color1: 'FFFFFF', color2: '2B587A', color3: '5B7FA6'}, xxxxxxxxx);
var globalTimer = null;
window.onresize = function () {
//при изменении размеров окна сначала очищаем наш блок с комментариями
document.getElementById('vk_groups').innerHTML = '';
// вызываем через таймер функцию отрисовки (для правки бага с двойной отрисовкой)
clearTimeout(globalTimer);
globalTimer = setTimeout(doneResize, 300);
// получаю ширину из резинового класса уже после того как размер изменился, DOM сформирована заново
size_man = $('.container').width();
};
function doneResize(){
//заново инициализируем комментарии с новой шириной
VK.Widgets.Comments("vk_comments", {mode: 3, height: "400",width: size_man, color1: 'FFFFFF', color2: '2B587A', color3: '5B7FA6'}, xxxxxxxxx);
}
});
</script>
-
Добро пожаловать на SO. Извиините за замечание, но в данной теме ожидается конкретный ответ на вопрос заданный ТС. "но с учётом своих нужд" - вы можете сами задать вопрос и сами на него ответить с учётом ваших нужд. Так как этот ресурс не работает как привычные форумы, настоятельно рекомендую ознакомится с его механикой в справке или пройти тур, который вам был предложен при регистрации.– 0xdbCommented 6 апр. 2019 в 16:55