Imprimindo áreas isoladas de uma página com jQuery

Nesse tutorial vamos ver como fazer a impressão de áreas isoladas de uma página web. Com esse plugin você não precisará enviar o usuário para outra página, bastará informar qual parte da página deve ser impressa...

Por | @jonathanlamimkt Programação

Antes de iniciarmos, faça o download do plugin clicando no link abaixo.

http://plugins.jquery.com/files/jquery.PrintArea.js_4.txt

Agora que você já fez o download, chegou a hora de ver como utilizá-lo.

Na sua página você terá uma estrutura de conteúdo, formatado por < p >, etc. Em alguma parte da sua página você terá um botão do tipo IMPRIMIR, que fará a impressão da página toda ou irá enviar o usuário para uma outra página, onde tenha somente o conteúdo que deve ser impresso.

Com esse plugin você não precisará enviar o usuário para outra página, bastará informar qual parte da página deve ser impressa, e além do mais, você poderá permitir ao usuário que imprima as áreas da página de forma independente, bastando informar qual a área deve ser impressa.

No exemplo abaixo temos um codigo simples, que demonstra a impressão de um bloco de texto.




   Imprimindo áreas isoladas de uma página com jQuery</title>
   <script language="javascript" src="jquery.js"></script>
   <script type="javascript">
      $(document).ready(function(){
         $('.print').click(function(){
            $('.contentPrint').printArea();
            return false;
         });
      });
   </script>
</head>
<body>
<p><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow"  class="print">Clique aqui</a> para <a onclick="_gaq.push(['_trackEvent', 'link_tag', 'pfr2225', 'tagto_imprimir']);" href='https://www.oficinadanet.com.br/imprimir'>imprimir</a> o texto abaixo.</p>
<div class="contentPrint">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non turpis tortor, 
et aliquam urna. Nulla facilisi. Donec eleifend, felis vitae tristique auctor, ante urna 
tempor dolor, sit amet tincidunt eros nunc eu nibh. Nunc et lectus id nunc faucibus blandit 
ac ac ipsum.</p>
<p>Mauris pretium, orci et sagittis sodales, ipsum quam vestibulum justo, ut ullamcorper 
mauris ipsum eu lacus. Etiam at purus tellus, sit amet rutrum nunc. Ut facilisis urna 
vitae tortor semper ullamcorper faucibus mi varius. </p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos 
himenaeos. Morbi sit amet sodales odio. In in lacus id augue posuere tincidunt in id 
justo.</p>
</div>
</body>
</html>
</code></pre><br />
<br />
No bloco <script></script> inserido na página, simplesmente adicionamos ao evento click do link "Clique aqui", a informação de que ele deverá imprimir o conteúdo que estiver dentro do elemento especificado com a classe "contentPrint", e retornamos false para que o href do link não interfira na ação, levando o usuário para o topo da página.<br />
<br />
Alguns parâmetros podem ser passados para a função, possibilitando uma melhor formatação do posicionamento da tela de impressão que será aberta.<br />
@mode | [string]  | (iframe),"popup"     | printable window is either iframe or browser popup<br />
<br />
@popHt | [number]  | (500)                  | altura da janela<br />
<br />
@popWd | [number]  | (400)                  | largura da janela<br />
<br />
@popX | [number]  | (500)                  | posição X da janela<br />
<br />
@popY | [number]  | (500)                  | posição Y da janela<br />
<br />
@popTitle | [string]  | (?)                   | titulo da janela<br />
<br />
@popClose | [boolean] | (false),true           | fechar a janela após a impressão<br />
<br />
Esses parâmetros são passados da seguinte forma:<br />
<pre><code>
<script type="javascript">
$(document).ready(function(){
   $('.print').click(function(){
      $('.contentPrint').printArea({
         mode:'popup',
         popHt: 500,
         popWt: 400,
         popX: 500,
         popY: 500,
         popTitle: 'Título da janela'
      });
      return false;
   });
});
</script></code></pre><br />
Com o uso desse plugin, criar impressão de elementos de uma página se torna uma tarefa bem simples.<br />
<br />
Em caso de dúvidas ou sugestões, deixem os seus comentários que eles serão respondidos o mais breve possível.</p></p><script src="https://painel.m3midia.com.br/lib/prism/prism.js"></script><link rel="stylesheet" type="text/css" href="https://painel.m3midia.com.br/lib/prism/prism.css"></p>
                    </div>                    
                </div>
                <div class="wifl assuntosfim">
                    <div class="box_new_cmt bcmt">
                        <span class="tit_new_cmt">DEIXE SEU COMENTÁRIO</span><span data-post_id="2225" data-url="https://www.oficinadanet.com.br/artigo/javascript/imprimindo_areas_isoladas_de_uma_pagina_com_jquery" data-tipo="1" data-comentariosnrs="2" id="bt_new_cmt" class="bt_new_cmt">2 comentários</span>
                    </div>
                    <div class="box_new_cmt btag">
                        <span class="tit_new_cmt">MAIS SOBRE</span>
                        <a onclick="_gaq.push(['_trackEvent', 'assuntosfim', 'pfr2225', 'para_javascript']);"  href="https://www.oficinadanet.com.br/javascript" >javascript</a> <a onclick="_gaq.push(['_trackEvent', 'assuntosfim', 'pfr2225', 'para_jquery']);"  href="https://www.oficinadanet.com.br/jquery" >jquery</a> <a onclick="_gaq.push(['_trackEvent', 'assuntosfim', 'pfr2225', 'para_imprimir']);"  href="https://www.oficinadanet.com.br/imprimir" >imprimir</a> <a onclick="_gaq.push(['_trackEvent', 'assuntosfim', 'pfr2225', 'para_plugins']);"  href="https://www.oficinadanet.com.br/plugins" >plugins</a>
                    </div>
                </div>
                <script type="text/javascript">try { _402_Show(); } catch(e) {}</script>
            </div>  
        <div class="bar2 p-rel" id="out_post_barra" data-distance="30" >
            <div class="bar2" id="post_barra" ><!-- /6524261/ON_300x600_LATERAL -->
                <div class='wifl m-b-40'>
                <div id='div-gpt-ad-1519730196190-0' style='height:600px; width:300px;'>
                <script>
                googletag.cmd.push(function() { googletag.display('div-gpt-ad-1519730196190-0'); });
                </script>
                </div></div><div class="wifl m-b-40"><span class="titulo1" ><span>Últimas em Javascript</span></span><ul class="lst12  wifl  lsn "  id=""  ><li  >
                            <a class="" href="https://www.oficinadanet.com.br/google/22524-google-disponibiliza-aplicativo-para-quem-quiser-aprender-a-programar"  onclick="_gaq.push(['_trackEvent', 'barra_ultimos', 'pfr2225', 'pto22524']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/22524/app_14080.jpg" title="Google disponibiliza aplicativo para quem quiser aprender a programar" alt="Google disponibiliza aplicativo para quem quiser aprender a programar" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Google</span>
                                    <h3 class="tit tit2" >Google disponibiliza aplicativo para quem quiser aprender a programar</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/12811-formulario-de-contato-em-php"  onclick="_gaq.push(['_trackEvent', 'barra_ultimos', 'pfr2225', 'pto12811']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/12811/guiaphp_14080.jpg" title="Formulário de contato em php" alt="Formulário de contato em php" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Programação</span>
                                    <h3 class="tit tit2" >Formulário de contato em php</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/18218-gmail-ira-bloquear-arquivos-javascript-a-partir-de-fevereiro"  onclick="_gaq.push(['_trackEvent', 'barra_ultimos', 'pfr2225', 'pto18218']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/18218/gmail_14080.jpg" title="Gmail irá bloquear arquivos JavaScript a partir de fevereiro" alt="Gmail irá bloquear arquivos JavaScript a partir de fevereiro" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Internet</span>
                                    <h3 class="tit tit2" >Gmail irá bloquear arquivos JavaScript a partir de fevereiro</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/17493-com-atualizacao-do-chrome-consumo-de-memoria-ram-ira-diminuir-em-50"  onclick="_gaq.push(['_trackEvent', 'barra_ultimos', 'pfr2225', 'pto17493']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/17493/chrome-d_14080.png" title="Com atualização do Chrome, consumo de memória RAM irá diminuir em 50%" alt="Com atualização do Chrome, consumo de memória RAM irá diminuir em 50%" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Internet</span>
                                    <h3 class="tit tit2" >Com atualização do Chrome, consumo de memória RAM irá diminuir em 50%</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/13484-qual-a-melhor-linguagem-de-programacao"  onclick="_gaq.push(['_trackEvent', 'barra_ultimos', 'pfr2225', 'pto13484']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/13484/capa_14080.jpg" title="Qual a melhor linguagem de programação?" alt="Qual a melhor linguagem de programação?" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Programação</span>
                                    <h3 class="tit tit2" >Qual a melhor linguagem de programação?</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/10087-alterando-as-cores-do-google-maps"  onclick="_gaq.push(['_trackEvent', 'barra_ultimos', 'pfr2225', 'pto10087']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/10087/gmaps-home_14080.png" title="Alterando as cores do Google Maps com Javascript" alt="Alterando as cores do Google Maps com Javascript" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Programação</span>
                                    <h3 class="tit tit2" >Alterando as cores do Google Maps com Javascript</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/9359-como-acessar-a-camera-no-navegador-com-html5"  onclick="_gaq.push(['_trackEvent', 'barra_ultimos', 'pfr2225', 'pto9359']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/9359/webcam_14080.jpg" title="Como acessar a câmera no navegador com HTML5" alt="Como acessar a câmera no navegador com HTML5" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Programação</span>
                                    <h3 class="tit tit2" >Como acessar a câmera no navegador com HTML5</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/artigo/usabilidade/acessibilidade-e-usabilidade-para-televisao-interativa"  onclick="_gaq.push(['_trackEvent', 'barra_ultimos', 'pfr2225', 'pto2685']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/2685/td_internet-tv_14080.jpg" title="Acessibilidade e usabilidade para televisão interativa" alt="Acessibilidade e usabilidade para televisão interativa" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Softwares</span>
                                    <h3 class="tit tit2" >Acessibilidade e usabilidade para televisão interativa</h3>
                                </div>
                            </a>
                        </li></ul></div>
                    <div class="box1 full rss m-b-40" >
                        <span class="tit" >Assine a nossa newsletter</span>
                        <div class="form" >
                            <form
                                    action="https://www.oficinadanet.com.br/cadastro"
                                    method="post"
                                    onsubmit="_gaq.push(['_trackEvent', 'barranewsletter', 'barranewsletter', 'barranewsletter']); return true;">

                                <input type="hidden" value="oficinadanet_rss" name="uri"/>
                                <input type="hidden" name="loc" value="pt_BR"/>
                                <input class="form_campo" type="email" name="email" id="email" placeholder="seu e-mail" >
                                <input class="bt bt1" type="submit" value="OK" >
                            </form>
                        </div>
                    </div><div class="wifl m-b-40"><span class="titulo1" ><span>Últimos reviews</span></span><ul class="lst12  wifl  lsn "  id=""  ><li  >
                            <a class="" href="https://www.oficinadanet.com.br/reviewsmartphones/22667-review-galaxy-note-8"  onclick="_gaq.push(['_trackEvent', 'barra_reviews', 'pfr2225', 'pto22667']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/22667/capa_14080.jpg" title="Review Galaxy Note 8 - O melhor da Samsung, em 2017 [vídeo]" alt="Review Galaxy Note 8 - O melhor da Samsung, em 2017 [vídeo]" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Reviews de smartphones</span>
                                    <h3 class="tit tit2" >Review Galaxy Note 8 - O melhor da Samsung, em 2017 [vídeo]</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/zenfone4/22618-review-zenfone-4-max"  onclick="_gaq.push(['_trackEvent', 'barra_reviews', 'pfr2225', 'pto22618']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/22618/capa_14080.jpg" title="Review Zenfone 4 Max - é só bateria mesmo? [vídeo]" alt="Review Zenfone 4 Max - é só bateria mesmo? [vídeo]" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Zenfone 4</span>
                                    <h3 class="tit tit2" >Review Zenfone 4 Max - é só bateria mesmo? [vídeo]</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/gadgets/22556-review-moto-power-pack-e-tv-digital"  onclick="_gaq.push(['_trackEvent', 'barra_reviews', 'pfr2225', 'pto22556']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/22556/capa_14080.jpg" title="Review Moto Power Pack e TV Digital" alt="Review Moto Power Pack e TV Digital" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Gadgets</span>
                                    <h3 class="tit tit2" >Review Moto Power Pack e TV Digital</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/smartphones/22399-review-samsung-galaxy-a8"  onclick="_gaq.push(['_trackEvent', 'barra_reviews', 'pfr2225', 'pto22399']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/22399/capa_14080.jpg" title="Review Galaxy A8 - Quase... [vídeo]" alt="Review Galaxy A8 - Quase... [vídeo]" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Smartphones</span>
                                    <h3 class="tit tit2" >Review Galaxy A8 - Quase... [vídeo]</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/perifericos/22458-review-mouse-corsair-glaive"  onclick="_gaq.push(['_trackEvent', 'barra_reviews', 'pfr2225', 'pto22458']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/22458/capa_14080.jpg" title="Review Corsair Glaive - Um ''grande'' mouse, em todos os sentidos" alt="Review Corsair Glaive - Um ''grande'' mouse, em todos os sentidos" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Periféricos</span>
                                    <h3 class="tit tit2" >Review Corsair Glaive - Um ''grande'' mouse, em todos os sentidos</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/smartphones/22315-review-alcatel-a5-max-led-edition"  onclick="_gaq.push(['_trackEvent', 'barra_reviews', 'pfr2225', 'pto22315']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/22315/capa_14080.jpg" title="Review Alcatel A5 Max Led Edition" alt="Review Alcatel A5 Max Led Edition" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Smartphones</span>
                                    <h3 class="tit tit2" >Review Alcatel A5 Max Led Edition</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/mouses/22294-review-redragon-dagger"  onclick="_gaq.push(['_trackEvent', 'barra_reviews', 'pfr2225', 'pto22294']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/22294/review-redragon_dagger_14080.jpg" title="Review Redragon Dagger - Um bom projeto mal executado" alt="Review Redragon Dagger - Um bom projeto mal executado" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Mouses</span>
                                    <h3 class="tit tit2" >Review Redragon Dagger - Um bom projeto mal executado</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/reviewsmartphones/20599-review-moto-z2-force-power-edition"  onclick="_gaq.push(['_trackEvent', 'barra_reviews', 'pfr2225', 'pto20599']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/20599/capinha2_14080.jpg" title="Review Moto Z2 Force - Power Edition" alt="Review Moto Z2 Force - Power Edition" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Reviews de smartphones</span>
                                    <h3 class="tit tit2" >Review Moto Z2 Force - Power Edition</h3>
                                </div>
                            </a>
                        </li></ul></div><div class="wifl m-b-40">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ON_BARRA_LATERAL -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-5305121862343092"
     data-ad-slot="1333529744"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>      
        </div>
    </div>
<div class="wifl bottom_pause_post_barra"><div style="float:left;">
<div style="width: 300px; float: left;">
<!-- /6524261/ON_FOOTER -->
<div id="div-gpt-ad-1512402583744-0" style="height:250px; width:300px;">
<script>
googletag.cmd.push(function() { googletag.display("div-gpt-ad-1512402583744-0"); });
</script>
</div>
</div></div>
    <div style="float:left; max-width:750px; margin-left:20px" class="wifl"><span class="titulo1" ><span>O QUE LER EM SEGUIDA</span></span><ul class="lst4 post wifl  lsn "  id=""  ><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/9518-upload-de-imagens-php-com-uploadify"  onclick="_gaq.push(['_trackEvent', 'oq_ler_conteudo_relacionado', 'pfr2225', 'pto9518']);"  >
                                <div class="img box-img2">
                                    <span class="label_tpl1 fix-bl bg1">Programação</span>
                                    <img src="https://www.oficinadanet.com.br/imagens/post/9518/uploadify_200113.jpg" title="Upload de imagens e arquivos PHP com Uploadify" alt="Upload de imagens e arquivos PHP com Uploadify" >
                                    <span class="gradient"></span>
                                </div>
                                <h2 class="wifl tit4">Upload de imagens e arquivos PHP com Uploadify</h2>
                                <div class="wifl">
                                    <span class="comment cinza">2 | </span><span class="ass-autor cor2">por Marciano Dias</span></div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/artigo/1589/jquery_rating_-_sistema_de_votacao_interativa"  onclick="_gaq.push(['_trackEvent', 'oq_ler_conteudo_relacionado', 'pfr2225', 'pto1355']);"  >
                                <div class="img box-img2">
                                    <span class="label_tpl1 fix-bl bg1">Programação</span>
                                    <img src="https://www.oficinadanet.com.br/imagens/post/1355/jquery_200113.jpg" title="jQuery Rating - Sistema de votação interativa" alt="jQuery Rating - Sistema de votação interativa" >
                                    <span class="gradient"></span>
                                </div>
                                <h2 class="wifl tit4">jQuery Rating - Sistema de votação interativa</h2>
                                <div class="wifl">
                                    <span class="comment cinza">1 | </span><span class="ass-autor cor2">por Nicolas Muller</span></div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/8598-sistema-de-votacao-thumbs-up-com-phpmysqljquery"  onclick="_gaq.push(['_trackEvent', 'oq_ler_conteudo_relacionado', 'pfr2225', 'pto8598']);"  >
                                <div class="img box-img2">
                                    <span class="label_tpl1 fix-bl bg1">Programação</span>
                                    <img src="https://www.oficinadanet.com.br/_template/imagem/padrao.jpg" title="Sistema de votação thumbs up com PHP/MySQL/jQuery" alt="Sistema de votação thumbs up com PHP/MySQL/jQuery" >
                                    <span class="gradient"></span>
                                </div>
                                <h2 class="wifl tit4">Sistema de votação thumbs up com PHP/MySQL/jQuery</h2>
                                <div class="wifl">
                                    <span class="comment cinza">0 | </span><span class="ass-autor cor2">por Rafael Couto Alves</span></div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/artigo/css/galeria-com-miniatura-deslizante-usando-css3"  onclick="_gaq.push(['_trackEvent', 'oq_ler_conteudo_relacionado', 'pfr2225', 'pto2635']);"  >
                                <div class="img box-img2">
                                    <span class="label_tpl1 fix-bl bg1">Programação</span>
                                    <img src="https://www.oficinadanet.com.br/_template/imagem/padrao.jpg" title="Galeria com miniatura deslizante usando CSS3" alt="Galeria com miniatura deslizante usando CSS3" >
                                    <span class="gradient"></span>
                                </div>
                                <h2 class="wifl tit4">Galeria com miniatura deslizante usando CSS3</h2>
                                <div class="wifl">
                                    <span class="comment cinza">0 | </span><span class="ass-autor cor2">por Suelen Braga</span></div>
                            </a>
                        </li></ul>
    </div>
</div>  
        <div class="wifl post-bottom1" style="margin:0">
            
        </div>
        
        
        
    </section>
    <div id="box_new_cmt_open" class="box_new_cmt_open">
        <div style="height:100%" class="content1">
            <div id="bt_new_cmt_orelha" class="bt_new_cmt_orelha"><p>COMENTÁRIOS</p></div>
            <div id="bt_new_cmt_orelha_close" class="bt_new_cmt_orelha"><p>COMENTÁRIOS</p></div>

            <div class="titulo1"><span>Comentários</span></div>
            <div class="wifl" style="height:100%" id="box_new_cmt_retorno"></div>
        </div>
    </div>       
</div>
                <script type="text/javascript"> var EUREKAD = EUREKAD || {_setAccount: "987b879f69856a4e81907f70ccbe9d9d_1101"}; </script> 
                <script async src="https://tag.ageureka.com/eureka_ads.js?v=0.0.2"></script>
                                <div class="wifl" >
                                    <div class="content-fix content10 bg2" >
                                        <!-- /6524261/ON_BLOCOFIM -->
                                        <div id="div-gpt-ad-1489748718845-0" style="height:250px; margin:auto; width:970px;">
                                        <script>
                                        googletag.cmd.push(function() { googletag.display("div-gpt-ad-1489748718845-0"); });
                                        </script>
                                        </div>
                                    </div>
                                </div></div>
                </section>
<footer class="footer wifl" id="footer">
    <div class="corpo">
        <a href="https://www.oficinadanet.com.br" class="logo2"></a>
        <div class="out-menu-footer">
            <ul class="menu-footer lst-footer1 wifl">
                <li><a href="https://www.oficinadanet.com.br/sobre">Sobre</a></li>
                <li><a href="https://www.oficinadanet.com.br/contato">Contato</a></li>
                <li><a href="https://www.oficinadanet.com.br/colunista" >Seja colunista</a></li>
                <li><a href="https://www.oficinadanet.com.br/privacidade" >Política de Privacidade</a></li>
                <li><a href="https://www.oficinadanet.com.br/equipe" >Equipe</a></li>
            </ul>
            <ul class="menu-footer wifl">
                <li><a rel="nofollow" href="https://www.facebook.com/oficinadanet">Facebook</a></li>
                <li><a rel="nofollow" href="https://twitter.com/OficinadaNet">Twitter</a></li>
                <li><a rel="nofollow" href="https://www.youtube.com/user/oficinadanettv">Youtube</a></li>
                <li><a rel="nofollow" href="https://www.instagram.com/oficinadanetoficial/">Instagram</a></li>
                <li><a rel="nofollow" href="https://www.oficinadanet.com.br/rss">RSS</a></li>
            </ul>
        </div>
        <div class="box-m3"  >
            <p class="wifl txt1">Um site do grupo</p>
            <a class="m3midia" href="http://www.m3midia.com.br"></a>
            <p class="wifl txt2">© 2018 <span>M3 Mídia</span></p>
            <p class="wifl txt2">Todos os direitos reservados</p>
        </div>
    </div>
</footer>
            <span title="Ir para o topo" class="top_page" id="top_page" ><span></span></span>
        <script type='text/javascript'>
                var tempo = '1800';
                window.setTimeout('location.reload();', tempo*1000);
                </script>
                <div class="wifl hgt100 blackoverlay" id="blackoverlay"></div>
<div style="display:none" id="flgcomment"></div>
<div id="out_lib" >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</div>
<script type="text/javascript">
    
    var vv={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=vv._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=vv._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/\r\n/g,"\n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}
    function BV(str){return vv.decode(str);}

    function scrollPageToID(id)
    {
        $('html,body').animate({ scrollTop: $('#'+id).offset().top - ( $(window).height() - $('#'+id).outerHeight(true) ) / 2  }, 700);
    }

    function serializeDataAttr(form)
    {
        var dataarr = new Array();
        for(var i in form.data()) {
            var subarr = new Array();
            subarr['name'] = i;
            subarr['value'] = form.data()[i];
            dataarr.push(subarr);
        }
        return $.param(form.serializeArray().concat(dataarr));
    }

    function testaVazio(campo,comparacao,mensagem,erro)
    {
        if (erro == true) {return true;}
        if (document.getElementById(campo).value == comparacao)
        {
            alert (mensagem);
            document.getElementById(campo).value = "";
            document.getElementById(campo).focus();
            return true;
        }
        else {return false;}
    }
    function testaCheckBox(classe,mensagem)
    {
        erro = true;
        checkboxes = document.getElementsByClassName(classe);

        for(var i=0, n=checkboxes.length; i<n; i++)
        {
            if(checkboxes[i].checked)
                erro = false;
        }

        if(erro == true)
        {
            alert(mensagem);
            checkboxes[0].focus();
            return true;
        }
        else
            return false;
  }
    function ajaxDireto(url,param,retorno,tipo) //usa jquery
    {
        if(!tipo) tipo = "POST"
         $.ajax({
           type: tipo,
           url: url,
           data: param,
           success: function(html){
             $("#"+retorno).html(html);
           }
         });

    }

    function newsletterCad(e,step)
    {
//        alert(step);
//        alert(e);

        if(step == 1)
        {
            alert('1');
            $(e+' .out_captcha').html('<div class="wifl p-rel newsbrandcap" id="brand_cap_widget_wrapper" ><span class="load-ico" ></span></div><script type="text/javascript" src="https://api.pontamedia.net/challenge.php?k=8f8436b8ae2f804f336e902439085b08a914db96"></script'+'>');
            alert('2');
//            $('#news_bb_right_plan').css('left','-306px');
        }
        else
        {
            /*
            ajaxDireto('',$('#newscad_form1').serialize()+'&'+$('#newscad_form2').serialize(),'out_new_cad');
            */
        }
    }

    function populaSelectCidade(ele)
    {
        ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=populaSelectCidade&sigla='+$(ele).val(),'select_cidade');
    }

    $(document).ready(function (e) {
       var header_height = $("header").height();
       $(window).scroll(function(){
           var scrolltop = $(window).scrollTop();
           if(scrolltop > 0)
               $('#out-img-curso-aberto').css('top',(($(window).scrollTop()/2) *-1) + header_height);
           else
               $('#out-img-curso-aberto').css('top',header_height+'px');
       });
    });

    var scroll_aux      = 0;
    var header_top      = $("#header").offset().top;
    var header_height   = $("#header").outerHeight();
    var window_height   = $(window).height();
    var height_document = $(document).height();

    function fixedMenu()
    {
        var scroll = $(window).scrollTop();

        if( scroll >= (header_top+header_height) )
        {
            if(scroll < scroll_aux )
            {
                $('#mov_header').css({'position':'fixed',transition: '0.3s','top':'0px'});
            }
            else
            {
                if( (scroll+window_height+20) > height_document )
                {
                    $('#mov_header').css({'position':'fixed',transition: '0.3s','top':'0px'});
                }
                else
                {
                    var v_tra  = '0.3s';
                    if( scroll <= ( header_top + header_height + 100) )
                        v_tra  = '0s';

                    $('#mov_header').css({'position':'fixed',transition: v_tra,'top':'-'+header_height+'px'});
                }
            }
        }
        else if(scroll <= header_top)
        {
            $('#mov_header').css({'position':'absolute',transition: '0.3s','top':'0px'});

        }
        scroll_aux = scroll;
    }

    function boxHoverSite(act,cic,e)
    {
        var top     = $(e).offset().top+$(e).outerHeight();
        var e_hover = '';

        if($(e).data('box-hover'))
        {
            e_hover = '#'+$(e).data('box-hover')+'_hover';

            switch(act)
            {
                case 2:
                    $('.contr_hov_itens').fadeOut(0);
                    $(e_hover).fadeIn(400);
                    $(e_hover).addClass('contr_hov_itens');
                    boxHoverSite(0,0,e);
                break;
                case 0:
                    if(cic < 5)
                    {
                        var timeBoxHoverSite = setTimeout(function()
                        {
                            cic++;
                            boxHoverSite(0,cic,e);
                        }, 500);
                    }
                    else
                    {
                        clearTimeout(timeBoxHoverSite);
                        if(!$(e_hover).is(":hover") && !$(e).is(":hover") && !$(e_hover+' *').is(":focus"))
                        {
                            $(e_hover).fadeOut(400);
                        }
                        else
                            boxHoverSite(0,0,e);
                    }

                break;
            }
        }
        else
        {
            $('.contr_hov_itens').fadeOut(0);
        }
    }

    function blackoverlay(act)
    {
        if(act)
        {
            $('#blackoverlay').fadeIn(400);
            $('html').addClass('no_scroll');
        }
        else
        {
            $('#blackoverlay').fadeOut(400);
            $('html').removeClass('no_scroll');
        }
    }

    function actAovivo()
    {
        window.location = "";
    }

    function actBodyPago()
    {
        window.open("");
    }

    function actMenuMobile(act)
    {
        if(act)
        {
            $('#blackoverlay').addClass('blackoverlay_mobile').trigger('classChange');

            if(!$('#menumobile-act').data('post-left'))
            {
                $('#menumobile-act').data('post-left',$('#menumobile-act').css('left'));
            }
            $('#menumobile-act').css('left','0');
            $('#menumobile').css('display','none');
            $('#fechar_menumobile').css('display','block');
        }
        else
        {
            $('#menumobile-act').css('left',$('#menumobile-act').data('post-left'));
            $('#blackoverlay').removeClass('blackoverlay_mobile').trigger('classChange');
            $('#menumobile').css('display','block');
            $('#fechar_menumobile').css('display','none');
        }
        blackoverlay(act);
    }

    function actAbreComments(act)
    {
        if(act)
        {
            var post_id        = $('#bt_new_cmt').data('post_id');
            var url            = $('#bt_new_cmt').data('url');
            var tipo           = $('#bt_new_cmt').data('tipo');
            var comentariosnrs = $('#bt_new_cmt').data('comentariosnrs');
            
            if($("#box_new_cmt_retorno").html() == '')
            {
                ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=getCommentsBox&post_id='+post_id+'&url='+url+'&tipo='+tipo+'&comentariosnrs='+comentariosnrs,'box_new_cmt_retorno');
                ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id='+post_id,'flgcomment');
            }
            
            $('#box_new_cmt_open').css('right','0');
            $('#bt_new_cmt_orelha').css('display','none');
            $('#bt_new_cmt_orelha_close').css('display','block');
            $('#bt_new_cmt_orelha_close').css('left','-30px');
        }
        else
        {
            var window_width = $(window).width();
            var right        = 'calc(-37% - 15px)';
            
            if(window_width < 1400)
            {
                right = '-330px';
            }
            
            $('#box_new_cmt_open').css('right',right);
            $('#bt_new_cmt_orelha_close').css('display','none');
            $('#bt_new_cmt_orelha').css('display','block');
            $('#bt_new_cmt_orelha').css('left','-43px');
        }
    }
    
    function actPopup(act,tipo)
    {
        if(act == 'fechar')
        {
            ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome='+tipo+'&valor=1','box_popup');
            $('#box_popup').css('display','none');
            $('#box_popup_big').css('display','none');
            $('#box_popup_mobile').css('display','none');
            blackoverlay();
        }
    }

    function actSmartMobile(act)
    {
        if(act)
        {
            $('#blackoverlay').addClass('blackoverlay_smart').trigger('classChange');

            if(!$('#smart_filtro_m-act').data('post-left'))
            {
                $('#smart_filtro_m-act').data('post-left',$('#smart_filtro_m-act').css('left'));
            }
            $('#smart_filtro_m-act').css('left','0');
            $('#smart_filtro_m_abre').css('display','none');
            $('#smart_filtro_m_fecha').css('display','block');
            $('#smart_filtro_ud_out').css('display','block');
        }
        else
        {
            $('#smart_filtro_m-act').css('left',$('#smart_filtro_m-act').data('post-left'));
            $('#blackoverlay').removeClass('blackoverlay_smart').trigger('classChange');
            $('#smart_filtro_m_abre').css('display','block');
            $('#smart_filtro_m_fecha').css('display','none');
            $('#smart_filtro_ud_out').css('display','none');
        }
        blackoverlay(act);
    }

        function actContatoEmpresa(act,tipo)
    {
        if(act && tipo != 0)
        {

            if(tipo == 1)
                $('#empresa_contato_titulo').html('Entre em contato');
            else
                $('#empresa_contato_titulo').html('Solicite um orçamento');

            $('#hidden_tipo').val(tipo);

            $('#blackoverlay').addClass('blackoverlay_cont_empresa').trigger('classChange');
            $('#empresa_contato').fadeIn(400);
            $('#empresa_contato').height($('#empresa_contato'+' > *').outerHeight());
        }
        else
        {
            $('#empresa_contato').fadeOut(400);
            $('#blackoverlay').removeClass('blackoverlay_cont_empresa').trigger('classChange');
            $('#empresa_contato_titulo').html('');
        }
        blackoverlay(act);
    }

    function actBuscaDesktop(act)
    {
        $('#busca_clique').toggle();
        $('#busca_input').focus();
        $('#blackoverlay').addClass('blackoverlay_busca_desktop').trigger('classChange');
        blackoverlay(act);
    }

    function actBuscaObjeto()
    {
        $('#box_marca_closed').hide();
        $('#box_marca_busca').show();
        $('.box_marca').css('background-color','#f3661a');
        $('#busca_marca_input').focus();
    }

    function actCorrigirTexto(act,e)
    {
        if($('#modal_corrigir_txt').length == 0)
        {
            $(e).data('corrigir_titulo');
            $("html").append('<div class="modal modal-s block corrigir" id="modal_corrigir_txt" ><span class="load-ico" ></span></div>');
            ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=corrigirTexto&monta=1&corrigir_titulo='+$(e).data('corrigir_titulo')+'¶_email='+$(e).data('para_email'),'modal_corrigir_txt');
        }


        if(act)
        {
            $('#blackoverlay').addClass('blackoverlay_corrigir').trigger('classChange');
            $('#modal_corrigir_txt').fadeIn(400);
        }
        else
        {
            $('#modal_corrigir_txt').fadeOut(400);
            $('#blackoverlay').removeClass('blackoverlay_corrigir').trigger('classChange');
        }
        blackoverlay(act);
    }

    function newsletterCad(ele,s)
    {
        if(s == '1')
        {
            var cad_idx = $(ele).data('idx');
            $('#'+cad_idx+'_form2 .out_captcha').html('<div class="wifl p-rel newsbrandcap" id="brand_cap_widget_wrapper" ><span class="load-ico" ></span></div><script type="text/javascript" src="https://api.pontamedia.net/challenge.php?k=8f8436b8ae2f804f336e902439085b08a914db96"></script'+'>');
            $('#'+cad_idx+'_ulcad').css('left',$('#'+cad_idx+'_ulcad').outerWidth()*-1);
//            $('#'+$(ele).data('id_ulout')).css('height',$('#'+cad_idx+'_ulcad .stp2').outerHeight());
        }
        else
        {
            var cad_idx = $(ele).data('idx');
            ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php',$('#'+cad_idx+'_form1').serialize()+'&'+$('#'+cad_idx+'_form2').serialize(),$(ele).data('id_ulout'));
        }
    }

    function fixedMenuDiagramado()
    {
        var scrolltop = $(window).scrollTop();

        if(scrolltop >= 350)
            $('.conteudo .out_menu_diagramado').css('top','0');
        else
            $('.conteudo .out_menu_diagramado').css('top','850px');
    };

    $(document).ready(function()
    {

        /*$(function ()
        {
            $(window).scroll(atcFixedOnScroll);
        });*/

        $('.disabled').click(function(e)
        {
           e.preventDefault();
        })

        $('.box_hover').mouseenter(function()
        {
            boxHoverSite(2,0,this);
        });

        $(window).scroll(fixedMenu);
        $(window).scroll(fixedMenuDiagramado);
        fixedMenu();
        fixedMenuDiagramado();
        $(".amenu_diagramado").click(function(){scrollPageToID($(this).attr('href').substring(1));});
        $(".bt_ver_mais").click(function(){ actBtVerMais(this); });
        $(".ver_mais_preco_obj").click(function(){ scrollPageToID('precos'); });
        $('#bt_header_busca').click(function(){ $('#busca_input').focus();});
        $('#smart_filtro_ud_dwn').click(function(){$(".smart_filtro").animate({scrollTop: '+=200px'}, 300);});
        $('#smart_filtro_ud_up').click(function(){$(".smart_filtro").animate({scrollTop: '-=200px'}, 300);});
        $('#mobile_busca').click(function(){ $('#mobile_bf').css('display','block');});
        $('#aovivo').click(function(){ actAovivo(); });
        $('#smart_filtro_m_abre').click(function(){ actSmartMobile(true); });
        $('#bt_new_cmt').click(function(){ actAbreComments(true); });
        $('#bt_new_cmt_orelha').click(function(){ actAbreComments(true); });
        $('#bt_new_cmt_orelha_close').click(function(){ actAbreComments(false); });
        $('.bt1-comment').click(function(){ actAbreComments(true); });
        $('#busca_clique_open').click(function(){ actBuscaDesktop(true); });
        $('#box_marca_closed').click(function(){ actBuscaObjeto(); });
        $('#smart_filtro_m_fecha').click(function(){ actSmartMobile(false); });
        $('#menumobile').click(function(){ actMenuMobile(true); });
        $('#fechar_menumobile').click(function(){ actMenuMobile(false); });
        $('.fechar_newsletter_big').click(function(){ actPopup('fechar','NEWSBIG'); });
        $('.fechar_youtube_big').click(function(){ actPopup('fechar','YOUTUBEBIG'); });
        $('.fechar_youtube_mobile').click(function(){ actPopup('fechar','YOUTUBEMOBILE'); });
        $('.fechar_rss_big').click(function(){ actPopup('fechar','RSSBIG'); });
        $('.fechar_twitter_big').click(function(){ actPopup('fechar','TWITTERBIG'); });
        $('.fechar_instagram_big').click(function(){ actPopup('fechar','INSTAGRAMBIG'); });
        $('#fechar_newsletter').click(function(){ actPopup('fechar','ONNEWS'); });
        $('#fechar_youtube').click(function(){ actPopup('fechar','ONYOUTUBE'); });
        $('#popup_youtube').click(function(){ actPopup('fechar','ONYOUTUBE'); });
        $("#form_envia").click(function(){ submitFormulario(); });
        $("#mostra_fone").click(function(){ $('#empresa_fone').html(BV($('#empresa_fone').data('info'))); $('#mostra_fone').hide(); });
        $(".empresa_contato").click(function(){ actContatoEmpresa(true,$(this).data('tipo'));});
        $('#empresa_contato_fechar').click(function(){ actContatoEmpresa(false,0) });
        $('.act_corrigir_texto').click(function(){ actCorrigirTexto(true,this) });
        $('#btcarregarcomments_disqus').click(function(){ carregaComentariosDisqus() });
        $('#btcarregarcomments_facebook').click(function(){ carregaComentariosFacebook() });
        $(".form_newsletter_cad").submit(function(event){  event.preventDefault(); newsletterCad(this,"1"); });
        $(".form_newsletter_cad2").submit(function(event){ event.preventDefault(); newsletterCad(this,"2"); });
        $(".form_newsletter_cad").submit(function(event){  event.preventDefault(); newsletterCad(this,'1'); });
        $(".form_newsletter_cad2").submit(function(event){ event.preventDefault(); newsletterCad(this,'2'); });

        $('#blackoverlay').on('classChange',function()
        {
            $('.blackoverlay_mobile').click(function(){ actMenuMobile(false) });
            $('.blackoverlay_smart').click(function(){ actSmartMobile(false) });
            $('.blackoverlay_cont_empresa').click(function(){ actContatoEmpresa(false,0) });
            $('.blackoverlay_corrigir').click(function(){ actCorrigirTexto(false,'') });
            $('.blackoverlay_busca_desktop').click(function(){ actBuscaDesktop(false)});
        });


        $('.accordion_act1 .i-tit').click(function(e)
        {
            if($(this).prop("tagName") != 'A')
            {
                $(this).addClass('click');
                $('.li-wrapper:not(\'.click\')').animate({height:0}, { duration: 400, queue: false });
                $('.i-tit:not(\'.click\')').removeClass('ativo');

                if(!$(this).hasClass('ativo'))
                {
                    $(this).addClass('ativo');
                    $(this).find('+ .li-wrapper').animate({height:$(this).find('+ .li-wrapper > .accordion_act1').outerHeight()}, { duration: 400, queue: false });
                }
                else
                {
                    $(this).removeClass('ativo');
                    $(this).find('+ .li-wrapper').animate({height:0},400);
                }
                $(this).removeClass('click');
            }
        });

        $('.accordion_act2 .tit_1').click(function(e)
        {
            $(this).addClass('click');
            $('.li-wp1:not(\'.click\')').animate({height:0}, { duration: 400, queue: false });

            if(!$(this).hasClass('ativo'))
            {
                var wrapper1_id         = 'wrapper_'+$(this).data('wrap0');
                var wrapper1_height     = $('#'+wrapper1_id+' > .accordion_act2 > li').length* $('#'+wrapper1_id+' > .accordion_act2 > li').outerHeight();

                $('#'+wrapper1_id).animate({height:wrapper1_height}, { duration: 400, queue: false });
                $('.tit_1').removeClass('ativo');
                $(this).addClass('ativo');
            }
            else
            {
                $('.tit_1').removeClass('ativo');
            }
            $(this).removeClass('click');
        });

        $('.accordion_act2 .tit_2').click(function(e)
        {
            $(this).addClass('click');
            $('.li-wp2:not(\'.click\')').animate({height:0}, { duration: 400, queue: false });

            var wrapper1_id = 'wrapper_'+$(this).data('wrap0');
            var wrapper2_id = 'wrapper_'+$(this).data('wrap0')+'_'+$(this).data('wrap1');

            if(!$(this).hasClass('ativo'))
            {
                var wrapper1_height     = $('#'+wrapper1_id+' > .accordion_act2 > li').length* $('#'+wrapper1_id+' > .accordion_act2 > li').outerHeight();
                var wrapper2_height     = $('#'+wrapper2_id+' > .accordion_act2 > li').length* $('#'+wrapper2_id+' > .accordion_act2 > li').outerHeight();


                $('#'+wrapper1_id).animate({height:wrapper1_height+wrapper2_height}, { duration: 400, queue: false });
                $('#'+wrapper2_id).animate({height:wrapper2_height}, { duration: 400, queue: false });

                $('.tit_2').removeClass('ativo');
                $(this).addClass('ativo');
            }
            else
            {
                var wrapper1_height = $('#'+wrapper1_id+' > .accordion_act2 > li').length*$('#'+wrapper1_id+' > .accordion_act2 > li > .tit_2').outerHeight();

                $('#'+wrapper1_id).animate({height:wrapper1_height}, { duration: 400, queue: false });
                $('.tit_2').removeClass('ativo');
            }
            $(this).removeClass('click');
        });
    });

    var lst_carregamento        = 1;
    var txtstatus               = 'ok';
    var html_ico_load_auto_load = '<span id="icoload_autoload" class="wifl p-rel" ><span class="load-ico" ></span></span>';
    function carregaConteudo()
    {
        if($('#auto_load_wrapper').length > 0)
        {
            var scrollPosition      = window.pageYOffset;
            var windowSize          = window.innerHeight;
            var footerHeightTop     = $('#footer').offset().top;

            var stop_load           = document.getElementById('auto_load_wrapper').getAttribute('data-stop-load');

            if((scrollPosition + windowSize + 800) > footerHeightTop && stop_load == '0')
            {
                if(txtstatus == 'ok')
                {
                    $("#auto_load_wrapper").append(html_ico_load_auto_load);
                    txtstatus = 'timeout';
                    $.ajax({
                        type: 'POST',
                        url: 'https://www.oficinadanet.com.br/ajax_oficina.php',
                        data: 'act=autoLoadConteudo&lst_carregamento='+lst_carregamento+'&'+serializeDataAttr($('#auto_load_wrapper')),
                        success: function(html)
                        {
                            $("#auto_load_wrapper").append(html);
                            $("#icoload_autoload").remove();
                            txtstatus = 'ok';
                        }
                    });
                    lst_carregamento++;
                }
            }
        }
    }

    $(function () {
        $(window).scroll(carregaConteudo);
        carregaConteudo();
    });

    $(window).scroll(function() {
        if ($(this).scrollTop() >= 150) {
            $('#top_page').fadeIn(200);
        } else {
            $('#top_page').fadeOut(200);
        }
    });
    $('#top_page').click(function() {
        $('body,html').animate({
            scrollTop : 0
        }, 500);
    });


    if ($(".carousel_destaque")[0])
    {
        $('#out_lib').append('<link href="https://painel.m3midia.com.br/lib/slick/slick.css" rel="stylesheet">');
        $.getScript("https://painel.m3midia.com.br/lib/slick/slick.js", function(){
            $('.carousel_destaque').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                pauseOnHover: true,
                autoplaySpeed: 10000
            });
            setTimeout(function(){
                $('.carousel_destaque').removeClass('carregando');;
            }, 1500);
        });
    }

    if ($(".conteudo_galeria")[0])
    {
        $('#out_lib').append('<link href="https://painel.m3midia.com.br/lib/lightGallerySlider/lightGallerySlider.css" rel="stylesheet">');
        $.getScript("https://painel.m3midia.com.br/lib/lightGallerySlider/lightGallerySlider.js", function(){
            $('.conteudo_galeria').lightSlider({
           item: 3,
           loop:false,
           slideMove:3,
           easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
           speed:600,
           responsive : [
               {
                   breakpoint:800,
                   settings: {
                       item:3,
                       slideMove:1,
                       slideMargin:6,
                     }
               },
               {
                   breakpoint:480,
                   settings: {
                       item:2,
                       slideMove:1
                     }
               }
           ]
            }).lightGallery({

            });
            $('.out_conteudo_galeria').css('display','block');
        });
    }

    $(function (){

        function countdown()
        {

            if ($(".promo_relogio")[0])
            {
                $(".promo_relogio").each(function( index )
                {
                    clearTimeout(timer_promo);
                    var now         = new Date();
                    var eventDate   = new Date($(this).data('data-fim'));
                    var currentTime = now.getTime();
                    var evenTime    = eventDate.getTime();

                    var remTime = evenTime - currentTime;

                    var sec = Math.floor(remTime / 1000);
                    var min = Math.floor(sec / 60);
                    var hur = Math.floor(min / 60);
                    var day = Math.floor(hur / 24);

                    hur %= 24;
                    min %= 60;
                    sec %= 60;

                    hur = (hur < 10) ? "0" + hur : hur;
                    min = (min < 10) ? "0" + min : min;
                    sec = (sec < 10) ? "0" + sec : sec;

                    hur = parseInt(parseInt(day*24)+parseInt(hur));

                    if(hur > 0 || min > 0 || sec > 0)
                    {
                        $(this).find('.promo_hora').html(hur);
                        $(this).find('.promo_minuto').html(min);
                        $(this).find('.promo_segundo').html(sec);
                    }
                    else
                    {
                        $(this).find('.promo_hora').html('00');
                        $(this).find('.promo_minuto').html('00');
                        $(this).find('.promo_segundo').html('00');
                        $('#sale-relogio'+$(this).data('key')).addClass('tpl2');
                        $('#promo_txt'+$(this).data('key')).html('A oferta expirou');
                    }
                });
                var timer_promo = setTimeout(countdown, 1000);
            }
        }
        countdown();
    });

    </script>
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
<script>
var OneSignal = OneSignal || [];
OneSignal.push( function() {
    OneSignal.setDefaultTitle("Oficina da Net");
    OneSignal.setDefaultNotificationUrl("https://www.oficinadanet.com.br");
    var oneSignal_options = {appId: "c28261c1-6765-4517-bc5f-38bbeb9f2ec3"};
    //oneSignal_options['persistNotification'] = false;
    oneSignal_options['autoRegister'] = true;
    oneSignal_options['welcomeNotification'] = { };
    oneSignal_options['welcomeNotification']['title'] = "Oi. Obrigado pela inscrição =)";
    oneSignal_options['welcomeNotification']['message'] = "As melhores novidades avisaremos por aqui ;) - Siga @oficinadanet";
    oneSignal_options['safari_web_id'] = "web.onesignal.auto.2068edc0-2ec7-4d8d-bc37-83913e3acbff";
    OneSignal.init(oneSignal_options);
});

</script>
        <div id="box_popup_big" class="box_news_big newsletter">
            <div class="act fechar_box_popup box_hover p-rel fechar_newsletter_big" ></div>
            <div class="bb_left">
                <div class="logo5"></div>
            </div>
            <div class="bb_right"  id="news_bb_right" >
                <div class="wifl p-rel" id="out_new_cad" >
                    <script type="text/javascript" >
    var brandcaptchaOptions = {
        lang: 'pt'
    };
</script>
<ul class="wifl lsn"  id="news_bb_right_plan" >
    <li>
        <form id="newscad_form1" method="POST" >
            <span class="wifl ntit" >ASSINE NOSSA NEWSLETTER</span>
            <p class="wifl">As melhores publicações no<br>seu e-mail</p>
            <input type="hidden" value="NEWSBIG" name="refer"/>
            <input type="hidden" value="cadNewsletter" name="act"/>
            <input type="hidden" value="1" name="newsletter"/>
            <input class="form_campo2 round3p" required="true" type="text" name="nome" id="nome" placeholder="Seu nome" value="" >
            <input class="form_campo2 round3p" required="true" type="email" name="email" id="newsemail" placeholder="Seu e-mail" value="" >
            <input class="wifl bt1 bg4" id="newscad_form1_submit" type="submit" value="CONTINUAR">
            <!--<span class="full bt1 bg4" id="newscad_form1_submit" >QUERO ME CADASTRAR</span>-->
        </form>
    </li>
    <li>
        <p>Preencha para confirmar</p>
        <form id="newscad_form2" method="POST" >
            <div class="wifl" id="out_captcha" ></div>
            <input class="wifl bt1 bg4" id="newscad_form2_submit" type="submit" value="CONFIRMAR">
        </form>
    </li>
</ul>
<script type="text/javascript">
    $("#newscad_form1").submit(function( event ) {
        event.preventDefault();
        $('#out_captcha').html('<div class="wifl p-rel newsbrandcap" id="brand_cap_widget_wrapper" ><span class="load-ico" ></span></div><script type="text/javascript" src="https://api.pontamedia.net/challenge.php?k=8f8436b8ae2f804f336e902439085b08a914db96"></script'+'>');
        $('#news_bb_right_plan').css('left','-306px');
    });

    $("#newscad_form2").submit(function( event ) {
        event.preventDefault();
        ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php',$('#newscad_form1').serialize()+'&'+$('#newscad_form2').serialize(),'out_new_cad');
    });
</script>                </div>
            </div>
        </div>
        <script type="text/javascript">
            function abreBoxBigOficina()
            {
                $('#box_popup_big').css('display','block');
                blackoverlay(1);
            }
        </script>
        <script type="text/javascript">setTimeout('abreBoxBigOficina();','30000');</script>
        <script type="text/javascript">
    function actSininho()
    {
        _gaq.push(['_trackEvent', 'sininho', 'sininho', 'sininho']);
        ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome=ONSININHO&valor=1&tempo=36000','box_sininho');
        setTimeout("document.location = 'https://www.oficinadanet.com.br/novidades'",1000);
    }

    function actAvisoTopo(act)
    {
        switch(act)
        {
            case 'instagram':
                ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome=ONINSTAGRAM&valor=1&tempo=36000','box_instagram');
            break;
            case 'youtube':
                ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome=ONYOUTUBE&valor=1&tempo=36000','box_youtube');
            break;
            case 'user_topo':
                ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome=ONUSERTOPO&valor=1&tempo=36000','box_user_topo');
            break;
        }
    }

    $(document).ready(function()
    {
        $('#sininho').click(function(){ actSininho(); });
        $('#instagram_topo').click(function(){ actAvisoTopo('instagram');});
        $('#youtube_topo').click(function(){ actAvisoTopo('youtube'); });
        $('#user_topo').click(function(){ actAvisoTopo('user_topo'); });
    });

</script>

    <script type="text/javascript">
       setTimeout("$('#box_instagram').fadeIn(1000)",1000);
       setTimeout("$('#box_instagram').fadeOut(1000)",5000);
    </script>
    <link rel="stylesheet" type="text/css" href="https://www.oficinadanet.com.br/_template/css/geral.css?v=760">    </body>
</html>