Исключить отрицательное число из функции, чтобы получить и установить маржу

Question

Исключить отрицательное число из функции, чтобы получить и установить маржу

0

У меня есть элемент, который я хочу несколько вертикально центрировать на странице. Я хочу получить высоту видового экрана и вычесть из него верхний и нижний колонтитулы и основную высоту. Полученное число будет разделено на 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, используйте значение по умолчанию. Что мне не хватает?

Dirty Bird Design 09 май 2014, в 21:29

Источник

Теги:

javascript

jquery

2 ответа

1

Ваша проблема в том, что вы выполняете математическое сравнение по строке. >= '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() отображает пиксели, если суффикс единицы опущен.

Utkanos 09 май 2014, в 16:32

0

"Height_diff" - это число, поэтому нам не нужно делать это "$ (height_diff)", только это "height_diff". «$ (Height_diff)» вернет массив со значением Validable, имеющим значение «height_diff». Например: «[40]»
Jacobi 09 май 2014, в 18:47
0

Спасибо, я ценю это. Хороший ответ
Dirty Bird Design 09 май 2014, в 18:54

Ещё вопросы

"Height_diff" - это число, поэтому нам не нужно делать это "$ (height_diff)", только это "height_diff". «$ (Height_diff)» вернет массив со значением Validable, имеющим значение «height_diff». Например: «[40]»
Спасибо, я ценю это. Хороший ответ

QBM5 · Accepted Answer · 2014-05-09T16-02-00.000Z

Как бы это получилось в логическом выражении?

 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.

Дополнение в конце очень лаконично и намного лучше, чем я предполагал. Еще раз спасибо