Hoje uma amiga precisou configurar um flash marketing em seu website e queria saber como o mesmo poderia ficar sobre o layout.
Resolvi ajudá-la e disponibilizar esta informação para todos.
A solução é simples: Cria-se um elemento div que fique posicionado sobre os demais elementos da página. Isto é feito alterando-se o valor da propriedade z-index para um valor superior aos dos elementos já existentes. Em seguida posiciona-se o elemento no centro da janela do navegador. Para isso basta configurar o posicionamento top e left com 50% e depois subtrair metade do valor da largura e altura do elemento.
O código completo segue abaixo:
<html>
<head>
<style>
#divFlash
{
background-color:#ccc;
width:300px; height:300px;
position:fixed;
top:50%; left:50%;
margin-top:-150px;
margin-left:-150px;
z-index:4;
}
</style>
</head>
<body>
<div>Conteúdos do documento...</div>
<div id="divFlash">Cole o flash aqui...</div>
</body>
</html>
Para melhorar este exemplo basta implementar um botão para fechar o elemento. Nos artigos anteriores expliquei como exibir e ocultar elementos com JavaScript e JQuery.
Posted in: CSS, HTML.
Loading ...
Alguns dias atrás em um post expliquei como exibir ou ocultar elementos utilizando o JavaScript. Neste post vou exibir um exemplo de como fazer o mesmo procedimento com o uso do JQuery, biblioteca indispensável para os programadores client-side. Vamos ao exemplo:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
<!--
$(document).ready(function() {
$('#conteudo').hide();
$('#mostrar').click(function() {
$('#conteudo').show();
});
$('#esconder').click(function() {
$('#conteudo').hide();
});
})
//-->
</script>
</head>
<body>
<div id="conteudo">Aqui o conteúdo</div>
<a href="#" id="mostrar">Mostrar DIV</a> | <a href="#" id="esconder">Esconder DIV</a>
</body>
</html>
Observe que na linha 4 faço referência a biblioteca JQuery. Entre as linhas 5 e 19 fazemos o controle de exibição do elemento sendo que na linha 7, na função de carregamento da página ocultamos o elemento identificado como “conteudo”. Agora ficou fácil, linhas 10 e 14 tratam o evento clique exibindo ou ocultando o elemento.
Posted in: JavaScript.
Loading ...
A Mozilla acaba de liberar a nova versão do Firefox o qual estou testando ao escrever este post.
As novidades vão desde itens simples a itens mais complexos como os relacionados ao desempenho e segurança. E falando em desempenho, de acordo com as informações no próprio site da fundação, a versão atual consegue ser 20% mais veloz que a sua versão anterior. Também melhoraram a geração de gráficos e gerenciamento de memória.
O recurso que acredito ser um dos mais importantes é a capacidade de isolar-se dos bugs de plug-ins de terceiros. Na prática, quando um plug-in como o flash player por exemplo gera um travamento (crash), não é necessário reiniciar o navegador e sim o plug-in defeituoso.
Mais informações podem ser obtidas no site da fundação http://www.mozilla.com/pt-BR/firefox/features/
Posted in: Miscelânia.
Loading ...
É difícil um projeto de interface web em que você não precise esconder ou exibir elementos na tela. Este efeito pode ser construindo utilizando-se um Framework como o JQUERY. Vou demonstrar como fazer isso sem o uso de nenhum framework, ou seja, JavaScript puro.
Vamos lá!
Para o elemento que será exibido ou escondido será necessário aplicar-lhe um atributo ID. Na maioria das vezes estes elementos são divs.
Por exemplo:
<div id="box"><p>Conteúdo</p></div>
Claro que ao abrir este código no seu navegador o elemento estará visível. Caso deseje que ele esteja oculto deverá aplicar-lhe uma classe e estilizá-la com CSS.
Veja um exemplo:
<style>
.box{
display:none;
}
</style>
<div id="box" class="box1"><p>Conteúdo</p></div>
Agora o elemento não estará mais visível.
Vamos criar uma função genérica em JavaScript para determinar a visibilidade de um elemento qualquer:
<script>
function setDisplay(e,display){
document.getElementById(e).style.display = display;
}
</script>
E agora é só criar uma chamada para a função, passando para ela o elemento e o tipo de display desejado:
<a href="javascript:setDisplay('box1','block')">clique para ver o box</a>
Fácil hein!
Tente aplicar este código e qualquer dúvida postem aqui.
Posted in: JavaScript.
Loading ...
Para quem possui um blog ou site e disponibiliza código-fonte uma boa idéia é mostrar estes códigos com uma aparência diferenciada como número de linhas e realce de cor. A tempos que estou procurando algo simples e que funcionasse bem e a procura terminou quando entrei neste site: alexgorbatchev.com. A configuração é super simples, bastando adicionar alguns scripts e styles para sua page. Vale a pena! A qualidade dos meus posts deverá melhorar e o seu também 
Posted in: CMS, CSS, HTML, JavaScript.
Loading ...
Google lança seu diretório com fontes de alta qualidade para serem utilizadas através da Google Font API. A API foi desenvolvida para permitir o uso de fontes em documentos web independente no navegador.
A implementação é bem simples e existem todos os detalhes no site. Vou dar um pincelada aqui:
Em seu documento web, na região <head> crie um link para a referência básica da API e configure com as fontes que deseja utilizar no documento, separando cada uma delas com o símbolo pipe “|”.
Para utilizar a fonte basta usar o nome da fonte para a propriedade font-family. Segue um exemplo abaixo:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cantarell|Cardo" />
<style>
h1{
color:red;
font-family:'Cardo';
}
</style>
</head>
<body>
<h1>Google Font API</h1>
</body>
<html>
Visite o font list para obter a relação completa de fontes.
Na primeira avaliação este é o único ponto fraco. Ainda existem poucas fontes disponíveis.
Posted in: CSS, HTML, Miscelânia.
Loading ...
A Ford acaba de lançar um hotsite para promover o lançamento da EcoSport 2011 e mais do que isso, a interatividade dos visitantes que podem enviar fotos ou vídeos demonstrando seu espírito EcoSport. Vale a pena dar uma olhada. Acesse http://pratiqueecosport.com.br
O legal aqui é saber que o hotsite foi desenvolvido sobre o WordPress. Com um visual bem caprichado e com uso de vários plug-ins o trabalho ficou ótimo. Parabéns!
Posted in: CMS, Miscelânia.
Loading ...
Bem, o correto é tamanho da letra e não tamanho da fonte como vejo em alguns artigos por ai. Abaixo seque em exemplo simples em JavaScript para que você possa implementar em seu website o recurso que permite aumentar e diminuir o tamanho da letra de uma região da página. Antes que você me mande um comentário dizendo que faz isso de uma outra forma já digo: É claro que existem várias técnicas, mas esta eu mesmo implementei, nada de CTRL para lá ou CTRL para cá, e o melhor em 5 minutos .
<html>
<head>
<title>Tamanho da Letra</title>
<script language="javascript" type="text/javascript">
<!--//
function setTamanhoLetra(e,op) {
var limiteSuperior = 150;
var limiteInferior = 50;
var t = parseInt(document.getElementById(e).style.fontSize);
if (op == 1) { t = t + 10; } else { if (op == -1) { t = t - 10; } else { t = 100; } }
if (t > limiteSuperior) { t = limiteSuperior; } if (t < limiteInferior) { t = limiteInferior; }
document.getElementById(e).style.fontSize = t+'%';
}
//-->
</script>
</head>
<body>
<a href="javascript:setTamanhoLetra('textos',1);">A+</a>
<a href="javascript:setTamanhoLetra('textos',0);">A</a>
<a href="javascript:setTamanhoLetra('textos',-1);">A-</a>
<div id="textos" style="font-size:100%;">
<h1>Texto 1</h1>
<p>Texto 2</p>
</div>
</body>
</html>
Posted in: HTML, JavaScript.
Loading ...
Quando precisamos substituir uma letra ou palavra dentro de uma string em php podemos utilizar a função str_replace(). Abaixo segue um exemplo bem simples de sua aplicação:
<?php
$frase = "A cor é verde";
$novaFrase = str_replace("verde","vermelho",$frase);
echo $novaFrase;
?>
A função recebe três parâmetros, primeiro o que será procurado na string, depois por qual string será substituída e por fim em qual string será feita a pesquisa.
Posted in: PHP.
Loading ...
