Tutorial PHP – Limitar string no último espaço em banco de um certo tamanho

Eae rapaziada.

Tempo que não escrevo aqui.

Colocar um código bem simples para limitar uma string no último espaço em branco pra não ficar feio na hora de limitar um titulo por exemplo, cortando palavras no meio praticamente.

$aux = substr(strip_tags($string),0,80); // 80 é o limite de caracteres se a string tem mais que quarenta caracteres ele vai pegar do inicio (0) até o 80
$val = strrpos($aux," "); // Aqui ele acha o último espaço em branco da nossa string limitada em 80 caracteres
$stringlimitada = substr(strip_tags($string),0,$val)."..."; // Aqui ele limita ela no valor que nós achamos na linha anterior e adiciona os três pontinhos

Simples não?

Dúvidas é só comentar.

Até!

Tutorial PHP – Utilizar imagem do profile do twitter em aplicação PHP

Bom dia ae.

Escrevendo aqui um tutorial com poucas linhas que é bem útil quando você precisa utilizar a imagem do profile do twitter de alguém em uma aplicação sua em php para qualquer fim

O código é simples você vai acessar o xml que mostra tudo sobre o profile do usuário aqui no caso pegando só a url da imagem atual.

$caminho = "http://api.twitter.com/1/users/show.xml?screen_name=".$usuario; // Caminho do xml onde a variavel usuario é o login do usuário o meu no caso é jacasman
$xml = simplexml_load_file($caminho); // Aqui ele lê o xml retornando um objeto array
$fonte = str_replace("_normal","",$xml-> profile_image_url); // Aqui ele tira o _normal do nome da imagem dando acesso a imagem original
$ext2=array_reverse(explode("/",$fonte));//Aqui é um script meio tosco para pegar a extensão já que ela é variavel
$ext=explode(".",$ext2[0]);// Continuação do script
$caminho = "./perfil/temp/".date('dmYhis').".".$ext[1]; // Aqui é o caminho onde será salva a imagem que for criada
if($imagem = imagecreatefromjpeg($fonte)){// Aqui ele tenta criar como jpg
imagejpeg($imagem,$caminho);// se conseguir sallva a imagem na pasta
}elseif($imagem = imagecreatefromgif($fonte)){//mesma coisa para gif
imagegif($imagem,$caminho);
}elseif($imagem = imagecreatefrompng($fonte)){// mesma coisa para png
imagepng($imagem,$caminho);
}else{
return false;// retorna falso caso nenhuma das tentativas dê certo
}

É simples o código como se pode ver.

Dúvidas ou sugestões comentem ae

Até!

Tutorial JQuery – Paginação com javascript/JQuery

Eae passando aqui um tutorial de paginação com javascript da mesma forma que eu fiz com php

A paginação aqui está funcionando em uma tabela mas é só alterar para o que vc precisa ou dê uma olhada no código para poder usar no formato que você precisar

Bom são três partes o css

html{display:none;} table{margin:0;} table tr td{padding:2px 4px;} #btn a{color:#000;text-decoration:none;margin:0 4px;} #btn a:hover{text-decoration:underline;} #adsense{position:absolute;right:0;top:0;height:600px;width:120px;}

O HTML




Paginação JS

TESTE1	TESTE1	TESTE1	TESTE1	TESTE1	TESTE1
TESTE2	TESTE2	TESTE2	TESTE2	TESTE2	TESTE2
TESTE3	TESTE3	TESTE3	TESTE3	TESTE3	TESTE3
TESTE4	TESTE4	TESTE4	TESTE4	TESTE4	TESTE4
TESTE5	TESTE5	TESTE5	TESTE5	TESTE5	TESTE5
TESTE6	TESTE6	TESTE6	TESTE6	TESTE6	TESTE6
TESTE7	TESTE7	TESTE7	TESTE7	TESTE7	TESTE7
TESTE8	TESTE8	TESTE8	TESTE8	TESTE8	TESTE8
TESTE9	TESTE9	TESTE9	TESTE9	TESTE9	TESTE9
TESTE10	TESTE10	TESTE10	TESTE10	TESTE10	TESTE10
TESTE11	TESTE11	TESTE11	TESTE11	TESTE11	TESTE11
TESTE12	TESTE12	TESTE12	TESTE12	TESTE12	TESTE12
TESTE13	TESTE13	TESTE13	TESTE13	TESTE13	TESTE13
TESTE14	TESTE14	TESTE14	TESTE14	TESTE14	TESTE14
TESTE15	TESTE15	TESTE15	TESTE15	TESTE15	TESTE15
TESTE16	TESTE16	TESTE16	TESTE16	TESTE16	TESTE16
TESTE17	TESTE17	TESTE17	TESTE17	TESTE17	TESTE17
TESTE18	TESTE18	TESTE18	TESTE18	TESTE18	TESTE18

E o JavaScript usando jquery

$(document).ready(function(){
$('html').fadeIn();//Aqui mostra a página
var cont = 1;
$("table").find("tr[class='']").each(function(){
cont++;
if(cont >5){
$("table tr[name='"+cont+"']").css("display","none");
}
});//Aqui vai contar quantos elementos e mostrar os primeiros no caso 5 caso queira alterar a quantidade só trocar o 5 pelo número que vc deseja
var tag = "";
var num = 0;
if(cont%5 >0){
num = (cont/5)+1;
}else{
num = cont/5;
}//Caso tenha alterado o número acima você vai precisar de alterar aqui tbm
for(var i = 1; i < num;i++){
tag += ""+i+"";
}//Aqui ele gera os links da paginação
$("#btn").html(tag);//e aqui coloca na id btn
$("#btn a").live("click",function(){//Aqui é o evento de clique em um dos botões da paginação
var pos = parseInt($(this).attr("href"));
var max = pos*5;//Calcula o máximo
var min = max-5;//e o minimo que vai ser mostrado
var cont = 1;
$("table").find("tr[class='']").each(function(){//Aqui ele vai começar a esconder e mostrar o os elementos
if(cont > min){
if(cont <= max){
$("table tr[name='"+cont+"']").css("display","block");
}
}
cont ++;
});
return false;//Ele retorna falso
});
});

Bom é isso qualquer dúvida é só comentar aqui.

Para ver o exemplo online clique aqui

Tutorial Jquery js – completar campo valor com virgula e zeros

eae

Colocando um tutorial sobre uma coisa bem útil quando se trabalha com valores e o usuário é meio relaxado

Este script irá colocar a virgula e completar com zeros seu campo com preço

Tutorial Jquery – Manter o rodapé sempre embaixo

Boa tarde ae!

Vou colocar um tutorial bem útil aqui que faz com que o conteúdo do rodapé fique sempre embaixo ou depois do conteúdo com barra

ele fica atualizando o html de tempo em tempo e sempre colando o rodapé embaixo da página

Tutorial PHP MySql – Paginação

Bom dia.

Hoje vou colocar aqui um tutorial sobre paginação, que ensina como fazer uma listagem e a paginação dela com definição de link ativo.

Tutorial CSS – botão expansivel com bordas arredondadas

Boa tarde ae!

hoje colocando aqui um tutorial css para se fazer um botão que expande e diminui conforme o conteudo com bordas arredondadas que pode ser usado com link ou com input

Primeiro você ira precisar das imagens que deve ser a da esquerda com o tamanho da borda e a da direita com a borda e com uma extensão de uns 500px

essa é a imagem da borda esquerda

essa é a imagem da borda direita

No css vai ser usado um a e um span ou um input e um span

O da borda esquerda o css é esse

.borda-esq{
background:url(link para imagem) left no-repeat;
height:20px;
width:4px;
display:inline-block;
}

Css da borda direita é este

.borda-dir{
background:url(link para imagem) right no-repeat;
height:20px;
line-height:20px;
padding:2px 4px 0;
display:inline-block;
}

A montagem no HTML é assim como link

<a href=”#” class=’borda-esq’>
<span class=’borda-dir”>
Link
</span>
</a>

A montagem no HTMl como input você usa assim

<span class=’borda-esq’>
<span class=’borda-esq’ class=’borda-dir>
<input type=’submit’ value=’enviar’ />
</span>
</span>

O input você deve deixar sem background e sem bordas

Depois da montagem e do css é nessario ir adequando o código nem sempre ficará igual entre os dois browsers principais o ie e o firefox no caso de input por que o ie adiciona uns pixels a mais que tudo mundoq ue trabalha com web ama que acaba dando uma dor de cabeça bem grande

a questão de layout da escrita ou da posição do botão é facilmente ajustada com padding na classe da borda direita no caso da escrita e com margin na borda esquerda no caso de posicionamento line-height tbm pode resolver dependendo do caso

Bom é isso flwww rapaziada

Tutorial CSS JQuery – Aplicar Banner flutuante no site

Boa tarde ae!

Colocar um tutorial bem rápido sobre banner floater tipo uns que tem no uol as vezes da Dell que é um banner em flash que fica sobre o conteudo do site

Bom é bem básico é apenas um id css e uma função no JQuery

Primeiro a ID

#banner{
display:block;
position:absolute;//A posição fica absoluta
left:400px;//Aqui é a posição a esquerda
top:400px;//e aqui é em relação ao topo ai é só ajustar a posição que você irá precisar
}

Agora a função do JQuery

function retirar-banner{
$(“#banner”).css(“display”,”none”); //aqui você chama a função pelo flash do seu banner como um javascript normal
}

Agora você irá precisar do banner com um botão de fechar que irá chamar esta função e um timer se for preciso que chamar esta função para ele sumir

Até!

Tutorial PHP – função para upload e redimensionamento de imagens

Bom dia ae!

Bom vou postar aqui uma função boa para quem precisar de manipular imagens tipo criar um thumb que você irá usar em uma galeria por exemplo ou coisa do tipo

vamo as código

function upload_imagem($foto){//Chama a função somente passando o arquivo
$dir=”images/”;//Diretorio para onde vai a foto normal
if (move_uploaded_file($foto['tmp_name'], $dir.$nome)) {//Aqui é um crivo de se ele conseguir ou não fazer o upload
$img = imagecreatefromjpeg($dir. $nome);//Aqui ele cria uma imagem apartir da imagem que você acabou de fazer o upload
$he = imagesx($img);//Aqui ele pega a altura
$wi = imagesy($img);//e a largura da imagem
$x = ($he/100)*20;//Aqui ele calcula a altura no caso 20%
$y = $lar/100)*20;//mesma coisa a largura aqui vocês pode modificar para o tamanho que você irá precisar
$img_nova = imagecreatetruecolor($x,$y); //Agora ele cria o thumb de acordo com a largura e altura desejada
imagecopyresampled($img_nova, $img, 0, 0, 0, 0, $x, $y, $he, $wi); //E copia para o thumb a imagem grande com as dimensões que você escolheu
imagejpeg($img_nova, $dir.”thumb/”. $nome, 90);//Agora ele aloca o thumb na pasta thumb com qualidade 90
imagejpeg($img, $dir. $nome, 100);//e deixa a imagem grande na pasta images que foi definida ali em cima com qualidade 100
imagedestroy($img_nova);//Aqui ele destroi o cache das images
imagedestroy($img);
$estado= ’1′;//Aqui ele passa o estado 1 se der certo
}else{
$estado= ’2′;//e 2 se der errado
}
return $estado;//Aqui ele retorna o estado para você poder fazer uma mensagem para o usuário
}

Ela é realmente bem útil

Qualquer dúvida comenta ae ou mande um e-mail

até!

Tutorial CSS – Botão com sprite css

Eae rapaziada!

Bom faz um tempo que eu não posto aqui então vou colocar esse tutorial que é bem fácil e bem usado que é o truque de sprite no css é bem simples e pode ser visto em um monte de lugar é aquilo de quando você coloca o mouse em cima de um link ele muda a imagem sem precisar de carregar nem nada o truque está na posição do background como eu vou mostrar no código

a#face{ /*aqui eu to criando um id para o link */
width:30px;/*no caso aqui a imagem tem 30 de largura por*/
height:30px;/*30 de altura*/
display:block;/*aqui eu coloco para o link mostrar como um bloco de 30 por 30*/
float:left;
background:url(../images/face.gif) no-repeat;/*aqui eu seto a imagem do background*/
}

Agora o truque para a mudança de imagem e sem a necessidade de carregar por que a imagem vai estar com os dois estados já só vai ser mudada a posição dela como você vê aqui

a#face:hover{ /*quando o mouse passar em cima da imagem*/
background-position: 0 -32px;/*a posição do background fica na onde mostra a imagem que você irá querer exibir*/
}

O HTML é só um link com esta id por exemplo

<a href=”#” id=”face”>Link</a>

Bom é isso rapaziada não vou linkar aqui os fontes pq eu to sem host meu site foi pro beleleu por assim dizer por enquanto

até!

exemplo de como você deixará a imagem é tosca mais foi a que eu encontrei mais rápido no exemplo foque no home por exemplo tem ela em cima sem o roll over do mouse e em baixo com o roll over que vai ser o efeito que você acabou de ver no código css aqui

Clique aqui para ver

Obrigado ao richarbarros.com.br por hospedar essa imagem