Изменения позиции элемента в html после использования функции javascript

У меня есть код, где я буду показывать более трех графиков за раз. Я использовал тег div и таблицы для разделения каждого графика и отображения всего одного ниже другого. Но когда я пытаюсь использовать функцию javascript, чтобы просто просмотреть один график и скрыть остальные. Положение графика меняется. Граф будет показан неполным образом. Он обычно отображается следующим образом: http://i47.tinypic.com/or1d91.png Но когда я использую функцию яваскрипта она отображается как: http://i48.tinypic.com/345zkeq.png Изменения позиции элемента в html после использования функции javascript

Я в том числе код ниже для яваскрипта и HTML части:

<script> 
    hideAllDivs = function() { 
    $("#uae").hide(); 
    $("#ksa").hide(); 
    $("#iran").hide(); 
    }; 

handleNewSelection = function() { 

hideAllDivs(); 

switch ($(this).val()) { 
    case '1': 
     $("#ksa").show(); 
    break; 
    case '2': 
     $("#uae").show(); 
    break; 
    case '3': 
     $("#iran").show(); 
    break; 
} 
}; 

$(document).ready(function() { 

$("#view").change(handleNewSelection); 

// Run the event handler once now to ensure everything is as it should be 
handleNewSelection.apply($("#view")); 

}); 
</script> 
</head> 
<body> 
<table align="center"><tr><td><select id="view"> 
<option value="">Overall</option> 
<option value="1">KSA</option> 
<option value="2">UAE</option> 
<option value="3">IRAN</option> 
</select> 
</td></tr></table> 
<div id="country"> 
<table align="center"> 
<tr><td style="width:800px;height:500px"><div id="container5" style="min-width: 400px; height: 400px; margin: 0 auto;margin-top:50px"></div></td> 
<td><table style="border: solid thin #000"><th>Country</th><th>Risk Score</th><?php  foreach($names4 as $n){ 
        echo "<tr><td>"; 
        echo $n[0]; 
        echo "</td><td>"; 
        echo $n[1]; 
        echo "</td></tr>";} 
        ?></table> 
</td></tr> 
</table> 
</div> 
<div id="ksa"> 
<table align="center"> 
<tr><td style="width:800px;height:500px"><div id="container2" style="min-width: 400px; height: 400px; margin: 0 auto;margin-top:50px"></div></td> 
<td><table style="border: solid thin #000"><th>Username</th><th>Risk Score</th><?php foreach($names1 as $n){ 
        echo "<tr><td>"; 
        echo $n[0]; 
        echo "</td><td>"; 
        echo $n[1]; 
        echo "</td></tr>";} 
        ?></table> 
</td></tr> 
</table> 
</div> 
<div id="uae"> 
<table align="center"> 
<tr><td style="width:800px;height:500px"><div id="container3" style="min-width: 400px; height: 400px; margin: 0 auto;margin-top:50px"></div></td> 
<td><table style="border: solid thin #000"><th>Username</th><th>Risk Score</th><?php foreach($names2 as $n){ 
        echo "<tr><td>"; 
        echo $n[0]; 
        echo "</td><td>"; 
        echo $n[1]; 
        echo "</td></tr>";} 
        ?></table> 
</td></tr> 
</table> 
</div> 
<div id="iran"> 
<table align="center"> 
<tr><td style="width:800px;height:500px"><div id="container4" style="min-width: 400px; height: 400px; margin: 0 auto;margin-top:50px"></div></td> 
<td><table style="border: solid thin #000"><th>Username</th><th>Risk Score</th><?php foreach($names3 as $n){ 
        echo "<tr><td>"; 
        echo $n[0]; 
        echo "</td><td>"; 
        echo $n[1]; 
        echo "</td></tr>";} 
        ?></table> 
</td></tr> 
</table> 
</div> 
</body> 
</html>

источник

2013-03-03 user2038580

Я считаю, что ваш проблема заключается в div в таблице, div = контейнере 5, контейнере div 2, div contaier 3 и т. д. Вы даете таблице ширину 800px, тогда внутри этого вы разместите div, который даст вам 400 пикселей; , это 100% НЕ JAVASCRIPT, это расчетный css

источник

2013-03-03 05:18:01

спасибо alot buddy :) – user2038580

без проблем радует, что я могу помочь за один раз: P –

Изменения позиции элемента в html после использования функции javascript

ответ

Смежные вопросы