Javascript div не расширяется, чтобы соответствовать динамическим полям формы - PullRequest
Новая
       10

Javascript div не расширяется, чтобы соответствовать динамическим полям формы

1 голос
/ 27 июля 2011

У меня есть два div, которые были закодированы с использованием javascript, так что div "lightpole" расширится, чтобы соответствовать высоте div "LayoutColumn2". Кажется, все работает нормально, кроме как на странице оформления заказа. На этой странице есть некоторые динамические элементы формы, которые раскрываются после завершения одного раздела. Элемент lightpole не расширяется, чтобы соответствовать расширенным элементам div, которые формирует контейнер, даже если они находятся внутри большего элемента LayoutColumn2.

Сайт: https://store -e262c.mybigcommerce.com / checkout.php? Tk = eceb5394b7c03ae4a283b2eabff8f9f6

Если это не сработает, добавьте что-нибудь в корзину> перейдите к оформлению заказа> нажмите «Я новый клиент», нажмите «Продолжить». Прорыв светового полюса виден около нижнего колонтитула и очень заметен, если вы продолжите процесс оформления заказа. Я могу удалить пользователей, если кто-то хочет создать тестового пользователя. 

<!--make lightPole expand to height of tallest column-->
<script type="text/javascript">
    $(window).load(function(){
   var ht=($('#LayoutColumn2').height() > $('#LayoutColumn3').height()) ?
    $('#LayoutColumn2').height() : $('#LayoutColumn3').height(); $('#lightPole').height(ht); }); </script>

HTML-код является длинным и изменяется в зависимости от стадии процесса оформления заказа, но я все еще могу опубликовать его, если кто-то захочет.

CSS 

 #lightPole {
background:url(../images/lightPole8aSlice.png);
margin: 0 0 0 19.9px;
padding: 0;
position: absolute;
width: 15px;
z-index: -100;
 display: inline-block;
float: left;
} 

#LayoutColumn2{  
float: left;
height: auto;
margin: 0;
padding: 0;
width: 641px;

} 

.Content {
background: url("../images/contentMiddleBackground.png") repeat scroll 0 0 transparent;
float: left;
font-size: 0.95em;
margin: 0;
min-height: 266.5px;
padding: 0 5px 0 28px;
width: 609px;

}

Он вложен довольно глубоко, и там есть несколько других блоков скриптов, так что, возможно, один из них вызывает проблему ...?

1 Ответ

1 голос
/ 27 июля 2011

Ваша проблема в том, чтобы изменить размер div (#lighPole), когда другой div (#LayoutColumn2) изменит свою высоту. Это может быть заархивировано, например используя плагин jquery resize . 

<script type="text/javascript" src="/content/jquery.ba-resize.min.js"></script>
<script type="text/javascript">
  $(function() {
    $('#LayoutColumn2').resize(function() {
      var ht = Math.max($('#LayoutColumn2').height(), $('#LayoutColumn3').height());
      $('#lightPole').height(ht);
    }).resize();
  });
</script>
...