Imprimir mega da virada

16/12/2016

loteria jquery megasena

Esse é um html básico com css e jquery. Você preenche as dezenas que quer apostar. A impressão foi preparada para bilhetes da megasena da virada (184 x 82mm) e só funciona no firefox .

Dê uma olhada: www.hurpia.com.br/imprimir-mega-da-virada

Em breve, atualizo este texto e subo instruções no link acima.

Estilo CSS do tamanho do papel

page[size="megasena"] {  
  height: 18.4cm;
  width:  8.2cm; 
}

Estilo CSS do tamanho do papel e impressão

page[size="megasena"] {  
  height: 18.4cm;
  width:  8.2cm; 
}

@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }

  .cell{opacity: 0;}
  .imprimir{opacity: 1 !important;}
  .nao-imprimir{opacity: 0;}
  
}

Estilo aplicado no html, quadradinhos a serem preenchidos

<page size="megasena">

    <div class="row" id="row1a">
        <div class="cell a01" data-id="01"></div>
        <div class="cell a02" data-id="02"></div>
        <div class="cell a03" data-id="03"></div>
        <div class="cell a04" data-id="04"></div>
        <div class="cell a05" data-id="05"></div>
        <div class="cell a06" data-id="06"></div>
        <div class="cell a07" data-id="07"></div>
        <div class="cell a08" data-id="08"></div>
        <div class="cell a09" data-id="09"></div>
        <div class="cell a10" data-id="10"></div>
    </div>
<!-- trecho acima repetido várias vezes -->
</page>

Estilo aplicado no html, quadradinhos a serem preenchidos

<script>
$( document ).ready(function() {
    $(".cell").click(function(event) {
        $(this).toggleClass("imprimir");
    });


  $( ".cell" ).hover(
    function() {
        $("#numero").css("opacity, 1.0")
      $( "#numero" ).css("top", event.pageY - 30 );
      $( "#numero" ).css("left", event.pageX - 30 );
      $( "#numero" ).html( $(this).data("id") );
  },
    function() {
        $("#numero").css("opacity", "0.0")
        $( "#numero" ).html( "" );
    }
  );
});
</script>