Discussion :

[RyzenOC]

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.

[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

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

[sekaijin]

Ne marchent pas sous IE

[RyzenOC]

Voila le résultat chez moi avec IE11



Tu n'aurais pas une autre alternative ?

[NoSmoking]

Bonjour,

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 ?

[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

[SylvainPV]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);

[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

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<?php
$temps = 365*24*3600;
setcookie ("pseudo", "ma_variable", time() + $temps);
?>

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

[NoSmoking]

Pour la verticalité, tu peux toujours essayer un transform:rotate(90deg).

[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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[RyzenOC]

Sa ne fait rien si l'ascenseur est horizontale.

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SylvainPV]

@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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);

[RyzenOC]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

value="valuecookie();"

2) Comment faire pour que la valeur de value soit appliquer a l'opacity ?

[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

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

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

donc si tu veux la lire depuis un cookie :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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