Masquer des zones de la page à l'impression

Soyez le premier à donner votre avis sur cette source.

Snippet vu 7 497 fois - Téléchargée 34 fois

Contenu du snippet

Ce script javascript simple permet de masquer certaines zones lorsque la page est imprimée (à l'aide d'un bouton sur votre page ou tout simplement lorsque vous faites Fichier/Imprimer). Il vous suffit de copier le code ci-dessous entre les balises <head></head> et ensuite il ne vous reste qu'à rajouter id="remove" dans les balises que vous désirez masquer à l'impression. Par exemple pour masquer un menu situé dans une cellule de tableau, vous n'avez qu'à remplacer la balise <td> par : <td id="remove">.

Source / Exemple :


<SCRIPT type="text/javascript">
<!--
function removeelements(){
	var remove_el=document.all.remove
	if (remove_el!='' && remove_el.length==null){
		remove_el.style.display='none'
	}else{
		for (i=0;i<remove_el.length;i++){
			remove_el[i].style.display='none';
		}
	}
	document.bgColor="white";
	document.body.style.background='';
}

function revertback(){
	setTimeout("window.location.reload()",50);
}
window.onbeforeprint=removeelements;
window.onafterprint=revertback;

// -->
</SCRIPT>

A voir également

Ajouter un commentaire Commentaires
cs_ericb2038
Messages postés
1
Date d'inscription
lundi 24 avril 2006
Statut
Membre
Dernière intervention
14 mars 2007

14 mars 2007 à 17:46
léger détail :

style type="text/css">
@media print {
#remove { display : none; }
}
</style>
implique qu'on donne plusieurs fois le meme id="remove" à différents éléments dans la page, ce qui est une pure hérésie. (et en plus pas spécialement pratique si on a besoin de s'y référer dans son css ou par un document.getElementByID()

mieux vaut faire à la place :
style type="text/css">
@media print {
.remove { display : none; }
}
</style>

et dans la page par exemple :


ou aussi :
etc...

on peut aussi faire une classe qui conserve le contenu en supprimant le background :

<style type="text/css">
@media print {
.remove
{ display : none; }
.removebg {
color:#000000;
background-color:#ffffff;
background-image:none;

}
}
</style>
on applique alors la classe 'remove' aux éléments à ne pas imprimer
du tout et la classe 'removebg' aux éléments qu'on veut imprimer en supprimant le fond (image ou fond de couleur) histoire d'économiser encre et papier.
cs_artotal
Messages postés
6
Date d'inscription
vendredi 11 juin 2004
Statut
Membre
Dernière intervention
12 août 2013

13 oct. 2006 à 01:04
le js est encore très utiles, notemment pour avoir un aperçu dans un pop up par exemple...
ifebo
Messages postés
181
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
28 décembre 2006

17 oct. 2005 à 16:51
Lol ! J'en conviens tout à fait.
coucou747
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Membre
Dernière intervention
30 juillet 2012
41
16 oct. 2005 à 11:32
Ah, je vais vous dire une petite chose : si je donnais directement les réponses, vous ne sauriez pas ou chercher les réponses à vos questions suivantes... En plus, généralement, on apprends bien plus en cherchant qu'en ayant la réponse directement... (et accéçoirement, rédiger un tuto sur chaque sujet, c'est long...)
ifebo
Messages postés
181
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
28 décembre 2006

16 oct. 2005 à 00:34
Merci à Sebmafate pour cette excellente adresse
http://www.openweb.eu.org/articles/css_impression/
Même à mon âge, je suis toujours heureux d'apprendre des choses. Merci.
A Coucou747 : Vous distribuez vos conseils avec tant de parcimonie que nous nous sentons obligés de nous investir davantage dans nos recherches pour nos propres

demandes. C'est bien. Cependant quand-même, de temps en temps on aimerait chercher un peu moins. Surtout qu'il est assez souvent évident que vous détenez bon

nombre des réponses à nos questions. ;-)
Bon, je parle pour moi bien sûr car je suis de plus en plus pressé de connaître ! (B'en oui, à mon âge on est plus près de la sortie que de la porte d'entrée ;-))
Afficher les 7 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.