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 2 comentários

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-2225', 'para_url_#']);" href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23"    class="print" rel="nofollow noreferrer noopener">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><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><p>Mais sobre: <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></p>
                
            </div>
            <script>try { _402_Show(); } catch(e) {}</script>
        </div>  
            <div class="bar2" >

                <div class="bar2"><a onclick="_gaq.push(['_trackEvent', 'barrayoutube', 'barrayoutube', 'barrayoutube']);" href="https://www.youtube.com/user/OficinaDaNetTV?sub_confirmation=1" target="_blank" rel="nofollow" class="barra_youtube"><script src="https://apis.google.com/js/platform.js"></script><div class="g-ytsubscribe" data-channel="oficinadanettv" data-layout="default" data-count="default"></div></a><div class="wifl m-b-40"><span class="titulo1" ><span>Conteúdos recentes</span></span><ul class="lst122  wifl  lsn "  ><li  >
                        <a href="https://www.oficinadanet.com.br/smartphones/25868-quais-as-diferencas-entre-o-asus-zenfone-5-e-o-zenfone-6"  onclick="_gaq.push(['_trackEvent', 'barra_novos', 'pfr2225', 'pto25868']);"   >
                                <span class="img box-img" ><img src="https://www.oficinadanet.com.br/imagens/post/25868/vpavic_180225_2340_0171_14080.jpg" title="Quais as diferenças entre o Asus Zenfone 5 e o Zenfone 6?" alt="Quais as diferenças entre o Asus Zenfone 5 e o Zenfone 6?" />
                                </span>
                            <span class="infoprimeiro" >
                                <span class="tit" >26/05/2019  21:14h</span>
                                <span class="tit tit2" >Quais as diferenças entre o Asus Zenfone 5 e o Zenfone 6?</span>
                            </span>
                        </a>
                    </li><li  >
                        <a href="https://www.oficinadanet.com.br/smartphones/25893-best-buy-cancela-todas-as-pre-encomendas-do-samsung-galaxy-fold"  onclick="_gaq.push(['_trackEvent', 'barra_novos', 'pfr2225', 'pto25893']);"   >
                            <span class="info" >
                                <span class="tit" >26/05/2019  16:39h</span>
                                <span class="tit tit2" >BEST BUY cancela todas as pré encomendas do Samsung Galaxy Fold</span>
                            </span>
                        </a>
                    </li><li  >
                        <a href="https://www.oficinadanet.com.br/tecnologia/25892-huawei-e-microsoft-matebook-sem-windows-e-huawei-fora-do-catalogo-de-servidores-azure-stack"  onclick="_gaq.push(['_trackEvent', 'barra_novos', 'pfr2225', 'pto25892']);"   >
                            <span class="info" >
                                <span class="tit" >26/05/2019  15:46h</span>
                                <span class="tit tit2" >Huawei e Microsoft: Matebook sem Windows e Huawei fora do catálogo de servidores Azure Stack</span>
                            </span>
                        </a>
                    </li><li  >
                        <a href="https://www.oficinadanet.com.br/smartphones/25891-huawei-negocia-com-a-loja-de-aplicativos-aptoide-para-substituir-o-google-play-store"  onclick="_gaq.push(['_trackEvent', 'barra_novos', 'pfr2225', 'pto25891']);"   >
                            <span class="info" >
                                <span class="tit" >26/05/2019  15:30h</span>
                                <span class="tit tit2" >Huawei negocia com a loja de aplicativos Aptoide para substituir o Google Play Store</span>
                            </span>
                        </a>
                    </li><li  >
                        <a href="https://www.oficinadanet.com.br/post/11865-aprenda-a-baixar-videos-do-youtube-sem-usar-programas"  onclick="_gaq.push(['_trackEvent', 'barra_novos', 'pfr2225', 'pto11865']);"   >
                            <span class="info" >
                                <span class="tit" >26/05/2019  10:00h</span>
                                <span class="tit tit2" >Como baixar vídeos do Youtube sem usar programas?</span>
                            </span>
                        </a>
                    </li><li  >
                        <a href="https://www.oficinadanet.com.br/tecnologia/25890-como-agendar-postagens-no-instagram"  onclick="_gaq.push(['_trackEvent', 'barra_novos', 'pfr2225', 'pto25890']);"   >
                            <span class="info" >
                                <span class="tit" >26/05/2019  09:20h</span>
                                <span class="tit tit2" >Como agendar postagens no Instagram</span>
                            </span>
                        </a>
                    </li><li  >
                        <a href="https://www.oficinadanet.com.br/netflix2019/25878-novidades-e-lancamentos-netflix-da-semana-2705-a-0206"  onclick="_gaq.push(['_trackEvent', 'barra_novos', 'pfr2225', 'pto25878']);"   >
                            <span class="info" >
                                <span class="tit" >26/05/2019  08:08h</span>
                                <span class="tit tit2" >Novidades e lançamentos Netflix da semana (27/05 a 02/06)</span>
                            </span>
                        </a>
                    </li><li  >
                        <a href="https://www.oficinadanet.com.br/tecnologia/25889-quais-as-diferencas-entre-fontes-otf-e-ttf"  onclick="_gaq.push(['_trackEvent', 'barra_novos', 'pfr2225', 'pto25889']);"   >
                            <span class="info" >
                                <span class="tit" >25/05/2019  23:12h</span>
                                <span class="tit tit2" >Quais as diferenças entre fontes OTF e TTF?</span>
                            </span>
                        </a>
                    </li></ul></div>      
                </div>
                <div class="bar2 p-rel" id="out_post_barra" data-distance="30" >
                    <div class="bar2" id="post_barra" >
                            <div class='wifl m-b-40'>
                                <!-- /6524261/ON_300x600_LATERAL -->
                                <div id='div-gpt-ad-1555093777375-0'>
                                <script>
                                googletag.cmd.push(function() { googletag.display('div-gpt-ad-1555093777375-0'); });
                                </script>
                                </div>
                            </div>
                    </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="margin:auto; 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 "  ><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/12811-formulario-de-contato-em-php"  onclick="_gaq.push(['_trackEvent', 'oq_ler_conteudo_relacionado', 'pfr2225', 'pto12811']);"  >
                                <div class="img box-img2">
                                    <span class="label_tpl1 fix-bl bg1"></span>
                                    <img src="https://www.oficinadanet.com.br/imagens/post/12811/guiaphp_200113.jpg" title="Formulário de contato em php" alt="Formulário de contato em php" >
                                    <span class="gradient"></span>
                                </div>
                                <span class="wifl tit4">Formulário de contato em php</span>
                                <div class="wifl nfo">
                                    <span class="ass-autor cor2">por Nicolas Muller</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"></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>
                                <span class="wifl tit4">jQuery Rating - Sistema de votação interativa</span>
                                <div class="wifl nfo">
                                    <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"></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>
                                <span class="wifl tit4">Sistema de votação thumbs up com PHP/MySQL/jQuery</span>
                                <div class="wifl nfo">
                                    <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"></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>
                                <span class="wifl tit4">Galeria com miniatura deslizante usando CSS3</span>
                                <div class="wifl nfo">
                                    <span class="ass-autor cor2">por Suelen Braga</span></div>
                            </a>
                        </li></ul>
            </div>
<style>
    #share_container{position:relative;height:auto;margin:7px 0;display:inline-block;}
    #share_container .share_menu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-wrap:wrap;margin:0;padding:0px;background-color:transparent;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
    #share_container .share_menu.vertical.right{right:0;top:calc(50% - 120px);}
    #share_container .share_menu.vertical.left{left:0;top:calc(50% - 120px);}
    #share_container .share_menu.vertical{-webkit-flex-flow:column;-ms-flex-flow:column;flex-flow:column;position:fixed;padding:10px;z-index:2147483694;background-color:#fff;border-radius:2px;}
    #share_container .share_menu.vertical li{margin:5px auto;background-color:#fff;border: 1px solid #cecece;border-radius: 5px; cursor: pointer}
    #share_container .share_menu.vertical li:hover{border: 1px solid #f3661a;}
    #share_container .share_menu li{list-style:none;position:relative;text-align:center;margin:5px 2px 0px;padding:0px;font-size:0px;width:30px;height:30px;}
        #share_container .facebookShare {width: 30px;height: 30px;background:  url(https://www.oficinadanet.com.br/_template/imagem/ico-bs-fb.png);display: block;}
    #share_container .twitterShare {width: 30px;height: 30px;background:  url(https://www.oficinadanet.com.br/_template/imagem/ico-bs-tw.png);display: block;}
    #share_container .linkedinShare {width: 30px;height: 30px;background:  url(https://www.oficinadanet.com.br/_template/imagem/ico-bs-in.png);display: block;}
    #share_container .emailShare {width: 30px;height: 30px;background:  url(https://www.oficinadanet.com.br/_template/imagem/ico-bs-mail.png);display: block;}
    #share_container .whatsappShare {width: 30px;height: 30px;background:  url(https://www.oficinadanet.com.br/_template/imagem/ico-bs-wa.png);display: block;}
    #share_container .telegramShare {width: 30px;height: 30px;background:  url(https://www.oficinadanet.com.br/_template/imagem/ico-bs-tg.png);display: block;}
    
@media screen and (max-width:1100px) {
    #share_container {display: none}
}
</style>
<div id="share_container" class=" left">
    <ul class="share_menu left vertical">
        <li class="share_btn visible" title="Compartilhe no Facebook"  onclick="  window.open('https://www.facebook.com/sharer/sharer.php?app_id=209309632417494&u=https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2Fjavascript%2Fimprimindo_areas_isoladas_de_uma_pagina_com_jquery%3Futm_source%3Dfacebook%26utm_medium%3Dsharebutton%26utm_campaign%3DRedesSociais','','width=600,height=400');  _gaq.push(['_trackEvent', 'btshare', 'facebook', 'https://www.oficinadanet.com.br/artigo/javascript/imprimindo_areas_isoladas_de_uma_pagina_com_jquery?utm_source=facebook&utm_medium=sharebutton&utm_campaign=RedesSociais']);  ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id=2225','flgcomment');  " ><span class="facebookShare">Facebook</span></li>
        <li class="share_btn visible" title="Compartilhe no Twitter"  onclick="  window.open('https://twitter.com/intent/tweet?text=Imprimindo+%C3%A1reas+isoladas+de+uma+p%C3%A1gina+com+jQuery+%7C+Por+%40jonathanlamimkt+%7C+&url=https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2Fjavascript%2Fimprimindo_areas_isoladas_de_uma_pagina_com_jquery%3Futm_source%3Dtwitter%26utm_medium%3Dsharebutton%26utm_campaign%3DRedesSociais&via=oficinadanet','','width=600,height=400');  _gaq.push(['_trackEvent', 'btshare', 'twitter', 'https://www.oficinadanet.com.br/artigo/javascript/imprimindo_areas_isoladas_de_uma_pagina_com_jquery?utm_source=twitter&utm_medium=sharebutton&utm_campaign=RedesSociais']);  ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&twitter=1&id=2225','flgcomment');  " ><span class="twitterShare">Twitter</span></li>
        <li class="share_btn visible" title="Compartilhe no Linkedin"  onclick="  window.open('https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2Fjavascript%2Fimprimindo_areas_isoladas_de_uma_pagina_com_jquery%3Futm_source%3Dlinkedin%26utm_medium%3Dsharebutton%26utm_campaign%3DRedesSociais&summary=Nesse+tutorial+vamos+ver+como+fazer+a+impress%C3%A3o+de+%C3%A1reas+isoladas+de+uma+p%C3%A1gina+web.+Com+esse+plugin+voc%C3%AA+n%C3%A3o+precisar%C3%A1+enviar+o+usu%C3%A1rio+para+outra+p%C3%A1gina%2C+bastar%C3%A1+informar+qual+parte+da+p%C3%A1gina+deve+ser+impressa...&title=Imprimindo+%C3%A1reas+isoladas+de+uma+p%C3%A1gina+com+jQuery&source=oficinadanet','','width=600,height=400');  _gaq.push(['_trackEvent', 'btshare', 'linkedin', 'https://www.oficinadanet.com.br/artigo/javascript/imprimindo_areas_isoladas_de_uma_pagina_com_jquery?utm_source=linkedin&utm_medium=sharebutton&utm_campaign=RedesSociais']);  ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id=2225','flgcomment');  " ><span class="linkedinShare">Linkedin</span></li>
        <li class="share_btn visible" title="Compartilhe por Email"  onclick="  document.location='mailto:?subject=Imprimindo áreas isoladas de uma página com jQuery | Por @jonathanlamimkt | &body=Artigo: https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2Fjavascript%2Fimprimindo_areas_isoladas_de_uma_pagina_com_jquery%3Futm_source%3Dshr_mail%26utm_medium%3Dsharebutton%26utm_campaign%3DRedesSociais';  _gaq.push(['_trackEvent', 'btshare', 'email', 'https://www.oficinadanet.com.br/artigo/javascript/imprimindo_areas_isoladas_de_uma_pagina_com_jquery?utm_source=shr_mail&utm_medium=sharebutton&utm_campaign=RedesSociais']);  ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id=2225','flgcomment');  " ><span class="emailShare">Email</span></li>
        <li class="share_btn visible" title="Compartilhe pelo WhatsApp"  onclick="  _gaq.push(['_trackEvent', 'btshare', 'whatsapp', 'https://www.oficinadanet.com.br/artigo/javascript/imprimindo_areas_isoladas_de_uma_pagina_com_jquery?utm_source=whatsapp&utm_medium=sharebutton&utm_campaign=RedesSociais']);  window.open('https://api.whatsapp.com/send?text=Imprimindo áreas isoladas de uma página com jQuery - https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2Fjavascript%2Fimprimindo_areas_isoladas_de_uma_pagina_com_jquery%3Futm_source%3Dwhatsapp%26utm_medium%3Dsharebutton%26utm_campaign%3DRedesSociais');  " ><span class="whatsappShare">WhatsApp</span></li>
        <li class="share_btn visible" title="Compartilhe pelo Telegram"  onclick="  _gaq.push(['_trackEvent', 'btshare', 'telegram', 'https://www.oficinadanet.com.br/artigo/javascript/imprimindo_areas_isoladas_de_uma_pagina_com_jquery?utm_source=telegram&utm_medium=sharebutton&utm_campaign=RedesSociais']);  window.open('https://telegram.me/share/url?url=https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2Fjavascript%2Fimprimindo_areas_isoladas_de_uma_pagina_com_jquery%3Futm_source%3Dtelegram%26utm_medium%3Dsharebutton%26utm_campaign%3DRedesSociais&text=Imprimindo+%C3%A1reas+isoladas+de+uma+p%C3%A1gina+com+jQuery');  ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id=2225','flgcomment');  " ><span class="telegramShare">Telegram</span></li>
    </ul>
</div>
        </div>
        <div class="wifl">
            <div class="content5 ">
                        <div class="wifl post-bottom1" id="boxcomment" >
                            <span class="titulo1 tit_tag" ><span>Comentários</span></span>
                    <div id="btcarregarcomments_disqus" class="bt-all tpl2 wifl">Carregar comentários</div>
                    <div id="comment" class="comentarios_box">
                        <div id="disqus_thread"></div>
                    </div>
                        </div>
            </div>
            <div class="bar2 m-t-30" ><div class="wifl m-b-40"><span class="titulo1" ><span>Destaques</span></span><ul class="lst121  wifl  lsn "  ><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_destaques', 'pfr2225', 'pto17493']);"    >
                                <span class="nr">1</span>
                                <h3 class="tit tit2" >Com atualização do Chrome, consumo de memória RAM irá diminuir em 50%</h3>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/13484-qual-a-melhor-linguagem-de-programacao"  onclick="_gaq.push(['_trackEvent', 'barra_destaques', 'pfr2225', 'pto13484']);"    >
                                <span class="nr">2</span>
                                <h3 class="tit tit2" >Qual a melhor linguagem de programação?</h3>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/10087-alterando-as-cores-do-google-maps"  onclick="_gaq.push(['_trackEvent', 'barra_destaques', 'pfr2225', 'pto10087']);"    >
                                <span class="nr">3</span>
                                <h3 class="tit tit2" >Alterando as cores do Google Maps com Javascript</h3>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/8560-social-commerce-do-facebook-ganhara-forca-total-diz-site"  onclick="_gaq.push(['_trackEvent', 'barra_destaques', 'pfr2225', 'pto8560']);"    >
                                <span class="nr">4</span>
                                <h3 class="tit tit2" >Social Commerce do Facebook ganhará força total,  diz site</h3>
                            </a>
                        </li></ul></div>
            </div>
        </div>   
    </section>
</div></div>
                <script>
                    var disqus_shortname = 'oficinadanet'; // required: replace example with your forum shortname
                    var disqus_url = 'https://www.oficinadanet.com.br/artigo/javascript/imprimindo_areas_isoladas_de_uma_pagina_com_jquery';

                    var disqus_config = function () {
                        this.callbacks.onNewComment = [function(comment) {ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id=2225','flgcomment');
                        }];
                    };
                    function carregaComentariosDisqus()
                    {
                        $('#btcarregarcomments_disqus').hide();

                        (function() {
                            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                           dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
                            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
                        })();
                    }        
                </script>
                <div style="display:none;" id="flgcomment"></div>
    <script>
        function loadLazyMateria()
        {carregaComentariosDisqus();         
        }
    </script>
                </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/privacidade" >Política de Privacidade</a></li>
                <li><a href="https://www.oficinadanet.com.br/equipe" >Equipe</a></li>
                <li><a href="https://www.oficinadanet.com.br/colabore" >Trabalhe conosco</a></li>
            </ul>
            <ul class="menu-footer wifl">
                <li><span class="linksredes" onclick="window.open('https://www.facebook.com/oficinadanet')">Facebook</span></li>
                <li><span class="linksredes" onclick="window.open('https://www.youtube.com/user/oficinadanettv')">Youtube</span></li>
                <li><span class="linksredes" onclick="window.open('https://twitter.com/OficinadaNet')">Twitter</span></li>
                <li><span class="linksredes" onclick="window.open('https://www.instagram.com/oficinadanetoficial/')">Instagram</span></li>
                <li><span class="linksredes" onclick="window.open('https://t.me/oficinadanet')">Grupo no Telegram</span></li>
            </ul>
            <ul class="menu-footer wifl">
                <li><a href="https://www.oficinadanet.com.br/siga-nossas-redes-sociais" >Siga as nossas redes sociais</a></li>
            </ul>
        </div>
        <div class="out-menu-cupons">
            <span>Descontos</span>
            <ul class="lst_cupons wifl lsn">
                <li><a href="https://www.oficinadanet.com.br/cupons/cupom-de-desconto-netshoes">Descontos Netshoes</a></li>
                <li><a href="https://www.oficinadanet.com.br/cupons/cupom-de-desconto-saraiva">Descontos Saraiva</a></li>
                <li><a href="https://www.oficinadanet.com.br/cupons/cupom-de-desconto-livraria-cultura">Descontos Livraria Cultura</a></li>
                <li><a href="https://www.oficinadanet.com.br/cupons/cupom-de-desconto-fast-shop">Descontos Fast Shop</a></li>
                <li><a href="https://www.oficinadanet.com.br/cupons/cupom-de-desconto-sou-barato">Descontos Sou Barato</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">© 2005-2019 <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>
                var tempo = '1800';
                window.setTimeout('location.reload();', tempo*1000);
                </script>
                <div class="wifl hgt100 blackoverlay" id="blackoverlay"></div>
<div id="out_lib" >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</div>
<script>
    
    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 setCookie (name,value,expires,path,domain,secure)
    {
      document.cookie = name + "=" + escape (value) +
        ((expires) ? "; expires=" + expires.toUTCString() : "") +
        ((path) ? "; path=" + path : "") +
        ((domain) ? "; domain=" + domain : "") +
        ((secure) ? "; secure" : "");
    }
    
    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);

        
    }

    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);
    }

    
    var scroll_aux2     = 0;
    var loadCheck       = 0;
    var window_width    = $(window).width();

    function fixedOnScroll(id)
    {   
        if ($('#' + id).length > 0)
        {
            if( window_width > 1300 )
            {

                var k_distance      = 10;
                var comp_height     = 0;
                var scroll_top      = $(window).scrollTop();
                var height_maior    = false;
                var bottom_pause    = height_document;

                var anchor_top_dist     = $('#' + id).offset().top;
                var item_movel_height   = $('#' + id + ' > *').height();

                if($( ".bottom_pause_post_barra" ).length)
                {
                    bottom_pause =  $( ".bottom_pause_post_barra" ).offset().top - ( k_distance + header_height + item_movel_height + parseInt($( ".bottom_pause_post_barra" ).css('margin-top')));
                }

                //console.log('3 '+item_movel_height+' '+bottom_pause+' '+scroll_top+' '+scroll_aux2+' '+scroll_aux+' conta: '+(bottom_pause - scroll_top));
                
                //console.log('4 '+(bottom_pause - scroll_top) +' --- '+ anchor_top_dist);
                
                if( ( bottom_pause - scroll_top) < 0  ) //chega ao fim
                {
                    $('#' + id + ' > *').css({
                        "z-index": "100",
                        "left": 'initial',
                        "position": "fixed",
                        "bottom": "initial",
                        "transition":" 0s",
                        "top": (  (bottom_pause + k_distance + header_height) - scroll_top   )+'px'
                    });
                    if(loadCheck == 0)
                    {
                        loadLazyMateria();
                        
                        loadCheck = 1;
                    }

                }
                else if ((scroll_top + k_distance + header_height ) > anchor_top_dist) //scroll down
                {
                    k_distance = k_distance + header_height;
                    
                    $('#' + id + ' > *').css({
                        "z-index": "100",
                        "left": $('#' + id + ' > *').offset().left + 'px',
                        "position": "fixed",
                        "top": (k_distance) + 'px',
                        "bottom": "initial",
                        "transition":" 0.8s all ease"

                    });
                }
                else if (( (scroll_top + k_distance) - comp_height ) > anchor_top_dist) //scroll up
                {
                    k_distance = k_distance + header_height;
                    
                    $('#' + id + ' > *').css({
                        "z-index": "100",
                        "left": $('#' + id + ' > *').offset().left + 'px',
                        "position": "fixed",
                        "top": (k_distance)+'px',
                        "bottom": "initial",
                        "transition":" 0.8s all ease"
                    });
                }
                else
                {
                    $('#' + id + ' > *').css({
                        "z-index": "initial",
                        "left": 'initial',
                        "position": "initial",
                        "bottom": 'initial',
                        "top": 'initial'
                    });
                }
            }
            scroll_aux2 = scroll_top;
        }
    }

    function actBtVerMais(e)
    {
        var id = $(e).data('target');
        $('#'+id).show();
        $(e).hide();
    }

    function atcFixedOnScroll()
    {
        fixedOnScroll('out_post_barra');
    }

    
    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)
    {
        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');
    };
    
    function fechaBoxBigPopup(gaq,cookie,link)
    {
        blackoverlay();
        setCookie(cookie,'1');
        _gaq.push(["_trackEvent", "popup_seguir", gaq, gaq]);
        document.location = link;
    }
    
    $(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); });
        $('.commentcall').click(function(){scrollPageToID('boxcomment');});
        $('#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_sticky').click(function(){ actPopup('fechar','OFICINA_STICKY'); });
        $('#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_instagram_mobile').click(function(){ actPopup('fechar','INSTAGRAMMOBILE'); });
        $('.fechar_todasredes_mobile').click(function(){ actPopup('fechar','TODASREDESMOBILE'); });
        $('.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_todasredes_big').click(function(){ actPopup('fechar','TODASREDESBIG'); });
        $('.todasredes').click(function(){ actPopup('abrir','TODASREDESBIG'); });
        $('#fechar_newsletter').click(function(){ actPopup('fechar','ONNEWS'); });
        $('#fechar_youtube').click(function(){ actPopup('fechar','YOUTUBEBIG'); });
        $('#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');
        });
        
                    $('#act_user').css('display','none');
            $('#act_cad').css('display','block');
                });

    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++;
                }
            }
        }
    }
    
    
    $(".expand-gperf").click(function() {
        $(this).next().toggle();
    });

    $(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');
        });
    }
  
</script>
        
<script>
    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);
    }

    $(document).ready(function()
    {
        $('#sininho').click(function(){ actSininho(); });
    });

</script>

<script src="https://www.gstatic.com/firebasejs/5.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.0/firebase-messaging.js"></script>
<script>
    const applicationServerKey = "BJX8Rw2npfApIhpWy-3hPGZvdvdHECD4FLbylmtWsMgyUDgsOeP8R5K5E0SxCWxQ21rYmG7basOHXlDande8OgY";
    // Initialize Firebase
    var config = {
        apiKey: "AIzaSyChPCYMhtkCC0AfCVeZe6847ZJOuj1XuYQ",
        authDomain: "oficina-da-net.firebaseapp.com",
        databaseURL: "https://oficina-da-net.firebaseio.com",
        projectId: "oficina-da-net",
        storageBucket: "oficina-da-net.appspot.com",
        messagingSenderId: "647906981733"
    };
    
    firebase.initializeApp(config);
    const messaging = firebase.messaging();
    messaging.usePublicVapidKey(applicationServerKey);  

    function getTokenFBClient()
    {
        return messaging.getToken();
    }
  

    function getTokenRefreshFBClient()
    {
        return messaging.onTokenRefresh(function() {
            return messaging.getToken();
        });
    }

    document.addEventListener("DOMContentLoaded", () => {        
        let isPushEnabled = false;
        
        if (!('serviceWorker' in navigator)) {
            console.warn("Service workers are not supported by this browser.");
            return;
        }

        if (!('PushManager' in window)) {
            console.warn('Push notifications are not supported by this browser.');
            return;
        }

        if (!('showNotification' in ServiceWorkerRegistration.prototype)) {
            console.warn('Notifications are not supported by this browser.');
            return;
        }

        if (Notification.permission === 'denied') {
            console.warn('Notifications are denied by the user');
            return;
        }
        
        navigator.serviceWorker.register("/firebase-messaging-sw.js")
            .then( reg => {
                reg.update();                
                console.log('[SW] Service worker has been registered');
                sw_registered();
            }, e => {
                console.error('[SW] Service worker registration failed', e);
        });
        
        function sw_registered()
        {
            navigator.serviceWorker.ready.then(serviceWorkerRegistration => serviceWorkerRegistration.pushManager.getSubscription())
            .then(subscription => {
                if (!subscription) 
                {
                    console.log('not subscription',subscription);
                    return push_subscribe();
                }
                else
                {                    
                    console.log('update token');
                    getTokenRefreshFBClient();
                    return push_sendSubscriptionToServer(subscription, 'push_updateSubscription');                    
                }
            })
            .then(subscription => subscription ) 
            .catch(e => {
                /*console.error('Error subscription', e);*/
            });
        }
    

        function push_subscribe() {
            navigator.serviceWorker.ready
            .then(serviceWorkerRegistration => serviceWorkerRegistration.pushManager.subscribe({
                userVisibleOnly: true,
                applicationServerKey: urlBase64ToUint8Array(applicationServerKey),
            }))
            .then(subscription => {                
                return push_sendSubscriptionToServer(subscription, 'push_subscribe');
            })
            .then(subscription => subscription )
            .catch(e => { });
        }

        function urlBase64ToUint8Array(base64String) {
            const padding = '='.repeat((4 - base64String.length % 4) % 4);
            const base64 = (base64String + padding)
                .replace(/\-/g, '+')
                .replace(/_/g, '/');

            const rawData = window.atob(base64);
            const outputArray = new Uint8Array(rawData.length);

            for (let i = 0; i < rawData.length; ++i) {
                outputArray[i] = rawData.charCodeAt(i);
            }
            return outputArray;
        }
    
        function push_sendSubscriptionToServer(subscription, acao) {
            var ret = getTokenFBClient();
            ret.then(function(refreshedToken) {

                const method = 'POST';
                const key = subscription.getKey('p256dh');
                const token = subscription.getKey('auth');
                const contentEncoding = (PushManager.supportedContentEncodings || ['aesgcm'])[0];

                var strSubscription = JSON.stringify(subscription.toJSON());
                
                                    ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=webpush&acao='+acao+'&subscription='+strSubscription+'&iidToken='+refreshedToken,'');                  
                                    }).catch(function(err) {
                console.log('Unable to retrieve refreshed token ', err);        
            });            
        }
    });
</script><style type="text/css" >
    .cmmt.comments_wrapper { width: 100%; float: left; margin-top: 15px }
    .cmmt.comments_wrapper button { background: transparent; border: 0; outline-color: transparent; cursor: pointer}
    .cmmt.comments_wrapper .avatar {width: 48px;height: 48px;float: left;background: #e4e7ea;overflow: hidden;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
    .cmmt.comments_wrapper .avatar img { width: 100% }
    .cmmt .comment {width: calc(100% - 60px);float: right;color: #3f4549}
    .cmmt .comment:before, .cmmt .comment:after { content: ""; background: transparent; display: none }
    .cmmt .comment .content a { color: #1d00ff }
    .cmmt .comment_input {line-height: 0;position: relative;}
    .cmmt .comment_input textarea {width: calc(100% - 24px);;min-height: 70px;max-height: 300px;padding: 10px 10px 12px 10px;border: 2px solid #e4e7ea;color: #183A4C;font-size: 16px;line-height: 20px;resize: none;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
    .cmmt .comment_input textarea.invalid { border-color: #e23838; outline-color: #e23838 }
    .cmmt .comment_input .btn_submit {outline-width: 0;position: absolute;right: 0;bottom: 0;color: #fff;background: #778289;padding: 6px 24px;line-height: 19px;font-size: 15px;-webkit-border-top-left-radius: 3px;-moz-border-radius-topleft: 3px;border-top-left-radius: 3px;}
    .cmmt .comment_list_wrapper { width: 100%; float: left; margin-top: 30px }
    .cmmt .comment_list { list-style: none }
    .cmmt .comment_list li { width: calc(100% - 180px); float: left; margin-left: 180px;  margin-bottom: 20px }
    .cmmt .comment_list li.comment_indent0 { width: 100%; margin-left: 0px }
    .cmmt .comment_list li.comment_indent1 { width: calc(100% - 60px); margin-left: 60px }
    .cmmt .comment_list li.comment_indent2 { width: calc(100% - 120px); margin-left: 120px }
    .cmmt .comment_list li .show-user-options,
    .cmmt .comment_list li .user-options {border: 1px solid #afafaf;background: white;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
    .cmmt .comment_list li .show-user-options {height: 22px;position: absolute;right: 0;color: #afafaf;}
    .cmmt .comment_list li .user-options {width: 100px;position: absolute;right: 0;top: 21px;display: none;}
    .cmmt .comment_list li .user-options button:hover,
    .cmmt .comment_list li .show-user-options:hover {background: #f3f3f3;color: #000;}
    .cmmt .comment_list li .user-options button {width: 100%;text-align: center;color: #778289;font-size: 13px;line-height: 22px;}
    .cmmt .comment_list li .user-options.show { display: block }
    .cmmt .comment .comment_header { width: 100%; float: left; margin-bottom: 4px; }
    .cmmt .comment .comment_header .name  { font-weight: bold; float: left  }
    .cmmt .comment .comment_footer * { float: left }
    .cmmt .comment .comment_footer { margin-top: 4px }
    .cmmt .comment .text { font-size: 13px; color: #afafaf }
    .cmmt .comment .vote-down-text,
    .cmmt .comment .vote-up-text { margin: 0 10px 0 0; color: #8e8e8e; }
    .cmmt .comment .vote-down-text { margin-left: 10px }
    .cmmt .comment .text.bull { font-size: 16px }
    .cmmt .comment .comment_footer .vote-down,
    .cmmt .comment .comment_footer .vote-up {border: solid #b5b5b5;border-width: 0 2px 2px 0;display: inline-block;padding: 4px; outline-width: 0}
    .cmmt .comment .comment_footer .vote-down {transform: rotate(45deg);-webkit-transform: rotate(45deg);margin-top: 2px;}
    .cmmt .comment .comment_footer .vote-up { margin-top: 7px; transform: rotate(-135deg);-webkit-transform: rotate(-135deg);}
    .cmmt .comment .comment_footer .vote-up:disabled,
    .cmmt .comment .comment_footer .vote-down:disabled { border-color: #e2e2e2; }
    .cmmt .comment .vote-up-text.voted,
    .cmmt .comment .comment_footer .vote-up-text.voted + .vote-up:disabled { border-color: green; color: green }
    .cmmt .comment .vote-down-text.voted,
    .cmmt .comment .comment_footer .vote-down-text.voted + .vote-down:disabled { border-color: red; color: red }
    .cmmt .comment .comment_footer .reply.text:hover {text-decoration: underline }
    .cmmt .comment .reply-box { margin-top: 10px }
    .cmmt .login_wrapper { width: 800px;height: 460px; display: none; margin: auto;position: fixed;background: #fff;z-index: 3001;top: 0;left: 0;bottom: 0;right: 0;}
    .cmmt .login_wrapper #login_loading { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; background: rgba(165, 165, 165, 0.38); z-index: 3100 }
    .cmmt .login_wrapper #login_loading.show { display: block }
    .cmmt .login_wrapper.show { display: block }
    .cmmt .login_wrapper .box_form { width: calc(50% - 40px);height: 100%;float: left;padding: 0 20px; }
    .cmmt .login_wrapper .box_form .title { margin: 30px 0;font-size: 30px;color: #727272;font-weight: bold;text-align: center; }
    .cmmt .login_wrapper .box_form.register { width: calc(50% - 41px);border-left: 1px solid #ccc;background: #efefef }
    .cmmt .login_wrapper .close {position: absolute;right: 20px;top: 20px;width: 32px;height: 32px;opacity: 0.5; cursor: pointer}
    .cmmt .login_wrapper .close:hover {opacity: 1;}
    .cmmt .login_wrapper .close:before,
    .cmmt .login_wrapper .close:after {position: absolute;left: 15px;content: ' ';height: 31px;width: 2px;background-color: #333;}
    .cmmt .login_wrapper .close:before {transform: rotate(45deg);}
    .cmmt .login_wrapper .close:after {transform: rotate(-45deg);}
    .cmmt .login_wrapper input {width: calc(100% - 20px); height: 50px; float: left; margin-bottom: 20px; padding: 0 10px; font-size: 16px; font-weight: normal; color: #6f6f6f; background-color: white; border: 1px solid #d7d7d7; -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px; }
    .cmmt .login_wrapper input.invalid { border-color: #e23838; outline-color: #e23838; margin-bottom: 0 }
    .cmmt .login_wrapper input + .invalid_message { width: 100%;height: 16px;display: none;float: left;color: #e23838;font-size: 13px;line-height: 16px;margin-bottom: 4px; }
    .cmmt .login_wrapper input.invalid + .invalid_message { display: block }
    .cmmt .login_wrapper .text { margin-top: 20px; font-size: 13px; text-align: center; color: #727272 }
    .cmmt .login_wrapper .text.password { margin: 0px; text-align: left }
    .cmmt .login_wrapper .text.password:hover { text-decoration: underline }
    .cmmt .login_wrapper .btn_login {width: 100%; text-align: center;padding: 10px 0;color: #fff;background: #309434;font-size: 14px;border-bottom: 2px solid #0b650f;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px; }
    .cmmt .login_wrapper .btn_login_fb:before { width: 15px; height: 15px; content: ""; margin-right: 10px; display: inline-block; background: url(https://www.oficinadanet.com.br/_template/imagem/ico-facebook2.png) }
    .cmmt .login_wrapper .btn_login_fb{margin-right: 10px;line-height: 15px;background: #4267b2;color: #FFF;font-size: 14px;width: 100%;float: left;margin-top: 20px;padding: 10px 0;text-align: center;cursor: pointer;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;border-bottom: 2px solid #1f3c77;}
    .cmmt .comments_wrapper .btn_load_comment { position: relative; color: #fff;background: #778289;padding: 6px 24px; }
    .cmmt .comments_wrapper .btn_load_comment:disabled {background: #ececec; color: #778289;}
</style>
<script type="text/javascript" >

    var current_user = null;
    var cache_name = '4_artigo-javascript-imprimindo_areas_isoladas_de_uma_pagina_com_jquery';
    var comment_to_send = '';
    var post_id = null;
    var reply_comment_id = 0;

    function getCookie(name)
    {
        var cookies = document.cookie;
        var prefix = name + "=";
        var begin = cookies.indexOf("; " + prefix);

        if (begin == -1) {

            begin = cookies.indexOf(prefix);

            if (begin != 0) {
                return null;
            }

        } else {
            begin += 2;
        }

        var end = cookies.indexOf(";", begin);

        if (end == -1) {
            end = cookies.length;
        }

        return unescape(cookies.substring(begin + prefix.length, end));
    }

    function PopupCenter(url, title, w, h)
    {
        var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : window.screenX;
        var dualScreenTop = window.screenTop != undefined ? window.screenTop : window.screenY;
        var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
        var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

        var systemZoom = width / window.screen.availWidth;
        var left = (width - w) / 2 / systemZoom + dualScreenLeft;
        var top = (height - h) / 2 / systemZoom + dualScreenTop;

        var newWindow = window.open(url, title, 'scrollbars=no, width=' + w / systemZoom + ', height=' + h / systemZoom + ', top=' + top + ', left=' + left);

        if (window.focus)
            newWindow.focus();
    }
    
    window.successfullySocialLogin = function(type){
        var post_data = getPostData();
        $('#login_loading').addClass('show');
        $.ajax({
            type: 'POST',
            url: 'https://www.oficinadanet.com.br/ajax_oficina.php',
            data: post_data+'act=successfullySocialLogin',
            success: function (response) {
                
                if( response.error )
                {
                    alert('Ocorreu um erro durante o login.');
                }
                else
                {
                    setDataUser(response);
                    cleanForm();
                    hideCommentLogin();
                    $("#comment_list").html(response.html);
                    buildUserOptions();
                }
                $('#login_loading').removeClass('show');
            }
        });
    }

    function SubmitCommentForm(form)
    {
        if($(form).find('textarea').val().length)
        {
            $('.comment_input textarea').removeClass('invalid');
            comment_to_send = $(form).find('textarea').val();
            reply_comment_id = $(form).find('input[name="reply_comment_id"]').val();

            if(current_user === null)
            {
                ShowCommentLogin();
            }
            else
            {
                setComment();
            }
        }
        else
        {
            $(form).find('textarea').addClass('invalid').focus();
            setTimeout(function(){alert('Insira um comentário');},0);
        }
    }

    function ShowCommentLogin()
    {
        blackoverlay(true);
        $('#login_wrapper').addClass('show');
        $('#login_loading').removeClass('show');
    }

    function hideCommentLogin()
    {
        comment_to_send = '';
        blackoverlay(false);
        $('#login_wrapper').removeClass('show');
    }

    function SubmitLoginForm(form)
    {
        $('#login_loading').addClass('show');

        if(comment_to_send.length == 0 || post_id == 0)
            return;

        var post_data = getPostData();
        
        if($(form).find('input[name="act"]').val() == 'commentLogin')
        {

            var login = isValidInput($(form).find('input[name="login"]'));
            var password = isValidInput($(form).find('input[name="password"]'));

            if(login && password)
            {
                $.ajax({
                    type: 'POST',
                    url: 'https://www.oficinadanet.com.br/ajax_oficina.php',
                    data: post_data+'act=commentLogin&login='+login+'&password='+password,
                    success: function (response) {

                        if( response.error )
                        {
                            if(response.error_code == 'mail_user_name')
                                isValidInput($(form).find('input[name="login"]'),response);
                            else if(response.error_code == 'password')
                                isValidInput($(form).find('input[name="password"]'),response);
                            else
                                alert(response.error_message);
                        }
                        else
                        {
                            setDataUser(response);
                            cleanForm();
                            hideCommentLogin();
                            $("#comment_list").html(response.html);
                            buildUserOptions();
                        }
                        $('#login_loading').removeClass('show');
                    }
                });
            }
            else
            {
                $('#login_loading').removeClass('show');
            }
        }
        else if($(form).find('input[name="act"]').val() == 'commentRegister')
        {
            var email = isValidInput($(form).find('input[name="email"]'));
            var name = isValidInput($(form).find('input[name="name"]'));
            var password = isValidInput($(form).find('input[name="password"]'));

            if(email && name && password)
            {
                $.ajax({
                    type: 'POST',
                    url: 'https://www.oficinadanet.com.br/ajax_oficina.php',
                    data: post_data+'act=commentRegister&email='+email+'&name='+name+'&password='+password,
                    success: function (response) {

                        if( response.error )
                        {
                            if(response.error_code == 'invalid_name')
                                isValidInput($(form).find('input[name="name"]'),response);
                            else if(response.error_code == 'invalid_email')
                                isValidInput($(form).find('input[name="email"]'),response);
                            else if(response.error_code == 'email_exists')
                            {
                                $('#commentLogin').find('input[name="login"]').val(email);
                                $('#commentLogin').find('input[name="password"]').focus();
                                alert(response.error_message);
                            }
                            else
                                alert(response.error_message);
                        }
                        else
                        {
                            setDataUser(response);
                            cleanForm();
                            hideCommentLogin();
                            $("#comment_list").html(response.html);
                            buildUserOptions();
                        }
                        $('#login_loading').removeClass('show');
                    }
                });
            }
            else
            {
                $('#login_loading').removeClass('show');
            }
        }
    }

    function getPostData()
    {
        return 'comment='+comment_to_send+'&post_id='+post_id+'&reply_comment_id='+reply_comment_id+'&cache_name='+cache_name+'&';
    }

    function setComment()
    {
        cleanForm();
        var post_data = getPostData();
        $.ajax({
            type: 'POST',
            url: 'https://www.oficinadanet.com.br/ajax_oficina.php',
            data: 'act=setComment&'+post_data,
            success: function (html) {
                $('#comment_list').html(html);
                buildUserOptions();
                processVotedComments();
            }
        });
    }

    function cleanForm()
    {
        $('.comment_input textarea').removeClass('invalid').val('');
    }

    function isValidInput(input,response)
    {
        if(response != undefined)
        {
            $(input).next().html(response.error_message);
            $(input).addClass('invalid');
            return false;
        }
        else
        {
            var inputValue = $(input).val();
            if(inputValue.length == 0)
            {
                $(input).next().html('Preenchimento obrigatório.');
                $(input).addClass('invalid');
                return false;
            }
            else
            {
                $(input).next().html('');
                $(input).removeClass('invalid');
                return $(input).val();
            }
        }
    }

    function replyComment(button)
    {
        var id = $(button).data('reply-box');

        if($('#reply-box-'+id).html() == "")
        {
            cleanForm();
            var reply_comment = $(button).data('reply-id');
            $('#reply-box-'+id).html($('#out_comment_form').html());
            $('#reply-box-'+id+' .comment_input textarea').focus();
            $('#reply-box-'+id+' input[name="reply_comment_id"]').val($(button).data('reply-id'));
        }
        else
        {
            $('#reply-box-'+id).html('');
        }
    }

    function commentVote(button,vote)
    {
        var comment_id = $(button).data('comment');
        $.ajax({
            type: 'POST',
            url: 'https://www.oficinadanet.com.br/ajax_oficina.php',
            data: 'act=commentVote&post_id='+post_id+'&comment_id='+comment_id+'&vote='+vote,
            success: function (html) {
                processVotedComments();
            }
        });
    }

    function setDataUser(response)
    {
        current_user = response.user;
        if( current_user.image != undefined )
            $(".current_user_image").attr("src", current_user.image);
    }

    function processVotedComments()
    {
        if($("#comment_list").length != 0 && current_user != null)
        {
            var cookie_name = 'comment_vote_'+post_id;
            if(getCookie(cookie_name))
            {
                var comment_votes = JSON.parse(getCookie(cookie_name));
                Object.keys(comment_votes).forEach(function(k){
                    if($('#text-'+comment_votes[k]+'-'+k).hasClass('voted') == false)
                    {
                        $('#vote-up-'+k).attr("disabled", true);
                        $('#vote-down-'+k).attr("disabled", true);
                        $('#text-'+comment_votes[k]+'-'+k).html(parseInt($('#text-'+comment_votes[k]+'-'+k).html())+1);
                        $('#text-'+comment_votes[k]+'-'+k).addClass("voted");
                    }
                });
            }
        }
    }

    function buildUserOptions()
    {
        setTimeout(function (){
            if($("#comment_list").length != 0 && current_user != null)
            {
                $('#comment_list li').each(function(i)
                {
                    if($(this).data('user-id') == current_user.id)
                    {
                        var user_options = '<button type="button" class="show-user-options border" >•••</button>'
                           +'<div class="user-options" >'
                                +'<button class="delete-comment" type="button" data-comment-id="'+$(this).data('comment-id')+'" >Excluir</button>'
                            +'</div>';
                        $(this).prepend(user_options);
                    }
                });
            }
        },500);
    }

    function deleteComment(button)
    {
        var post_data = 'act=deleteComment&post_id='+post_id+'&comment_id='+$(button).data('comment-id')+'&cache_name='+cache_name;
        ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php',post_data,"comment_list");
        buildUserOptions();
    }

    function loadComment(button)
    {
        $(button).attr("disabled", true);
        $(button).data("title",$(button).html());
        $(button).html($(button).data("title-loading"));

        var load = $(button).data('load');
        var totalcomments = $(button).data('total-comments');

        var post_data = 'act=loadComment&post_id='+post_id+'&load='+load;

        var loadn = parseInt(load);
        loadn++;
        $(button).data('load',loadn);

        $.ajax({
            type: 'POST',
            url: 'https://www.oficinadanet.com.br/ajax_oficina.php',
            data: post_data,
            success: function (response) {

                if($('#comment_list li').length >= totalcomments)
                {
                    $(button).css('display','none');
                    $(button).attr("disabled", true);
                }
                else
                {
                    $('#comment_list').append(response.html);
                    $(button).attr("disabled", false);
                    $(button).html($(button).data("title"));
                    buildUserOptions();
                }
            }
        });
    }
    
    function initComment()
    {
        
        post_id = $('#comment_list').data('post-id');

        $('.comment_input textarea').bind('input propertychange', function() {
            $(this).height('0px').height($(this).prop('scrollHeight')-22);
        });

        $(document).on('click', 'button.show-user-options',function(e) {
            if($(this).next().hasClass('show'))
                $(this).next().removeClass('show');
            else
                $(this).next().addClass('show');
        });

        $(document).on('click', '.delete-comment',function(e) {
            deleteComment(this);
        });

        $(".comment_modal_form").on('submit',function(e) {
            SubmitLoginForm(this);
            e.preventDefault();
        });

        $(document).on('click', '.btn_submit',function(e) {
            var form = $(this).parents('form:first');
            SubmitCommentForm(form);
        });

        $(document).on('click', 'button.reply',function(e) {
            replyComment(this);
        });

        $(document).on('click', '.vote-up',function(e) {
            commentVote(this,'up');
        });

        $(document).on('click', '.vote-down',function(e) {
            commentVote(this,'down');
        });

        $(".close_commentLogin").on('click',function(e) {
            hideCommentLogin();
        });

        $(".blackoverlay").on('click',function(e) {
            hideCommentLogin();
        });

        $("#btn_load_comment").on('click',function(e) {
            loadComment(this);
        });

        $(document).ready(function (){
            processVotedComments();
            buildUserOptions();

            if($('#comment_list li').length >= $('#btn_load_comment').data('total-comments'))
            {
                $('#btn_load_comment').css('display','none');
                $('#btn_load_comment').attr("disabled", true);
            }
        });
    }
    
    var elementExists = document.getElementById("script_jquery");
    if(elementExists)
    {
        document.getElementById('script_jquery').addEventListener('load', function() {
            initComment();
        });
    }
    else
    {
        initComment();
    }
</script><link rel="stylesheet" href="https://www.oficinadanet.com.br/_template/css/geral.css?v=803"><!-- advertising 4TpJ9Me3Sia7qHJi9IM3odw5jJ_2hupbH48Ifjbng_aL0ZNxVUTj4-ltldS-hvBNbqaBGbAM-deLE4JswQFNbQ==-->
    <script data-cfasync="false"  id="clevernt">
    (function (document, window) {
        var c = document.createElement("script");
        c.type = "text/javascript";
        c.async = !0;
        c.src = "//clevernt.com/scripts/49eda678410baaf060c3a7dad9cff960.min.js?20180622=" + Math.floor((new Date).getTime());
        var a = !1;
        try {
            a = parent.document.getElementsByTagName("script")[0] || document.getElementsByTagName("script")[0];
        } catch (e) {
            a = !1;
        }
        a || ( a = document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]);
        a.parentNode.insertBefore(c, a);
    })(document, window);
    </script>
    <!-- end advertising -->
        
    <div class="player_dynad_tv"></div>
    </body>
</html>