Top 03 jQuery modal.
Muito tempo sem postar aqui… Mas vamos lá, irei colocar aqui 3 modais para vocês:
1. http://colorpowered.com/colorbox/
Galera foi mau por ter sumido, mas ando muito sem tempo… Irei disponibilizar em breve novos tutoriais de PHP, CSS, jQuery para vocês. Até a próxima!
Mudar o background do seu site com jQuery.
Olá a todos! Um efeito que hoje em dia esta bem na moda, é o usuário poder personalizar a cor do background do site por outras cores. Então lá vai este script bem simples porem funcional:
O html ficaria assim:
<a href="javascript:void(0)" onClick="cor('blue');">Azul</a>
<br />
<a href="javascript:void(0)" onClick="cor('red');">Vermelho</a>
Quando o usuário clicar no link irá mandar por parametro o que tiver dentro () do onClick.
<script>
function cor(cores){
$("body").css("background-color", cores);
}
</script>
Na função ele irá receber o parametro e mudar no .css do jQuery.
Muito simples não?
Abraços.
Menu slideDown e slideUp com jQuery.
Fala, galera tudo bom ? Estou meio sumido pois ando com o tempo muito curto. Desenvolvi estes dias um menu em jQuery com um efeito bem moderno o slideUp e o slideDown. Ele tambem possui a opção de colocar submenus com este mesmo efeito.
Vamos lá, primeiramente vamos criar o arquivo .css
<style>
.menu_barra_titulo{
font-size:14px;
width:178px;
min-height:22px;
color:#005335;
text-align:center;
padding:0px;
cursor:pointer;
}
.menu_barra_titulo:hover{
background-image:none;
cursor:pointer;
font-weight: bold;
}
#enquadramento-barra-titulo{
background-image:url(bt-out.jpg);
padding-top:8px;
text-align:center;
min-height:19px;
font-weight: bold;
}
#enquadramento-barra-titulo:hover{
background-image:url(bt-over.jpg);
padding-top:8px;
text-align:center;
min-height:19px;
}
.menu_item{
text-decoration:none;
background-image:url(comum-quadrado-verde-out.jpg);
margin: 0; padding:0;
width:172px;
}
.menu_item li:hover{
background-image:url(comum-quadrado-verde-in.jpg);
}
li.menu_linha{ padding-left:20px; }
a.linkmenu{
text-decoration:none;
color:#005335;
}
a.linkmenu:link {
text-decoration:none;
}
a.linkmenu:hover {
font-style:italic;
text-decoration:none;
color:#663333
}
.menu_barra_item{
}
.menu_subbarra_titulo{
padding:0px;
margin:0px;
width:174px;
}
</style>
Eu usei algumas imagens, mas vocês podem estar mudando elas perfeitamente.
Agora o arquivo html:
<div id="explorerColunaMenu"> <div class="menu_barra_titulo"> <div id="enquadramento-barra-titulo"> <b>MENU PAI</b> </div> <div class="menu_barra_item"> <ul class="menu_item"> <li><a href="#" class="linkmenu">Menu 1</a> </li> <li><a href="#" class="linkmenu">Menu 2</a> </li> </ul> </div> </div> <div class="menu_barra_titulo"> <div id="enquadramento-barra-titulo"> <b>MENU PAI</b> </div> <div class="menu_barra_item"> <ul class="menu_item"> <li class="menu_linha"><a href="#" class="linkmenu">Menu 1</a></li> <li class="menu_linha"><a href="#" class="linkmenu">Menu 2</a></li> </ul> </div> </div> <div class="menu_barra_titulo"> <div id="enquadramento-barra-titulo"><b>Caracterização</b></div> <div class="menu_barra_item"> <ul class="menu_item"> <div class="menu_subbarra_titulo"> <div id="enquadramento-barra-titulo">Perguntas Dinâmicas 1</div> <div class="menu_barra_item"> <ul class="menu_subitem"> <li class="menu_linha"><a class="linkmenu">Lista de Opções</a></li> <li class="menu_linha"><a class="linkmenu">Fase de licenciamento</a></li> </ul> </div> </div> </ul> </div> <div class="menu_barra_item"> <ul class="menu_item"> <div class="menu_subbarra_titulo"> <div id="enquadramento-barra-titulo">Perguntas Dinâmicas 2</div> <div class="menu_barra_item"> <ul class="menu_subitem"> <li class="menu_linha"><a class="linkmenu">Lista de Opções</a></li> <li class="menu_linha"><a class="linkmenu">Fase de licenciamento</a></li> </ul> </div> </div> </ul> </div> </div> </div>
E por fim o código JS:
jQuery(document).ready(function(){
jQuery(".menu_barra_item").hide();
jQuery(".menu_subitem").hide();
jQuery(".menu_barra_titulo").click(function(){
jQuery(".menu_barra_item").slideUp("fast");
jQuery(this).find(".menu_barra_item").slideDown("fast");
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('border-left','1px solid #3e664c');
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('border-top','1px solid #3e664c');
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('border-bottom','1px solid #3e664c');
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('font-weight','normal');
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('text-color','1px solid #3e664c');
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('background-color','#e3fedd');
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('background-image','url()');
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('text-align','left');
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('padding-left','15px');
// caso queira formatar os sub-menus
//jQuery('.menu_subbarra_titulo').children('div.menu_barra_item').css("display","none");
});
jQuery(".menu_subbarra_titulo").click(function(){
jQuery(".menu_subitem").slideUp("fast");
jQuery(this).find(".menu_subitem").slideDown("fast");
});
});
Vocês vão precisar da api jquery que se encontra neste site para download: http://jquery.com/
Vocês podem otimizar a vontade pois fiz meio rápido o código, da para colocar slideToggle etc… Mas espero que seja útil para vocês!
Até a próxima pessoal!
Mega Man – O Filme
Acabei de achar na internet, um filme do Mega Man feito por um fãn, o filme tem 90 minutos. Para assistir o video, clique aqui.
Menu DROPDOWN com CSS e HTML.
Este é uma boa dica, pois este menu não usa JAVASCRIPT, é compatível com inúmeros navegadores inclusive o IE 6.0, segue o code HTML:
<div class="wrapper">
<div class="mainmenu">
<ul class="menu">
<li class="list"><a class="category" href="#Home">Home</a></li>
</ul>
<ul class="menu">
<li class="list">
<a class="category" href="#about">About Us »</a>
<ul class="submenu">
<li><a href="#about1">About link 1</a></li>
<li><a href="#about2">About link 2</a></li>
<li><a href="#about3">About link 3</a></li>
<li><a href="#about4">About link 4</a></li>
<li><a class="endlist" href="#about5">About link 5</a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li class="list">
<a class="category" href="#articles">Articles »</a>
<ul class="submenu">
<li><a href="#articles1">Articles link 1</a></li>
<li><a href="#articles2">Articles link 2</a></li>
<li><a href="#articles3">Articles link 3</a></li>
<li><a class="endlist" href="#articles4">Articles link 4</a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li class="list">
<a class="category" href="#news">News »</a>
<ul class="submenu">
<li><a href="#news1">News link 1</a></li>
<li><a href="#news2">News link 2</a></li>
<li><a class="endlist" href="#news3">News link 3</a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li class="list"><a class="category" href="#donate">Donate</a></li>
</ul>
<ul class="menu">
<li class="list"><a class="category" href="#contact">Contact</a></li>
</ul>
</div>
</div>
E agora o código em CSS:
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
color: #666;
background-color: #fff;
margin-left: 20px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
a, a:hover, a:active, a:focus {
outline:0;
direction:ltr;
}
.wrapper {
position:relative; height:25px;
}
.mainmenu {
position:absolute;
z-index:100;
font-family:Verdana, Geneva, sans-serif;
font-weight:normal;
font-size:90%;
line-height:25px;
left:50%;
margin-left:-303px;
width:606px;
}
.ul.menu {
padding:0;
margin:0;
list-style:none;
width:100px;
overflow:hidden;
float:left;
margin-right:1px;
}
ul.menu a {
background:#369;
text-decoration:none;
color:#fff;
padding-left:5px;
}
ul.menu li.list {
float:left;
width:250px;
margin:-32767px -125px 0px 0px;
background:url(images/top1.png) no-repeat left bottom;
}
ul.menu li.list a.category {
position:relative;
z-index:50;
display:block;
float:left;
width:120px;
margin-top:32767px;
background:transparent;
}
ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {
margin-right:1px;
background-image:url(images/tophover1.png);
background-repeat:no-repeat;
background-position:left top;
}
ul.submenu {
float:left;
padding:25px 0px 0px 0px;
margin:0;
list-style:none;
background-image:url(images/tophover1.png);
background-repeat:no-repeat;
background-position:left top;
margin:-25px 0px 0px 0px;
}
ul.submenu li a {
float:left;
width:120px;
background:#369;
clear:left;
color:#fff;
}
ul.submenu li a.endlist {
background:url(images/bottom1.png);
}
ul.submenu li a.endlist:hover,
ul.submenu li a.endlist:focus,
ul.submenu li a.endlist:active {
background:url(images/bottomhover1.png);
}
ul.submenu a:hover,
ul.submenu a:focus,
ul.submenu a:active {
background:#900;
margin-right:1px;
color:#fff;
}
O resultado irá ser mais ou menos este aqui:
Para pegar este arquivo, clique aqui.
Abraços até a próxima.
IE 4.0 na frente na guerra dos browsers. Será?
Irei começar a postar diversas notícias antigas relacionadas a informatica a fins de curiosidades. Para começar esta nova categoria, irei falar sobre a guerra dos navegadores que acontecia em 1998.
Noticia retirada do Internet Business – Número 6 Fevereiro de 1998
“Enquanto desejamos paz e harmonia na entrada do novo ano, a guerra continua quente no front dos browsers. O último estudo divulgado sobre o mercado dos programas de navegação pela Internet aponta que o IE, da Microsoft, como novo lider da disputa com 63,3% de usuarios contra 35,¨% do Netscape da Navigadot. A pesquisa, realizada pela Positive Support Review, contradiz os numeros publicados recenetemente pela empresa Dataquest, que ainda colocava a Netscape em posicao de vantagem, com 57% contra 40% da MS.
O problema é que nao foi divulgada a metodologia utilizada pela PSR para chegar a esse resultado. A netscape já anunicou que nao acredita no estudo. Com isso, abre uma polemica a respeito da confiabilidade das pesquisas sobre a distribuicao do mercado de browsers. A disparidade dos numero acabe se assemelhando um pouco as pesquisas de opinião em época de eleições. Afinal de contas, quem está na frente?”
Enfim, quem será que ganhou? Não preciso nem responder. Acho que a primeira pesquisa estava correta. Coloquei tambem uma série de videos falando sobre esta guerra, para acessar, clique aqui.
Porque o “\n” não está quebrando a linha?
Olá, estes dias meu colega me perguntou isto…
Vamos a estes exemplos:
<?php echo "Exemplo 1 \n Exemplo2"; ?>
O que o navegador mostrou?
R: Exemplo 1 Exemplo 2
No HTML, textos com linhas diferentes não são linhas com quebras. Somente no HTML você irá ver elas com quebra, assim:
Exemplo 1
Exemplo 2
Se você quiser usar o quebra de linha visualmente use assim:
<?php echo "Exemplo 1 <br /> Exemplo 2"; ?>
Pronto, irá te mostrar perfeitamente.
Até a próxima pessoal!
Fopen, Fread, Fwrite
Irei falar neste post aqui um pouco destes 4 comandos:
FOPEN
É um comando para abrir, ler, gravar um arquivo. O seu modo de utializar é:
int fopen ( string filename, string mode [, int use_include_path [, resource zcontext]])
Você pode especificar o metodo o mode de acesso, segue eles:
- ‘r’ – Abrir somente para leitura; coloca o ponteiro de arquivo no começo do arquivo.
- ‘r+’ – Abrir para leitura e gravação; colocar o ponteiro de arquivo no começo do arquivo.
- ‘w’ – Abrir somente para gravação; colocar o ponteiro de arquivo no começo do arquivo e truncar o arquivo para tamanho zero. Se o arquivo não existir, tentar cria-lo.
- ‘w+’ – Abrir para leitura e escrita; colocar o ponteiro de arquivo no início do arquivo e truncar o arquivo para tamanho zero. Se o arquivo não existir, tentar cria-lo.
- ‘a’ – Abrir o arquivo somente para escrita; colocar o ponteiro de arquivo no fim do arquivo. Se o arquivo não existe, tentar cria-lo.
- ‘a+’ – Abrir o arquivo para leitura e gravação; colocar o ponteiro no fim do arquivo. Se o arquivo não existe, tentar cria-lo.
Exemplos de FOPEN:
<?
$fp = fopen ("/home/rasmus/file.txt", "r");
$fp = fopen ("/home/rasmus/file.gif", "wb");
$fp = fopen ("http://www.example.com/", "r");
$fp = fopen ("ftp://user:password@example.com/", "w");
?>
FREAD:
Lê até length bytes do ponteiro de arquivo informado em handle. A leitura é interrompida quando length bytes foram lidos ou o fim do arquivo (eof) foi alcançado, ou (para streams de rede) quando um pacote se torna disponível, o que ocorrer primeiro.
<? // ler o conteúdo do arquivo para uma string $filename = "/usr/local/qualquer.txt"; $handle = fopen ($filename, "r"); $conteudo = fread ($handle, filesize ($filename)); fclose ($handle); ?>
FWRITE:
Grava os conteúdos de string para o stream de arquivo apontado por handle. Se o argumento comprimento é dado, a gravação irá parar depois de que comprimento bytes foram escritos ou o fim da string é alcançada, o que ocorrer primeiro.
<?
$filename = 'teste.txt';
$somecontent = "Acrescentando isto no arquivo\n";
// Tendo certeza que o arquivo existe e que há permissão de escrita primeiro.
if (is_writable($filename)) {
// Em nosso exemplo, nós estamos abrindo $filename em modo de append (acréscimo).
// O ponteiro do arquivo estará no final dele desde
// que será aqui que $somecontent será escrito com fwrite().
if (!$handle = fopen($filename, 'a')) {
print "Erro abrindo arquivo ($filename)";
exit;
}
// Escrevendo $somecontent para o arquivo aberto.
if (!fwrite($handle, $somecontent)) {
print "Erro escrevendo no arquivo ($filename)";
exit;
}
print "Sucesso: escrito ($somecontent) no arquivo ($filename)";
fclose($);
} else {
print "The file $filename is not writable";
}
?>
4 Exemplos de menu em JQUERY
Quatro exemplos de menu feitos com JQUERY:
Número 1: Lavalamp MENU:
LINK: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
Número 2: Smooth menu
LINK: http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/
Número 3: Horizontal tooltips menu
Link: http://www.queness.com/post/556/jquery-horizontal-tooltips-menu-tutorials
Número 4: Dropdown menu
Link: http://www.clarklab.net/blog/posts/animated-drop-down-menu-with-jquery/
Forçar a abrir um arquivo como download.
Olá, achei estes dias um tutorial muito interessante pois estava justamente procurando algo sobre isto. É como forçar a abrir um arquivo como download (com aquela telinha de download de open, save…) em php.
É o seguinte:
Na página do download, você coloca assim:
<a href='download.php?file=CAMINHO_DO_ARQUIVO
Na página download.php
<?php
$file = $_GET['file']; // pega o conteudo do $file.
header("Content-Type: application/save");
header("Content-Length:".filesize($file));
header('Content-Disposition: attachment; filename="' . $file . '"');
header("Content-Transfer-Encoding: binary");
header('Expires: 0');
header('Pragma: no-cache');
// nesse momento ele le o arquivo e envia
$fp = fopen("$file", "r");
fpassthru($fp);
fclose($fp);
?>
E é isto ai, bastante útil para quando alguem quer forçar o download. Abraços, até a próxima.
O Mundo Do Mário 