Question

I am trying to open a box by using mouseover function, however the box always shows on the right part of the object. Hence when the object is right end of the page, the whole box cannot be seen as shown in this photo.
https://rapidshare.com/files/998669066/problem.png

Here is my ajax code:

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

What should i do in order prevent it? Thanks.

Here is the html part of my code:

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

You could probably fix this with some css.

div.rezerve { 
    position: absolute
}

If it still shows up off the page, you can add something like this to your 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');
}
....

The jQuery Tooltip plugin would also probably be helpful.
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/