+- WINNUM Community (https://community.winnum.io)
+-- Сообщество Все сообщества (https://community.winnum.io/forumdisplay.php?fid=1)
+--- Сообщество Динамические приложения в WINNUM Platform (https://community.winnum.io/forumdisplay.php?fid=2)
+--- Темы: Резиновая верстка (/showthread.php?tid=16)
Резиновая верстка - Lamantur - 03-18-2024
Код:
function setWidth() {
$('#541F4705-D07A-447F-B8AD-009CAFF336BD').css({
width: $('#FDBDB71A-029E-4C4F-9CB5-E4EEBA50771C').width()/2 + 'px', //ширина элемента
height: $('#FDBDB71A-029E-4C4F-9CB5-E4EEBA50771C').height()/2 + 'px', //высота элемента
top: '0px', // расстояние от верхнего края
left: $('#FDBDB71A-029E-4C4F-9CB5-E4EEBA50771C').width()/2 + 'px', // расстояние от левого края
overflow: 'hidden', // полоса прокрутки скрыта, элемент не выходит за край или обрезается
fontSize: $('#FDBDB71A-029E-4C4F-9CB5-E4EEBA50771C').height()/10 + 'px' // отдельно настраиваем размер шрифта
});
}
setWidth(); // устанавливаем высоту окна при первой загрузке страницы
$(window).resize( setWidth ); // обновляем при изменении размеров окнаПри создании резиновой верстки нужно чтобы все элементы имели размеры либо в процентах, либо в виде размера окна, умноженного на коэффициент, поскольку изначально все элементы имеют абсолютное позиционирование по умолчанию и размеры все задаются в пикселях. Пример готового универсального кода:
Код:
function setWidth( element, width , height , top , left , fontSize , over) {
// element - id html элемента
$('#' + element).css({
width: $( window ).width() * ( width /100) + 'px', // width ширина элемента %
height: $( window ).height() * ( height /100) + 'px', // height высота элемента %
top: $( window ).height() * ( top /100) + 'px', // top расстояние от верхнего края %
left: $( window ).width() * ( left /100) + 'px', // left расстояние от левого края %
overflow: over, // полоса прокрутки, элемент выходит за край или обрезается 'str'
fontSize: $( window ).height() * ( fontSize /100) + 'px' // fontSize отдельно настраиваем размер шрифта %
});
}
function setElastic() {
setWidth( 'mychart1', 50, 50, 0, 0, 5, 'hidden');
setWidth( 'mychart2', 50, 50, 0, 50, 5, 'hidden');
setWidth( 'mytable', 100, 50, 0, 0, 6, 'visible');
}
setElastic(); // устанавливаем высоту окна при первой загрузке страницы
$(window).resize( setElastic ); // обновляем при изменении размеров окна