zichtbaar bij afdruk

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

PHP Developers gezocht die van complexe online vra

Vacature Omschrijving Een grote klant is opzoek naar enthousiaste PHP developers (junior/medior/senior). De organisatie waar jij komt te werken ontwikkelt en bouwt succesvolle oplossingen voor complexe online vraagstukken zoals performance, usability en conversion. Daarnaast zorgen zij voor externe systemen ingericht voor productbeheer, point-of-sales en voorraadbeheer koppelt de organisatie probleemloos aan op eigen Magento gebaseerde webshops. Het is een informele organisatie waar de communicatielijnen kort zijn. Functieomschrijving Met drupal 8 of ShopWare realiseert de organisatie prachtige frond-ends op dynamische data uit allerlei systemen. Je houdt je in deze organisatie bezig met het ontwerpen, ontwikkelen en beheren van functionaliteiten van de applicaties

Bekijk vacature »

Jan R

Jan R

06/10/2015 09:02:16
Quote Anchor link
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
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
style="background-color:'.$backcolor.'; color:'.$forecolor.';
@media print {visibility: visible;}"

html
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<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
Gewijzigd op 06/10/2015 09:07:48 door Jan R
 
PHP hulp

PHP hulp

16/10/2019 17:34:26
 
Joni Fleischer
Moderator

Joni Fleischer

06/10/2015 09:10:52
Quote Anchor link
visibility: visible!important;

Misschien dat het script dit overruled anders?
 
Ward van der Put
Moderator

Ward van der Put

06/10/2015 09:48:02
Quote Anchor link
Je kunt geen @media-regels en media queries gebruiken in inline style-attributen.

Je kunt echter wel puur CSS gebruiken voor een knipperlichteffect:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
.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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
@media screen {
  .knipperlicht {
    animation: blinker 1s linear infinite;
  }

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

Jan R

06/10/2015 11:20:13
Quote Anchor link
Beide Bedankt
Ik ga dieper zoeken op deze animatie. Heb het wel al werkende op een testje

Toevoeging op 06/10/2015 11:36:02:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!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
Gewijzigd op 06/10/2015 11:36:32 door Jan R
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.