Help interattivo con jQuery e CSS

paulb · 22 Gen 2013

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 · 2 Feb 2013

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 · 14 Feb 2013

criric ha scritto:
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.....

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.....

Cerca

Cerca

Help interattivo con jQuery e CSS

paulb

Nuovo Utente

criric

Super Moderatore

paulb

Nuovo Utente

Discussioni simili