[Javascript] Mouseover

[Vera]

Buongiorno,
in un mio script (php) ho questa riga:

<td><div align="right"><?php echo $nrclienti;?></div></td>

chi mi aiuta a capire (mi postate anche un aiuto... grazie) come faccio a far partire la funzione mousever quando con il mouse passo sopra al dato sopra riportato. O meglio, al passaggio del mouse dovrei far partire la funzione mouseover facendomi visualizzare il dettaglio dei dati relativi al $nrclienti. Credo che sia il tutto fattibile richiamando un javascript dove al suo interno si sia la chiamata ad un php per la lettura del db per l'estrazione del dettaglio. Come gestisco il mouseover???
Grazie

 

[criric]

Ciao, utilizzi gli eventi onmouseover e onmouseout sul div

<div onmouseover="dettaglio()" onmouseout="chiudiDettaglio()"

nella head della pagina definisci le due funzioni e il codice da eseguire

<script>
            function dettaglio() {
                // codice per mostrare il dettaglio
            }
            function chiudiDettaglio() {
                // codice per chiiudere
            }
        </script>

 

[Vera]

Grazie per il tuo aiuto,
ho provato, ma incontro difficoltà nel capire come scrivere il restante codice per poter visualizzare i dati (dati che vorrei visualizzare in un piccolo riquadro di colore giallo come sfondo).

Attualmente il codice php (con in testa il relativo script é il seguente (tralasciando la testa della tabella):

<script>
// codice per mostrare il dettaglio
function dettaglio1()
{
      // Qui dentro dovrei richiamare il php che legge dal relativo database e costruisce l'array dei dati da visualizzare (**)               
}
// codice per chiudere il dettaglio
function chiudiDettaglio1() {
               
}
</script>

// Riga della tabella dove posizioni il mouse:

for($a = 0; $a < 5; $a++)   
{
echo"<td><DIV align='left'>---</DIV></td>
           <td><DIV align='left' onmouseover='dettaglio()' onmouseout='chiudiDettaglio()'>".number_format($importo, 0,",",".")."</DIV></td>
}

il php che si occupa del caricamento dell'array é circa cosi strutturato:

$cdclie = $_GET['cdclie'];
// Stringa SQL per estrazione dei dati
$sql001 = "SELECT IMNETTO
                    FROM MYLIB.FILEANAG
                    WHERE CDCLIE = '$cdclie'";

// qui carico l'array $totaImp da visualizzare

 

[criric]

per interrogare una pagina php con javascript devi utilizzare ajax
puoi scaricarti una versione di jquery per semplificare il codice da scrivere
in alternativa puoi richiamare l'ultima versione direttamente dal sito ufficale

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

la sintassi per la chiamata ajax diventa molto semplice

function dettaglio1(cdclie) {
                // Qui dentro dovrei richiamare il php che legge dal relativo database e costruisce l'array dei dati da visualizzare (**)    
                $.get("dettaglio.php", {cdclie: cdclie}, function (response) {
                    alert(response);
                });
            }

il codice cliente lo passi come parametro quindi devi aggiungerlo quando richiami la funzione

onmouseover='dettaglio1(<?php echo $cdclie;?>)'

nella variabile javascript "response" avrai tutto l'output che genera la pagina php richiamata

 

[Vera]

Ciao e grazie per il tuo prezioso aiuto.
Ti vorrei postare la parte del progetto finalizzato al mio obiettivo cosi da essere più chiara. Quando lo proverai per testarlo vedrai comparire nella tabella creata, in basso a sinistra il riquadro di colore giallo (contenitore) dove vorrei che apparisse la lista dei clienti.

<script type="text/javascript">
var table = null;
$(document).ready(function() {
    var h_finestra = $(window).height();
    var h_menu = $('#menu_top').height();
    var margin = $('#Quadro_Lazio').css('margin-top').replace('px','');
    var h_thead = $('#Quadro_Lazio thead').height();
    var h_tfoot = $('#Quadro_Lazio tfoot').height();
   
    var h = parseInt(h_finestra)-parseInt(h_menu)-parseInt(margin)-parseInt(h_thead)-parseInt(h_tfoot)-70;
    table = $('#tabella').html();
   
    $('#Quadro_Lazio').tScroll({
                    h_box: h+'px'
    });
       
});
</script>

<script>
// codice per mostrare il dettaglio
function dettaglio()
{
    tooltip = '<div class="tooltiptopicevent" style="width:auto;height:auto;background:#feb811;position:absolute;z-index:10001;padding:10px 10px 10px 10px ;  line-height: 200%;">'
            + 'Cliente' + ' ' + 'Ragione sociale' + '</div>';

            $("body").append(tooltip);
            $(this).mouseover(function (e)
            {
                $(this).css('z-index', 10000);
                $('.tooltiptopicevent').fadeIn('500');
                $('.tooltiptopicevent').fadeTo('10', 1.9);
            }).mousemove(function (e)
            {
                $('.tooltiptopicevent').css('top', e.pageY + 10);
                $('.tooltiptopicevent').css('left', e.pageX + 20);
            });
}
// codice per chiudere il dettaglio
function chiudiDettaglio()
{
    $(this).css('z-index', 8);
    $('.tooltiptopicevent').remove();
}
</script>

<fieldset class="corpo">
<legend>Vendite 2016</legend>
<table border="0" width="100%" id='quadroLazio'>
<tr>

<td valign="top">
<div  align="center" id='tabella'>
<table border='0' id="Quadro_Lazio" class='sortable' cellpadding='1' cellspacing='0'>
    <thead>
           <tr><th colspan="2"><div align='center'>Vendita Clienti</div></th>
               <th colspan="5"><div align='center'>Vendita ROMA e provincia</div></th></tr>
           
           <tr><th><div align='center'>Cliente</div></th>
               <th><div align='center'>Totale Generale</div></th>
               <th><div align='center'>Materie prime</div></th>
               <th><div align='center'>Plastica</div></th>
               <th><div align='center'>Termoindurenti</div></th>
               <th><div align='center'>Semilavorato</div></th>
               <th><div align='center'>Altro</div></th></tr>
    </thead>

   <tbody>
   
<?php   
// Ciclo for per la lettura array 
for($a = 0; $a < count(array_vendite); $a++)   
{
?>   
<tr><td><DIV align='center' onmouseover='dettaglio(<?php echo $cdclie;?>)' onmouseout='chiudiDettaglio()'>0</DIV></td>
    <td><DIV align='right'>0</DIV></td>
    <td><DIV align='right'>0</DIV></td>
    <td><DIV align='right'>0</DIV></td>
    <td><DIV align='right'>0</DIV></td>
    <td><DIV align='right'>0</DIV></td>
    <td><DIV align='right'>0</DIV></td></tr>
<?php                       
}                 
?>
</tbody>
</table>
</div>
</td>
</tr>
</fieldset>

In questo nuovo php non faccio altro che caricarmi l'array dal database con l'SQL e poi"spalmarlo in un nuovo array
per la json_encode

<?php

// Qui mi carico l'array $array_Clienti con l'elenco dei clienti che non posto per semplicità
// SQL.......
// ..........

$count = 0;

// Rileggo l'array caricato
for($k=0; $k<sizeof($array_Clienti); $k++)
{
    $count = $count +=1;
    $cdcli = $array_Clienti[$k]['CDCLI'];
    $rascl = $array_Clienti[$k]['RASCL'];
                 
    $space = ' - ';               
                 
    $array01[$w] = array(
    'id' => "$count",
    'title' => "$cdclie $space $rascl $space",
    'allDay' => false);
                               
    $w++;
}
echo json_encode($array01); 
?>

Dimenticavo... tra le altre cose tale riquadro che compare di colore giallo, non lo vorrei in basso a sinistra ma aperto accanto ad ogni codice cliente con il passaggio del mouse. Per concludere ti dico che la chiusura del mouseover funziona perfettamente.

Spero che avrai pazienza a spiegarmi come raggiungere il mio obiettivo.
Grazie 10000000 e buona serata.
Vera

 

[criric]

io proverei qualcosa di piu semplice : estrai i clienti con i dettagli con una sola query, nel ciclo nascondi i dettagli di ognuno in un div nascosto con display:hidden nella propria riga e nelle funzioni javascript non fai altro che cambiare la proprietà css. appena riesco ti posto un esempio

 

[criric]

eccolo

<html>
    <head>
        <title>tooltip</title>
        <style>
            #quadroLazio {
                border-collapse: collapse;
            }
            #quadroLazio td {
                padding:6px;
                border:1px solid #777;
                text-align: center;
            }
            .dettaglio {
                display: none;
                position: absolute;
                background-color: #feb811;
                border: 1px solid #CCC;
                margin: 2px 0;
                padding: 10px;

            }
            .cdclie:hover .dettaglio {
                display: block;
            }
        </style>
    </head>
    <body>
        <table border="0" width="100%" id='quadroLazio'>
            <thead>
                <tr>
                    <th colspan="2">Vendita Clienti</th>
                    <th colspan="5">Vendita ROMA e provincia</th>
                </tr>
                <tr>
                    <th>Cliente</th>
                    <th>Totale Generale</th>
                    <th>Materie prime</th>
                    <th>Plastica</th>
                    <th>Termoindurenti</th>
                    <th>Semilavorato</th>
                    <th>Altro</th>
                </tr>
            </thead>
            <tbody>
                <?php
                // simulazione dei dati di una query
                $array_vendite = array(
                    array(
                        "cdclie" => 300,
                        "dettaglio" => "dettaglio primo cliente"
                    ),
                    array(
                        "cdclie" => 301,
                        "dettaglio" => "dettaglio secondo cliente"
                    )
                );
                foreach ($array_vendite as $cliente) {
                    ?>
                    <tr>
                        <td class="cdclie"><?php echo $cliente['cdclie']; ?><span class="dettaglio"><?php echo $cliente['dettaglio']; ?></span></td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>
                    <?php
                }
                ?>
            </tbody>
        </table>
    </body>
</html>

ti ho ripulito un po il codice html : non ha senso inserire dei div all'interno delle td.
In questo modo non ti serve nemmeno javascript fai tutto con i css

 

[Vera]

Sempre grazie per ogni tuo consiglio. Ma quando mi posizioni su ogni singolo cliente non ho quell'effetto del mouseover ( e a me serve quel tipo di visualizzazione, mi éstato richiesto cosi.). Cioé passando su ogni singolo cliente devo avere l'effetto dell'apertura di un riquadro con all'interno le informazioni di vendita.

Grazie .
Vera

 

[criric]

intendi l'effetto a discesa ? puoi postare un immagine per capire ?

 

[Vera]

Non so come postartelo, ci lavoro su e ti faccio sapere.
Vera

 

[Vera]

Ciao Criric,
postami il tuo indirizzo email cosi da poterti mandare sia l'immagine finale che il mini progetto a cui sto lavorando.
Grazie

 

[criric]

Ciao, info@criric.it

 

[Vera]

Ciao e scusami se ti rispondo in ritardo ma ho risolto. Se vuoi di invio le righe di codice della soluzione.
GRazie ancora per la tua disponibilità.
Vera

 

[criric]

postale qui. potrebbe servire ad altri

 

[Vera]

Questo é lo script con il CSS:

<script type="text/javascript">
$('tr').tooltip({
    position: { my: "left+15 center", at: "right center" },
    track: true,
    content: function () {
        return $(this).prop('title');
    }
});
</script>

<style type="text/css">
.ui-tooltip, .arrow:after{
    background: yellow;
    color: blue;
    z-index: 999;
    display: none;
    position: absolute;
}
</style>

e questa é la riga HTML:
<tr><td title='<?php echo $clienti[$a]['RASCL'];?></br><?php echo 'Seconda riga';?>'><DIV class="codiceCliente" align='center'><?php echo $clienti[$a]['CDCLI'];?></DIV></td>

Grazie per il tuo aiuto e scusami per il ritardo in quest'ultimo post ma ero in vacanze.......
A presto
Vera