Utilisation "@media print" et "overflow"

Version imprimable

23/07/2014, 17h17
Samuel_

Utilisation "@media print" et "overflow"

Hello,

j'ai une page HMTL avec une DIV qui a pour définition :

Code:

<div style='height:250px;overflow:scroll;@media print{overflow:initial}'></div>

Quand je souhaite imprimer ma page, l'ensemble du texte dans ma DIV n'est pas affiché mais seulement le haut.

Une explication ?

Samuel_
23/07/2014, 18h25
NoSmoking

Bonjour,
la règle @media ne peut se mettre dans un attribut style qui n'accepte que des propriétés/valeurs CSS.
24/07/2014, 09h13
Samuel_

Ok d'accord ça explique tout.

Du coup je suis bloqué ....
Techniquement, je ne peux pas modifier mon header ... Du coup j'ai tenté d'insérer ma balise STYLE avec un bout de code JavaScript :

Code:

document.getElementsByTagName("head")[0].innerHTML += "<style media=\"print\" type=\"text/css\">zoneScroll{overflow:initial;}</style>"

Mais aucun changement en vue.

Quelqu'un aurait-il une autre solution ?

L'écriture de zoneScroll{overflow:initial;} est incorrecte il manque au moins un point précédent le zoneScroll pour que le sélecteur soit une class.

Dans ce cas il faut que ton HTML ressemble à

Code:

<div class="zoneScroll"></div>

:fleche: Comment utiliser les classes en CSS ?

Dans ton cas la méthode qui me semble la plus propre, séparation des couches, est de passer par une feuille de style externe dans laquelle tu ajoutes ce que bon te semble.

Dans ta page tu rajoutes un script d'insertion dynamique de la feuille de style, exemple
Code:

1 2 3 4 5 var oLink = document.createElement('LINK'); oLink.rel = 'stylesheet'; oLink.type = 'text/css'; oLink.href = 'include_style.css'; document.getElementsByTagName('HEAD')[0].appendChild( oLink);
Avec le code HTML suivant

Code:

<div class="class_div">Bonjour impression sur fond rouge!</div>

et un fichier style include_style.css contenant
Code:

1 2 3 4 5 @media print{ .class_div{ background:#F00; } }
tu devrais voir lors de l’aperçu avant impression le texte sur fond rouge, à toi ensuite d'adapter.

code de test :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Include LINK STYLE</title> <script> var oLink = document.createElement('LINK'); oLink.rel = 'stylesheet'; oLink.type = 'text/css'; oLink.href = 'include_style.css'; document.getElementsByTagName('HEAD')[0].appendChild( oLink); </script> </head> <body> <div class="class_div">Bonjour impression sur fond rouge!</div> </body> </html>
Tu peux en profiter pour mettre tous les styles dans ce fichier pour ne plus les avoir dans les balises.
exemple :
Code:

1 2 3 4 5 6 7 8 9 .class_div{ background:#ABC; } @media print{ .class_div{ background:#F00; } }
attention toutefois à l'ordre de déclaration, le @media en dernier.

Citation:

Envoyé par NoSmoking

L'écriture de zoneScroll{overflow:initial;} est incorrecte il manque au moins un point précédent le zoneScroll pour que le sélecteur soit une class.

C'est une faute de recopiage, j'utilise un id donc j'ai placé un # avant le zoneScroll

Citation:

Envoyé par NoSmoking

Dans ton cas la méthode qui me semble la plus propre, séparation des couches, est de passer par une feuille de style externe dans laquelle tu ajoutes ce que bon te semble.

L'idée est bonne mais je ne peux pas insérer de fichier non plus ...

En mixant mon code initial et le tiens, je vais essayer le code JS suivant :
Code:

1 2 3 4 5 var styleNode = document.createElement('style'); styleNode.type = 'text/css'; var styleText = document.createTextNode('@media print { #scrollZone {overflow:initial;}}'); styleNode.appendChild(styleText); document.getElementsByTagName('head')[0].appendChild(styleNode);
Cela te pense être une bonne idée ?

Je test la solution et je vous redis !

25/07/2014, 17h04
Samuel_
J'ai résolu mon problème ! :mrgreen:
Voici le code JS :
Code:

1 2 3 windows.onbeforeprint = function() { (document.getElementsById('scrollZone')).setAttribute('style', 'overflow:initial;'); };
Attention la fonctionnalité onbeforeprint n'est pas utilisable pour certains navigateurs (Google Chrome en autre, je crois).
28/07/2014, 08h41
Bovino
Tant mieux si ton problème est résolu, mais le code que tu montres ne risque pas de fonctionner... :aie:
L'objet windows n'existe pas en JavaScript, donc lui affecter un événement ne sera pas possible.
getElementsById() n'existe pas non plus : dans la mesure où un id doit être unique dans la page, seule la méthode getElementById() et renvoie un unique élément et non une collection.

Ensuite, utiliser setAttribute pour gérer les styles est plutôt maladroit. Si tu travailles sur un objet de type HTMLElement, alors autant utiliser les méthodes propres à la manipulation de ce type d'objet et non des méthodes affectant le HTML.
Bref, ton code deviendrait :
Code:

1 2 3 window.onbeforeprint = function() { document.getElementById('scrollZone').style.overflow = 'initial'; };