동적 콘텐츠 추가시 사이드 바 높이 변경

#sidebar div와 관련하여 절대적으로 배치 된 '끈적한 사이드 바 탐색'이 있으므로 페이지 왼쪽을 따라 가며 항상 사용할 수 있습니다. 이 작업을 수행하기 위해 사이드 바에 높이를 추가해야했기 때문에 컨테이너의 높이를 동적으로 찾기 위해 일부 코드를 사용했습니다.동적 콘텐츠 추가시 사이드 바 높이 변경

<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 사업부가 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'); 함수를 추가하면 새로운 높이로 새로 고침되지 않습니다. 나는 행운이없는 몇 가지 다른 가능성을 시도했다.

출처

2011-11-29 Tom

모두에게 내가 해결책을 찾았 음을 알리기 위해 ... 엉망으로 생각했지만 코드는 아래에 있습니다.

기본적으로 사이드 바 높이를 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>

출처

2011-12-01 12:29:22 Tom

난 당신이

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

대신

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

쓸 수 그러나 문제가 해결되지 않습니다 생각합니다.

당신은 아마 이런 콜백 내부에서 그 matchColHeights() 기능을 발사 할 수 있습니다

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'); 
    }); 
}

가이 일을 알려줘.

출처

2011-11-29 13:38:41 Manticore

안녕 맨티 코어 감사합니다,하지만 불행히도이 didnt가 작동합니다. 그것은하기 Accordian 휴식에 새로운 높이 또한 전환을 트리거하지 않습니다. 나는 당신이 무엇을보고 의미는 생각하지만 그것은 적절하게 방아쇠를 당하지 않았다고 생각합니다. 아마도 나는 .click 전에 높이를 발견하고 .click 다음에 문장을 작성해야하고 그에 따라 CSS를 수정합니다. 실제로 'var curHeight = parseInt ($ ("section # main-container"). height()), newHeight = Math.ceil (curHeight/10) * 10 - 5; $ ("# sidebar"). height (newHeight); ' 하지만 나는 이해하지 못합니다. CurHeight – Tom

오, 그리고 첫 부분 인 맨티 코어에 대해서도 정확했습니다! 간단한 코드 주셔서 감사합니다. – Tom

동적 콘텐츠 추가시 사이드 바 높이 변경

답변

관련 문제