Div content resizing

Question

I have 3 different charts inside 3 different div tags that appear and hide when specified. However, two of the charts randomly resize and i know why. How do i fix this? I have wordpress and using visualizer plugin for my charts. have the code in the header.php file and in the text portion of the page specific code.

Code below:

Header.php snippet -

<script>
    var divs = ["Daily", "Weekly", "Monthly"];
    var visibleDivId = null;
    function toggleVisibility(divId) {
      if(visibleDivId === divId) {
        visibleDivId = null;
      } else {
        visibleDivId = divId;
      }
      hideNonVisibleDivs();
    }
    function hideNonVisibleDivs() {
      var i, divId, div;
      for(i = 0; i < divs.length; i++) {
        divId = divs[i];
        div = document.getElementById(divId);
        if(visibleDivId === divId) {
          div.style.display = "block";
        } else {
          div.style.display = "none";
        }
      }
    }
</script>


HTML page snippet - 

<div class="inner_div"> 
<div id="Daily">[visualizer id="431"]</div>
<div id="Weekly" style="display: none;">[visualizer id="430"]</div>
<div id="Monthly" style="display: none;">[visualizer id="429"]</div>
</div>
<div class="main_div">
<div class="buttons">
<a href="#" onclick="toggleVisibility('Daily');">Daily</a> | <a href="#" onclick="toggleVisibility('Weekly');">Weekly</a> | <a href="#" onclick="toggleVisibility('Monthly');">Monthly</a>
</div>

please share the link of your website its not clear the resize is CSS related — J.Tural, Dec 26 '15 at 03:05
www.lowfloatindex.com clicking the daily, weekly, and monthly buttons below the charts. all the charts should, and are formatted to be the same size as the daily chart. — Marshall Hawley, Dec 28 '15 at 03:15

score 0 · Accepted Answer · answered Dec 30 '15 at 14:38

A quick fix is to include call visualizer.render(); at the end of your toggleVisibility function:

function toggleVisibility(divId) {
  if(visibleDivId === divId) {
    visibleDivId = null;
  } else {
    visibleDivId = divId;
  }
  hideNonVisibleDivs();
  visualizer.render();
}

The problem is caused by invalid calculation of available area for divs that aren't visible at the time. Calling this method forces a re-calulcation of the svgs and ensures the right size.

Happy to help and welcome to Stack overflow. If this answer solved your issue please mark it as accepted. :) — Ethnar, Dec 31 '15 at 09:28

Div content resizing

1 Answers1