zichtbaar bij afdruk

Door Jan R op 06-10-2015 09:02 gewijzigd op 06-10-2015 09:07

1.948 views

Hoi,

Ik laat de gebruiker een paar instellingen zelf invullen voor de kopjes.
* De achter- en voorgrondkleur
* Of de tekst moet knipperen of niet
* in geval knipperen de frequentie

Het knipperen gebeurd via javascript door visibility op hidden of op visible te plaatsen. Als ik echter een afdruk wil maken MOET deze altijd zichtbaar zijn.

Gezien het gekozen gegevens zijn doe ik dit met in-line css.
php

style="background-color:'.$backcolor.'; color:'.$forecolor.';
@media print {visibility: visible;}"

html

<div id="datum26" class="datum" style="background-color:red; color:Yellow;
@media print {visibility: visible;}" title="">27/10/2015<br>Ladder</div>
</div>

Echter bij mijn afdruk is het niet altijd zichtbaar, maar de status op het moment welke ik het printcommando geef.

Wat is er fout?

Jan

Joni Fleischer

06-10-2015 09:10

visibility: visible!important;

Misschien dat het script dit overruled anders?

Ward van der Put

06-10-2015 09:48

Je kunt geen @media-regels en media queries gebruiken in inline style-attributen.

Je kunt echter wel puur CSS gebruiken voor een knipperlichteffect:


.knipperlicht {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {  
  50% { opacity: 0.0; }
}

Die 1s is de frequentie.

Een en ander kun je vervolgens ook nog verpakken in een @media-regel:


@media screen {
  .knipperlicht {
    animation: blinker 1s linear infinite; 
  }

  @keyframes blinker {  
    50% { opacity: 0.0; }
  }
}

Jan R

06-10-2015 11:20 gewijzigd op 06-10-2015 11:36

Beide Bedankt
Ik ga dieper zoeken op deze animatie. Heb het wel al werkende op een testje

[size=xsmall]Toevoeging op 06/10/2015 11:36:02:[/size]

<!DOCTYPE html>
<html>
	<head>
		<title>test animation</title>
  		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<style>
			.knipperlicht {
			  animation: blinker 1s linear infinite;
			}

			@keyframes blinker {  
			  50% { opacity: 0.0; }
			}
			
			.kleur {
			  animation: clr 4s linear infinite;
			}

			@keyframes clr { 
				0%   {background-color: red;}
				25%  {background-color: yellow;}
				50%  {background-color: blue;}
				100% {background-color: green;}
			}
			
			.lengte {
				background-color: red;
				animation: len 4s linear infinite;
			}

			@keyframes len { 
			
				0%   {width:0%}
				25%  {width:50%}
				50%  {width:100%}
				75%  {width:50%}
				100% {width:0%}
			}
		</style>
	</head>
	<body>
		<h1>CSS Animations</h1>
		<h2 class="knipperlicht">
			Knipperen 1Hz
		</h2>
		<h2 class="kleur">
			4 kleuren .25Hz
		</h2>
		<h2 class="lengte">
			Lengte .25Hz
		</h2>
	</body>
</html>

Heb je eventueel leuke animaties behalve deze snelle testjes

Reageren

Inloggen om te reageren