11490 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Problème de rendu à l'impression

Bonjour à tous,

Comme indiqué sur le sujet, j'ai un souci de mise en page pour l'impression.

La page qui me pose problème est constituée de plusieurs gros divs qui sont tous cachés ( sauf le premier ) lors du chargement de la page.

Voici mon script ( simplifié ):

<script type="text/javascript">
<!--/*--><![CDATA[//><!--
function montrerLInformation(lInformation)
{
	if(document.getElementById)
	{
	
		document.getElementById('lien_calque1').className = '';
		document.getElementById('lien_calque2').className = '';
		document.getElementById('lien_calque3').className = '';
		document.getElementById('lien_calque4').className = '';
		document.getElementById('lien_calque5').className = '';

		document.getElementById('calque1').style.display = 'none';
		document.getElementById('calque2').style.display = 'none';
		document.getElementById('calque3').style.display = 'none';
		document.getElementById('calque4').style.display = 'none';
		document.getElementById('calque5').style.display = 'none';

				
		document.getElementById('lien_'+lInformation).className = 'actif';
		document.getElementById(lInformation).style.display = '';
	}
}

// script pour afficher l'argumentaire du produit
addToStart("montrerLInformation('calque1');");
//--><!]]>
</script>


où addToStart fait appel à start.js, qui donne la possibilité d'avoir des événements multiples au chargement d'une page.

Cette manipulation me permet de présenter les divs sous forme d'onglets lorsque le javascript est activé et de tout mettre lorsqu'il est désactivé.

J'ai également une feuille de style spécifique à l'impression où je dévoile l'intégralité des divs.

Mon problème est qu'à l'impression, seul l'onglet en cours est imprimé, le script prenant le pas sur la feuille de style.

J'avoue que sur ce coup je sèche un peu... Smiley confused

Auriez-vous une idée ?
Modifié par tataye (04 Jan 2007 - 09:55)
up !

Bonjour et bonne année à tous !

Personne n'aurait une piste pour mon problème ?

ça serait dommage de créer une page spécifique pour l'impression alors que les feuilles de style font ça très bien !
Modifié par tataye (03 Jan 2007 - 09:08)
Malheureusement je vois pas bien ce qu'on peut faire. Et puis parfois les pages juste pour l'impression c'est utile, tu peux en profiter pour mettre un choix si l'utilisateur veut imprimer les images ou non, etc.
Bonjour,

Merci pour la réponse.

Justement, avec ma feuille de style spécifique à l'impression, je ne laissais apparaître que les images réellement utiles, et beaucoup d'utilisateurs impriment directement à partir de leur navigateur.

Peut-être est-ce ma façon d'appeler mes scripts qui est à revoir ?
tataye a écrit :
Bonjour,

Merci pour la réponse.

Justement, avec ma feuille de style spécifique à l'impression, je ne laissais apparaître que les images réellement utiles, et beaucoup d'utilisateurs impriment directement à partir de leur navigateur.

Peut-être est-ce ma façon d'appeler mes scripts qui est à revoir ?

Peut-être que tu n'as pas besoin du Javascript pour faire ton design ...

Non j'ai rien dit je pensais à autre chose ...

Ce que tu veux faire c'est bien qqch comme çà :
upload/3815-ScreenHunte.png
Modifié par CNeo (03 Jan 2007 - 14:18)
Exactement Smiley smile

Mais il faut que la navigation soit possible avec le javascript désactivé
Modifié par tataye (03 Jan 2007 - 14:23)
J'essaye de le faire sur le mien et je te dit si j'y arrive de toute façon faut que je corrige toute cette bibliothèque de menu. Smiley cligne
Une dernière question :
qu'est-ce qui t'empêche de mettre les fonctions à utiliser au démarrage dans le XHTML ?
Je viens de me souvenir d'un truc que les profs de maths disent tout le temps :
"çà sert à rien de vouloir chercher l'erreur dans tes calculs, refait-les en entier",
ils n'ont pas si tord que çà, je suis presque sûr que le problème ne vient pas du Javascript mais plutôt de ta feuille de style d'impression ...

En clair, çà ne sert à rien de vouloir corrigé le style pour l'impression c'est très compliqué, il vaut mieux faire une page où il n'y a que le style d'impression.
Modifié par CNeo (03 Jan 2007 - 22:09)
Modérateur
Salut,

AMHA, il est préférable d'affecter une classe CSS contenant display: none; plutôt que de passer par l'objet style et cette classe doit être placée dans une feuille dédiée au média screen (voire projection si besoin est) mais pas pour les autres types de media (dont print).

Exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Exemple</title>
		<style type="text/css">/*<![CDATA[*/

@media screen, projection
{
	.Cache { display: none; }
}

		/*]]>*/</style>
		<script type="text/javascript">//<![CDATA[

window.onload = function()
{
	var oA = document.getElementsByTagName('a')[0];
	oA.className = 'Cache';
}

		//]]></script>
	</head>
	<body>

<p>
	<a href="coucou.htm">coucou</a>
</p>

	</body>
</html>

Modifié par koala64 (04 Jan 2007 - 00:20)
koala64 a écrit :

Salut,
AMHA, il est préférable d'affecter une classe CSS contenant display: none; plutôt que de passer par l'objet style et cette classe doit être placée dans une feuille dédiée au média screen (voire projection si besoin est) mais pas pour les autres types de media (dont print).


Diablement efficace,

Effectivement cette astuce a réglé mon problème.

Merci à toi et à CNeo Smiley smile
Sujet clos
Aller à