BlueBox

Desenvolvimento de códigos, análises de informação

JS: Introdução

Seg Fev 24, 2014 11:33 am por Pac

Iniciando o Tutorial...


Para quem é direcionado este Tutorial de JavaScript?
Para quem não sabe nada de JavaScript ainda, mas já sabe básico de HTML.

O que é JavaScript?
É uma linguagem utilizada principalmente para auxílio de desenvolvimento de páginas para a Internet.

JavaScript é a mesma coisa que Java?
Não, JavaScript é mais simples que Java. Aprender …

Comentários: 0

Onde coloco o código JavaScript?

Seg Fev 24, 2014 11:32 am por Pac

Mostrar onde se digita o código JavaScript dentro de uma página HTML.
O Código JavaScript fica Entre o <script> e o </script>.
Ficaremos com a seguinte estrutura:


Mostrar onde se digita o código JavaScript dentro de uma página HTML.

Código:
<html>
<body>

<script>

alert("Minha primeira mensagem!")

</script>


Comentários: 0

Buscar
 
 

Resultados por:
 


Rechercher Busca avançada


Você não está conectado. Conecte-se ou registre-se

[Pedido] Colocar efeito de POP-UP de Boas Vindas na Edição de Template

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

IsmaelS.

avatar
Membro
Olá,

Eu arranjei um efeito de POP-UP diferente da Forumeiros, mas para ela funcionar perfeitamente tinha que colocar num Widget mas eu tenho os widgets desactivados por isso gostava de saber se é possível adicionar através de Edição de Template, o código é:

Código:
<div id="show">
<div id="fade"></div>
<div class="popup_block">
<div class="popup">
<a href="#" id="popupclose"><img src="http://i38.servimg.com/u/f38/17/31/71/58/icon_c10.png" class="cntrl" title="Fechar"></a>
                       <h3>Bem Vindo ao <b>{FORUMNAME}</b></h3>
                       <p>Para poder utilizar todos os atributos deste fórum, será necessário que você crie uma conta de uruário.<br><br>Estamos felizes por nos visitar!

Aqui encontrará tudo que deseja sobre o universo Forumeiros, desde publicidade, parcerias, códigos e muito mais.

Cadastre-se e faça parte desta maravilhosa comunidade que dedica-se inteiramente a fornecer um suporte de qualidade.<br>
</p><br><br><center><a href="/register" title="Cadastre-se">Registre-se Agora!</a> </center>
<p></p><br>
                       <h3>Já está Cadatrado? Faça o Login!</h3>
<form action="/login" method="post" name="form_login" id="login">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="right">
<div align="center">
<b>Usuário:</b> <input id="ips_username" type="text" class="input_text" name="username" size="15" tabindex="1">
<b>Senha:</b> <input id="ips_password" type="password" class="input_text" name="password" size="15" tabindex="2">
<input type="submit" name="login" class="input_submit" value="Logar">
</div>
</td>
</tr>
</table>
</form></div>
</div>
</div>
<script type="text/javascript">
jQuery('#popupclose').click(function(){
jQuery('#show').fadeOut('fast');return false;
});
if (location.pathname == '/login') {
jQuery('#show').css('display','none');
}
if (location.pathname == '/register') {
jQuery('#show').css('display','none');
}
</script>
<style type="text/css">
#fade {
background: #000;
position: fixed;
width: 100%;
height: 100%;
filter:alpha(opacity=80);
opacity: .30;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
/*--IE 8 Transparency--*/
left: 0;
top: 0;
z-index: 10;
}
#show {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.popup_block {
background: #ddd;
padding: 10px 20px;
border: 10px solid #fff;
float: left;
width: 480px;
position: fixed;
top: 20%;
left: 50%;
margin: 0 0 0 -250px;
z-index: 100;
}
.popup_block .popup {
float: left;
width: 100%;
background: #fff;
margin: 10px 0;
padding: 10px 0;
border: 1px solid #bbb;
}
.popup h3 {
margin: 0 0 20px;
padding: 6px 11px;
border-bottom: 1px solid #bbb;
font-size: 1.5em;
font-weight: normal;
}
.popup p {
padding: 5px 10px;
margin: 5px 0;
}
.popup img.cntrl {
position: absolute;
right: -20px;
top: -20px;
}
.input_text {
padding: 4px;
border-width: 1px;
border-style: solid;
border-color: #848484 #C1C1C1 #E1E1E1 #C1C1C1;
background: white;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.input_submit {
-moz-border-radius: 3px;
-moz-box-shadow: inset 0 1px 0 0 #5c5c5c, 0 2px 3px rgba(0,0,0,0.2);
-webkit-border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 0 #5C5C5C, 0 2px 3px rgba(0, 0, 0, 0.2);
background: #212121 url(http://i78.servimg.com/u/f78/17/31/71/58/topic_10.png) repeat-x top;
border-color: #212121;
border-radius: 3px;
border-style: solid;
border-width: 1px;
box-shadow: inset 0 1px 0 0 #5C5C5C, 0 2px 3px rgba(0, 0, 0, 0.2);
color: white;
cursor: pointer;
padding: 4px 10px;
text-decoration: none;
}
</style>


[Você precisa estar registrado e conectado para ver este link.] || PunBB

Ver perfil do usuário http://www.suportedesign.forumeiros.com

BlueMan

avatar
Developer
Primeiramente, acesse o template:
Código:
overall_header

Depois, ache a tag:
Código:
<body>

Cole o código encontrado depois da tag citada, e seja feliz.
Abraço!

BlueMan.

Ver perfil do usuário http://bluebox.forumeiros.com

IsmaelS.

avatar
Membro
Olá,

Continua a aparecer para quem está já logado e não só para os convidados.

Ver perfil do usuário http://www.suportedesign.forumeiros.com

BlueMan

avatar
Developer
Troque o código por esse:
Código:

<!-- BEGIN switch_user_logged_out -->
<div id="show">
<div id="fade"></div>
<div class="popup_block">
<div class="popup">
<a href="#" id="popupclose"><img src="http://i38.servimg.com/u/f38/17/31/71/58/icon_c10.png" class="cntrl" title="Fechar"></a>
                      <h3>Bem Vindo ao <b>{FORUMNAME}</b></h3>
                      <p>Para poder utilizar todos os atributos deste fórum, será necessário que você crie uma conta de uruário.<br><br>Estamos felizes por nos visitar!

Aqui encontrará tudo que deseja sobre o universo Forumeiros, desde publicidade, parcerias, códigos e muito mais.

Cadastre-se e faça parte desta maravilhosa comunidade que dedica-se inteiramente a fornecer um suporte de qualidade.<br>
</p><br><br><center><a href="/register" title="Cadastre-se">Registre-se Agora!</a> </center>
<p></p><br>
                      <h3>Já está Cadatrado? Faça o Login!</h3>
<form action="/login" method="post" name="form_login" id="login">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="right">
<div align="center">
<b>Usuário:</b> <input id="ips_username" type="text" class="input_text" name="username" size="15" tabindex="1">
<b>Senha:</b> <input id="ips_password" type="password" class="input_text" name="password" size="15" tabindex="2">
<input type="submit" name="login" class="input_submit" value="Logar">
</div>
</td>
</tr>
</table>
</form></div>
</div>
</div>
<script type="text/javascript">
jQuery('#popupclose').click(function(){
jQuery('#show').fadeOut('fast');return false;
});
if (location.pathname == '/login') {
jQuery('#show').css('display','none');
}
if (location.pathname == '/register') {
jQuery('#show').css('display','none');
}
</script>
<style type="text/css">
#fade {
background: #000;
position: fixed;
width: 100%;
height: 100%;
filter:alpha(opacity=80);
opacity: .30;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
/*--IE 8 Transparency--*/
left: 0;
top: 0;
z-index: 10;
}
#show {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.popup_block {
background: #ddd;
padding: 10px 20px;
border: 10px solid #fff;
float: left;
width: 480px;
position: fixed;
top: 20%;
left: 50%;
margin: 0 0 0 -250px;
z-index: 100;
}
.popup_block .popup {
float: left;
width: 100%;
background: #fff;
margin: 10px 0;
padding: 10px 0;
border: 1px solid #bbb;
}
.popup h3 {
margin: 0 0 20px;
padding: 6px 11px;
border-bottom: 1px solid #bbb;
font-size: 1.5em;
font-weight: normal;
}
.popup p {
padding: 5px 10px;
margin: 5px 0;
}
.popup img.cntrl {
position: absolute;
right: -20px;
top: -20px;
}
.input_text {
padding: 4px;
border-width: 1px;
border-style: solid;
border-color: #848484 #C1C1C1 #E1E1E1 #C1C1C1;
background: white;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.input_submit {
-moz-border-radius: 3px;
-moz-box-shadow: inset 0 1px 0 0 #5c5c5c, 0 2px 3px rgba(0,0,0,0.2);
-webkit-border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 0 #5C5C5C, 0 2px 3px rgba(0, 0, 0, 0.2);
background: #212121 url(http://i78.servimg.com/u/f78/17/31/71/58/topic_10.png) repeat-x top;
border-color: #212121;
border-radius: 3px;
border-style: solid;
border-width: 1px;
box-shadow: inset 0 1px 0 0 #5C5C5C, 0 2px 3px rgba(0, 0, 0, 0.2);
color: white;
cursor: pointer;
padding: 4px 10px;
text-decoration: none;
}
</style>
<!-- END switch_user_logged_out -->

Abraço!
BlueM.

Ver perfil do usuário http://bluebox.forumeiros.com

IsmaelS.

avatar
Membro
Olá,

Perfeito caro amigo, Resolvido !

Ver perfil do usuário http://www.suportedesign.forumeiros.com

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum