Pagina 1 di 2 12 UltimoUltimo
Visualizzazione risultati 1 fino 30 di 60

Discussione: Aprire e chiudere dinamicamente un pop up al passaggio del mouse su icona - in php

  1. #1
    goalmanager non è connesso Utente
    Data registrazione
    08-03-2014
    Messaggi
    140

    Predefinito Aprire e chiudere dinamicamente un pop up al passaggio del mouse su icona - in php

    Buon giorno!! Scusate l'ora ma da quando perseguo il progetto del mio sito sono diventato un 'animale' notturno. A parte scherzi. Ho un problema. Utilizzo php per chiamare in causa il database e per mostrare le tabelle relative ai dati che utilizzo. In una di esse, in una cella, volevo far si che al passaggio del mouse su una immagine (una piccola lente) mi si aprisse un pop up e, quando il mouse lasciava e si spostava dall'immagine, mi si chiudesse il pop up stesso (il cui contenuto è dato dai dati relativi all'elemento selezionato).

    Avevo già fatto una cosa simile, ma l'utente doveva cliccare sulla lente e poi chiudere il pop up cliccando sulla x in alto a destra. Vorrei agevolarlo mostrandogli il pop up al passaggio del mouse e facendolo chiudere appena il mouse lascia la lente.

    Sono riuscito solo a far si che al passaggio sull'immagine si apra il pop up, ma non che si chiuda quando il mouse lascia l'immagine, nonostante abbia cercato online delle soluzioni (ma spesso la cosa consigliata è fare dei div che poi spariscono ma a me non piace molto con riferimento ai miei obiettivi..) e questo a causa del javascript che per me risulta particolarmente ostico...

    Ciò che ho fatto è questo...

    Codice:
     <script> 
    function apri(url) { 
        newin = window.open(url,'titolo','scrollbars=no,resizable=no,width=45,height=50,left=450,top=120,status=no,location=no,toolbar=no');
    } 
    </script>
    ps le dimensioni sono piccole perchè è una prova

    e poi quando con php io richiamo i dati e li dispongo in tabella...


    Codice PHP:

    echo "...

    <td><div class='classe12' ><a onmouseover=\"javascript:apri('dettagliato.php?cod=".$row[id]."')\";"?> <?php echo "><img src='imm/lente.png' title='Maggiori dettagli'>"; ?> <?php echo "</a></div></td>

    ..."
    ;
    Per chiudere, la finestra che appare, lasciando l'immagine con il puntatore del mouse, come posso fare?

    Grazie mille per eventuali consigli ed aiuti!!

  2. #2
    L'avatar di miki92
    miki92 non è connesso AlterGuru 2500
    Data registrazione
    21-04-2007
    Residenza
    Procida (NA)
    Messaggi
    4,226

    Predefinito

    Invece di aprire e chiudere un pop-up, che la maggior parte dei browser bloccano in automatico amenochè l'utente non ci clicchi sopra per aprirlo, non potresti utilizzare un tooltip html?
    Apprezzi l'aiuto? Offrimi un caffè!

  3. #3
    goalmanager non è connesso Utente
    Data registrazione
    08-03-2014
    Messaggi
    140

    Predefinito

    Ciao Miki, non avevo pensato al problema del browser, stanotte mentre facevo le prove avevo abilitato i pop up ma magari non tutti gli utenti sarebbero felici di farlo.
    Ho cercato la definizione di tooltip html perchè nemmeno lo conoscevo.
    Da quanto ho letto "...si intende un comune elemento dell'interfaccia grafica dell'utente. È utilizzato assieme ad un cursore, di solito il puntatore del mouse. L'utente passa col cursore sopra un oggetto, senza cliccarlo e appare un piccolo "box" con informazioni supplementari riguardo l'oggetto stesso...." sembra fare al caso mio, ma, anche se mi scoccia chiedertelo, potresti farmi un esempio?
    Perchè non ho proprio la più pallida idea di come utilizzarlo...

  4. #4
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,067

  5. #5
    goalmanager non è connesso Utente
    Data registrazione
    08-03-2014
    Messaggi
    140

    Predefinito

    Ciao anche a te Ale!!! :-)

    Allora quello che vorrei fare io è avere una icona che passandoci sopra con il mouse mi apra una finestra nella quale sia presente l'immagine dell'oggetto della specifica riga della tabella, e delle informazioni supplementari prese dal database.

    Ma il tooltip forse non fa al caso mio? Perchè mi pare che non sia poi così diverso dall'attributo 'title' o sbaglio? Ho preso il codice e l'ho provato ma non vedo differenze...

    Forse non ho visto bene?? Certo è che se non me ne sono accorto sono un bel pò svalvolato...

    Che ne dite?

  6. #6
    L'avatar di miki92
    miki92 non è connesso AlterGuru 2500
    Data registrazione
    21-04-2007
    Residenza
    Procida (NA)
    Messaggi
    4,226

    Predefinito

    Probabilmente non hai attivato/collegato jquery. Comunque se vuoi inserire html nel tooltip prova a vedere questo.
    Apprezzi l'aiuto? Offrimi un caffè!

  7. #7
    goalmanager non è connesso Utente
    Data registrazione
    08-03-2014
    Messaggi
    140

    Predefinito

    Ok Miki lo provo subito (ovviamente con i miei tempi da neofita.. ;-) ) scusa la domanda...

    Comunque se vuoi inserire html nel tooltip
    perchè cosa altro poteri inserire? Io vorrei inserire dei dati presi dal database con php. Vado correttamente??

  8. #8
    L'avatar di miki92
    miki92 non è connesso AlterGuru 2500
    Data registrazione
    21-04-2007
    Residenza
    Procida (NA)
    Messaggi
    4,226

    Predefinito

    Solitamente i tooltip comprendono un po' di testo semplice però dato che tu parli di "dati" non spiegando precisamente cosa sono questi dati io ho inteso dei valori in tabella o comunque dell'html e quindi ti ho dato la soluzione adatta alle tue esigenze.
    Apprezzi l'aiuto? Offrimi un caffè!

  9. #9
    goalmanager non è connesso Utente
    Data registrazione
    08-03-2014
    Messaggi
    140

    Predefinito

    Ok. Scusa hai ragione. Non ho esplicato bene cosa voglio fare. Al passaggio del mouse sull'icona avrei bisogno che mi comparisse una finestra che contenga dei dati del database relativamente a quel particolare oggetto della riga. Praticamente, sto facendo la pagina del mercato dei calciatori, ed avrei bisogno che l'utente al passaggio del mouse ecc... vedesse una finestrella con la foto del giocatore, le sue caratteristiche, ecc... tutti dati da estrapolare dal database... perchè ho problemi di spazio visto che la pagina ha già notevoli informazioni da far visualizzare (quali ad esempio il prezzo, la squadra offerente, il termine di durata dell'asta, ecc...). Spero di essere stato un pò più chiaro....proseguo con il tool??

  10. #10
    L'avatar di miki92
    miki92 non è connesso AlterGuru 2500
    Data registrazione
    21-04-2007
    Residenza
    Procida (NA)
    Messaggi
    4,226

    Predefinito

    Perfetto quindi foto più dati è dell'HTML e l'ultimo link postato da me fa al caso tuo
    Apprezzi l'aiuto? Offrimi un caffè!

  11. #11
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    Scusa miki92 , ma è meglio usare i Tooltip Widget o i Dialog Widget di jQuery UI per contenere del codice HTML ?

    nelle API di ToolTip leggo che il contentType supporta una stringa HTML
    ma non comprendo se accetta TAG HTML o solo una formattazione di stile CSS

    prendendo spunto da questa discussione ho fatto delle prove , eseguendo con AJAX il recupero delle informazioni dal DB , ed il testo formattato (quindi foto, descrizione, ecc.) ricevuto in risposta .. usando il DIALOG riesco a visualizzarlo , usando il TOOLTIP no..


    esempio con tooltip (non funzionante)

    esempio con dialog (funzionante)
    Ultima modifica di NLSweb : 04-10-2014 alle ore 16.07.36

  12. #12
    L'avatar di miki92
    miki92 non è connesso AlterGuru 2500
    Data registrazione
    21-04-2007
    Residenza
    Procida (NA)
    Messaggi
    4,226

    Predefinito

    Entrambi possono contenere HTMl. Guarda questo esempio.
    Apprezzi l'aiuto? Offrimi un caffè!

  13. #13
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    Grazie ! adesso ho compreso meglio e gli esempi sopra elencati funzionano entrambi.

    l'unica cosa che riporto e' che con il tooltip non posso fare lo scroll se il contenuto è molto grande..

  14. #14
    goalmanager non è connesso Utente
    Data registrazione
    08-03-2014
    Messaggi
    140

    Predefinito

    Come inserisco la possibilità di visualizzare jquery nella pagina? Tutti gli esempi tranne uno non producono gli effetti desiderati....

    Dopo varie prove e tentativi ritorno su questo argomento. Che ho capito essere per me alquanto ostico. Riesco a far funzionare l'esempio in questa pagina

    http://jqueryui.com/tooltip/

    ma se provo ad adattarlo alle mie esigenze trovo difficoltà, perchè con il click sull'icona io mi programmavo la pagina, che doveva scaturire come pop up, a parte, mentre qui non capisco come devo fare per programmarla....nella stessa pagina???
    Ultima modifica di goalmanager : 05-10-2014 alle ore 17.43.18

  15. #15
    L'avatar di miki92
    miki92 non è connesso AlterGuru 2500
    Data registrazione
    21-04-2007
    Residenza
    Procida (NA)
    Messaggi
    4,226

    Predefinito

    Citazione Originalmente inviato da NLSweb Visualizza messaggio
    Grazie ! adesso ho compreso meglio e gli esempi sopra elencati funzionano entrambi.

    l'unica cosa che riporto e' che con il tooltip non posso fare lo scroll se il contenuto è molto grande..
    Il tooltip prende la dimensione del contenuto, no?

    Citazione Originalmente inviato da goalmanager Visualizza messaggio
    Come inserisco la possibilità di visualizzare jquery nella pagina? Tutti gli esempi tranne uno non producono gli effetti desiderati....

    Dopo varie prove e tentativi ritorno su questo argomento. Che ho capito essere per me alquanto ostico. Riesco a far funzionare l'esempio in questa pagina

    http://jqueryui.com/tooltip/

    ma se provo ad adattarlo alle mie esigenze trovo difficoltà, perchè con il click sull'icona io mi programmavo la pagina, che doveva scaturire come pop up, a parte, mentre qui non capisco come devo fare per programmarla....nella stessa pagina???
    Questo è il codice sorgente dell'esempio sopra linkato:
    Codice HTML:
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI Tooltip - Custom content</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">
      <style>
      .photo {
        width: 300px;
        text-align: center;
      }
      .photo .ui-widget-header {
        margin: 1em 0;
      }
      .map {
        width: 350px;
        height: 350px;
      }
      .ui-tooltip {
        max-width: 350px;
      }
      </style>
      <script>
      $(function() {
        $( document ).tooltip({
          items: "img, [data-geo], [title]",
          content: function() {
            var element = $( this );
            if ( element.is( "[data-geo]" ) ) {
              var text = element.text();
              return "<img class='map' alt='" + text +
                "' src='http://maps.google.com/maps/api/staticmap?" +
                "zoom=11&size=350x350&maptype=terrain&sensor=false&center=" +
                text + "'>";
            }
            if ( element.is( "[title]" ) ) {
              return element.attr( "title" );
            }
            if ( element.is( "img" ) ) {
              return element.attr( "alt" );
            }
          }
        });
      });
      </script>
    </head>
    <body>
     
    <div class="ui-widget photo">
      <div class="ui-widget-header ui-corner-all">
        <h2>St. Stephen's Cathedral</h2>
        <h3><a href="http://maps.google.com/maps?q=vienna,+austria&amp;z=11" data-geo="">Vienna, Austria</a></h3>
      </div>
      <a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG">
        <img src="http://forum.it.altervista.org/images/st-stephens.jpg" alt="St. Stephen&apos;s Cathedral" class="ui-corner-all">
      </a>
    </div>
     
    <div class="ui-widget photo">
      <div class="ui-widget-header ui-corner-all">
        <h2>Tower Bridge</h2>
        <h3><a href="http://maps.google.com/maps?q=london,+england&amp;z=11" data-geo="">London, England</a></h3>
      </div>
      <a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg">
        <img src="http://forum.it.altervista.org/images/tower-bridge.jpg" alt="Tower Bridge" class="ui-corner-all">
      </a>
    </div>
     
    <p>All images are part of <a href="http://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>
    and are licensed under <a href="http://creativecommons.org/licenses/by-sa/3.0/deed.en" title="Creative Commons Attribution-ShareAlike 3.0">CC BY-SA 3.0</a> by the copyright holder.</p>
     
     
    </body>
    </html>
    Basta modificare questo codice a tuo piacimento ora. Comunque devi avere una minima base di JS/HTML per fare ciò, questo è ovvio.
    Apprezzi l'aiuto? Offrimi un caffè!

  16. #16
    goalmanager non è connesso Utente
    Data registrazione
    08-03-2014
    Messaggi
    140

    Predefinito

    Grazie Miki, lo provo subito e ti faccio sapere!!!

  17. #17
    goalmanager non è connesso Utente
    Data registrazione
    08-03-2014
    Messaggi
    140

    Predefinito

    Miki ma posso ordinare in tabelle i dati e le immagini che devo inserire??? Cioè, ok inserire dell'HTML, ma posso anche ordinarlo con table e div?? Se si come faccio?? PS comunque grazie perchè adesso mi è un bel pò più chiaro, e tra l'altro quest'ultimo (pur essendo lo stesso di uno precedente) riesco a vederlo, mentre il precedente no...sicuramente avrò sbagliato io a metter qualcosa....

  18. #18
    L'avatar di miki92
    miki92 non è connesso AlterGuru 2500
    Data registrazione
    21-04-2007
    Residenza
    Procida (NA)
    Messaggi
    4,226

    Predefinito

    Per HTML è inteso il codice HTML di cui fanno parte anche tabelle ed immagini. Quindi puoi inserire tutto.
    Ora non capisco dov è che ti blocchi. Hai modificato l'HTML e il JS?
    Apprezzi l'aiuto? Offrimi un caffè!

  19. #19
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    Il tooltip prende la dimensione del contenuto, no?
    Puoi dimensionarlo come vuoi , nel mio esempio essendo troppo grande avevo ridotto la dimensione ma non posso usare lo scroll..

  20. #20
    goalmanager non è connesso Utente
    Data registrazione
    08-03-2014
    Messaggi
    140

    Predefinito

    Citazione Originalmente inviato da miki92 Visualizza messaggio
    Per HTML è inteso il codice HTML di cui fanno parte anche tabelle ed immagini. Quindi puoi inserire tutto.
    Ora non capisco dov è che ti blocchi. Hai modificato l'HTML e il JS?
    Ho fatto diverse prove...praticamente mi blocco in tutte...



    ho provato questo

    http://rndnext.blogspot.it/2009/02/j...x-tooltip.html

    ma nemmeno riesco a vederne gli effetti...ho provato a scaricare jquery 1.3.1. ma 1) non so come si fa 2) non so se basta solo quello, visto che ad un certo punto ho trovato la possibilità di inserire un link ma anche inserendo questo

    Codice:
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/svn/tags/1.3.1"></script>
    non lo vedo comunque...

    e poi ho provato questo che è quello che già mi riesce capire un pò di più...però non capisco come inserire i dati in una tabella...

    Codice:
    <!DOCTYPE html>
    <html>
        <head>
            <title>Tooltip con jQuery, HTML5 e CSS3</title>
            <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
            <script>
    		$(function() {
    			
    			$('body').after('<div id="mrw-tooltip"><i></i><span class="tt-inner"></span></div>');
    			$('.tooltip').mousemove(function(e) {
    				var tip = $(this).data('tip');
    				var scx = $(document).scrollTop();
    				var scy = $(document).scrollLeft();
    				$('#mrw-tooltip span.tt-inner').text(tip)
    				$('#mrw-tooltip').show().css({ 'left': e.clientX + scy - 10 + 'px', 'top': e.clientY + scx + 10 + 'px' })
    			}).mouseout(function(){
    				$('#mrw-tooltip').hide();	
    			});
    			
    		});        
            </script>
            
           
            
    		<style>
    		#mrw-tooltip {
    			display: none;
    			position: absolute;
    			z-index: 999;
    			background: #333;
    			padding: 5px 7px;
    			width: 200px;
                height: 200px;
    		}
    		#mrw-tooltip span {
    			color: #EEE;
    			font: normal 12px arial;
    			line-height: 140%;
    		}
    		#mrw-tooltip i {
    			display: block;
    			position: absolute;
    			top: -5px;
    			left: 5px;
    			width: 0;
    			height: 0;
    			border-left: 7px solid transparent;
    			border-right: 7px solid transparent;
    			border-bottom: 7px solid #333;	
    		}
            
           </style>
            
            
        </head>
    <body>
    
    <p style="width: 400px; margin: 50px auto 100px auto;">Prova a passare col mouse sopra a <a href="" class="tooltip" 
    
    
    
    
    data-tip="<table><tr><td>Esempio di tooltip da</td></tr><tr><td> mostrare al passaggio del mouse</td></tr></table>">
    
    
    
    
    
    
    questo link</a> per vedere il tooltip all'opera.</p>
    
    
    
    
    
    
    
    
    
    
    
    
    
    </body>
    </html>

    La tabella la vedo, in codice, direttamente nel riquadro, ergo che ho commesso un grave errore, ma non capisco proprio come inserirla...per un attimo avevo pensato che data-tip funzionasse come l'attributo <title> per cui non vi era possibilità di ordinare in tabella i dati, ma se non è così, mi potresti dire dove posso inserire l'HTML?

  21. #21
    goalmanager non è connesso Utente
    Data registrazione
    08-03-2014
    Messaggi
    140

    Predefinito

    Quello che vorrei realizzare io è una cosa del genere...

    http://rndnext.blogspot.it/2009/02/j...x-tooltip.html

    sarebbe fantastico per la mia esigenza, ed è davvero l'ultimo tassello del progetto visto che poi è semi-ultimato....però non capisco come far si che si possa vedere....

  22. #22
    L'avatar di miki92
    miki92 non è connesso AlterGuru 2500
    Data registrazione
    21-04-2007
    Residenza
    Procida (NA)
    Messaggi
    4,226

    Predefinito

    goalmanager se tu scarichi solo codici o fai copia ed incolla non servirà a niente. Ti sto dicendo da diversi post che devi modificare il javascript a tuo piacimento!
    Apprezzi l'aiuto? Offrimi un caffè!

  23. #23
    goalmanager non è connesso Utente
    Data registrazione
    08-03-2014
    Messaggi
    140

    Predefinito

    Ci provo subito!!! Grazie mille...

  24. #24
    goalmanager non è connesso Utente
    Data registrazione
    08-03-2014
    Messaggi
    140

    Predefinito

    Comunque ti capisco, e hai ragione, incollare solo codici non è il sistema, però, io devo sempre avere una base da osservare perchè con php e html me la cavo, ma con js e jquery no quindi se non posso nemmeno vedere qualcosa per me è chiaro che risulterà impossibile...

    Comunque sono riuscito a scaricare jquery 1.3.1. e l'ho inserito in una cartella provejquery...

    Per il discorso che ti facevo prima (che ho bisogno di visualizzare una base) penso che questo possa fare al caso mio...

    Codice:
    <!DOCTYPE html>
    <html>
        <head>
            <title>Tooltip con jQuery, HTML5 e CSS3</title>
            <script type="text/javascript" src="provejquery/jquery.mobile-1.3.1.js"></script>
            
            <script>
    		$(function()
    {
      var hideDelay = 500;  
      var currentID;
      var hideTimer = null;
    
      // One instance that's reused to show info for the current person
      var container = $('<div id="personPopupContainer">'
          + '<table width="" border="0" cellspacing="0" cellpadding="0" align="center" class="personPopupPopup">'
          + '<tr>'
          + '   <td class="corner topLeft"></td>'
          + '   <td class="top"></td>'
          + '   <td class="corner topRight"></td>'
          + '</tr>'
          + '<tr>'
          + '   <td class="left">&nbsp;</td>'
          + '   <td><div id="personPopupContent"></div></td>'
          + '   <td class="right">&nbsp;</td>'
          + '</tr>'
          + '<tr>'
          + '   <td class="corner bottomLeft">&nbsp;</td>'
          + '   <td class="bottom">&nbsp;</td>'
          + '   <td class="corner bottomRight"></td>'
          + '</tr>'
          + '</table>'
          + '</div>');
    
      $('body').append(container);
    
      $('.personPopupTrigger').live('mouseover', function()
      {
          // format of 'rel' tag: pageid,personguid
          var settings = $(this).attr('rel').split(',');
          var pageID = settings[0];
          currentID = settings[1];
    
          // If no guid in url rel tag, don't popup blank
          if (currentID == '')
              return;
    
          if (hideTimer)
              clearTimeout(hideTimer);
    
          var pos = $(this).offset();
          var width = $(this).width();
          container.css({
              left: (pos.left + width) + 'px',
              top: pos.top - 5 + 'px'
          });
    
          $('#personPopupContent').html('&nbsp;');
    
          $.ajax({
              type: 'GET',
              url: 'personajax.aspx',
              data: 'page=' + pageID + '&guid=' + currentID,
              success: function(data)
              {
                  // Verify that we're pointed to a page that returned the expected results.
                  if (data.indexOf('personPopupResult') < 0)
                  {
                      $('#personPopupContent').html('<span >Page ' + pageID + ' did not return a valid result for person ' + currentID + '.<br />Please have your administrator check the error log.</span>');
                  }
    
                  // Verify requested person is this person since we could have multiple ajax
                  // requests out if the server is taking a while.
                  if (data.indexOf(currentID) > 0)
                  {                  
                      var text = $(data).find('.personPopupResult').html();
                      $('#personPopupContent').html(text);
                  }
              }
          });
    
          container.css('display', 'block');
      });
    
      $('.personPopupTrigger').live('mouseout', function()
      {
          if (hideTimer)
              clearTimeout(hideTimer);
          hideTimer = setTimeout(function()
          {
              container.css('display', 'none');
          }, hideDelay);
      });
    
      // Allow mouse over of details without hiding details
      $('#personPopupContainer').mouseover(function()
      {
          if (hideTimer)
              clearTimeout(hideTimer);
      });
    
      // Hide after mouseout
      $('#personPopupContainer').mouseout(function()
      {
          if (hideTimer)
              clearTimeout(hideTimer);
          hideTimer = setTimeout(function()
          {
              container.css('display', 'none');
          }, hideDelay);
      });
    });
            </script>
            
           
            
    		<style>
    		#personPopupContainer
    {
        position:absolute;
        left:0;
        top:0;
        display:none;
        z-index: 20000;
    }
    
    .personPopupPopup
    {
    }
    
    #personPopupContent
    {
        background-color: #FFF;
        min-width: 175px;
        min-height: 50px;
    }
    
    .personPopupPopup .personPopupImage
    {
        margin: 5px;
        margin-right: 15px;
    }
    
    .personPopupPopup .corner 
    {
        width: 19px;
        height: 15px;
    }
        
    .personPopupPopup .topLeft 
    {
        background: url(../images/personpopup/balloon_topLeft.png) no-repeat;
    }
        
    .personPopupPopup .bottomLeft 
    {
        background: url(../images/personpopup/balloon_bottomLeft.png) no-repeat;
    }
        
    .personPopupPopup .left 
    {
        background: url(../images/personpopup/balloon_left.png) repeat-y;
    }
        
    .personPopupPopup .right 
    {
        background: url(../images/personpopup/balloon_right.png) repeat-y;
    }
        
    .personPopupPopup .topRight 
    {
        background: url(../images/personpopup/balloon_topRight.png) no-repeat;
    }
        
    .personPopupPopup .bottomRight 
    {
        background: url(../images/personpopup/balloon_bottomRight.png) no-repeat;
    }
        
    .personPopupPopup .top 
    {
        background: url(../images/personpopup/balloon_top.png) repeat-x;
    }
        
    .personPopupPopup .bottom 
    {
        background: url(../images/personpopup/balloon_bottom.png) repeat-x;
        text-align: center;
    }
            
           </style>
            
            
        </head>
    <body>
    
    <a class="personPopupTrigger" href="<link to person>" rel="4218,a17bee64-8593-436e-a2f8-599a626370df">House, Devon</a>
    <a class="personPopupTrigger" href="<link to person>" rel="4218,f6434101-15bf-4c06-bbb2-fbe8c111b948">House, Gregory</a>
    
    
    
    
    
    </body>
    </html>
    però non riesco a vederlo. Oltre a jquery 1.3.1. devo scaricare altro? Perchè dove l'ho trovato danno per scontate un sacco di cose e oltretutto con google traslate non è che riesca a capire benissimo quello che devo fare... tutto qui...

    Però capisco che per te possa essere una rottura quindi se ci sono troppe cose che ho lasciato per strada, non ti preoccupare...ritorno alla soluzione con il click anche se questa al passaggio del mouse sarebbe mostruosamente migliore... ;-)

  25. #25
    goalmanager non è connesso Utente
    Data registrazione
    08-03-2014
    Messaggi
    140

    Predefinito ..la storia infinita continua...

    Allora ho predisposto la seguente pagina di prova....

    Codice PHP:

    <?php
    session_start
    (); //la pagina dovrebbe aprirsi successivamente al login quindi se l'utente è già connesso...ecc..ecc..

    if(!isset($_SESSION['user_id']))
    die(
    'Non sei loggato');



    $DB_host = '....';
    $DB_user = '.......';
    $DB_password = '.......';
    $DB_name = '........';

    $link = mysql_connect($DB_host, $DB_user, $DB_password);
    if (!
    $link) {
    die (
    'Non riesco a connettermi: ' . mysql_error());
    }

    $db_selected = mysql_select_db($DB_name, $link);
    if (!
    $db_selected) {
    die (
    "Errore nella selezione del database: " . mysql_error());
    }
    ?>




    <?php
    $result
    = mysql_query('SELECT * FROM users WHERE id='.mysql_real_escape_string($_SESSION['user_id']))
    or die (
    "Query non valida");
    while((
    $row = mysql_fetch_assoc($result))) {
    $row[team];
    $squadrautente = $row[team];

    }
    ?>

    <?php
    $idutente
    = mysql_real_escape_string($_SESSION['user_id']);

    ?>

    poi ho inserito quanto ha fatto Miki, provando una tabella semplicissima e inserendovi due variabili php...


    Codice:
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI Tooltip - Custom content</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">
    
    
    <script>
      $(function() {
        $( document ).tooltip({
          items: "img, [data-geo], [title]",
          content: function() {
            var element = $( this );
             if ( element.is( "[data-geo]" ) ) {
              var text = element.text();
              return "<table><tr><td class='map'><?php echo $idplayer;?></td><td> <?php echo $skillplayer;?></td></tr><tr><td>testo generico</td></tr></table>";
            }
           /* if ( element.is( "[data-geo]" ) ) {
              var text = element.text();
              return "<img class='map' alt='" + text +
                "' src='http://maps.google.com/maps/api/staticmap?" +
                "zoom=11&size=350x350&maptype=terrain&sensor=false&center=" +
                text + "'>";
            }*/
            if ( element.is( "[title]" ) ) {
              return element.attr( "title" );
            }
            if ( element.is( "img" ) ) {
              return element.attr( "alt" );
            }
          }
        });
      });
      </script>
    
    
      <style>
      .photo {
        width: 300px;
        text-align: center;
      }
      .photo .ui-widget-header {
        margin: 1em 0;
      }
      .map {
        width: 350px;
        height: 350px;
      }
      .ui-tooltip {
        max-width: 350px;
      }
      </style>
      
    </head>
    <body>
    a questo punto chiamo in causa il database e mi stampo la tabella con i nomi dei giocatori della squadra


    Codice PHP:



    <?php






    $myteam
    =mysql_query("SELECT * FROM players where squadra = '$squadrautente'");

    echo
    '<table class="righealternate" border="2" id="myTable"><thead>

    <tr>

    <th title="Numero di maglia del calciatore"></th>

    <th title="Nome del calciatore"></th></tr></thead><tbody>'
    ;



    while(
    $row=mysql_fetch_array($myteam))

    {

    $number= $row['number'];
    $name= $row['name'];
    $idplayer= $row['idplayer'];
    $skillplayer= $row['skillplayer'];



    echo
    "<tr>


    <td>
    $number</td>

    <td><a href='' data-geo=''>
    $name</a></td>


    </tr></tbody></table>"
    ;




    ?>
    Codice HTML:
    </body>
    </html>

    A questo punto passando il mouse sul nome del giocatore vedo la scritta 'testo generico' ma non gli altri suoi dati (nome e id) che ho chiesto di vedere. Immagino che io debba usare altro...potreste dirmi che cosa? Jquery?

  26. #26
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    Se ho compreso bene , vuoi che al passaggio del mouse il tooltip mostri delle informazioni aggiuntive del calciatore

    ma queste informazioni che "estrai" dal DB se vuoi che siano subito disponibili nel tooltip le devi dichiarare come nell'elemento

    esempio:
    Codice:
    /* singolo elemento di un giocatore */
    <li title="...qui inserisci i dettagli da mostrare nel tooltip....">NomeGiocatore</li>
    in pratica quando generi con PHP la tua tabella o lista dei giocatori , i dati estratti dal DB ed assegnati a delle variabili verranno innestati nel codice formattato HTML

    esempio:
    Codice:
    echo "<li title='".$dettaglio."'>".$nome."</li>";
    quindi ti rimane solo da caricare la libreria jQuery UI e definire la funzione di base

    inizia in questo modo , se poi vuoi che il dettaglio sia un elemento HTML formattato (quidi imaggini, testo , ecc.)
    puoi definire il contenuto con
    Codice:
    $("identificativo dell'elemento").tooltip( "option", "content", variabileHTML );
    in cui l'identificativo punta all'elemento e la variabile contiene HTML formattato da visualizzare

  27. #27
    goalmanager non è connesso Utente
    Data registrazione
    08-03-2014
    Messaggi
    140

    Predefinito

    Ciao! Innanzitutto grazie per la risposta :-)

    Si vorrei proprio fare ciò che hai detto. Ho una lista di giocatori e vorrei che l'utente passando il mouse sui loro nomi ne vedesse le caratteristiche (già presenti in db ovviamente)


    ma queste informazioni che "estrai" dal DB se vuoi che siano subito disponibili nel tooltip le devi dichiarare come nell'elemento
    Non basta dichiarare le variabili nel ciclo while come ho fatto io?

    Per questo esempio ho dichiarato

    Codice:
    $number= $row['number']; 
    $name= $row['name']; 
    $idplayer= $row['idplayer']; 
    $skillplayer= $row['skillplayer'];
    e vorrei che al passaggio del mouse sul nome del giocatore l'utente visualizzasse nel tooltip il suo id e la sua skill (che sono entrambi numeri nel caso di specie..poi dovrei complicarlo facendo vedere la foto (immagine) e altri dati (stringhe e numeri) ma per ora sarei già più che soddisfatto se riuscissi a far vedere questi due numeri...)

    Le variabili che ho dichiarato basta dichiararle così o serve altro?

  28. #28
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    Come ti avevo già scritto , una volta che estrai i dati dal DB con PHP e li assegni a delle variabili

    poi queste devono essere usate per costruire la tua lista di giocatori , quindi sia le informazioni immadiatamente visibili e sia quelle contenute nel tooltip

    esempio:
    Codice:
    echo "<div title='ID:".$idplayer."-SKILL:".$skillplayer."'>".$name."</div>";

  29. #29
    goalmanager non è connesso Utente
    Data registrazione
    08-03-2014
    Messaggi
    140

    Predefinito

    Ok...adesso ho capito....perdonami prima non avevo capito....

    però scusami ho una domanda...se io le dichiaro, e come vedo dal tuo esempio devo farlo nel title, poi questo rileva o no ai fini di una organizzazione dei dati in tabella?

    perchè quello che mi piacerebbe far vedere è tipo una cosa del genere:

    https://www.google.it/search?q=sched...tm%3B745%3B466


    ovviamente moooolto meno complessa e con mooolti meno dati....però con immagine e con una decina di dati...

    Comunque ho fatto come mi hai detto modificando la parte interessata così...

    Codice:
    while( $row=mysql_fetch_array($myteam))  
    
    {  
    
    $number= $row['numeromaglia']; 
    $name= $row['nome']; 
    $idplayer= $row['id']; 
    $skillplayer= $row['skill']; 
    
    
    
      echo"<tr>    
       
       
      <div>$number</div> 
    
       <div title='ID:".$idplayer."-SKILL:".$skillplayer."><a href='' data-geo=''>$name</a></div> 
       
    
      </tr></tbody></table>";  
       }

  30. #30
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    ci sono diversi errori nel codice da te postato..

    1) il TAG di chiusura della tabella deve stare fouri dal ciclo WHILE
    2) all'intero del ciclo tu creai le singole righe della tabella
    3) il TAG <a> la definizione di HREF non puoi usare i doppi apici in quanto questi definiscono ECHO , quindi usa i singoli apici oppure usa \"


    poi questo rileva o no ai fini di una organizzazione dei dati in tabella?
    tutto il contenuto dell'attributo TITLE apparrirà nel TOOLTIP , in questo esempio sono delle informazioni di testo
    ma puoi anche inserire del codice HTML come ti spiegava precedentemente miki92

Pagina 1 di 2 12 UltimoUltimo

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •