Ajax mouseover show function alignment

Question

mouseover関数を使用してボックスを開こうとしていますが、ボックスは常にオブジェクトの右側に表示されます。したがって、オブジェクトがページの右端である場合、この写真のようにボックス全体が見えません。ここで https://rapidshare.com/files/998669066/problem.png

私のAjaxのコードは次のとおりです。

$(document).ready(function() { 
    $('.date-available').click(function() { 
     alert($(this).attr('id')); 
    }); 
    $('.rezerve-td').mouseover(function() { 
     $(this).children().show(); 
     }).mouseout(function() { 
     $(this).children().hide(); 
    }); 
}); 

私はそれを防ぐために何をすべき？ありがとう。ここで

は、私のコードのHTML部分である：

require_once 'class.dates.php'; 
require_once 'class.generic.php'; 
require_once 'connection.php'; 

$query = mysql_query("SELECT * FROM egitim_salonu", $baglanti); 
while ($row = mysql_fetch_object($query)) { 
    $salonlar[$row->id] = array('ad' => $row->ad, 'detay' => $row->detay); 
} 

$query = mysql_query("SELECT * FROM salon_rezervasyonu", $baglanti); 
while ($row = mysql_fetch_object($query)) { 
    $rezervasyonlar[$row->salon_id.'%'.$row->gun.'%'.$row->tip] = array('salon_id' => $row->salon_id, 'gun' => $row->gun, 'tip' => $row->tip, 'rezerve_edildigi_egitim' => $row->rezerve_edildigi_egitim); 
} 

$month = date('m', strtotime($_POST['d'])); 
$year = date('Y', strtotime($_POST['d'])); 
$date = date('F Y', strtotime('01-'.$month.'-'.$year)); 

if ($month == 1 || $month == 3 || $month == 5 || $month == 7 || $month == 8 || $month == 10 || $month == 12) { 
    $numberOfDays = 31; 
} else if ($month == 4 || $month == 6 || $month == 9 || $month == 11) { 
    $numberOfDays = 30; 
} else if (date('L', strtotime($year.'-01-01'))) { 
    $numberOfDays = 29; 
} else { 
    $numberOfDays = 28; 
} 

// Tabloyu aç, başlığı hazırla 
$output = '<table class="calendar" id="salon-rezervasyon-table"> 
    <thead> 
     <tr><th rowspan="2">Salon</th><th colspan="'.(2 * $numberOfDays).'">'.$date.'</th></tr> 
     <tr>'; 

for ($i = 1; $i <= $numberOfDays; $i++) { 
    $output .= '<th width="10" colspan="2" class="day-th">'.$i.'</th>'; 
} 

// Başlığı kapat, gövdeyi aç 
$output .= '</tr></thead><tbody>'; 

// Her salon için... 
foreach ($salonlar as $salonKey => $salonValue) { 
    $output .= '<tr id="salon-'.$salonKey.'"><td class="calendar-salon-column">'.$salonValue['ad'].'<br />'.$salonValue['detay'].'</td>'; 

    // ... o ay içindeki günleri kontrol et. Burada kontrol için şunu yapıyoruz: salon id'si, tarih ve gün içerisindeki saati (öğleden önce, öğleden sonra) 
    // birleştirerek bir index (bu index unique bir index) oluşturuyoruz ve bu index yukarıdaki rezervasyonlar dizisinde tanımlanmış mı diye kontrol ediyoruz. 
    for ($i = 1; $i <= $numberOfDays; $i++) { 
     $dateCheck = date('Y-m-d', strtotime($i.'-'.$month.'-'.$year)); 
     $rIndexOO = $salonKey.'%'.$dateCheck.'%Öğleden önce'; 
     $rIndexOS = $salonKey.'%'.$dateCheck.'%Öğleden sonra'; 

     //Öğleden önce 
     if(isset($rezervasyonlar[$rIndexOO])) { 
      $egitimPlaniQuery = mysql_query("SELECT * FROM egitim_plani WHERE id = ".$rezervasyonlar[$rIndexOO]['rezerve_edildigi_egitim'], $baglanti); 
      $egitimPlani = mysql_fetch_object($egitimPlaniQuery); 

      $output .= '<td id="'.$dateCheck.'%o" class="calendar-td rezerve-td">'; 
      $output .= '<div class="rezerve">'.date('d-m-Y', strtotime($dateCheck)).' Öğleden Önce<br /><br />'.$egitimPlani->egitim_adi.'</div>'; 
      $output .= '</td>'; 
     } else { 
      $output .= '<td id="'.$dateCheck.'%o" class="date-available calendar-td">'; 
      $output .= ''; 
      $output .= '</td>'; 
     } 

     //Öğleden sonra 
     if(isset($rezervasyonlar[$rIndexOS])) { 
      $egitimPlaniQuery = mysql_query("SELECT * FROM egitim_plani WHERE id = ".$rezervasyonlar[$rIndexOO]['rezerve_edildigi_egitim'], $baglanti); 
      $egitimPlani = mysql_fetch_object($egitimPlaniQuery); 

      $output .= '<td id="'.$dateCheck.'%s" class="calendar-td rezerve-td">'; 
      $output .= '<div class="rezerve">'.date('d-m-Y', strtotime($dateCheck)).' Öğleden Sonra<br /><br />'.$egitimPlani->egitim_adi.'</div>'; 
      $output .= '</td>'; 
     } else { 
      $output .= '<td id="'.$dateCheck.'%o" class="date-available calendar-date-separator">'; 
      $output .= ''; 
      $output .= '</td>'; 
     } 
    } 

    $output .= '</tr>'; 
} 

$output .= '</tbody></table>'; 
echo $output; 

Answer 1

あなたはおそらく、いくつかのCSSでこの問題を解決することができます。それはまだページオフ現れた場合

div.rezerve { 
    position: absolute 
} 

、あなたはあなたのjavascript

.... 
var doc_width = $(document).width(); 
var rezerve_child = $(this).children(); 
rezerve_child.show(); 
var position = rezerve_child.offset(); 
var rezerve_child_width = rezerve_child.width(); 
if (position.left + rezerve_child_width > doc_width) { 
    $(this).css('right', '2px'); 
} 
.... 

jQueryのツールチッププラグインはまた、おそらく参考になるまでこのような何かを追加することができます。 http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/