É algo tão simples que este tutorial ficará aberto a todos!


1º - Adicionando JavaScript

Adicione na gestão de JavaScript com investimento no índice o código abaixo:

Código:


$(function() {
    if (document.getElementById('logout') == null) {
        var sCategory = '4';
        $('.main-content:eq(' + sCategory + ')').addClass('protect');
        var sCSS = '<style>' +
            '.protect:after {' +
                'background: none repeat scroll 0px 0px rgba(255, 255, 255, 0.8);' +
                'bottom: 0px;' +
                'content: "Somente membros";' +
                'font-size: 30px;' +
                'left: 0px;' +
                'line-height: 240px;' +
                'position: absolute;' +
                'right: 0px;' +
                'text-align: center;' +
                'top: 0px;' +
                'z-index: 10;' +
            '}' +
            '.protect {' +
                'position: relative;' +
            '}' +
            '</style>';
        document.head.insertAdjacentHTML('beforeEnd', sCSS);
    }
});


Agora observe como é a estrutura de categorias de um fórum punbb:

Perceba que cada categoria é formada por um header (título) e o content (conteúdo) que no caso do código que passei acima a variável var sCategory está com o valor = '4'; que corresponde à categoria de tutoriais!!!
Se desejar outra categoria, basta contar qual é a posição (número) correspondente e colocar na variável acima mencionada.

Resultado:

---

Aqui no fórum nós não usamos JavaScript pois já foi definido um ID para a categoria que eu determinei, neste caso é apenas por CSS, veja:

Código:


<!-- BEGIN switch_user_logged_out -->
<style type="text/css">
    <!--
    #category_3.main-content:after {
        background: none repeat scroll 0px 0px rgba(255, 255, 255, 0.8);
        bottom: 0px;
        content: "Somente membros";
        font-size: 30px;
        left: 0px;
        line-height: 310px;
        position: absolute;
        right: 0px;
        text-align: center;
        top: 0px;
        z-index: 10;
    }
    #category_3.main-content {
        position: relative;
    }
    -->
</style>
<!-- END switch_user_logged_out -->


Mas deixo pra vocês estudarem como adicionar o efeito apenas por CSS ok?

Simples assim!

---

PunBB Forumeiros

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Efeito: Categoria Protegida!

Show de bola. Dá um tom bem mais interessante pra quem quer proibir acesso né?!

Sim, correto!!!

Para dificultar mais ainda, basta um código assim:

Código:


        window.addEventListener('blur', function () {
            <!-- BEGIN switch_user_logged_out -->
            $('#protect.main-content a').attr('href', 'javascript:void(0);');
            <!-- END switch_user_logged_out -->
        });


Show de bola,

JS

Ótimo JScript!
Parabéns pelo Tutorial!
#Reputed HAUEH
@OFF:
Ó meu fórum õ/ õ/

Perfeito, algo tão simples faz um efeito desses. Realmente, javascript e uma linguagem maravilhosa para os que sabem utiliza-la!

Muito bom este efeito, adorei

Obrigado a todos pelos votos (likes), só falta um pra o tópico ficar popular!!!

Abraços,

JS

ola, nao resoltou.

Muito bom esse Efeito Js, Obrigado por compartilhar!!
#Rep

ATÉ MAIS,

no meu nao resoltou.
Como faço

@Mr.GamingPT Que tal criar um tópico para lhe ajudarem?

Bom código !

Estarei a utilizar !
Gostaria de pedir se o senhor poderia me passar algum tutorial de Javascript e Jquery, desejo muito aprender!

Olá a todos!

Para quem quiser atribuir uma "class" a todas as categorias, para que se possa personalizar a proteção em cada uma que se deseje, basta usar este seguinte script:

Código:

$(function() {
    if (document.getElementById('logout') == null) {
        var sCategory = '1';
        $('.main-content:eq(' + sCategory + ')').addClass('protect1');
    }
});
$(function() {
    if (document.getElementById('logout') == null) {
        var sCategory = '2';
        $('.main-content:eq(' + sCategory + ')').addClass('protect2');
    }
});
$(function() {
    if (document.getElementById('logout') == null) {
        var sCategory = '3';
        $('.main-content:eq(' + sCategory + ')').addClass('protect3');
    }
});

Agora, entendendo o código...

$(function() {
   if (document.getElementById('logout') == null) {
       var sCategory = 'NÚMERO/POSIÇÃO DA CATEGORIA';
       $('.main-content:eq(' + sCategory + ')').addClass('CLASS DA CATEGORIA');
   }
});

A verde, atribuímos a posição da categoria. Faça de conta que tem 10 categorias, mas só quer fazer o efeito na 5ª categoria... E que a categoria é sobre jogos (classe a vermelho)... Ou seja, seria algo assim:  

$(function() {
   if (document.getElementById('logout') == null) {
       var sCategory = '5';
       $('.main-content:eq(' + sCategory + ')').addClass('categoriajogos');
   }
});

Agora, usando o CSS na sua folha de estilos, seria algo assim:

.categoriajogos:after {
       background: none repeat scroll 0px 0px rgba(255, 255, 255, 0.7);
       bottom: 0px;
       content: "Somente membros";
       font-size: 30px;
       left: 0px;
       line-height: 310px;
       position: absolute;
       right: 0px;
       text-align: center;
       top: 0px;
       z-index: 10;
}
.categoriajogos {
       position: relative;
}

Espero que a minha explicação tenha sido útil a quem percebe menos...

Hancki