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