Home Blog Portfólio Projetos Downloads Sobre
Últimas Atualizações


Pelo Mundo
Android Police
Gizmodo
Buscar no blog por: Assinar feed

Como montar uma árvore de aquivo

quarta-feira, 20 de fevereiro de 2013 Tags: Árvore de arquivos, mapeamento de pasta

Graças a nova versão do PHP 5 podemos fazer um árvore de arquivo com bem mais facilidade... lembra do opendir ?! então não vamos mais usa-lo. E ai vai como se faz pra fazer isso.


<?php
 
function treeMaps($path$ind=0){
  
$pathMap scandir($path);

  foreach(
$pathMap as $file){
    
$pf "$path/$file";
    if(
is_dir($pf)){
     if( 
$file != "." && $file != ".."){
      print 
str_repeat(' ',$ind)."+$pf\n";
       
treeMaps("$pf"$ind+1);
     }
    }else
      print 
str_repeat(' ',$ind).($ind==0?' ':"'- ")."$pf\n";
  }
 }
treeMaps(".");
?>

O código acima mapea todas as pastas e subpastas de todos os directorios

Como fazer uma simples animação em HTML5

sexta-feira, 23 de agosto de 2013 Tags: Animação HTML5, HTML5, Canvas

Fala galera, blz? Faz um tempo que eu não posto nada e sempre me perguntam como se faz Animação em HTML5.

Vou monstra uma simples animação que vai abrir os olhos de quem está iniciando no HTML5.

O experimento é simples. Desenhar uma bola na tela que movimentará batendo nas bordas.

Exemplo 1
<!DOCTYPE html>
<
html>
 <
head>
  <
title>www.flaviosilva.net</title>
 </
head>
 <
body>
  <
canvas width=400 height=300 id="teste" style="border:1px solid #d3d3d3;">
   
Este Browser não suporta HTML5
  
</canvas>

  <
script>
//Retorna o elemento Canvas
   
function e(n){ return document.getElementById(n)}

//Limpa a tela, desenhando um novo retângulo vazio nesta.
   
function clear(){e("teste").getContext("2d").clearRect(0,0,_width,_height)}

//Define o tamanho da tela
   
var _width window.innerWidth 30;
   var 
_height window.innerHeight -30;

   
e("teste").width _width;
   
e("teste").height _height;

//Cria um número aleatório para desenhar o primeiro circulo;
   
var x=Math.floor((Math.random()*_width/2)+40),
       
y=Math.floor((Math.random()*_height/2)+40);

//Variáveis de incrementação
   
var sx=1sy=1;

//Desenha o primeiro circulo
   
var ctx e("teste").getContext("2d");
   
ctx.beginPath();
   
ctx.arc(sx,sy,40,0,2*Math.PI);
   
ctx.stroke();

//Loop de animação
   
function loop(){
    if(
x>_width-40||x<40)sx*=-1;
    if(
y>_height-40||y<40)sy*=-1;
    
x+=sx;y+=sy
    clear
();
    var 
ctx=e("teste").getContext("2d");
    
ctx.beginPath();
    
ctx.arc(x,y,40,0,2*Math.PI);
    
ctx.stroke();

    
setTimeout("loop()"10)
   }
loop();

  
</script>

 </body>
</html>


Exemplo 2 - Mais de um elemento
<!DOCTYPE html>
<
html>
 <
head>
  <
title>www.flaviosilva.net</title>
 </
head>
 <
body>
  <
canvas width=400 height=300 id="teste" style="border:1px solid #d3d3d3;">
   
Este Browser não suporta HTML5
  
</canvas>

  <
script>
//Retorna o elemento Canvas
   
function e(n){ return document.getElementById(n)}

//Limpa a tela, desenhando um novo retângulo vazio nesta.
   
function clear(){e("teste").getContext("2d").clearRect(0,0,_width,_height)}

//Define o tamanho da tela
   
var _width window.innerWidth 30;
   var 
_height window.innerHeight -30;

   
e("teste").width _width;
   
e("teste").height _height;

//Cria um número aleatório para desenhar o primeiro circulo;
   
var x=Math.floor((Math.random()*_width/2)+40),
       
y=Math.floor((Math.random()*_height/2)+40);

//Variáveis de incrementação
   
var sx=1sy=1;

//Desenha o primeiro circulo
   
var ctx e("teste").getContext("2d");
   
ctx.beginPath();
   
ctx.arc(sx,sy,40,0,2*Math.PI);
   
ctx.stroke();

//Loop de animação
   
function loop(){
    if(
x>_width-40||x<40)sx*=-1;
    if(
y>_height-40||y<40)sy*=-1;
    
x+=sx;y+=sy
    clear
();
    var 
ctx=e("teste").getContext("2d");

    
ctx.beginPath();
    
ctx.arc(x,y,40,0,2*Math.PI);
    
ctx.stroke();

//Adicionando um efeito só para desbloquear a imaginação
    
for(i=.5;i>.0;i-=.2){
     
ctx.beginPath();
     
ctx.arc(x*i,y*i,40*i,0,2*Math.PI);
     
ctx.stroke();
    }

    
setTimeout("loop()"10)
   }
loop();

  
</script>

 </body>
</html>


Lembre-se que HTML5 é suportados em quase todos os navegadores mais conhecido, que estejam atualizados.

Como mover um objeto em HTML (Drag)

quarta-feira, 20 de fevereiro de 2013 Tags: Drag, Mover Objetos HTML, onDrag, onStopDrag

Nesse script vamos ver como faz para mover um objeto, seja ele uma DIV, SPAN, OBJECT, o famoso Drag, mas vamos compriender exatamente como isso acontece. A função aqui explicada vai da um abrangencia bem maior, e nos ajudar a mecher em HTML5, que será o nosso próximo passo.

Vou precisa de uma função attachEvent, fora essa o restante será criado por nós. Intaum vamos lá:
Para mover um objeto eu preciso somente dizer que ele tem o posicionamento absoluto e definir o Top(y) e o Left(x). Em outras palavras pego a cordenada do mouse é transformo em Top/Left


Criando o Objeto para guardar o local e ações do mouse
function fsdev(){
 
this.FSDEV = {
  
Mouse:{
   
'x'0,
   
'y'0
  
},
  
Drag:{
         
statusfalse,  //Saber se iniciou ou nao o Drag
         
alignfalse,   //Alinha o objeto ao centro do mouse quando clicado
         
elementnull,  //Objeto
         //As funções onDrag, onDragStop são de Eventos "ouvintes"
        
onDragStart: function(){
        },
        
onDrag: function(){
        },
        
onDragStop: function(){
        },
        
_onStart: function(e){
          
this.status true;
          
this.element e
          this
.onDrag();
          
document.onselectstart = function(){return false};
          
e.FSDEV.Drag.onDragStart();
        },
        
_onDrag: function(){
         
this.element.FSDEV.Drag.onDrag();
        },
        
_onStop: function(){
          
document.onselectstart = function(){return true};
          
this.status false;
          
this.onDragStop();
          
this.element.FSDEV.Drag.onDragStop();
          
this.element null;
        }        
  },
  
leftPos: function(ref){
   var 
valor ref.offsetLeft;
   while((
ref ref.offsetParent) != null)valor += ref.offsetLeft;
   return 
valor;
  },
  
topPos: function(ref){
   var 
valor ref.offsetTop;
   while((
ref ref.offsetParent) != null)valor += ref.offsetTop;
   return 
valor;
  }          
 }
 
//Retornamos o objeto criado. Por que criamos uma função para isso, não só um objeto, por que assim nos 
 //podemos reinstanciar um objeto, ou seja usa-lo mais de uma vez de formas diferentes
 
return this.FSDEV;
}
// Atribuindo o objeto para uma variável global
FSDEV = new fsdev();


Mapeando local do Mouse
attachEvent(document"mousemove",
 function(
ev){
  
FSDEV.Mouse['x'] = (ev.pageX) ? ev.pageX event.clientX document.body.scrollLeft;
  
FSDEV.Mouse['y'] = (ev.pageY) ? ev.pageY event.clientY document.body.scrollTop;

  if(
FSDEV.Drag.status && (element FSDEV.Drag.element)){
   
   
FSDEV.Mouse['x']-element.FSDEV.Mouse['x'];
   
FSDEV.Mouse['y']-element.FSDEV.Mouse['y'];
   
   if(
element.FSDEV.Drag.align){
    
-= FSDEV.leftPos(element.offsetParent);
    
-= FSDEV.topPos(element.offsetParent);
   }

   
element.style.top y;
   
element.style.left x;
   if(
element.style.top!=y||element.style.left!=x)FSDEV.Drag._onDrag();
  }
});


Criando a função de movitentação, o famoso Drag
function Drag(e,align){
 if(!
e.FSDEV)e.FSDEV = new fsdev(); //Recriamos o mesmo objeto dentro da Tag
 
if(align)e.FSDEV.Drag.align true;  //Adicionamos se ele vai centralizar o clicar o mouse
 
e.style.cursor 'move';    //Definimos o cursor do mouse com setinhas para todos os lados
 
e.style.position 'absolute';  //E dizemos que a posição é absoluta para então podermos mover

/*
 Ao pressionamos o botão do mouse em cima do objeto iniciamos a movimentação do mesmo
 e ao solta-lo, pararemos a ação do Drag
*/
 
 
attachEvent(e"mousedown",
  function(
ev){
   
e.FSDEV.Mouse['x'] = (e.FSDEV.Drag.align) ? e.offsetWidth/2  FSDEV.Mouse['x']-e.offsetLeft
   
e.FSDEV.Mouse['y'] = (e.FSDEV.Drag.align) ? e.offsetHeight/2  FSDEV.Mouse['y']-e.offsetTop;

   if(
e.FSDEV.Drag.align){
    
e.style.top FSDEV.Mouse['y']-e.FSDEV.Mouse['y']-FSDEV.topPos(e.offsetParent);
    
e.style.left FSDEV.Mouse['x']-e.FSDEV.Mouse['x']-FSDEV.leftPos(e.offsetParent);
   }
                                        
   
FSDEV.Drag._onStart(e);
  });
 
attachEvent(e"mouseup",
  function(){
   
FSDEV.Drag._onStop();
  });
}


Protinho já temos tudo que precisamos para mover nosso objeto(<div>, <span>). Mas e ai como funciona?! É simples
Drag(document.getElementById('exemplo1'));

Exemplo 1
<html>
 <
head>
  <
title>www.flaviosilva.net</title>
  <
script src="http://flaviosilva.net/external/scripts/flaviosilva.net.Drag.js"></script>
 </head>
 <body>
  Simples movimento de objeto
  <br>
  <div id="exemplo1" style="width:100px; height:100px; background-color: black;">
  </div>
  <script>Drag(document.getElementById('exemplo1'));</script>
 </body>
</html>


Exemplo 2
<html>
 <
head>
  <
title>www.flaviosilva.net</title>
  <
script src="http://flaviosilva.net/external/scripts/flaviosilva.net.Drag.js"></script>
 </head>
 <body>
  Centralizando o objeto em referência ao mouse<br>
  <div id="exemplo2" style="width:100px; height:100px; background-color: black;">
  </div>
  <script>Drag(document.getElementById('exemplo2'), true);</script>
 </body>
</html>


Exemplo 3
<html>
 <
head>
  <
title>www.flaviosilva.net</title>
  <
script src="http://flaviosilva.net/external/scripts/flaviosilva.net.Drag.js"></script>
 </head>
 <body>
  Pegando os eventos realizados pelo mouse<br>
  <div>
   <div id="infor">Status Mouse</div>
   <div id="posd">Posição do mouse no objeto</div>
   <div id="posm">Posição real do mouse</div>      
  </div>
  <div id="exemplo3" style="width:100px; height:100px; background-color: black; color: white;">
  </div>
  <script>
  objeto = document.getElementById('exemplo3');  
  Drag(objeto);
  
  objeto.FSDEV.Drag.onDrag = function(e){
   document.getElementById('infor').innerHTML = "Status: Pressionado";
   document.getElementById('posd').innerHTML = "Posição do mouse no objeto: "+objeto.FSDEV.Mouse['x'] + "x" + objeto.FSDEV.Mouse['y'];
   document.getElementById('posm').innerHTML = "Posição real do mouse: "+FSDEV.Mouse['x'] + "x" + FSDEV.Mouse['y']
  }
  objeto.FSDEV.Drag.onDragStart = function(){
   document.getElementById('infor').innerHTML = "Status: Clicado";
   document.getElementById('posd').innerHTML = "Posição do mouse no objeto: "+objeto.FSDEV.Mouse['x'] + "x" + objeto.FSDEV.Mouse['y'];
   document.getElementById('posm').innerHTML = "Posição real do mouse: "+FSDEV.Mouse['x'] + "x" + FSDEV.Mouse['y']
  }
  objeto.FSDEV.Drag.onDragStop = function(){
   document.getElementById('infor').innerHTML = "Status: Não clicado";
  }    
  
  </script>
 </body>
</html>

Retorno automático do paypal

quarta-feira, 04 de abril de 2012 Tags: Paypal, Retorno automatico, NIP, NPI

E sempre um pouco complicado fazer integração backend com servidores de compra. O PayPal não disponibiliza, a menos não encontrei uma API para fazer o processo de validação de forma correta. Então só nos basta criar. E ai vai uma pequena classe que valida os dados retornados pelo PayPal.


<?php
  
/**
   * Validação dos dados paypal
   *
   * @author: Flavio Silva
   * @site: www.flaviosilva.net
   * @version: 1.0
   * @04/04/2012 - 10:07
   */
   

   
class PayPalNIP{
    private 
$timeout 20// Timeout em segundos

    
public function notificationPost() {
        
$postdata 'cmd=_notify-validate';
        foreach (
$_POST as $key => $value) {
            
$valued    $this->clearStr($value);
            
$postdata .= "&$key=$valued";
        }
        return 
$this->validar($postdata);
    }

    private function 
clearStr($str) {
        if (!
get_magic_quotes_gpc()) {
            
$str addslashes($str);
        }
        return 
$str;
    }   

    private function 
validar($data){
        
$curl curl_init();
        
curl_setopt($curlCURLOPT_URL"https://www.paypal.com/cgi-bin/webscr");
        
curl_setopt($curlCURLOPT_POSTtrue);
        
curl_setopt($curlCURLOPT_POSTFIELDS$data);
        
curl_setopt($curlCURLOPT_RETURNTRANSFERtrue);
        
curl_setopt($curlCURLOPT_HEADERfalse);
        
curl_setopt($curlCURLOPT_TIMEOUT$this->timeout);
        
curl_setopt($curlCURLOPT_SSL_VERIFYPEERfalse);
        
$result trim(curl_exec($curl));
        
curl_close($curl);
        return 
$result;    
    }
   }
   
   if(
count($_POST) > 0){
    
$ppNIP = new PayPalNIP();
    
$valido $ppNIP->notificationPost();

    if(
$valido=="VERIFIED"){
// Código validado já pode fazer a atualização dos seus dados no seu DB
    
}else{
// A requisição feita, pode ser fraudulenta.
    
}
   }else{
// Nenhum POST definido.
   
}
?>


Para ativar o retorno automático acesse sua conta paypal no menu:
minha conta / perfil / mais opções / minhas ferramentas de venda / Notificações de pagamento instantâneo
e digite a url em que se encontra o arquivo que fará a atualização.

Usando o FFmpeg para criar uma imagem

sexta-feira, 09 de março de 2012 Tags: thumbnail, condificação, mp4, flv, video, printscreen

Aqui ta sanada um dúvida que muita gente tem. Como criar uma imagem de um vídeo, igual ao youtube. É bem mais simples do que se imagina, primeiro você precisa instalar o FFmpeg faça o download do arquivo e descompacte os arquivos a pasta
c:\window\system32
avcodec-51.dll
avformat-51.dll
avutil-49.dll
pthreadGC2.dll

e na pasta php\ext do seu servidor web o arquivo.
php_ffmpeg.dll

Feito isso, ainda precisamos adicionar a extensão no php, abra a pasta php\php.ini e adicione o seguinte comando
extension=php_ffmpeg.dll


Prontinho, agora é só reiniciar o servidor web.

Fiz um classe para fazer alguns teste e vou passar a vocês simples, fácil e rápido.
<?php
extension_loaded
('ffmpeg') or die('Error in loading ffmpeg');

class 
ffmpeg{

 var 
$ffmpeg;
 var 
$size;

 public function 
setVideo($file$path=""){
  
$this->ffmpeg = new ffmpeg_movie("{$path}{$file}");
  
$this->size = array('width'=>$this->ffmpeg->getFrameWidth(), 'height'=>$this->ffmpeg->getFrameHeight());
 }

 function 
createThumb($posFrame$name$size=null){
  if(
$posFrame $this->getFrameCount())$posFrame $this->getFrameCount();
  
$frame $this->ffmpeg->getFrame($posFrame);
  
$gd_image $frame->toGDImage();
  
imagejpeg($gd_image"$name.jpg");
  
imagedestroy($gd_image);
  
  if(
$size!=null){
   
$thumb imagecreatetruecolor($size['width']|$size[0], $size['height']|$size[1]);
   
$image imagecreatefromjpeg("$name.jpg");
   
imagecopyresampled($thumb$image0000$size['width']|$size[0], $size['height']|$size[1], $this->size['width'], $this->size['height']);
   
imagejpeg($thumb"$name.jpg"100);
   
imagedestroy($thumb);
  }
 }
 
 function 
getDuration(){
  return 
$this->ffmpeg->getDuration();
 }
 
 function 
getFrameCount(){
  return 
$this->ffmpeg->getFrameCount();
 }

}
//Criação do objecto
$ffmpeg = new ffmpeg();
//Define o video a ser buscado, primeiro o nome do video depois o pasta <- o caminho da pasta deve ser absoluto
$ffmpeg->setVideo("rootsoffaith4.mp4","C:/xampp/htdocs/ffmpeg/");
//Criar uma imagem a partir do quadro do filme
#$ffmpeg->createThumb(5, "nome") cria uma imagem sem redimensionar;
$ffmpeg->createThumb(5"nome", array(150,80));
?>


E ai vai funções que facilitaram e implementaram ainda mais o seu desenvolvimento.

"getDuration: " . $ffmpeg->ffmpeg->getDuration() .
"getFrameCount: " . $ffmpeg->ffmpeg->getFrameCount() .
"getFrameRate: " . $ffmpeg->ffmpeg->getFrameRate() .
"getFilename: " . $ffmpeg->ffmpeg->getFilename() .
"getComment: " . $ffmpeg->ffmpeg->getComment() .
"getTitle: " . $ffmpeg->ffmpeg->getTitle() .
"getAuthor: " . $ffmpeg->ffmpeg->getAuthor() .
"getCopyright: " . $ffmpeg->ffmpeg->getCopyright() .
"getArtist: " . $ffmpeg->ffmpeg->getArtist() .
"getGenre: " . $ffmpeg->ffmpeg->getGenre() .
"getTrackNumber: " . $ffmpeg->ffmpeg->getTrackNumber() .
"getYear: " . $ffmpeg->ffmpeg->getYear() .
"getFrameHeight: " . $ffmpeg->ffmpeg->getFrameHeight() .
"getFrameWidth: " . $ffmpeg->ffmpeg->getFrameWidth() .
"getPixelFormat: " . $ffmpeg->ffmpeg->getPixelFormat() .
"getBitRate: " . $ffmpeg->ffmpeg->getBitRate() .
"getVideoBitRate: " . $ffmpeg->ffmpeg->getVideoBitRate() .
"getAudioBitRate: " . $ffmpeg->ffmpeg->getAudioBitRate() .
"getAudioSampleRate: " . $ffmpeg->ffmpeg->getAudioSampleRate() .
"getVideoCodec: " . $ffmpeg->ffmpeg->getVideoCodec() .
"getAudioCodec: " . $ffmpeg->ffmpeg->getAudioCodec() .
"getAudioChannels: " . $ffmpeg->ffmpeg->getAudioChannels() .
"hasAudio: " . $ffmpeg->ffmpeg->hasAudio();

Localizar um objeto a partir da sua classe

quinta-feira, 08 de março de 2012 Tags: getElementsByClassName

Essa é um função muito válida, quando você não declara um objeto com 'id' ou 'name', mas tem uma classe definida. A pergunta é:
Como localizar um objeto tendo apenas sua classe?
e eis ai uma função que retorna um array com todos os objetos pertencentes a tal classe.

document.getElementsByClassName = function(className){
    var 
hasClassName = new RegExp("(?:^|\s)" className "(?:$|\s)");
    var 
allElements document.getElementsByTagName("*");
    var 
results = [];
    var 
element;
    for (var 
0; (element allElements[i]) != nulli++) {
        var 
elementClass element.className;
        if (
elementClass && elementClass.indexOf(className) != -&& hasClassName.test(elementClass))
            
results.push(element);
    }
    return 
results;
 }


Como Usar
<html>
 <
body>
  <
class='fs'>http://www.flaviosilva.net</a>
 
</body>
 <
script>
  var 
objetos document.getElementsByClassName("fs")
  
alert(objetos[0])
 
</script>
</html>

Como fazer upload de arquivos via php

sexta-feira, 10 de fevereiro de 2012 Tags: Upload, move_uploaded_file

Acho que ninguém enfrenta problemas de como fazer uploads de arquivos, mas cá entre nós é muito chato toda vez ter que fazer a função fica chato... então resolvi criar uma classe que faça isso pra mim, ficou dessa forma:

<?php
class upload{
 var 
$nome;
 var 
$msg;
 var 
$tamanho;
 var 
$erro;
 var 
$ext;
 var 
$pExt;
 var 
$pSize;
 
 public function 
up($pasta,$nm,$rnm=""){
  if(!empty(
$_FILES[$nm]['name'])){
   
$this->ext substr($_FILES[$nm]["name"],strrpos($_FILES[$nm]["name"],'.')+1);
   
$this->tamanho $_FILES[$nm]['size'];
   
$this->nome = empty($rnm) ? $_FILES[$nm]["name"] : $rnm.".".$this->ext;
   
$pasta $pasta.$this->nome;

   if(
$this->getPermission()){
    if(
move_uploaded_file($_FILES[$nm]['tmp_name'],$pasta)){
      
$this->msg "Arquivo carregado com sucesso.";
      
$this->erro false;
    }else{
      
$this->msg "Não foi possível fazer o upload do arquivo. Por favor, tente mais tarde.";
      
$this->erro true;
    }
   }else{
    
$this->erro true;
   }
  }else{
   
$this->msg "Nenhuma arquivo selecionado para upload.";
   
$this->erro false;
  }
 }

 public function 
setPermissionExtension($ext){
   
$this->pExt $ext;
 }

 public function 
setMaxSize($size){
  
$this->pSize $size;
 }

 private function 
getPermission(){
  
$s true;
  
$e true;

  if(
$this->pExt != null)
   
$e preg_match("/^(".str_replace(',','|',$this->pExt).")$/i"$this->ext);

  if(
$this->pSize != null)
   
$s = ($this->pSize $this->tamanho);

  if(
$s&&$e)
   return 
true;

  
$this->msg = !$e "A extensão '".$this->ext."' não é permita para upload. Use arquivos: ".str_replace(',','|',$this->pExt) : "O arquivo tem um tamanho superior ao permitido para upload";
  return 
false;
 }

 function 
getName(){
  return 
$this->nome;
 }

 function 
getExtension(){
  return 
$this->ext;
 }

 function 
getSize(){
  return 
$this->tamanho;
 }

 function 
getErro(){
  return 
$this->erro;
 }

 function 
getInfor(){
  return 
$this->msg;
 }
}
?>


Atribuições de cada função
#Define quais extensões pode fazer upload
$nomeInstancia->setPermissionExtension("extensão")

#Faz upload do arquivo
$nomeInstancia->up("pastaDestino","nomeInput","Renomeia para qualquer coisa se preenchido");

#Define limite de tamanho do arquivo para upload
$nomeInstancia->setMaxSize("2548")

#Pegar o nome do arquivo
$nomeInstancia->getName()

#Retorna extensão do arquivo
$nomeInstancia->getExtension()

#Retorna tamanho do arquivo
$nomeInstancia->getSize()

#Retorna ser houve erro no upload (true e false)
$nomeInstancia->getErro()

#Retorna mensagem sobre o upload
$nomeInstancia->getInfor()


Como usar
<?php
# Reentancie a classe
  
$upa = new upload;
# Selecione as extensões permitidas
  
$upa->setPermissionExtension("jpg,png");

#Fazendo Upload do arquivo que o nome do input do formulário é 'F1'
  
$upa->up("","F1");

#Escrever informações do upload
  
echo $upa->getInfor();
?>


Problemas e Soluções

Não consigo fazer upload: Verfique se a pasta de tem permissão para ser escrita; O formulário tem setado o atributo enctype='multipart/form-data'

Como pegar a posição exata de um objeto

sexta-feira, 27 de janeiro de 2012 Tags: left, top, x, y

Como localizar a posição exata de um objeto. Mesmo que você crie um objeto definindo a posição dele, quando ele for exibido o browser redimensionará e até mesmo trocará sua posição. É ai que a gente entra criando a solução.

/**
  * Pegar posicionamento de um objeto
  * @return x = leftPos(objeto);
  * @return y = topPos(objeto);
  */
function topPos(ref){
 var 
valor ref.offsetTop;
 while((
ref ref.offsetParent) != null)valor += ref.offsetTop;
 return 
valor;
}

function 
leftPos(ref){
 var 
valor ref.offsetLeft;
 while((
ref ref.offsetParent) != null)valor += ref.offsetLeft;
 return 
valor;
}

Como Usar
elemento document.getElementById("nome_elemento");
alert("x>"+leftPos(elemento)+"; y>"+topPos(elemento));

Adicionar evento usando uma função

quinta-feira, 19 de janeiro de 2012 Tags: onclick, onblur, onmouseover, onmouseout, onload, onchange, attachEvent

Abaixo uma função para adicionar eventos pelo JavaScript.
function attachEvent(elementeventpdispuseCaputure){
 
element typeof element=='sting' document.getElementById(element) : element;
 if(!
useCaputure)useCaputure=false
 
if(element.attachEvent)element.attachEvent("on"+event,pdisp,useCaputure);
 else if(
element.addEventListener)element.addEventListener(event,pdisp);
 else 
element["on"+event] = disp
}


Como usar:attachEvent("idElemento""click", function(){alert('clicado')})
Testado em: Opera, IE6<=, Firefox, Chrome

Ordernar registros usando o GROUP BY (ORDER BY com GROUP BY)

quarta-feira, 11 de janeiro de 2012 Tags: ORDER BY, GROUP BY

Fala galera, beleza ?
Seguinte, uma dúvida ai muito recente em consultas que realmente precisamos fazer com frequência.
Como usar um ORDER BY e o GROUP BY dentro de uma mesma consulta SQL

Vamos ao códigoSELECT * FROM(
SELECT * FROM `nome_tabela` ORDER BY `nome_campo` DESC
)as `table`
GROUP BY `nome_campo`

Por que a vida é simples assim


12Próxima
Twitter facebook Orkut