Positionnement absolu avec jQuery

Version imprimable

10/12/2014, 17h55
abc.xyz

Positionnement absolu avec jQuery
Bonjour,

j'ai une div #exemple en position:absolute dans le fichier CSS.

Je la place à droite de l'écran avec le code jQuery suivant:
Code:

1 2 3 var largeur = $('body').width(); $('#exemple').css({left:largeur});
Mon problème est que je dois garder ce comportement de mettre la div "à droite" uniquement sur ordinateur et que je dois annuler ce comportement pour les mobiles. Comment annuler pour les mobiles ce comportement donné par le code $('#exemple').css({left:largeur}); dont j'ai besoin pour les ordinateurs?

Merci
11/12/2014, 08h56
SpaceFrog

tu le dis toi même dans ton titre

Code:

$('#exemple').css({"position":"absolute", "left":largeur+"px"});
11/12/2014, 18h29
abc.xyz

Rebonjour,

Code:

$('#exemple').css({left:largeur});

Le code ci-dessus placé dans un fichier JavaScript s'applique aux ordinateurs, tablettes et mobiles.

Je veux que ce code reste dans le fichier JavaScript pour le comportement désiré sur ordinateurs et tablettes mais qu'il ne soit pas pris en compte pour les mobiles, comment faire?

Merci
12/12/2014, 09h19
abc.xyz

Bonjour,

est t'il possible d'appliquer ce code aux ordinateurs et tablettes et de ne pas l'appliquer aux mobiles?

Merci

un element vide sur la page

Code:

<span id="detect_mob"></span>

un petit css

Code:

1
2
3
@media only screen and (max-width: 760px) {
  #some-element { display: none; }
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$( function() {      
    var is_mobile = false;
//tu testes le display
    if( $('#detect_mob').css('display')=='none') {
        is_mobile = true;       
    }
 
//et ensuite tu utilise ton booleen 
    if (!is_mobile) {
       $('#exemple').css({"position":"absolute", "left":largeur+"px"});
    }
 });

12/12/2014, 10h19
abc.xyz
Je ne comprends pas , j'ai fait:
Code:

1 2 3 4 5 6 7 var mobile = false; if( $('#exemple').css('z-index') == '1') { mobile = true; } if (!mobile) { $('#exemplet').css({left:largeur}); }
comme code CSS pour les mobiles à ma div #exemple j'ai rajouté z-index:1.

Et bien malgré le code ci dessus le problème demeure, en effet pour les mobiles le left:largeur est appliqué à ma div...

Merci
12/12/2014, 12h43
SpaceFrog

tu as rajouté le css ???

Code:

@media only screen and (max-width: 760px)
12/12/2014, 13h59
NoSmoking

Bonjour,
j'ai un peu de mal à comprendre pourquoi tu ne passes pas directement par les Media Queries.
12/12/2014, 15h27
abc.xyz

oui bien sur j'ai rajouté le css avec la media query pour les mobiles.

Si tu as fait les choses correctement aucune raison que cela ne marche pas!
Code:

1 2 3 4 5 6 7 8 9 #element { position:absolute; left:100%; } @media only screen and (max-width: 760px) { #element { left:0; } }

12/12/2014, 16h52
abc.xyz

No smoking JE DOIS PASSER PAR LE JS. CELA NE FONCTIONNE PAS DE PASSER PAR LES MEDIA QUERY DANS MON CAS PRECIS.
donc je te répète SpaceFrog: les conditions sur ton code js ne fonctionnent pas.

Merci
12/12/2014, 17h16
abc.xyz
spacefrog, merci de m'aider, cependant ton raisonnement est faux ton code avec tes conditions pour ecrire du code js uniquement pour un média (ici les mobiles) ne fonctionne pas.
J'ai trouvé, il faut faire un if sur la largeur de l'écran, comme ceci:
Code:

1 2 3 if($('body').width() > 767){ $('#exemple').css({left:largeur}); }
13/12/2014, 11h30
NoSmoking

:rire: et en plus on se fait engueuler...

Pour moi la discussion est close mais je t'engage à lire
- Comprendre le méta tag viewport
- Les fondamentaux du Responsive Web Design
15/12/2014, 08h25
SpaceFrog

Citation:

cependant ton raisonnement est faux

:aie:
Non le raisonnement est correct. coller un media query et recupérer l'état d'un élement sur la page fonctionne parfaitement.
Maintenant si tu n'arrives pas à l'implémenter, je n'y peux pas grand chose ...

Je ne comprends pas pourquoi, mais admettons que les "media-query" ne fonctionnent pas dans votre cas. Il est effectivement possible de travailler en JS avec l'aide d'un outil externe.

Je vous donne un exemple avec head.js, que j'utilise depuis des années. L'outil Modernizr, doit probablement permettre de faire la même chose, mais je ne le connais pas.

Impossible d'apprendre head.js en 3 lignes, il faudra lire l'API. Voici le code pour charger l'outil "head.js", la bibliothèque "jQuery" et pour traiter notre exemple :

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
36
37
38
<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js"></script>    
<script>
    head.load(
        "http://code.jquery.com/jquery-2.1.1.min.js",
        function(){
 
            /*
             * Le DOM est construit, mais il faut initialiser l'objet jQuery
             */
            $( function(){ // forme abrégée de $(document).ready(function(){
                if ( head.desktop ) {
                    $( "#exemple" ).css({
                        "position" : "absolute",
                        "top" : "0px",
                        "right" : "0px",
                        "width" : "200px",
                        "height" : "200px",
                        "background-color" : "rgb(27, 200, 68)",
                        "z-index" : "99"
                    });
                }
 
                if ( head.mobile ) {
                    $( "#exemple" ).css({
                        "position" : "absolute",
                        "top" : "0px",
                        "left" : "0px",
                        "width" : "100%",
                        "height" : "200px",
                        "background-color" : "rgb(27, 200, 68)",
                        "z-index" : "99"
                    });
                }
 
            });
        }
    );  
</script>