Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Изменить размер всех элементов страницы пропорционально размеру окна (https://javascript.ru/forum/events/43945-izmenit-razmer-vsekh-ehlementov-stranicy-proporcionalno-razmeru-okna.html)

nefton 27.12.2013 15:50

Изменить размер всех элементов страницы пропорционально размеру окна
 
Пишу покерный клиент. Сечас стол открывается в новом окне фиксированого размера. Есть ли возможность написать функцию onwindowresize() так, чтоб там перебирались все элементы в документе.

тоесть при онлоад мы сохраняем все отношения ширины окна к высоте и ширине всех элементов.

а потом при ресайз устонавливаем все широты и высоты и положение пропорционально новому размеру окна.

Елементов много, и в процессе разроботки они добавляются/убавляются.
Есть ли возможность перебрать их все чтоб не вручную описывать каждый?

ksa 28.12.2013 15:04

Цитата:

Сообщение от nefton
чтоб там перебирались все элементы в документе

Ну все перебирать точно не нужно... :D
Порой достаточно сделать резиновую верстку.
Если этого мало:
- нужным элементам дать специальный класс
- пробежаться по тем элементам и вычислить их размеры

nefton 29.12.2013 08:25

Table.Init = function (){
	
	//Рисуем сукно
	d=document.createElement('div');
	d.id='sukno';
	d.style.position='absolute';
	d.style.left='140px';
	d.style.top='110px';
	d.style.width='480px';
	d.style.height='280px';
	d.style.borderRadius='240px/140px';
	d.style.background='rgb(1,157,90)';
	document.getElementById("bacground").appendChild(d);
	
	for(var seat=0; seat<9; seat++){
		
		d=document.createElement('div');
		d.style.position='absolute';
		d.id='player_bet_'+seat; 
		d.style.left=[200,110,30,100,130,280,360,360,300][seat]+'px';
		d.style.top=[210,190,100,40,20,20,80,120,190][seat]+'px';
		d.style.width='70px';
		d.style.height='20px';
		d.style.color = 'white';
		d.style.textAlign = 'center';
		document.getElementById('sukno').appendChild(d);
	}
}


Все эти цифры актуальны для размера окна 816х535

Хотолось бы чтото типа
Размер_дива = обьект{height, width};
Размеры_дивов = массив_обьектов типа Размер_дива;
OnInit = function(){
    for (для всех div в документе){
        Размеры_дивов.push(div_height, div_width);
    }
}

OnResize = function(){
    for (для всех div в документе){
        div_height = Размеры_дивов[i].height*текущая_высота_окна/535;
        div_width = Размеры_дивов[i].width*текущая_ширина_окна/816;
    }
}


ну ещё+ позиция х и у и радиус скругления, но то уже детали.

kostyanet 03.01.2014 10:22

В стилях переключаются секции для того или иного размера дивайса через @media

http://www.w3schools.com/css/css_mediatypes.asp


Часовой пояс GMT +3, время: 03:56.