Использование jQuery для изменения размера двух элементов до самого большого

Это не вопрос о макетах столбцов, прежде чем кто-то свяжется с одним из них.Использование jQuery для изменения размера двух элементов до самого большого

У меня есть две коробки текста в разных областях страницы, которые я хочу быть одинаковой высоты. Они выполняются асинхронно с jQuery. Я загрузить данные с чем-то вроде этого:

$.ajax({ 
    url: someUrl, 
    dataType: 'html', 
    type: 'GET', 
    success: function(data) { 
    $(mySelector).html(data) 
    }, 
    complete: function() { 
    adjustHeights() 
    } 
})

adjustHeights становится называется (ссылка действительна, даже если я обрезанный материал из). Селектор также возвращает соответствующие элементы. Я получаю высоту всех вещей, которые соответствуют селектору, а затем применяют максимальную высоту текущих (например, один из них имеет высоту 38 пикселей, а один - 50 пикселей, а 50 пикселей - все).

Проблема заключается в том, что в то время как adjustHeights отлично работает, если я назову это через некоторое время после загрузки содержимого (скажем, нажатием кнопки или через отладчик), он получает высоту до того, как все будет визуализировано. Я подозреваю, что пользовательские шрифты могут играть роль, но я не уверен.

Есть ли хороший способ рассказать о jQuery «Нет, серьезно, не запускайте это, пока все не станет реальным». Я понимаю, что это уже должно произойти, но это не так.

Редактировать Просто проверить, что эта проблема уходит, если я избавлюсь от шрифта лица или линии высоты, которая находится в КСС.

источник

2012-01-04 Jared

'' Вы можете использовать небольшой тайм-аут '' –

Видеть живую код будет полезно, если это возможно. Убедитесь, что вы используете ['HTMLElement.offsetHeight'] (https://developer.mozilla.org/en/DOM/element.offsetHeight), чтобы получить высоту.' .height() 'получает высоту содержимого, исключая границы и обивка. Если это не работает, то @AndrewWhitaker может иметь лучшее решение. Я не думаю, что при создании шрифтов никаких событий не происходит. –

[http://jsfiddle.net/](http://jsfiddle.net/) – Tomas

Возможно, вы можете использовать нулевой тайм-аут. Часто при вставке содержимого в DOM с последующим js выполняется до полного обновления DOM. Это наиболее очевидно, когда вы делаете анимацию сразу после замены содержимого в DOM, он может быть рывком и даже прыгать прямо в конечное состояние. В вашем случае кажется, что размеры не совсем обновлены, прежде чем они вам понадобятся. A (Hacky - Андрей прав) способ обойти это:

setTimeout(adjustHeights, 0);

источник

2012-01-04 21:33:31 baseten

Это также обсуждается в [этой теме] (http://stackoverflow.com/questions/779379/why-does-settimeoutfn-0-sometimes-help) и при большей подробно Джоном Ресигом [здесь] (http: // ejohn.org/blog/how-javascript-timers-work /) – baseten

Я на самом деле вижу лучшие результаты с помощью setTimeout (adjustHeights, 50) или что-то в этом роде. Вы ссылки очень удобны, хотя и должны указывать людям в правильном направлении в будущем, так что спасибо! – Jared

Я не думаю, что вы пробовали следующее?

complete: function() { 
    $(document).ready(function() { 
     adjustHeights(); 
    }); 
}

Кроме того, у вас есть посторонняя запятая после «полного» определения.

Надеюсь, это поможет.

источник

2012-01-04 21:26:54 pete

Хорошая точка в запятой, изменится. Реальный код был в coffeescript и сделал некоторые другие вещи, поэтому это было быстрое (и, очевидно, неаккуратное) изменение на обычный JS. Я попробовал это, и это не сработало :( – Jared

Использование jQuery для изменения размера двух элементов до самого большого

ответ

Смежные вопросы