felipeNascimento.org(true);

Making the web a better place to live

Browsing Posts in JavaScript

Bug no IE quando criando elementos com name (submitName)

August 20, 2010 at 1:40 am 2 comments

Hi, yesterday I had to fight against this problem, which is not very touched out there.
In the beginning, people from jQuery thought it was a jQuery bug, but searching a bit more I could find out the root of this problem.

What is it?
When running your javascript in Internet Explorer 6, or 7 or 8 in compatible mode, if you create dynamically an iframe, for example, and set it a name attribute, Internet Explorer will reaplace it by an submitName attribute. This attribute cannot be found with .getAttribute(’submitName’), but that is the problem, neither can be with .getAttribute(’name’)!

How to see it happening? Try this:

var ifr= document.createElement('iframe');
ifr.setAttribute('name', 'iFrameOne');
document.body.appendChild(ifr);
alert(ifr.getAttribute('name'));
// you can also see it through the "developer tool" in the IE tools menu

The main problem is that … when you have something like a link or a form targeting this iframe, you loose it! The same happens with inputs with name, which are dynamically created.

How to fix it without ask your users to migrate to a real browser? I did this and it worked:

var ifrDiv= document.createElement('div');
ifrDiv.innerHTML= "<iframe name='iFrameOne' ></iframe>";
document.body.appendChild(ifrDiv);

Now, why does it happen?!
I had the chance to search for this and found in the Microsoft’s webpage something about this old, known bug in Internet Explorer, with names on dynamic elements. Due to “fix” this, instead of fixing, then “provided” this workarounded attribute. When you try to deal with the name attribute, it applies like an alias, redirecting it to the Microsoft’s Internet Explorer imaginary submitName attribute. But with this, you cant access a form that has a name, like this:

document.forms['dynamicFormName'];

because the DOM hasn’t rendered that form with the name you asked for.

I hope it can help you, if you get stuck with this some day.

JavaScript, Learned Stuff / Tips ,
Read more

Três maneiras de recarregar ou mover uma página

August 19, 2010 at 11:46 pm No comments

Hey, olá pessoal.
Bom, esta é uma pergunta que vejo muita gente fazendo, então, decidi postar aqui sobre isto.
Temos no javascript, quando lidando com a API DOM, o elemento history, com o qual podemos avançar ou regredir conforme o nosso histórico de navegação, além de podermos especificar a página que queremos carregar com o uso do método go, indicando valores menores que zero para o passado, ou maiores para o futuro.
Por tanto, podemos fazer desta maneira:


history.go(0);

Isto irá simplesmente recarregar a página. Claro que você pode usar iframes, adotando parent, top, self ou name para trabalhar com suas relações.

Outra alternativa seria usar o método reload, oferecido pelo location, assim:


self.location.reload();

Agora, uma outra alternativa que também servirá para mover-mos para uma nova página, usando a propriedade href, também do location.


self.location.href= self.location.href;

Este código recarregará a página, ms poderia ser qualquer outro endereço alí, a ser carregado.

JavaScript, Learned Stuff / Tips ,
Read more

Iniciando com Canvas em JavaScript

June 17, 2010 at 9:20 pm 5 comments

Canvas já não é mais uma funcionalidade tão nova, mesmo assim, vejo muita gente com medo de “mecher nisto”. Atualmente a grande maioria dos navegadores já suportam canvas e os outros (leia-se Internet Explorer) acabarão suportando em breve.

Agora iriei colocar aqui algumas dicas sobre como iniciar a trabalhar com canvas e também como importar imagens e desenha-las dentro do canvas.

Primeira coisa, você precisa do próprio elemento canvas e também trata-lo para aqueles aquele navegador que não suporta canvas.

    <body>
        <canvas id="elementoCanvas">
            O que for escrito aqui, aparecerá SOMENTE
            quando o navegador não puder renderizar o canvas
            Claro que tags HTML são aceitas.
        </canvas>
    </body>

Certo, agora, especificaremos uma função para manusear o canvas via javaScript

    </body>
    <script>
          // sim, addEventListener não funciona em IE
          document.addEventListener('load', canvasHandler, false);
    <script>
</html>

Bom. Assim que a página é carregada, nosso método canvasHandler será chamado. Vamos ver agora como abrir o canvas para iniciar os trabalhos via js.

// Vamos criar umas variáveis globais para facilitar
// mas fica mais "bonito" e organizado se utilizar namespaces
var canvas= null;
var ctx= null;
// aqui, a nossa função a ser chamada assim que a página carregar
canvasHandler= function(){
    // antes de tudo, simplesmente pegamos o elemento canvas
    canvas= document.getElementById('theCanvasElement');
    // agora nós precisaremos acessar o CONTEXT para trabalhar
    ctx= canvas.getContext('2d');
}

Ótimo, nós temos agora a variável canvas que é o próprio elemento HTML canvas. Enquanto a variável ctx tem o seu contexto. O context é o que utilizaremos para desenhar. Ele tem métodos e propriedades que nos permitirá interagir com o canvas em 2D.
Não, infelizmente canvas não suporta outros contextos, somente 2D até o momento.

Nosso canvas ainda não tem propriedades. Não tem uma largura nem altura, por exemplo. Vamos especifica-los

OBS: De agora em diante, todo o código javascript precisará estar dentro do corpo de nossa função canvasHandler, logo abaixo aquelas duas linhas exibidas anteriormente.

    canvas.width= 480;
    canvas.height= 340;

Provavelmente você sabe carregar uma imagem em js, certo? (também conhecido como preload):

    var img= new Image();
    img.src= 'url.png';

Ok, você pode usar exatamente isto para inserir imagens dentro de seu canvas. Assim:

    // instancia uma nova imagem
    var img= new Image();
    // usaremos a imagem após ela ser carregada
    img.addEventListener('load', function(){
        // após baixar a imagem, podemos desenha-la no canvas
        ctx.drawImage(this);
        // onde this representa a imagem recém carregada
    });
    // então especificamos a url a iniciar o carregamento
    img.src= 'url.png';

Ok, agora você já deve ver a imagem dentro de seu canvas. O método drawImage suporta algumas estruturas/assinaturas diferentes em relação aos seus parâmetros:

    // desenha a imagem na posição left=30 e top=30
    ctx.drawImage(this, 30, 30);
    // desenhará a imagem na posição 0/0, alterando seu tamanho
    ctx.drawImage(this, 0, 0, 45, 75);
    // mais complexo, desenha e recorta a imagem (crop)
    ctx.drawImage(this, 0, 0, 150, 150, 0, 0, 480, 340);

Quando recortamos a imagem, especificamos a imagem propriamente dita (this), a posição a iniciar a exibição da imagem(0, 0), então o tamanho que desejamos recortar(150, 150). Em seguida vão os parâmetros para especificar o tamanho e posições em que a imagem realmente está (0, 0, 480, 340);

Em breve pretendo postar aqui como realmente desenhar no seu canvas, adicionando linhas, pontos e textos.

JavaScript, Learned Stuff / Tips
Read more

O print_r do PHP no JavaScript, o print_j

February 28, 2010 at 8:48 pm No comments

Olá pessoal.
Preparei esta pequena função para usar, uma vez que muitas vezes precisamos disso e JavaScript não conta com esta função nativamente.
Tenho muitas vezes pesquisado google afora e não pude encontrar uma biblioteca realmente interessante para isto
Então, resolvi preparar uma eu mesmo.
Você pode ver um exemplo de seu output em meu diretório de projetos. E também pode baixar o print_j.

JavaScript, print_j ,
Read more

Ajax Push / Comet with PHP

November 20, 2009 at 11:06 am No comments

Yes, it is possible.
There are many ways to implement Ajax push with PHP. In this case, we will study a way to do so, by using javascript with PHP forcing the page flush, from server side.
First of all, we must understand the ajax… Ajax asks the server for something

function forceFlush()
{
ob_start();
ob_end_clean();
flush();
set_error_handler(’_MINDNeutralizeError’);
ob_end_flush();
restore_error_handler();
}

JavaScript, Learned Stuff / Tips, PHP ,
Read more
RSS

Tags

Language

Dates

September 2010
S M T W T F S
« Aug    
 1234
567891011
12131415161718
19202122232425
2627282930  

Categories

External

Links/Utils

Recent Posts

Powered by WordPress Web Design by SRS Solutions © 2010 felipeNascimento.org(true); Design by SRS Solutions