Criar Blog: JavaScript

Mostrando postagens com marcador JavaScript. Mostrar todas as postagens

Criando anúncio efeito peel (Descascar) no topo da página

Aqui vou mostrar como criar um anuncio com efeito descascar no topo direito do site, anuncio que chama muita atenção, todos ficam curiosos querendo saber o que há por traz daquela casca no canto, quando passamos o mouse ela mostra o que há por traz.
Vamos lá primeiro vamos criar o arquivo descascar.js segue o código abaixo:

Criado o arquivo descascar.js baixe os arquivos abaixo e altere os caminhos no arquivo descascar.js

BAIXAR TODOS OS ARQUIVOS AQUI

Após baixar e configurar o arquivo descascar.js Adicione o seguinte Javascript depois <title> antes de </ head>. do seu site:

Adicionando Relógio Simples com JavaScript

Com esse código é Possível colocar um Relógio em paginas html sem problemas.

<!DOCTYPE html>
<html lang="pt-br">
<head>

<p id="demo"></p>

     <script>
          var myVar=setInterval(function(){myTimer()},1000);
          function myTimer()
          {
          var d=new Date();
          var t=d.toLocaleTimeString();
          document.getElementById("demo").innerHTML=t;
        }
    </script>

   </head>
     <body>
   </body>
</html>

EXEMPLO...................................................

Janela pop-up com CSS e javascript

O código abaixo mostra como criar uma janela pop-up baseada em CSS, que torna-se visível quando uma função em JavaScript altera o atributo display e uma DIV é exibida por cima da página. Por não precisar abrir uma nova janela ou aba, o código na realidade não gera um pop-up, e sim uma parte do código-fonte, que estava oculta pelo estilo CSS display:none;.

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <title>Exibindo pop-up na página HTML</title>

  <style type="text/css">
  #popup{
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -75px 0 0 -150px;
  width: 300px;
  height: 150px;
  padding: 20px;
  border: solid 1px #331;
  background: #ffffd0;
  display: none;
  }
  </style>

  <script type="text/javascript">

   function fechar(){
     document.getElementById('popup').style.display = 'none';
   }

   function abrir(){
     document.getElementById('popup').style.display = 'block';
     setTimeout ("fechar()", 3000);
   }

  </script>

</head>

<body>

  <DIV id="popup"> 
   <p>Conteúdo do pop-up aqui.</p>
   <p><small class="fechar"><a href="javascript: fechar();">Fechar pop-up</a>


    </small></p>
   </DIV>

   <p><a href="javascript: abrir();">Abrir POPUP</a>
      <a href="javascript: fechar();">Fechar POPUP</a></p>

</body>

</html>

A propriedade CSS position:fixed manterá o conteúdo pop-up sempre visível, mesmo que o usuário role a página. O conteúdo é ocultado e omitido do processamento da página na linha diplay:none, que não serve apenas para ocultar o pop-up, mas garante que ele não afete o layout da página.
O programa javascript tem duas funções. A função fechar apenas retorna o pop-up ao seu estado original aplicando novamente o estilo CSS display:none;. A função abrir faz o inverso: muda a propriedade display para block, tornando o pop-up visível. Adicionalmente, coloquei um timeout na função que faz com que a função fechar() seja chamada após 3 segundo (3000 porque o tempo é passado em milissegundos)./a

Menu

Categorias

Postagens populares

Translate

Arquivo do blog

Criando anúncio efeito peel (Descascar) no topo da página

Adicionando Relógio Simples com JavaScript

Janela pop-up com CSS e javascript