Récupérer la valeur en % contenu dans le css

Version imprimable

Bonjour,

Voilà la question est quasiment dans le titre :lol:, actuellement je suis entrain de créer des objets qui ont des valeurs en % dans le CSS comme ceci:
Code:

1 2 3 #fleche{ left:70%; }
Hors pour des questions pratique, je souhaite rester avec mes %.
Le soucis est que je souhaite animer ma "fleche" grâce à la fonction animate de Jquerry, ce qui nous donne:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 $("#fleche").click(function(){ var posfleche=$('#fleche').offset(); var lft = posfleche.left; var poucent=(lft/$(window).width())*100; if (poucent>=70){ $("#fleche").animate({ left: "60%", }, 1500 ); } else { $("#fleche").animate({ left: "70%", }, 1000 ); } });
Tout ceci marche très bien, mais mon problème c'est que pour récupérer mes "70%" ou "60%" j'ai du finter en utilisant un calcul (ce qui est en gras).

J'ai bien tenter cela:
Code:

1 2 3 var posfleche=$('#fleche').offset(); var lft = posfleche.left; alert(lft);
Ca me renvoi les valeurs en px :|

et quand j'ai tenté cela
Code:

1 2 var lft=$('#fleche').left; alert(lft);
ca me renvoi UNDEFINED :|

D'ou ma question, est t'il possible de récupérer ma valeur left exprimé en % sans passer par mon calcul barbar ?

Merci d'avance

07/06/2013, 18h41
NoSmoking

Bonjour,
pour récupérer la largeur du document HTML il te faut utiliser $(document).width();

Citation:

var lft=$('#fleche').left;

il ne manquerait pas les accolades après letf?
07/06/2013, 20h21
Invité

Citation:

Envoyé par Tendhor57

Tout ceci marche très bien, mais mon problème c'est que pour récupérer mes "70%" ou "60%" j'ai du feinter en utilisant un calcul

Bonjour,
la bonne question, c'est : "pourcentage de quoi ?"
En effet, un pourcentage est relatif, par rapport à quelque chose :
- pourcentage de l'écran ?
- pourcentage de la fenêtre ?
- pourcentage du div conteneur ?
- pourcentage de matière grasse ?

Donc, ton calcul est non seulement correct, mais nécessaire.
07/06/2013, 21h05
danielhagnoul

Citation:

Envoyé par NoSmoking

Bonjour,
pour récupérer la largeur du document HTML il te faut utiliser $(document).width();il ne manquerait pas les accolades après letf?

Non, c'est une propriété : var gauche = $( "#fleche" ).offset().left;.

Sauf erreur, les méthodes de jQuery retournent toujours des résultats en pixels.
08/06/2013, 10h31
Bovino

Citation:

j'ai du finter en utilisant un calcul

Tu te compliques la vie pour rien ! :aie:

Code:

$("#fleche").css('left')

doit te renvoyer la valeur correcte...
08/06/2013, 10h47
NoSmoking

Citation:

Envoyé par danielhagnoul

Non, c'est une propriété : var gauche = $( "#fleche" ).offset().left;.

effectivement lu/répondu un peu rapidement :oops:

Citation:

Envoyé par danielhagnoul

Sauf erreur, les méthodes de jQuery retournent toujours des résultats en pixels.

pas d'erreur sur ce coup, le moteur de rendu utilise les valeurs en %, si existe, mais la méthode rend une valeur en pixel.

Pour récupérer la valeur en % déclarée dans la partie STYLE il faut utiliser la méthode window.getComputedStyle, mais pas sûr qu'il existe l'équivalent en jQuery.

[EDIT]
perdu la méthode window.getComputedStyle rend une valeur en px, c'est la méthode currentStyle qui rend une valeur en %.
10/06/2013, 07h40
Tendhor57

Citation:

Envoyé par jreaux62

Bonjour,
la bonne question, c'est : "pourcentage de quoi ?"
En effet, un pourcentage est relatif, par rapport à quelque chose :
- pourcentage de l'écran ?
- pourcentage de la fenêtre ?
- pourcentage du div conteneur ?
- pourcentage de matière grasse ?

Donc, ton calcul est non seulement correct, mais nécessaire.

Il s'agit des pourcentage par rapport à l'écran

Citation:

Tu te compliques la vie pour rien !

Non, je ne pense pas, car je dois travailler sur des positionnement et redimensonnage automatique via les % par rapport à l'écran à l'aide du css. D'ou il m'est indispensable de continuer à récupérer des valeurs en % et non en pixel.
10/06/2013, 08h09
Bovino

Essaye le code proposé et tu te rendras compte que tu te compliques la vie pour rien ! :roll:

Citation:

Envoyé par Bovino

Essaye le code proposé et tu te rendras compte que tu te compliques la vie pour rien ! :roll:

Merci, mais cela ne me convient pas. :calim2: Voici pourquoi :
Code:

1 2 3 4 5 #icon-fleche{ left:63%; [...] }
La position left est modifiée à l'aide de la fonction jQuery suivante :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 $("#icon-fleche").click(function(){ //passage de la position left récupérer en px pour la mettre en % var posfleche=$('#icon-fleche').offset(); var lft = posfleche.left; var poucent=(lft/$(window).width())*100; //Si la position est supérieur ou égal à 63% de la fenetre de navigation if (poucent>=63){ $("#icon-fleche").animate({ left: "44%", }, 1500 ); } //Si inférieur à 63% de la fenètre de navigation soit ici 45% else { $("#icon-fleche").animate({ left: "63%", }, 1500 ); } });
Comme vous pouvez le constater, je ne travaille qu'avec des largeurs, hauteurs et positions de l'ensemble des mes éléments exprimés en % par rapport à ma fenêtre de navigation afin que ceux-ci se redimensionnent et se replacent automatiquement lorsque la taille de la fenêtre de navigation change.

Il est de même pour l'ensemble de mes fonctions jQuery "d'animations". C'est pour cela que j'ai besoin de récupérer en % mes valeurs afin de pouvoir les mettre dans mes conditions en jQuery.

Et donc je souhaiterais simplifier cela :
Code:

1 2 3 4 5 //passage de la position left récupérer en px pour la mettre en % var posfleche=$('#icon-fleche').offset(); var lft = posfleche.left; var poucent=(lft/$(window).width())*100;
Afin de récupérer par exemple la position en % actuelle de mon icône flèche.

Hors ceci :

Code:

$("#fleche").css('left')

Renvoi après test mes valeurs en px. :aie:

10/06/2013, 10h20
SpaceFrog

une petit recherche sur google avec "$.fn.getWidthInPercent"

et tu trouveras de quoi faire un plugin

Merci, mais après quelque recherche j'ai trouvé cela:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 var getPercent = function(elem){ var elemName = elem.attr("id"); var width = elem.width(); var parentWidth = elem.offsetParent().width(); var percent = Math.round(100*width/parentWidth); console.log(elemName+"'s width = "+percent+"%"); } getPercent($('#folders')); getPercent($('#media')); getPercent($('#player'));
Cela est très bien mais j'en conclu donc que l'on est obligé de passer par la création d'une fonction pour récupérer les %, il n'existe donc pas de réel fonction en Jquerry "pré-maché" qui peut me retourne ce que je souhaite.

Dommage

10/06/2013, 11h29
SpaceFrog

sisi ... si tu avais fait la recherche indiquée
ce n'est pas du natif jquery, mais le plugin fonctionne a merveille
10/06/2013, 12h09
Tendhor57

Ok, jy jeterais un oeil un peu plus tard, mais il me semble que je ne pourrais pas utiliser de plugin pour mon projet :aie:.

je vais voir avec mon comanditaire si je peut ou pas utiliser de plugin, dans le cas contraire faudra faire sans.
11/06/2013, 13h58
Tendhor57

Je clos ce sujet car après discussion pas de pluging possible :aie:
Donc faut de mieux, je pense que je vais rester avec mes 3 lignes de code Jquery qui me permettent de passer en % les valeurs qui ont été récupérés en pixel.

Merci quand même pour avoir tenté de m'aider.

Nom de Zeus... j'avais testé .css() qui renvoyait correctement la valeur en %, mais en fait, ça marche plus... :koi:
Bref, un délirium tremens probablement... :calim2:...

Bon, alors le plus simple si tu dois jongler entre deux valeurs, c'est d'utiliser des attributs data-*.

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
<!DOCTYPE html>
<html>
    <head>
		<title>Pourcent</title>
        <meta charset="utf-8" />
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
		<script>
			jQuery(function($){
				var $pourcent = $('#pourcent');
				$('#move').click(function(){
					var pourcent = $pourcent.data('pourcent');
					$pourcent.data('pourcent', pourcent == 10 ? 20 : 10);
					$pourcent.animate({left: pourcent + '%'}, 1500 );
				});
			});
		</script>
		<style>
		#pourcent{
			position: relative;
			width: 450px;
			height: 300px;
			background-color: silver;
			box-shadow: 0 0 5px 2px gold;
			left: 10%;
		}
		</style>
    </head>
    <body>
		<div id="pourcent" data-pourcent="20"></div>
		<button id="move">Déplacer</button>
	</body>
</html>

Citation:

Envoyé par Bovino

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<script>
	jQuery(function($){
			var $pourcent = $('#pourcent');
			$('#move').click(function(){
				var pourcent = $pourcent.data('pourcent');
				$pourcent.data('pourcent', pourcent == 10 ? 20 : 10);
				$pourcent.animate({left: pourcent + '%'}, 1500 );
				});
			});
</script>

Merci pour cette piste, mais ceci:

Code:

1
2
3
4
 
var position_fleche=$('#icon-fleche').offset();
var valeur_left = position_fleche.left;
var valeur_pourcent=(valeur_left/$(window).width())*100;

Ce ne serais pas nettement plus court, d'autant plus que j'ai besoin de récupérer qu'une seul fois dans mon code les valeurs en %.