Ascenseur régler opacity

Version imprimable

27/06/2014, 17h19
RyzenOC

Ascenseur régler opacity

Bonjour, je souhaite intégrer a mon site un bouton permettant de modifier l'opacity d'un élément (d'1 image par exemple) sous la forme d'1 ascenseur, le client règle donc l'opacity de l'image a sa guise.
Comme ceci : http://www.css3.me/

Je souhaite aussi sauvegarder la valeur sous la forme d'1 cookie, mais sa je verrais plus tard.
27/06/2014, 18h39
sekaijin

http://docs-origin.sencha.com/extjs/...er/slider.html
http://docs-origin.sencha.com/extjs/...tml?theme=gray
http://docs-origin.sencha.com/extjs/...?theme=classic
28/06/2014, 17h00
RyzenOC

Il n'y aurait pas quelque chose de plus explicite, parce que tes lien ne marche pas sous IE d'1 part et il y'a pas de doc.

Merci d'avance.
28/06/2014, 19h40
sekaijin

Ne marchent pas sous IE 8O
29/06/2014, 08h42
RyzenOC

1 pièce(s) jointe(s)

Voila le résultat chez moi avec IE11

Pièce jointe 149934

Tu n'aurais pas une autre alternative ?
29/06/2014, 10h08
NoSmoking

Bonjour,

Citation:

Il n'y aurait pas quelque chose de plus explicite, parce que tes lien ne marche pas sous IE...

fonctionne chez moi même sous IE8, sauf le "The Neptune theme" ;)

Ton problème ne serait-il pas ailleurs ?
29/06/2014, 11h09
sekaijin

Sorry pour le lien j'ai donné celui que j'ai l'habitude d'utiliser
Version 4.2.2
hors sur cette version il y a un bug connu

Examples (4)
EXTJSIV-10612 ExtJS 4.2 examples fail to load properly in Windows 8.1 Preview release/ IE11

dans la version 5
http://dev.sencha.com/ext/5.0.0/exam...ng-slider-form

ExtJS pour un bête slider, faut pas pousser ! Il n'a pas demandé un énorme framework, juste un bête slider avec un onChange.

Voilà un exemple fonctionnel : http://jsbin.com/yexocojo/1/edit?html,js,output
Code:

1 2 <input type="range" id="ascenseur" min="0" max="100"/> <img id="tonimage" src="http://joconde.vinci.free.fr/joconde.jpg"
Code:

1 2 document.getElementById("ascenseur").addEventListener("change", function(){ document.getElementById("tonimage").style.opacity = this.value/100; });
Pour que l'opacité change immédiatement sans attendre que l'utilisateur ait "lâché" le slider, il faut utiliser l'évènement input :

http://jsbin.com/yexocojo/2/edit?html,js,output
Code:

1 2 3 4 5 function updateOpacity(){ document.getElementById("tonimage").style.opacity = this.value/100;} var ascenseur = document.getElementById("ascenseur"); ascenseur.addEventListener("change", updateOpacity); ascenseur.addEventListener("input", updateOpacity);

29/06/2014, 11h41
sekaijin

sylvain ce n'était qu'un exemple parmi tant d'autre
et sencha tool te package que les éléments du framework que tu utilise.
Mais je suis d'accord il y a plus léger

A+JYT
29/06/2014, 16h00
RyzenOC
Merci sa marche ! par contre j'arrive pas a le positionner verticalement, es ce possible ?
Comment récupérer en temps réel la valeur de l'input afin que je la stocke dans un cookie ?

Voici le code de l'input :

Code:

Opacité: <input type="range" id="ascenseur" value="100" min="0" max="100" onclick="ma_fonction();"/>

De la fonction pour récupérer la valeur
Code:

1 2 3 4 function ma_fonction(){ var ma_variable=document.getElementById('ascenseur').value; return ma_variable; }
Pour le php c'est la ou je galère, je n'arrive pas a changer la valeur en temps réel.
Code:

1 2 3 4 <?php $temps = 365*24*3600; setcookie ("pseudo", "ma_variable", time() + $temps); ?>
29/06/2014, 17h08
SylvainPV

- non pas moyen dans la spec actuelle de spécifier un slider vertical, c'est le navigateur qui choisit l'apparence et le type de contrôles du slider.
- tu récupères la valeur actuelle de l'input de la même façon que je t'ai montré comment t'en servir pour modifier l'opacité, via les évènements input et change.
- l'enregistrement, dans un cookie ou autre, se fait logiquement du côté client : tu ne vas pas envoyer une requête serveur à chaque fois que l'utilisateur déplace le slider. Donc il faut le faire en JavaScript, et non en PHP.
29/06/2014, 17h13
NoSmoking

Pour la verticalité, tu peux toujours essayer un transform:rotate(90deg).
29/06/2014, 17h26
Watilin
Pas onclick. Si tu veux récupére l'info en temps réel, c'est onchange que tu dois utiliser. Couplé avec onkeyup car chez moi (Firefox 30/Windows XP), si je manipule le slider au clavier, l'évènement change n'est pas déclenché, même si je fais espace ou entrée juste après.

Et pour le positionner verticalement, c'est possible sous les moteurs webkit (Chrome et Safari, et aussi Opera depuis 2013) en rajoutant un style :
Code:

1 2 3 #ascenseur { -webkit-appearance: slider-vertical; }
Firefox ne le fait pas encore. Tu peux utiliser une rotation, mais je te le déconseille car ça va perturber l'utilisateur, qui devra toujours faire gauche/droite alors que le slider sera orienté haut/bas.

Plutôt que de cibler une sous-catégorie de navigateurs, le mieux est d'opter pour une bibli en attendant que tous les navigateurs se mettent au pas. Ou alors, résigne-toi à utiliser un slider horizontal ;)

Sa ne fait rien si l'ascenseur est horizontale.

Voici mon code, pourquoi le cookie n'est il pas lu ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>opacity input</title>
 
 
<script>
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
 
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
 
function eraseCookie(name) {
	createCookie(name,"",-1);
}
 
function valuecookie() {
var x = readCookie('luminosite');
return x;
}
</script>
 
</head>
<body>
  Opacité: <input type="range" id="ascenseur" value="valuecookie();" min="0" max="100" onclick="ma_fonction();"/>
  <br>
  <br>
  <img id="tonimage" src="http://joconde.vinci.free.fr/joconde.jpg"></img>
<script>
document.getElementById("ascenseur").addEventListener("change", function(){
 document.getElementById("tonimage").style.opacity = this.value/100;
});
 
function ma_fonction(){
eraseCookie('luminosite');
var ma_variable=document.getElementById('ascenseur').value;
createCookie('luminosite',ma_variable,360);
}
</script>
</body>
</html>

29/06/2014, 21h56
Watilin

Le problème c'est le onclick car, comme je l'ai déjà dit, il ne marchera pas.

Tu as un autre problème à cette ligne :

Code:

document.getElementById("tonimage").style.opacity = this.value / 100;

La value d'un input est toujours de type string, du coup tu as un problème de conversion de chaîne en nombre (lors de la division). Tu dois utiliser parseInt.
Edit: Nope, voir message de Sylvain ci-dessous :aie:

@Watlin: ce n'est pas un problème, l'opérateur de division s'occupe du cast : "50"/100 === 0.5

@sazearte: pourquoi mettre le code du cookie dans une autre fonction sur un autre évènement ? Sers-toi de celle que tu as déjà pour l'évènement change :
Code:

1 2 3 4 5 6 7 function onChange(){ document.getElementById("tonimage").style.opacity = this.value/100; createCookie('luminosite',this.value,360); } var ascenseur = document.getElementById("ascenseur"); ascenseur.addEventListener("change", onChange); ascenseur.addEventListener("input", onChange);

30/06/2014, 14h03
RyzenOC

J'ai 2 problèmes :
1) qu'es ce que je mets comme valeur dans l'input ?

Code:

value="valuecookie();"

2) Comment faire pour que la valeur de value soit appliquer a l'opacity ?
30/06/2014, 16h09
SylvainPV

1) la valeur d'origine du slider, qui n'est pas du JavaScript mais peut être réassignée en JavaScript juste après
2) tu appelles manuellement la fonction onChange après avoir assigné la valeur en JavaScript
30/06/2014, 18h56
RyzenOC

Je débute en javascript, j'ai pas compris ce que tu me demande faire en 1)
Merci de prendre le temps de m'aider.
30/06/2014, 19h38
SylvainPV
C'est la valeur d'origine, celle que tu as au début quand tu arrives sur la page quoi. Et en JavaScript, tu peux modifier cette valeur après coup :

Code:

document.getElementById("ascenseur").value = 42;

donc si tu veux la lire depuis un cookie :
Code:

1 2 document.getElementById("ascenseur").value = parseInt(readCookie("luminosite")); onChange(); //on appelle manuellement la fonction pour mettre à jour l'affichage