IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Mozilla récupérer le margin-left d'une div


Sujet :

JavaScript

  1. #1
    En attente de confirmation mail
    Homme Profil pro
    Enseignant
    Inscrit en
    Octobre 2012
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Enseignant
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Octobre 2012
    Messages : 29
    Points : 27
    Points
    27
    Par défaut Mozilla récupérer le margin-left d'une div
    Bonjour,

    j'ai, pour mon site internet un div (PagePrincipale) qui contient du texte. Ce div est de taille variable, je lui est donc assigné un margin left et rigth pour qu'il se centre dans le navigateur.

    j'ai un menu qui se trouve sur la gauche de PagePrincipale dans un div (InfoMessageAdmin). Celons la résolution de l'écran ou la taille du navigateur, le menu chevauche PagePrincipale.

    J'ai donc créé une fonction qui compare la taille de InfoMessageAdmin avec la marge à gauche de PagePrincipale . Si la marge n'est pas assez grande, le menu est masqué.

    Ce code fonctionne sur IE et Opera. Mais sur Mozilla impossible de récupérer la valeur assignée à margin-left.

    Voici les pistes que j'ai exploré:
    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
     
    function RecupStyle(id)
      {
    	  Element = document.getElementById(id);
    	var style = Element.currentStyle || window.getComputedStyle(Element);
    	return style
      }
     
    function getStyle(el,styleProp)
    {
    	var x = document.getElementById(el);
    	if (x.currentStyle)
    		var y = x.currentStyle[styleProp];
    	else if (window.getComputedStyle)
    		var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    	return y;
    }
    var style = RecupStyle("PagePrincipale");
    alert(style.marginLeft);
    alert($( "#PagePrincipale" ).css( "margin-left" ));
    alert(getStyle("PagePrincipale","margin-left"));

  2. #2
    Membre confirmé Avatar de 01001111
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2009
    Messages
    319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Loire (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Janvier 2009
    Messages : 319
    Points : 509
    Points
    509
    Par défaut
    Bonjour,
    Bizarre que ça ne marche pas je viens de vérifier, currentStyle et getComputedStyle fonctionnent normalement avec margin-left, non marginLeft
    Note on peut aussi peut-être passer par element.style[styleProp] (qui lui aura besoin de marginLeft) ou encore element.offsetLeft, variable présente sur à priori tout élément visible du DOM html, et qui cumule la valeur de left et la valeur de margin-left si je me souviens bien. Même si margin-left est sur le réglage auto, cette propriété offsetLeft renvoie la valeur en rapport à son element parent.
    0x4F

  3. #3
    En attente de confirmation mail
    Homme Profil pro
    Enseignant
    Inscrit en
    Octobre 2012
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Enseignant
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Octobre 2012
    Messages : 29
    Points : 27
    Points
    27
    Par défaut
    Bonjour 01001111,

    Merci de ta réponse. Après quelque tests. beaucoup de tests...
    Je pense que Mozilla lit le CSS pour cette donnée. Si je met un margin en dur, la fonction me retourne une valeur. Sinon la valeur est de 0px.
    Je vais essayer de calculer la largeur de la marge à partir de la largeur de la fenêtre - celle de mon div divisée par 2.
    Je publierais la fonction quand elle sera opérationnelle.

  4. #4
    En attente de confirmation mail
    Homme Profil pro
    Enseignant
    Inscrit en
    Octobre 2012
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Enseignant
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Octobre 2012
    Messages : 29
    Points : 27
    Points
    27
    Par défaut
    Bonjour,

    Voici les fonctions qui résolvent ce problème:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     
    function largeur_fenetre()
    {
     if (window.innerWidth) return window.innerWidth;
     else if (document.body && document.body.offsetWidth) return document.body.offsetWidth;
     else return 0;
    }
    function CaculMarginLeft(el)
    {
    	var PagePrincipale = Math.abs(getStyle(el,"width").replace("px",""));	
    	var laLargeur = largeur_fenetre();
    	var Margin = (laLargeur-PagePrincipale)/2;
    	return(Margin);
    };

  5. #5
    Membre confirmé Avatar de 01001111
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2009
    Messages
    319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Loire (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Janvier 2009
    Messages : 319
    Points : 509
    Points
    509
    Par défaut
    Oui, c'est ça, tu as compris que margin-left est sur auto par défaut...
    Tu aurais cependant pu obtenir le même résultat avec offsetLeft, sans passer par des calculs!
    Enfin bien joué!
    0x4F

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Récupérer position scroll bar dans une div
    Par abdelmounaime dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 03/09/2012, 06h51
  2. Récupérer valeur parent-enfant d'une div cliquée
    Par lefebvresdesigns dans le forum Général JavaScript
    Réponses: 12
    Dernier message: 28/01/2012, 11h47
  3. [POO] récupérer la position X d'une div 'menu'
    Par goueg dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 13/07/2007, 10h05
  4. Problème de taill d'une div en float:left
    Par Khrysby dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 27/05/2007, 01h48
  5. obtenir le top et left d'une div relative
    Par mezca_spider dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 02/05/2006, 14h03

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo