#jquery #css #conditional #height
#jquery #css #условные операторы #высота
Вопрос:
Я пытаюсь создать условный оператор на страницах моего динамического продукта на моем веб-сайте, чтобы облегчить настройку высоты моих столбцов (как левого, так и правого) и центральной части ( #detail <div>
).
Теперь у меня есть этот фрагмент кода:
$(window).load(function() {
detailHeight = $('#detail').height();
columnHeight = detailHeight 20;
$('.columns').height(columnHeight);
$('#detail').height(columnHeight);
});
Теперь я хочу убедиться, что высота columnHeight
переменной равна не менее 550, так что высота столбцов и #detail <div>
будет составлять не менее 550 пикселей в высоту.
Это связано с моей иллюстрацией Марио, в которой он помещает вызов в правый столбец. Это выглядит немного непрофессионально, если оно нависает над нижним колонтитулом.
Я пытаюсь добавить условный:
if($(columnHeight) < 550) {
columnHeight = 550;
}
К моему предыдущему коду, подобному этому:
$(window).load(function() {
detailHeight = $('#detail').height();
columnHeight = detailHeight 20;
if($(columnHeight) < 550) {
columnHeight = 550;
}
$('.columns').height(columnHeight);
$('#detail').height(columnHeight);
});
По какой-то причине он загружается так же, как если бы условия там даже не было.
Вы можете просмотреть последствия проблемы здесь, на:
http://www.marioplanet.com/catalog.asp и переход к любому из продуктов,
или,
перейдя к http://www.marioplanet.com/product.asp ?IDnum=1 и путем изменения числа в IDnum=1
последней части URL-адреса на что-либо среднее между 1 и 45.
Любые предложения приветствуются!
Спасибо!!
Обновить:
Спасибо всем, кто опубликовал!
Вау, какая дурацкая ошибка!!
Ответ №1:
Вы имеете в виду включить $
перед columnHeight?
if($(columnHeight) < 550) {
columnHeight = 550;
}
должно быть:
if(columnHeight < 550) {
columnHeight = 550;
}
Вы заключаете число в объект jQuery. На самом деле я понятия не имею, чего от этого можно было бы ожидать!
Ответ №2:
Попробуйте:
если (высота столбца < 550) { Высота столбца = 550; }
Ответ №3:
Не уверен, почему вы используете jQuery columnHeight
. Попробуйте это сделать:
$(window).load(function() {
detailHeight = $('#detail').height();
columnHeight = detailHeight 20;
if(columnHeight < 550) {
columnHeight = 550;
}
$('.columns').height(columnHeight);
$('#detail').height(columnHeight);
});
Ответ №4:
Разве вы не можете просто использовать свойство CSS min-height для .columns и #detail?
.columns, #detail {
min-height: 550px;
}
Комментарии:
1. Мне это очень нравится, спасибо! Я никогда не слышал об этом раньше, и здесь это весьма полезно. Я ищу код jQuery в этом экземпляре, хотя, так что да. Но я могу на самом деле реализовать это вместо этого.
2. @BOSS — на самом деле существуют 100% CSS-способы создания вашего макета столбцов; JavaScript не требуется. Пример.: matthewjamestaylor.com/blog /…
Ответ №5:
Разве этого не должно быть…
if(columnHeight < 550) {
columnHeight = 550;
}
…в вашем примере вы пытаетесь создать объект jQuery из простой переменной?