2016-03-24 11 views
0

サーバーからデータを取得すると表示されるgageが表示されます。ゲージは、データが受信されたときにのみ表示されますが、ゲージがないときにhtmlの空白をどのように維持できるかを把握しようとしていますか?現時点では、私のページはゲージがそこにないときにジャンプし、表示されたらポップダウンします。私は本当にそれが私が推測するにフェードインしたいと思います。どうもありがとう。jquery要素がない場合は空白を維持しますか?

HTML、CSSと

<div id="gauge" class="400x260px"></div> 

のjQuery

<script> 
$(document).ready(function(){ 
$("#submitButtonId").on("click",function(e){ 
    e.preventDefault(); 

//Post form 
var formdata = $(this.form).serialize(); 
    $.post('insert.php', formdata, 
      function(data){ 
    //Reset Form 
$('#myform')[0].reset(); 
fetchRowCount(); 
    }); 

    return false; 
}); 
}); 
//Fetch data from server 
function fetchRowCount() { 
    $.ajax({ 
        url: 'server2.php', 
        dataType: "json", 
        success: function (data) { 
$("#rows").html(data.rows); 
$("#min").html(data.min); 
$("#max").html(data.max); 
$("#mean").html(data.total); 

//Show gage once json is receved from server 

      var gage = new JustGage({ 
      id: "gauge", 
      value: data.total, 
      min: 1, 
      max: 100, 
      title: "Sample Data" 
     }); 

        } 
    }); 

} 
</script> 
+0

なぜデータがロードされたのかを示す場所にローダーを配置しないでください。 –

+0

ゲージdivにCSSの最小幅と最小幅を指定してみてください。 –

+0

私はCSSクラス400x260pxに幅と高さが固定されており、display:blockと仮定しています。その場合は、JustGageプラグインが何かファンキーなことをしていない限り、スペースを予約する必要があります – kennasoft

答えて

0

:jQueryを使って

#gauge { 
    height: 260px; 
} 

$('#guage').css({'height': '260px'}); 

Cssを推奨オプションにする必要があります。

編集:要素が常にその高さでない場合は、常に最小高さを使用できます。

関連する問題