Discussion :

[abc.xyz]

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 :

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

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

[SpaceFrog]

tu le dis toi même dans ton titre

Code :

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

$('#exemple').css({"position":"absolute", "left":largeur+"px"});

[abc.xyz]

Rebonjour,

Code :

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

$('#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

[abc.xyz]

Bonjour,

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

Merci

[SpaceFrog]

un element vide sur la page

Code :

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

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

un petit css

Code :

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

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

Code :

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

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"});
    }
 });

[abc.xyz]

Je ne comprends pas , j'ai fait:

Code :

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

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

[SpaceFrog]

tu as rajouté le css ???

Code :

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

 @media only screen and (max-width: 760px)

[NoSmoking]

Bonjour,
j'ai un peu de mal à comprendre pourquoi tu ne passes pas directement par les Media Queries.

[abc.xyz]

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

[NoSmoking]

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

Code css :

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

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

[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

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

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

1
2
3
 if($('body').width() > 767){
    $('#exemple').css({left:largeur});
 }

[NoSmoking]

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

[SpaceFrog]

cependant ton raisonnement est faux

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

[danielhagnoul]

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 :

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