5568 sujets

Sémantique web et HTML

Impression de display:none

Bonjour bonjour,

Je vais tenter ma chance sur ce site =p.

En gros une partie de mon code html est en display:none et apparaît en onclick grâce à des fonctions javascript.
Mais pour imprimer j'ai un problème : vue que le style = display:none; de mon code html prend le dessus sur le @print { display:block} de mon CSS d'impression.

J'ai donc penser à créer une fonction javascript qui dans un premiers temps transforme tout les display : none en display : " " puis qui lance l'impression. J'arrive donc à ce code basique :


function showMe()
    			{
    				
    				elements = document.getElementsByClassName("Element" );
   					elements1 = document.getElementsByClassName("Element1");
               		elements2 = document.getElementsByClassName("contenu");
               		elements3 = document.getElementsByClassName("dropperFT");

					for (var i = 0; i < elements.length; i++) 
    				{
        				elements[i].style.display = "" ;
   					}
               		for (var j = 0; j < elements1.length; j++)
    				{
    					elements1[j].style.display = "";
    				}

                	for (var k = 0; k < elements2.length; k++)
                	{
                   	 elements2[k].style.display = "";
                	}

                	for (var l = 0; l < elements3.length; l++)
                	{
                   	 elements3[k].style.display = "none";
                	}

                	window.print();

    			}

Ça rends bien ce que je veux visible mais ça n'imprime pas. Une idée?
Modifié par dorian91 (19 May 2017 - 11:51)
Bonjour.

C'est curieux mais chez moi ça marche... Vous mettez bien la 'media query' @media print {...} à la fin de la feuille de style ?

Smiley confus
Modifié par Zelena (19 May 2017 - 13:25)
coucou,
Voila une capture de ce que j'obtiens après avoir cliqué sur imprimer upload/1495205256-65499-capture.png


La class dropper ne disparait pas mais c'est pas trop grave.

Non zelena, tu parles de la feuille de style css de mon impression?

Je mets juste ça dans mon head html : 
<link rel="stylesheet" type="text/css" href="imprime.css" media="print" />


Mon code HTML si ça peut aider 

    	<body>
    		
    			<a href="#" onclick="javascript:showMe();"> imprimer</a>

    			

<div class="Element" style="display: none;"> 
	<h2>la class Element Titre + parties globales<h2>

	<a href="#"" onclick="javascript:afficheContenu"> <H2>GROS TItre2....</H2> </a> <!--cliquer dessus pour afficher le contenu-->
		<div class="contenu" style="display: none;">c'est le contenu des parties</div>
	<a onclick="javascript:rendrevisible"><H2>GROS TItre2....</H2></a> <!--cliquer dessus pour afficher le contenu-->
		<div class="contenu" style="display: none;">c'est le contenu des parties</div>

	<a onclick="javascript:rendrevisible"> <H2>GROS TItre2....</H2> </a> <!--cliquer dessus pour afficher le contenu-->
		<div class="contenu" style="display: none;">c'est le contenu des parties</div>


	<div class="dropperFT" >Toutes les pastilles des différentes sociétes</div>
	<div class="dropperFT" >Toutes les pastilles des différentes sociétes2</div>
	<div class="dropperFT" >Toutes les pastilles des différentes sociétes3</div>


</div>







	<div class="Element1" style="display: none;"> la class Element1 Titre qui englobe la parties spécifiques 1>


	<div class="contenu" style="display: none;">c'est le contenu des parties</div>
	<div class="contenu" style="display: none;">c'est le contenu des parties</div>
	<div class="contenu" style="display: none;">c'est le contenu des parties</div>

</div>
</div>

<div class="Element1" style="display: none;"> la class Element1 Titre qui englobe la parties spécifiques 2>


	<div class="contenu" style="display: none;">c'est le contenu des parties</div>
	<div class="contenu" style="display: none;">c'est le contenu des parties</div>
	<div class="contenu" style="display: none;">c'est le contenu des parties</div>


</div>


    	</body>


merci en tout cas =)
Ah, les 'display : none' sont dans les éléments HTML... Tout s'explique.

Ils ont effectivement la priorité sur les feuilles de style internes et externes.

Ce serait plus simple de faire une classe... 'invisible' par exemple, qui aurait pour règle 'display : none' et de l'enlever au besoin par Javascript... Cette règle serait dans une feuille de style et causerait moins de soucis...

Smiley smile
Le problème c'est que quand je passe cette règle de display:none dans mon css media : screen
après impossible de faire réafficher mes elements par mes fonctions javascript =(

C'est possible de désactiver une feuille de style ou un bout de feuille de style avec du javascript?
dorian91 a écrit :

C'est possible de désactiver une feuille de style ou un bout de feuille de style avec du javascript?


Ça, ça ne me parait pas possible. Les styles ont été chargés et appliqués au chargement de la page. Javascript intervient, en général, après...

Mais bon grâce à Javascript, on peut enlever une classe à un élément, classe qui contient un certain nombre de règles... Ça me parait la méthode la plus simple. J'utilise en général classList. Il a l'air d'être assez bien 'supporté' à présent.

Reste à adapter vos fonctions Javascript...

Smiley smile
Modifié par Zelena (19 May 2017 - 19:46)
Meilleure solution
Donc le javascript va retirer la classe invisible de mes éléments et donc faire apparaître tous ces elements à certaine condition au chargement de la page?

Je vois pas en quoi cette méthode est différente de ma méthode initial?

merci pour l'aide =p
dorian91 a écrit :
Donc le javascript va retirer la classe invisible de mes éléments et donc faire apparaître tous ces elements à certaine condition au chargement de la page?


Non, pas au chargement de la page, en cas d'action de la part de Javascript... Et la classe 'invisible' peut être enlevée mais aussi dans le cas de l'impression, modifiée. C'est peut-être mieux d'ailleurs si on a envie de faire l'opération inverse.

Smiley smile
Sujet clos
Aller à