Discussion :

[bjo393]

bonjour,

je recherche un moyen de générer du code css avec du code js, le déclenchement de ce code doit s'effectuer si la larguer de la de la fenêtre est inférieur a 400

Code HTML :

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

1
2
3
4
<p <?php if($besoinCSS==1){ echo'<script type="text/javascript">
                    var largeur_fenetre = $(window).width();
                    if(largeur_fenetre<400){document.write(style=" margin-top: 40px;"}
                </script>';})?> >

je c'est que le code c'est pas.

[SpaceFrog]

regarde plutot du coté de "media queries"

[bjo393]

si j'ai bien compris le code qui me faut:

Code css :

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

1
2
3
4
5
@media screen and (min-width: 400px) {
  #marge40px {
    magin-top:10px;
  }
}

Code php :

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

<p <?php if($besoinCSS==1){ echo'id="marge40px"';}?> >

mais j'ai pas bien compris comment utiliser le code media queries, c'est une librairie??, car je ne suis pas arriver a le faire fonctionner

[Bovino]

Code css :

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

.marge40px

Code php :

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

echo'id="marge40px';

Rien ne te choque ?

[bjo393]

non rien me choque

[Bovino]

Tu ne connais pas la différence entre un id et une class

[bjo393]

Code js :

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

1
2
3
4
5
6
7
8
if (window.matchMedia("(min-width: 600px)").matches) {
  /* La largeur minimum de l'affichage est 600 px inclus */
} else {
  /* L'affichage est inférieur à 600px de large */
    document.getElementById('marge40px').style.maginTop='400px';
        }
    }
}

je pence que j'ai un problème sur la sélection de l'élément
teste aussi avec #marge40px

[Bovino]

je pence que j'ai un problème sur la sélection de l'élément

Ah... moi j'aurais plutôt dit que la propriété maginTop est mal écrite...

[bjo393]

non elle est bien écris car margin-top ne fonction par car j'ai lue que le '-' n'est pas supporter et il faut le remplacer par marginTop

Maintenant, une petite question pour vous : comment accède-t-on à une propriété CSS qui possède un nom composé ? En Javascript, les tirets sont interdits dans les noms des propriétés, ce qui fait que ce code ne fonctionne pas :

Code js :

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

element.style.background-color = 'blue'; // Ce code ne fonctionne pas, les tirets sont interdits

La solution est simple : supprimer les tirets et chaque mot suivant normalement un tiret voit sa première lettre devenir une majuscule. Ainsi, notre code précédent doit s'écrire de la manière suivante pour fonctionner correctement :

Code js :

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

element.style.backgroundColor = 'blue'; // Après avoir supprimé le tiret et ajouté une majuscule au deuxième mot, le code fonctionne !

[Bovino]

non elle est bien écris car margin-top ne fonction par car j'ai lue que le '-' n'est pas supporter et il faut le remplacer par marginTop

Ce qui est un peu différent de

Code :

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

document.getElementById('marge40px').style.='400px';

Quant à ce genre de débogage, il devrait être fait et vérifié avant de poster.

[bjo393]

autant pour moi,
mais cela ne viens pas de la dans mon code je l'avais bien écris

[Bovino]

Code css :

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

1
2
3
4
5
@media screen and (min-width: 400px) {
  #marge40px {
    magin-top:10px;
  }
}

Ah...

[bjo393]

de toute façon ces lignes n’existe plus

Ah...

Code :

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

1
2
3
4
<p <?php if($besoinCSS==1){ echo'<script type="text/javascript">
                    var largeur_fenetre = $(window).width();
                    if(largeur_fenetre<400){document.write(style="margin-top: 40px;"}
                </script>';})?> >

[JérémieL]

Bonjour,

As-tu regardé la console d'erreurs Javascript ? Parce que là c'est bourré de fautes de syntaxe. Il y a une parenthèse fermante mal placée, des guillemets pour encadrer le paramètre de document.write...

Prends le temps de te relire attentivement, ça ira mieux.

[sekaijin]

j'avoue ne rien comprendre à cette discussion.
pour moi une simple feuille CSS statique est largement suffisante.

le pseudo classe assurant 90% du besoin pour le reste un simple ajout ou retrait d'une classe css sur un objet et le tour est joué.

bref je ne vois aucuns cas où générer du css soit utile.

A+JYT

[pinguix]

Salut, je suis de l'avis de sekaijin ...
Par contre si j'aurais un conseil a te donner pour adapter des éléments d'une page en javascript :

Code :

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

1
2
3
4
5
 
var largeur_fenetre = $(window).width();
if(largeur_fenetre<400){
    document.getElementById('ton_id').style.marginTop='valeur_px';
}

^ Ce code est plus fonctionnel que ton ancien
Bonne continuation