Help interattivo con jQuery e CSS

paulb

Nuovo Utente
22 Gen 2013
5
0
0
Sto cercando di realizzare un Help interattivo che funzioni in questo modo: vicino ad ogni campo di input dove prevedo che serva l'Help metto un div con un'immagine di un ?, passando col Mouse su questa immagine deve comparire il testo di Help con effetto tipo Bubble (o tipo title, per intenderci, ma il testo può essere HTMl compreso di tag di formattazione), spostando il mouse il testo deve scomparire.
Facendo invece click col Mouse sul ?, vorrei che il testo rimanesse visibile anche spostando poi il mouse, e che scomparisse solo chiudendolo con un click sul testo stesso (questo per facilitare la lettura, l'eventuale stampa ecc.).

Premetto che sono una pippa e un niubbo con jQuery, comunque sono riuscito a arrabattare una cosa che funziona se esiste un solo campo di Help e quindi un solo DIv di testo di Help da mostrare, ma mi si incasina tutto se i campi con l'Help (come sarebbe poi il caso che mi serve) sono più di uno.
Ho creato una classe "trigger" relativa ai div che contengono l'immagine di Help (identificati poi con id "trigger1", "trigger2" ecc.), e una classe "chiudibile" per i testi dei div di Help, con id "chiudi1", "chiudi2" ecc: alla onMouseOver() su un div trigger, lancio una funzione che fa la show() del relativo div di help, al click() oltre alla show() setto un attributo del div ('clicked'=true), attributo che di default alla load del document è settato a false; alla onMouseOut() faccio la hide() solo se l'attributo di cui sopra è false.
Se non è chiaro, posso postare il codice o parte di esso.
Il risultato è che se esiste un campo solo di classe "chiudibile", ovvero un solo div di Help, funziona perfettamente.
Se invece i campi e quindi i div sono più di uno, al primo click sbaglio qualcosa, i valori dei div si confondono e mi rimangono aperti più div, anche se poi passo solamente sopra col Mouse senza più cliccare.

Qualcuno sa suggerirmi:
- dove sbaglio? concettualmente o sono errori di codice jQuery?
- esiste un metodo più semplice o più standard per fare quello che mi serve? sto cercando di scoprire l'acqua calda?

Grazie
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Se non è chiaro, posso postare il codice o parte di esso.
Ciao, sei stato chiaro e l'idea pare buona, magari se posti il codice possiamo farci qualche prova e trovare evenutuali errori
 

paulb

Nuovo Utente
22 Gen 2013
5
0
0
Ciao, sei stato chiaro e l'idea pare buona, magari se posti il codice possiamo farci qualche prova e trovare evenutuali errori

Spero non sia troppo lungo postare l'intero codice.
Il primo esempio è quello che funziona, però funziona solo perché di elementi da aprire/chiudere (classe "chiudibile") nella pagina ce n'è uno solo. Taglio la parte delle definizioni del DOM e dell'Head.
Codice:
<body>
<h2>Apertura di un elemento al passaggio del mouse e/o al click</h2>
<h3>Nell'ultimo esempio si apre al passaggio del mouse, si chiude se sposto il mouse, si apre e rimane aperto se faccio click</h2>
<h2><u>Semplificato rispetto alla versione precedente, classi disgiunte e ripulite</u></h2>
Gli elementi che si aprono e chiudono hanno la classe <span style="color: #990000">chiudibile</span>
<hr />
<script>
$(document).ready(function() {
	var value, div = $(".chiudibile")[0];
	jQuery.data(div, 'clicked', false);	// serve solo nel caso trigger
 
	function ShowDiv(classe) {
		$("."+classe).show();
		}	
		
    $(".chiudibile").click(
        function(){
				$(".chiudibile").hide('slow');
				jQuery.data(div, 'clicked', false);									
            });
			
     $(".trigger").click(
        function(){
				ShowDiv("chiudibile");
				jQuery.data(div, 'clicked', true);
			});							

    $(".trigger2").mouseover(	
        function(){
				$(".chiudibile").show();
            });							

    $(".trigger2").mouseout(
        function(){
				value = jQuery.data(div, "clicked");
				if (!value) 
					$(".chiudibile").hide();
			});								


    }
 
);
</script>
<div class="container-demo">
    <p><div><span class="trigger">Apri l'elemento se clicchi</span></div></p>
    <p><div><span class="trigger2">Apri l'elemento se passi col mouse<span></div></p>	
    <p><div><span class="trigger trigger2">Apri l'elemento se clicchi (rimane aperto) e se passi col mouse (si richiude)</span></div></p>
<br />	
</div>
<div class="chiudibile" style="top:200px; left:840px;position:fixed; height:100px; width:100px; background-color:green;z-index:200">chiudimi tu!</div>
</div>
</body>

Qua ci sono due tentativi falliti con più campi da aprire (e sarebbe questo il caso dell'Help che vorrei costruire), ho difficoltà a settare le proprietà sui div desiderati. Tutt ok all'apertura, ma poi non riesco a gestire le variabili in modo da tenere in memoria quali sono gli elementi cliccati e quelli da chidere automaticamente. Dimostra quanto sono niubbo in jquery, purtroppo mi intendo più di php..... :confused:
Mi scuso anche per gil if invece dell'array con indici, ma avrei ripulito il codice una volta funzionante......

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

<style type="text/css">
.chiudibile {
	background-color:#FFFFCC;
	z-index:200;
	right:-420px;
	top: 2px;
	position:absolute;
	border-width: 1px;
	border-color: #cccccc;
	display:none;
	max-width: 400px;
}	
.container-demo {
	position:relative;
}
.trigger {
	position:relative;

}
</style>
</head>

<body>

<h2>Apertura di un elemento al passaggio del mouse e/o al click</h2>
<h3>Gestito appositamente per HELP, quindi il posizionamento &egrave; relativo e i campi di testo sono distinti</h2>

Gli elementi che si aprono e chiudono hanno la classe <span style="color: #990000">chiudibile</span>
<hr />

<script>
$(document).ready(function() {
	var value, div1 = $(".chiudibile")[0];
	var  div2 = $(".chiudibile")[1];	
	var  div3 = $(".chiudibile")[2];	
	jQuery.data(div1, 'clicked', false);jQuery.data(div2, 'clicked', false);jQuery.data(div3, 'clicked', false);
 
	function ShowDiv(id) {
		if (id == 1)
			var text = "<p>All new content. <em>You bet!</em></p>";
		if (id == 2)
			var text = "Testo associato all'Help n.2";			
		if (id == 3)
			var text = "Testo associato all'Help n.3<br><h2>Apertura di un elemento al passaggio del mouse e/o al click</h2><h3>Gestito appositamente per HELP, quindi il posizionamento &grave; relativo e i campi di testo sono distinti</h2>";		  
		$("#chiudi"+id).css("display","block");	
		$("#chiudi"+id).html(text);	
		var larg =$("#chiudi"+id).width();	
		var off = (larg + 20)*(-1);
		//alert(larg + "|" + off);
		$("#chiudi"+id).css("right",off);
		$("#chiudi"+id).show();
	}	
		
	function Hidediv(id) {
		$("#chiudi"+id).hide();
	}	
		
    $(".chiudibile").click(
        function(){
				$(".chiudibile").hide('slow');
				jQuery.data(div1, 'clicked', false);
				jQuery.data(div2, 'clicked', false);				jQuery.data(div3, 'clicked', false);				
            });
			
     $(".trigger").click(
        function(){
				$("#trigger1").mouseover(	
					function(){ ShowDiv("1");
					div1 = $(".chiudibile")[0];						jQuery.data(div1, 'clicked', true);
					});
				$("#trigger2").mouseover(	
					function(){ ShowDiv("2");
					div2 = $(".chiudibile")[1];	
					jQuery.data(div2, 'clicked', true);						});
				$("#trigger3").mouseover(	
					function(){ ShowDiv("3");
					div3 = $(".chiudibile")[2];	
					jQuery.data(div3, 'clicked', true);					
					});					

			});							

    $(".trigger").mouseover(	
        function(){
		/*
				if ($(".trigger").eq(0)) ShowDiv("1");
				if ($(".trigger").eq(1)) ShowDiv("2");
				if ($(".trigger").eq(2)) ShowDiv("3"); 
				if ($(".trigger").attr("id") == "trigger1") ShowDiv("1");
				if ($(".trigger").attr("id") == "trigger2") ShowDiv("2");*/
				
				$("#trigger1").mouseover(	
					function(){ ShowDiv("1");
					});
				$("#trigger2").mouseover(	
					function(){ ShowDiv("2");
					});	
				$("#trigger3").mouseover(	
					function(){ ShowDiv("3");
					});							
            });							

    $(".trigger").mouseout(
        function(){

				$("#trigger1").mouseout(
					function(){
					div1 = $(".chiudibile")[0];					
					value1 = jQuery.data(div1, "clicked");
					if (!value1) {
						 Hidediv("1");
						}
						});
				$("#trigger2").mouseout(
					function(){
					div2 = $(".chiudibile")[1];					
					value2 = jQuery.data(div2, "clicked");
					if (!value2) {
						 Hidediv("2");
						}
						});
					$("#trigger3").mouseout(
					function(){
					div3 = $(".chiudibile")[2];					
					value3 = jQuery.data(div3, "clicked");
					if (!value3) {
						 Hidediv("3");
						}
						});					
			});								


    }
 
);//FINE DOM
</script>
<div class="container-demo">
   <p><div style="max-width:500px"><span class="trigger" id="trigger1" >Apri l'elemento 1 se clicchi (rimane aperto) e se passi col mouse (si richiude)<span class="chiudibile"id="chiudi1"></span></div></p>
    <p><div style="max-width:500px"><span class="trigger" id="trigger2" >Apri l'elemento 2 se clicchi (rimane aperto) e se passi col mouse (si richiude)<span class="chiudibile"id="chiudi2"></span></span></div></p>	
    <p><div style="max-width:500px"><span class="trigger" id="trigger3" >Apri l'elemento 3 se clicchi (rimane aperto) e se passi col mouse (si richiude)<span class="chiudibile" id="chiudi3"></span></span></div></p>
<br />	

</div><!--container demo-->




</div>
</body>

2.tentativo (peggiore del primo; posto solo il codice jquery, tutto il resto è uguale):
Codice:
<script>
$(document).ready(function() {
	var value1, div1 = $("#chiudi1");
	var value2, div2 = $("#chiudi2");	
	var value3, div3 = $("#chiudi3");	
 
	jQuery.data(div1, 'clicked', false);jQuery.data(div2, 'clicked', false);jQuery.data(div3, 'clicked', false);
 
	function ShowDiv(id) {
		if (id == 1)
			var text = "<p>All new content. <em>You bet!</em></p>";
		if (id == 2)
			var text = "Testo associato all'Help n.2";			
		if (id == 3)
			var text = "Testo associato all'Help n.3<br><h2>Apertura di un elemento al passaggio del mouse e/o al click</h2><h3>Gestito appositamente per HELP, quindi il posizionamento &grave; relativo e i campi di testo sono distinti</h2>";		  
		$("#chiudi"+id).css("display","block");	
		$("#chiudi"+id).html(text);	
		var larg =$("#chiudi"+id).width();	
		var off = (larg + 20)*(-1);
		$("#chiudi"+id).css("right",off);
		$("#chiudi"+id).show();
	}	
		
	function Hidediv(id) {
		$("#chiudi"+id).hide();
	}	
		
    $(".chiudibile").click(
        function(){
				$(".chiudibile").hide('slow');
				jQuery.data(div1, 'clicked', false);
				jQuery.data(div2, 'clicked', false);				jQuery.data(div3, 'clicked', false);				
            });
			
     $(".trigger").click(
        function(){
				$("#trigger1").mouseover(	
					function(){ ShowDiv("1");
					div1 = $(".chiudi1");
					jQuery.data(div1, 'clicked', true);
					});
				$("#trigger2").mouseover(	
					function(){ ShowDiv("2");
					div2 = $("#chiudi2");	
					jQuery.data(div2, 'clicked', true);						});
				$("#trigger3").mouseover(	
					function(){ ShowDiv("3");
					div3 = $("#chiudi3");	
					jQuery.data(div3, 'clicked', true);					
					});					

			});							

    $(".trigger").mouseover(	
        function(){
	
				$("#trigger1").mouseover(	
					function(){ ShowDiv("1");
					});
				$("#trigger2").mouseover(	
					function(){ ShowDiv("2");
					});	
				$("#trigger3").mouseover(	
					function(){ ShowDiv("3");
					});							
            });							

    $(".trigger").mouseout(
        function(){

				$("#trigger1").mouseout(
					function(){
					div1 = $("#chiudi1");	
					value1 = jQuery.data(div1, "clicked");
						});
				$("#trigger2").mouseout(
					function(){
					div2 = $("#chiudi2");					
					value2 = jQuery.data(div2, "clicked");
						});
				$("#trigger3").mouseout(
					function(){
					div3 = $("#chiudi3");					
					value3 = jQuery.data(div3, "clicked");
						});					
				if (value1.is(false) )
					 Hidediv("1");
				if (value2.is(false) )
					 Hidediv("2");
				if (value3.is(false) )
					 Hidediv("3");						
				});								

 }
);
</script>

Sareste veramente gentili a darmi qualche dritta.....:)
 
Discussioni simili
Autore Titolo Forum Risposte Data
P Passare i risultati di un foreach in un modal. Help! PHP 2
J help me C/C++ 1
Q HELP ME PLEASE!‼️‼️ E-Commerce 1
L difficoltà con Xampp. printing php mancante...help Web Server 7
K [PHP] Help me a problem... Pleases PHP 1
M HELP FORM CREATO IN PHP PHP 14
M Help - consultare (ed esportare) dati da un DB pubblico mySql PHP 2
S [PHP] help me!! PHP 2
F Cerco contatto tipo help-desk Offerte e Richieste di Lavoro e/o Collaborazione 2
F Help-PDO copiare Database MySQL PHP 3
Andrea1981 [WordPress] [HTML] Help modifica credits nel footer.Tema Customizr. WordPress 5
simgia [Javascript] Google maps help! Javascript 1
S [WordPress] Footer php - il background riempie tutta la pagina - help WordPress 1
A funzioni asincrone e callback...help! Ajax 10
F Help array da javascript a php Javascript 2
M [PHP] Help: controllo valori inseriti in un campo PHP 1
P Help con js/php PHP 6
N Sistema di Help di Delphi 7 non funziona su Win10 Windows e Software 0
silvia88 ***Help*** - Anteprima immagine photoshop diversa da file Photoshop 3
A HELP: vedo il sito posizionato in serp solo con i tool di posizionamento!!! SEO e Posizionamento 3
T [PHP] Calcolo anzianità soggetti [era: Help me :( Esercizio per me impossibile] PHP 9
trattorino Creare codice php help PHP 26
CoyotesSon [PHP] Help! Creazione di una finestra PHP 5
V help java Java 2
L help me Presentati al Forum 0
L N00b need help Webdesign e Grafica 2
I Help - Problema installazione tema di themeforest WordPress 1
claudiav ciao!! help.. Presentati al Forum 0
Z Invio mail da telecamere HIKVision - HELP!!! IP Cam e Videosorveglianza 0
M - WordPress - Sito Annunci HELP ME!!!! :crying: WordPress 2
L Hosting, help HTML e CSS 2
M HoneyPot su macchina virtuale HELP ME PLEASE!!! Reti LAN e Wireless 0
F Help con leaseweb Hosting 2
M DropDownList HELP ASP.NET 8
E [Javascript] help me !!! array da php a java Javascript 9
N Query lenta, help ! MySQL 0
P Help! modifica script Javascript 11
R cookies policy - help Leggi, Normative e Fisco 21
I Piccolo roblema di compatibilità mobile.. help! PHP 1
zorro Help paginazione PHP 10
A Help! Creare un blog/portale con chat in real time WordPress 0
P help variabile js concatenata a echo php Javascript 0
O Help, devo fare un sito web con alcune caratteristiche... HTML e CSS 2
Alessandra Fanelli Menu Collapse- help -nn iserisce azioni a pulsanti Flash 0
M php help ! PHP 3
V datepicker help.... jQuery 2
S Php HELP! PHP 2
S php help phpBB 5
P HELP: passare alla seconda maschera tramite pulsante MS Access 0
iAntis Domande per Restyling completo di un sito e nuovo Upload sul server: HELP! :/ Hosting 1

Discussioni simili