Discussion :

[Tendhor57]

Bonjour,

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

Code css :

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

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

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
$("#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 JQuery :

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

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

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

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

[NoSmoking]

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

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

il ne manquerait pas les accolades après letf?

[Invité]

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.

[danielhagnoul]

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.

[Bovino]

j'ai du finter en utilisant un calcul

Tu te compliques la vie pour rien !

Code :

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

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

doit te renvoyer la valeur correcte...

[NoSmoking]

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

effectivement lu/répondu un peu rapidement

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

[Tendhor57]

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

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.

[Bovino]

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

[Tendhor57]

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

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

Code css :

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

1
2
3
4
5
 
#icon-fleche{
left:63%;
[...]
}

La position left est modifiée à l'aide de la fonction jQuery suivante :

Code javascript :

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
 
$("#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 javascript :

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

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

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

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

Renvoi après test mes valeurs en px.

[SpaceFrog]

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

et tu trouveras de quoi faire un plugin

[Tendhor57]

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

Code JQuery :

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

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

[SpaceFrog]

sisi ... si tu avais fait la recherche indiquée
ce n'est pas du natif jquery, mais le plugin fonctionne a merveille

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

je vais voir avec mon comanditaire si je peut ou pas utiliser de plugin, dans le cas contraire faudra faire sans.

[Tendhor57]

Je clos ce sujet car après discussion pas de pluging possible
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.

[Bovino]

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

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

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

[Tendhor57]

Code JQuery :

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

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

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

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