Categoria Protegida!
4 participantes
Página 1 de 1
Categoria Protegida!
Efeito: Categoria Protegida!
É 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);
}
});
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 -->
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!
Re: Categoria Protegida!
Show de bola. Dá um tom bem mais interessante pra quem quer proibir acesso né?!
Re: Categoria Protegida!
Sim, correto!!!
Para dificultar mais ainda, basta um código assim:
JS
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 -->
});
JS
Re: Categoria Protegida!
Ótimo JScript!
Parabéns pelo Tutorial!
#Reputed HAUEH
@OFF:
Ó meu fórum õ/ õ/
Parabéns pelo Tutorial!
#Reputed HAUEH
@OFF:
Ó meu fórum õ/ õ/
Convidado- Convidado
Re: Categoria Protegida!
Perfeito, algo tão simples faz um efeito desses. Realmente, javascript e uma linguagem maravilhosa para os que sabem utiliza-la!
Convidado- Convidado
Re: Categoria Protegida!
Obrigado a todos pelos votos (likes), só falta um pra o tópico ficar popular!!!
Abraços,
JS
Abraços,
JS
Re: Categoria Protegida!
Muito bom esse Efeito Js, Obrigado por compartilhar!!
#Rep
ATÉ MAIS,
#Rep
ATÉ MAIS,
Convidado- Convidado
Re: Categoria Protegida!
Bom código !
Estarei a utilizar !
Gostaria de pedir se o senhor poderia me passar algum tutorial de Javascript e Jquery, desejo muito aprender!
Estarei a utilizar !
Gostaria de pedir se o senhor poderia me passar algum tutorial de Javascript e Jquery, desejo muito aprender!
Convidado- Convidado
Re: Categoria Protegida!
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:
Espero que a minha explicação tenha sido útil a quem percebe menos...
Hancki
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');
}
});
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 = 'NÚMERO/POSIÇÃO DA CATEGORIA';
$('.main-content:eq(' + sCategory + ')').addClass('CLASS DA CATEGORIA');
}
});
Agora, usando o CSS na sua folha de estilos, seria algo assim:$(function() {
if (document.getElementById('logout') == null) {
var sCategory = '5';
$('.main-content:eq(' + sCategory + ')').addClass('categoriajogos');
}
});
.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
Hancki- Desenvolvedores
- Time Online : 174d 5h 18m 13s
Mensagens : 61
Data de inscrição : 08/02/2014
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|