У меня есть элемент, который я хочу несколько вертикально центрировать на странице. Я хочу получить высоту видового экрана и вычесть из него верхний и нижний колонтитулы и основную высоту. Полученное число будет разделено на 3 и применено к элементу margin-top. Это отлично работает, только когда окно сокращается вертикально, применяется отрицательное число.
function getMargin() {
var wHeight = $(window).height();
var hHeight = $('header').height();
var mHeight = $('main').height();
var fHeight = $('footer').height();
var height_diff = (wHeight - hHeight - mHeight - fHeight) / 3 + "px";
//here is where its not working
if ($(height_diff) >= '30px') {
$('#content').css('margin-top', height_diff);
} else {
$('#content').css('margin-top', '40px');
};
console.log(height_diff);
}
$(window).resize(function(){
getMargin();
});
Пока возвращаемое число (height_diff) БОЛЬШЕ, чем 30px, примените его как margin, если оно меньше 30px, используйте значение по умолчанию. Что мне не хватает?
Как бы это получилось в логическом выражении?
if ($(height_diff) >= '30px')
это не будет. Левая сторона - элемент jquery, сохраняющий число, правая - строка с номером и текстом.
позволяет исправить очевидное и увидеть, что это оставляет нас
function getMargin() {
var wHeight = $(window).height();
var hHeight = $('header').height();
var mHeight = $('main').height();
var fHeight = $('footer').height();
var height_diff = (wHeight - hHeight - mHeight - fHeight) / 3;
//here is where its not working
if (height_diff >= 30) {
$('#content').css('margin-top', height_diff + "px");
} else {
$('#content').css('margin-top', '40px');
};
console.log(height_diff);
}
$(window).resize(function(){
getMargin();
});
то, что будет работать еще лучше с моей точки зрения
var height_diff = Math.max(30,(wHeight - hHeight - mHeight - fHeight) / 3);
$('#content').css('margin-top', height_diff + "px");
нет, если требуется другая логика, но это означает, что вы либо используете height_diff num, либо 30, если height_diff меньше 30, результат будет равен 30 не 40.
Ваша проблема в том, что вы выполняете математическое сравнение по строке. >= '30px'
не имеет логического смысла.
+ Изменить
var height_diff = (wHeight - hHeight - mHeight - fHeight) / 3 + "px";
в
var height_diff = (wHeight - hHeight - mHeight - fHeight) / 3;
и изменение
if ($(height_diff) >= '30px') {
в
if ($(height_diff) >= 30) {
Затем вы можете добавить "px" позже (хотя на самом деле этого не нужно: jQuery .css()
отображает пиксели, если суффикс единицы опущен.