Адаптивный виджет ВК

vkwi

Виджет ВК достаточно прост, нет большого количества настроек, легко установить.
НО! Есть проблема с адаптивностью под резиновый шаблон.
Если мы просто загружаем страницу, то в принципе с помощью JS можно загрузить нужный нам по размеру фрейм, либо можно поставить width: «auto» — у меня он правда не заработал.

JS для открытия нужного размера виджета:
<script type="text/javascript" src="//vk.com/js/api/openapi.js?127"></script>
 
 <center> 
 <div style="margin:0 auto;width:100%;background-color:#507298;"> 
  <div id="vk_groups"></div>
 </div>    
 </center>
 
 <script type="text/javascript"> 
var iwid = ''; var vkheight = '';
 
 $(document).ready(function (){ 
var page_w = $(window).width();
 if (page_w > 1024) {iwid = 1024; ilin = 5; vkheight = 482; }
 if (page_w <= 1024 & page_w > 824) {iwid = 824; vkheight = 476; }
 if (page_w <= 824 & page_w > 600) {iwid = 600; vkheight = 370; }
 if (page_w <= 600 & page_w > 455) {iwid = 455; vkheight = 370; }
 if (page_w <= 455 & page_w > 308) {iwid = 308; vkheight = 370; }
 if (page_w <= 308) {iwid = 164; vkheight = 530; }

 VK.Widgets.Group("vk_groups", {redesign: 1, mode: 3, 
width: "'+iwid+'", height: "'+vkheight+'", 
color1: '507298', color2: '000000', color3: 'FFFFFF'}, 20003922);
  
 }); 
</script> 




Однако при изменения размеров окна виджет у нас остается неизменным, вроде не так страшно, ведь при загрузке хотя бы уже имеем адаптированный вид.
Но все же есть решение, немного странное, но работающее:
1. Ставим наш виджет и открываем в браузере
2. Открываем средство разработчика и копируем <iframe>
3. Работаем уже с тегом <iframe>, в нем есть данные title и наименование сайта — смене их функционал не пропадает. Еще интересно то что подключенная библиотека JS нам не нужна становится.

Снова код JS:
<style type="text/css">
#vk_groups{
width:1024px;
height:482px;
margin:0 auto;
}
@media (max-width: 1024px) {
#vk_groups{
display:block;
width:824px;
height:476px;
margin:0 auto;
}
}

@media (max-width: 824px) {}/*и так далее*/
</style>   
		
		<center>		
<div style="margin:0 auto;width:100%;background-color:#507298;">	
			<div id="vk_groups"></div>
</div>		
		
		
	</center>
	
<script type="text/javascript">	
var iwid = ''; var vkheight = '';

	
	$(document).ready(function (){	
var page_w = $(window).width();
	if (page_w > 1024) {iwid = 1024; vkheight = 482; }
	if (page_w <= 1024 & page_w > 824) {iwid = 824; vkheight = 476; }
	if (page_w <= 824 & page_w > 600) {iwid = 600; vkheight = 370; }
	if (page_w <= 600 & page_w > 455) {iwid = 455; vkheight = 370; }
	if (page_w <= 455 & page_w > 308) {iwid = 308; vkheight = 370; }
	if (page_w <= 308) {iwid = 164; vkheight = 530; }

	
	$('#vk_groups').append('<iframe id="vkwidget1" width="'+iwid+'" height="'+vkheight+'" 
frameborder="0" name="fXDe11be" src="http://vk.com/widget_community.php?
app=0&width='+iwid+'px&_ver=1&gid=1210518&mode=0&color1=507298
&color2=000000&color3=FFFFFF&class_name=&height='+vkheight+'
&url=http%3A%2F%2Fave.fug%2F&referrer=&title=aveave" 
scrolling="no" style="overflow: hidden; height: '+vkheight+'px;"></iframe>')		
	});
	

	$(window).resize(function (){
var page_w = $(window).width();	
	if (page_w > 1024) {iwid = 1024; vkheight = 482; }
	if (page_w <= 1024 & page_w > 824) {iwid = 824; vkheight = 476; }
	if (page_w <= 824 & page_w > 600) {iwid = 600; vkheight = 370; }
	if (page_w <= 600 & page_w > 455) {iwid = 455; vkheight = 370; }
	if (page_w <= 455 & page_w > 308) {iwid = 308; vkheight = 370; }
	if (page_w <= 308) {iwid = 164; vkheight = 530; }
	


var desivk = document.getElementById('vk_groups');

	
	desivk.innerHTML =	'<iframe id="vkwidget1" width="'+iwid+'" height="'+vkheight+'" 
frameborder="0" name="fXDe11be" src="http://vk.com/widget_community.php?
app=0&width='+iwid+'px&_ver=1&gid=1210518&mode=0&color1=507298
&color2=000000&color3=FFFFFF&class_name=&height='+vkheight+'
&url=http%3A%2F%2Fave.aug%2F&referrer=&title=aveave"
 scrolling="no" style="overflow: hidden; height: '+vkheight+'px;"></iframe>';	
	});
</script>	




Оставить комментарий