Computed style et Safari

Version imprimable

Bonjour à toutes et tous !!

Je souhaite mesurer la valeur en pixel d'une "margin-top" d'un élément. Dans la feuille de style la valeur "par défaut" est exprimée en %.

Dans mon script j'ai besoin de connaitre la valeur réelle en pixel, donc je fais : jQuery('#element').css('margin-top');

Avec Firefox, Chrome et Opera, la valeur retournée est bien la bonne valeur exprimée en pixel, mais avec Safari la valeur est complétement aberrante (1500 au lieu de -114)...

Voici ci-dessous les différents méthodes que j'ai essayé pour solutionner mon problème, dans mon cas j'ai la chance d'avoir à disposition mootools en plus de jquery... mais même avec tous ça je n'arrive pas à solutionner mon problème ...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 //les méthodes suivantes me retourne la valeur définie dans la feuille de style en % //Retourne 6% var sliderElemen = document.getElementById('headerslider'); var headerSliderCss = document.defaultView.getComputedStyle(sliderElemen,null).getPropertyValue('margin-top'); //Retourne 6% var sliderElemen = document.getElementById('headerslider'); headerSliderCss = sliderElemen.getComputedStyle('margin-top'); //Retourne 6% headerSliderCss = $('headerslider').getStyle('margin-top'); //Retourne n'importe quoi headerSliderCss = jQuery('#headerslider').css('margin-top'); console.log(headerSliderCss);
Est ce quelqu'un connait la solution pour que Safari interprète la valeur en pixel ??

Merci d'avance pour votre aide et bonne journée !

29/03/2014, 09h43
sekaijin

Merci de poster la question dans le forum JQuery

ne sachant pas comment JQuery calcule cet élément et vu que tu n'utilise peut-être pas les attributs CCS des Elements du DOM. il est difficile de répondre ici.
$() ne retourne pas un élément du DOM mais un objet JQuery qui référence cet élément. .getStyle et .ccs sont des fonction JQuery, pas des accès aux attributs css des éléments du DOM. retournent-elles la valeur d'un attribut ou calcule-t-elle cette valeur ?

A+JYT
29/03/2014, 11h16
NoSmoking
Bonjour,

Citation:

Envoyé par Soundboy39

(...)dans mon cas j'ai la chance d'avoir à disposition mootools en plus de jquery...

ce n'a jamais été une bonne chose que d'utiliser plusieurs librairies.

Citation:

Envoyé par Soundboy39

headerSliderCss = sliderElemen.getComputedStyle('margin-top');

est une écriture non conforme
Citation:
Envoyé par Soundboy39

Code:

1 2 //Retourne n'importe quoi headerSliderCss = jQuery('#headerslider').css('margin-top');
devrait te renvoyer une valeur avec px comme unité même sur Safari, maintenant il faudrait connaitre la structure HTML que tu utilises.

Il n'est peut être pas judicieux de connaitre le margin-top dans ton cas mais plutôt la position, offetTop par exemple, de ton élément.

Citation:

Envoyé par sekaijin

.getStyle et .ccs sont des fonction JQuery

d'accord pour .ccs mais pas pour .getStyle

Merci pour vos réponses !

Citation:

ce n'a jamais été une bonne chose que d'utiliser plusieurs librairies.

Je m'attendais à cette remarque, mais malheureusement je ne peux pas faire autrement que de faire co-exister les 2 librairies car je suis dans un context joomla et depuis la version
3 de ce CMS les 2 librairies sont utilisées conjointement, après ça peut être pratique car parfois il y a des choses qui coincent avec l'une et qui passe tout seul avec l'autre.
Sachant aussi que tout est fait pour éviter les conflits.

Citation:

Citation Envoyé par sekaijin
.getStyle et .ccs sont des fonction JQuery

d'accord pour .ccs mais pas pour .getStyle

Effectivement getStyle() est une méthode de Mootools.

Pour ce qui est de mon problème je ne le constate vraiment qu'avec Safari puisque même avec IE8 ça fonctionne...

En fait je dois connaitre cette valeur pour ajuster la taille de mon diaporama vis à vis de l'écran, le but étant que la hauteur du diaporama "s'arrête" à la hauteur de l'écran.
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 <header class="header" role="contentinfo"> <section id="headertop"> <div class="moduletable"> <ul id="lang" class="left"> <li class="lang-active" dir="ltr"><a href="#"><img src="fr-flag.png" /></a></li> <li class="" dir="ltr"><a href="#"><img src="de-flag.png" /></a></li> <li class="" dir="ltr"><a href="#"><img src="en-flag.png" /></a></li> </ul> </div> <section id="loginlink" class="right"> <i class="icon-user"></i><a href="#login-module" id="showloginmod" title="Connexion">Connexion</a> - <a href="#" id="showregisterform" title="Inscription">Inscription</a> </section> <hr class="clear" /> <img id="logo" src="logo.png" /> </section> <section id="headerslider" role="banner"> <div id="slider_nav"> <span id="slider_nav_prev"><i class="icon-angle-circled-left"></i></span> <span id="slider_nav_next"><i class="icon-angle-circled-right"></i></span> <hr class="clear" /> </div> <div id="slider_wrap"> <img class="slide_img" id="slide_img_1" src="slide1_fr.jpg" /> <img class="slide_img" src="slide2_fr.jpg" /> <img class="slide_img" src="slide3_fr.jpg" /> </div> <span class="jsdata" id="slider_step">1</span> </section> </header> <script type="text/javascript"> var sliderHeight = jQuery(window).height() - (parseInt(jQuery('#headertop').height()) + parseInt(jQuery('#headerslider').css('margin-top'))); jQuery('#headerslider').css({ height: sliderHeight }); </script>

29/03/2014, 15h32
NoSmoking
Ton approche ne me paraît pas être la bonne, il te faut tenir compte des fusions de marges par exemple et celles là tu ne les maitrise pas.

Une solution serait de récupérer la position de ton élément et de le placer en absolute par rapport au BODY.
Il te faut donc mettre ton BODY en position:relative, récupérer l'offset de celui ci et de le placer comme il se doit.

en gros quelque chose comme
Code:

1 2 3 4 5 6 7 var pos = jQuery('#headerslider').offset(); jQuery('#headerslider').css({ 'position' : 'absolute', 'top' : pos.top, 'width': '100%', 'bottom' : 0 });
il te faut dans ce cas avoir au minimum dans ton CSS
Code:

1 2 3 4 html, body{ position:relative; height:100%; }
malgré cela il risque d'y avoir des problèmes de padding/margin ou fusion de marge, ta démarche reste bizarre!!