Strange behavior when I alternate between showing and hiding fleet schedules

Question

When I hide and show graphics at the click of a button, the second and third graphics appear above the CSS borders. For instance:

The first chart, usually displayed:

And the following image after pressing the navigation button:

Identifiers differ by name (to describe different graphs for each div of the course), but they are identical in positioning, as shown in the corresponding CSS below.

Matching CSS:

#placeholder_one{ margin-top:70px; margin-left:auto; margin-right:auto; width:80%; height:350px; position:relative; } #placeholder_two{ margin-top:70px; margin-left:auto; margin-right:auto; width:80%; height:350px; position:relative; display:none; } #placeholder_three{ margin-top:70px; margin-left:auto; margin-right:auto; width:80%; height:350px; position:relative; display:none; } 

HTML:

  <div class="basic_form"> <span id="title"> Spectra </span> <div id="placeholder_one"></div> <div id="placeholder_two"></div> <div id="placeholder_three"></div> <a href= "#" onclick="move('fwd');"><i id="nav_next" class="icon-double-angle-right about_nav"></i></a> <a href= "#" onclick="move('rev');"><i id="nav_rev" class="icon-double-angle-left about_nav"></i></a> </div> 

And finally, for reference, Javascript. The first is just a navigation structure, the second script is where the graph actually goes:

 <script type="text/javascript"> var currentCount = 1; function safeCount(op){ if (op == "add"){ if (currentCount>=3){ ; } else{ currentCount = currentCount+1; } } if (op == "sub"){ if (currentCount<=1){ ; } else{ currentCount = currentCount-1; } } } function divSelector(count){ if (count == 1){ $('#placeholder_one').fadeIn(1000); $('#placeholder_two').hide(); $('#placeholder_three').hide(); }else if (count == 2){ $('#placeholder_one').hide(); $('#placeholder_two').fadeIn(1000); $('#placeholder_three').hide(); }else if (count == 3){ $('#placeholder_one').hide(); $('#placeholder_two').hide(); $('#placeholder_three').fadeIn(1000); } else{ console.log("Count is nothing."); } } //Navigating: pass in "fwd" or "rev" function move(direction){ if (direction == "fwd"){ safeCount("add"); divSelector(currentCount); } else if (direction =="rev"){ safeCount("sub"); divSelector(currentCount); } else{ ; } } </script> <script type="text/javascript"> $(function() { function plotList(string_id, data_list){ $.plot(string_id, [{data:data_list, lines: { show: true }, points: { show: false }, }], { xaxes: [{position:'bottom',axisLabel:'T(s)'}], yaxes: [{position:'left',axisLabel:'Proper Acceleration (g)'}], grid:{hoverable:true,color:'white',clickable:true} }); } $(document).ready(function() { var test_one = [[0,0],[4,3]];var test_two = [[0,0],[4,3]];var test_three = [[0,0],[4,3]]; plotList("#placeholder_one",test_one); plotList("#placeholder_two",test_two); plotList("#placeholder_three",test_three); }); }); </script> 

Any input on how I could fix this would be greatly appreciated.

Answer 1

The fleet has problems plotting in containers that are set to display:none . That way, you can either defer the call to $.plot until the container is visible, or you can use the negative fields so that it is off-screen, the plot, and then your divSelector moves them on / off the screen.

If you just delay the charts until the divSelector wants to show them, you will have something like this:

  function divSelector(count) { if (count == 1) { $('#placeholder_one').fadeIn(1000); $('#placeholder_two').hide(); $('#placeholder_three').hide(); } else if (count == 2) { $('#placeholder_one').hide(); $('#placeholder_two').show(); if ($('#placeholder_two').find('canvas').length == 0) { plotList("#placeholder_two", test_two); } $('#placeholder_three').hide(); } else if (count == 3) { $('#placeholder_one').hide(); $('#placeholder_two').hide(); $('#placeholder_three').show(); if ($('#placeholder_three').find('canvas').length == 0) { plotList("#placeholder_three", test_three); } } else { console.log("Count is nothing."); } } 

Working example: http://jsfiddle.net/ryleyb/Q7T4y

If you prefer to keep your attenuation and what not, you can use the margin property to plot a graph from the screen as follows:

  plotList("#placeholder_one", test_one); $('#placeholder_two,#placeholder_three').css({ 'margin-left': '-1000px', display: 'block' }); plotList("#placeholder_two", test_two); plotList("#placeholder_three", test_three); $('#placeholder_two,#placeholder_three').css({ 'margin-left': 'auto', display: 'none' }); 

Working example: http://jsfiddle.net/ryleyb/Q7T4y/1/