11544 sujets

JavaScript, DOM et API Web HTML5

Salut à tous,

Je m'arrache les cheveux sur une function JS que j'essaye de faire. Je voudrais dans un formulaire, a chaque fois qu'on a un changement sur un select, afficher une infobulle (dans une div ou autre) pendant 1 ou 2 secondes (puis elle disparaîtrait). Le problème c'est que si je descend le <select> au clavier... Ca fait juste tout buggué. J'utilise ca aussi sur des <input /> et quand je tab assez vite. La fonction fait un peu n'importe quoi (enfin elle fait ce que je lui dit de faire).

Voici ma fonction a l'heure actuelle. C'est pas très propre car je fais des essais.

var x=0;
var myVar;
var myVar2;
var myVar3;
var in_function = 0;
function div_ephemere_appear(){
	in_function = 1;
	clearTimeout(myVar2);
	if(x == 100){
		in_function = 0;
		setTimeout(function(){if(in_function==0)div_ephemere_disappear()},1000);
		return false;
	}
	in_function = 1;
	var div_ephemere = document.getElementById("div_ephemere");
	if(navigator.userAgent.indexOf("MSIE") != -1){
		div_ephemere.style.filter = "alpha(opacity="+x+")";
	}else{
		div_ephemere.style.opacity = "0."+x+"";
	}
	myVar=setTimeout(function(){div_ephemere_appear()},1);
	x=x+5;
	document.title = x;
}

function div_ephemere_disappear(){
	if(in_function == 1){
		clearTimeout(myVar2);return false;
	}
	var div_ephemere = document.getElementById("div_ephemere");
	if(navigator.userAgent.indexOf("MSIE") != -1){
		div_ephemere.style.filter = "alpha(opacity="+x+")";
	}else{
		div_ephemere.style.opacity = "0."+x+"";
	}
	myVar2=setTimeout(function(){div_ephemere_disappear()},1);
	x=x-5;
	if(x == 0){
		clearTimeout(myVar2);
	}
}


Ma function d'origine (qui marche pas plus. Voir même moins bien. Disons que c'est mon premier essai.

var i = 0; var mode = "+"; var action2 = ""; var action = "";
function div_ephemere_action(action){
	if(action != "")action2=action;
	if(action == "off" && mode == "+"){
		alert("");return false;
	}
	if(i == 0 && mode == "-"){
		return false;
	}
	if(mode == "+"){
		i = i+5;
	}else if(mode == "-"){
		i = i-5;
	}
	if(i == 100){
		mode = "-";
		action = "on";
		setTimeout('div_ephemere_action(\"off\")','5000');
		return false;
	}
	var div_ephemere = document.getElementById("div_ephemere");
	if(navigator.userAgent.indexOf("MSIE") != -1){
		div_ephemere.style.filter = "alpha(opacity="+i+")";
	}else{
		div_ephemere.style.opacity = "0."+i+"";
	}
	div_ephemere.innerHTML = action2;
	setTimeout('div_ephemere_action(action)','1');
}


Si quelqu'un à une idée (ou un script déjà fait. J'ai cherché mais je vois pas comment ca peux s'appeller).

EDIT : Le soucis c'est surtout que j'aimerai que le timer qui "efface" la <div> se remette à zéro a chaque fois qu'on la réaffiche (parce que si on va vite, des fois au lieu de rester 1seconde afficher elle reste un centieme de seconde)
Modifié par ffwrude (28 Aug 2012 - 15:27)
Salut,

as-tu testé un peu de jQuery ?

fade() & stop(). Ça gère tout pour toi : les fondus & la queue d'animation (à priori c'est elle qui te perturbe Smiley cligne )

Ju
Bonjour !

Jamais essayé jQuery. Je ne connais pas ce "langage".

Est-ce que ca nécéssite d'installer quelque chose ? Une librairie ?

Par contre le problème de mon code vient (je pense) qu'il lance quand même le setTimeout. Mais avec jQuery je vais avoir le même problème non ?
Modifié par ffwrude (28 Aug 2012 - 17:25)
Salut,

sur le site de jQuery tu pourras apprendre à l'utiliser pas à pas.

Pour faire simple, ta seule obligation est de charger la bibliothèque. Ensuite tu code ton fichier js comme tu le fais déjà.

Par contre tu utilise la 'syntaxe' jQuery. Son grand avantage c'est de pouvoir gérer des fonctionnements basiques (fondus, drop down...) sur la majorité des navigateurs.

Par exemple, quand tu joue sur l'opacité, pas besoin de jouer aussi sur les filtres IE, les fonctions natives de jQuery le font pour toi.

Ton setTimeout() se lance car le clearTimeout() n'est pas automatiquement exécuté (condiition dans le if). Si tu te documente sur la fonction stop() tu verras qu'elle règlera ton problème si tu joues avec les paramètres.

Ju
Ok ! Je vais regarder ca merci !

EDIT : je mettrais résolu si ca marche quand j'aurais eu le temps de tester Smiley smile

EDIT2: Malheureusement je ne pourrais confirmer si cela marche. Le projet étant été mis en attente puis finallement la refonte n'aura pas ces petits pop-up et pas assez de temps libre pour tester Smiley decu
Modifié par ffwrude (12 Sep 2012 - 11:53)