Изменение высоты боковой панели при добавлении динамического содержимого - PullRequest
Новая
       1

Изменение высоты боковой панели при добавлении динамического содержимого

3 голосов
/ 29 ноября 2011

У меня есть «липкая навигация по боковой панели», которая расположена абсолютно относительно элемента #sidebar, поэтому она следует за страницей внизу слева и всегда доступна. Чтобы сделать это, мне нужно было добавить высоту на боковую панель, поэтому я использовал некоторый код для динамического определения высоты контейнера. Это код, который я использовал: 

<script type="text/javascript">
    function matchColHeights(col1, col2) {
        var col1Height = $(col1).height();
        var col2Height = $(col2).height();
        if (col1Height > col2Height) {
            $(col1).height(col2Height);
        } else {
            $(col1).height(col2Height);
        }
    }

    $(document).ready(function() {
        matchColHeights('#sidebar', 'section#main-container');
    })
</script>

В настоящее время #sidebar div находится внутри секции, называемой section#maincontainer. Ниже приведена очень упрощенная версия HTML. 

<body>
    <header>Header content</header>
    <section id="main-container">
        <div id="sidebar">
            <ul>
                This is the floated ul
            <ul>
        </div>
        <div class="content">
            This is where the content of the page sits
        </div>
        <div class="content2">
            This is where the content of the page sits (because of the design there are often more than one divs floated right
            <div>Within the content divs are potential expanding divs (accordions and tabs that change size)</div>
        </div>
    </section>
    <footer>Footer content</footer>
</body>

Таким образом, у меня проблема в том, что в области содержимого есть расширяемый контент (вкладки и аккордеоны), а при расширении содержимого jQuery не обновляет высоту боковой панели до новой высоты (эта новая высота короче или длиннее первоначальной высоты). Я попытался добавить функцию в мой .click() обработчик аккордеона (еще не пробовал с вкладками), но вот код, который используется для сброса моего аккордеона: 

<!--Content Accordion-->
<script type="text/javascript">
    $(document).ready(function() {
        $('div.content-accordion> div').hide();  
        $('div.content-accordion> h4').click(function() {
            var $nextDiv = $(this).next();
            var $visibleSiblings = $nextDiv.siblings('div:visible');

            if ($visibleSiblings.length ) {
                $visibleSiblings.slideUp('fast', function() {
                    $nextDiv.slideToggle('fast');
                    $matchColHeights('#sidebar', 'section#main-container');
                });
            } else {
                $nextDiv.slideToggle('fast');
                $matchColHeights('#sidebar', 'section#main-container');
            }
        });
    });
</script>

Как видите, я могу добавить функцию $matchColHeights('#sidebar', 'section#main-container'); в функцию щелчка, и она все еще не обновится до новой высоты. Я попробовал несколько других возможностей без удачи.

Ответы [ 2 ]

2 голосов
/ 01 декабря 2011

Просто, чтобы все знали, что я нашел решение ... Много возился, но код ниже.

Мне, по сути, нужно было установить высоту боковой панели обратно на 0 и создать функцию, которая находит новую высоту раздела # main-container, а затем применяет ее в качестве высоты css к боковой панели. Это изменило высоту боковой панели просто отлично, но затем липкая боковая панель не была перенастроена на новую высоту, поэтому я просто вставил код, который работает с моей липкой боковой панелью (код, который начинается с $ ("aside"), в функцию, и это освежает просто отлично. Спасибо тем, кто помог. 

<!--Content Accordian-->
<script type="text/javascript">
$(document).ready(function() {
  $('div.content-accordian> div').hide();  
  $('div.content-accordian> h4').click(function() {
    var $nextDiv = $(this).next();
    var $visibleSiblings = $nextDiv.siblings('div:visible');

    if ($visibleSiblings.length ) {
      $visibleSiblings.slideUp('fast', function() {
        $nextDiv.slideToggle('fast', function() {
// START CHANGE SIDEBAR HEIGHT      
        $("#sidebar").css({ height: 0});
        newheight = $("section#main-container").height();
         $("#sidebar").css({ height: newheight});
         $("aside").stickySidebar({
            timer: 500
          , easing: "easeInOutQuint"
          , constrain: true
        });

      });
// END CHANGE SIDEBAR HEIGHT    
      });
    } else {
       $nextDiv.slideToggle('fast', function() {

// START CHANGE SIDEBAR HEIGHT      
        $("#sidebar").css({ height: 0});
        newheight = $("section#main-container").height();
         $("#sidebar").css({ height: newheight});
         $("aside").stickySidebar({
            timer: 500
          , easing: "easeInOutQuint"
          , constrain: true
        });

      });
// END CHANGE SIDEBAR HEIGHT
    }
  });
});
</script>
0 голосов
/ 29 ноября 2011

Полагаю, вы могли бы написать 

if (col1Height !== col2Height) {
    $(col1).height(col2Height);
}

вместо 

if (col1Height > col2Height) {
    $(col1).height(col2Height);
} else {
    $(col1).height(col2Height);
}

Но это не решит вашу проблему.

Возможно, вам придется уволить это *Функция 1009 * изнутри обратного вызова выглядит следующим образом: 

if ($visibleSiblings.length ) {
    $visibleSiblings.slideUp('fast', function() {
        $nextDiv.slideToggle('fast', function() {
            $matchColHeights('#sidebar', 'section#main-container');
        });
    });
} else {
    $nextDiv.slideToggle('fast', function() {
        $matchColHeights('#sidebar', 'section#main-container');
    });
}

Дайте мне знать, если это сработало.

...