felipeNascimento.org(true); » JavaScript http://felipenascimento.org Making the web a better place to live Tue, 31 Aug 2010 14:31:53 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Bug on IE when creating elements with name (submitName) http://felipenascimento.org/en/bug-on-ie-when-creating-elements-with-name-submitname/ http://felipenascimento.org/en/bug-on-ie-when-creating-elements-with-name-submitname/#comments Fri, 20 Aug 2010 04:40:48 +0000 Felipe Nascimento http://felipenascimento.org/?p=291 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.

]]> http://felipenascimento.org/en/bug-on-ie-when-creating-elements-with-name-submitname/feed/ 2 Three ways to reload or move the page http://felipenascimento.org/en/three-ways-to-reload-or-move-the-page/ http://felipenascimento.org/en/three-ways-to-reload-or-move-the-page/#comments Fri, 20 Aug 2010 02:46:34 +0000 Felipe Nascimento http://felipenascimento.org/?p=286 Hi there.
Well, this is a question I see a lot of people doing! Then, I decided to post about it.
We have got, in Javascript, when dealing with the DOM API, the history element, with which we can move forward or backward trough the navigation historic, plus specify with the method go page or step we want to go, by informing the < 0 value to past, or > 0 to the possible forward pages. So, we can do this, too:


history.go(0);

This will simply reload the page. Of course you can use it with iframes, using the parent, top, self or name to work with their relation.
Other alternative is using the reload method provided by the location, just like this:


self.location.reload();

Now, a different alternative, and also a way to move from one page to another, is using the href property, also from location.


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

This code will reload the same page, but could be any other address to be loaded.

]]> http://felipenascimento.org/en/three-ways-to-reload-or-move-the-page/feed/ 0 Starting with Canvas in javascript http://felipenascimento.org/en/starting-with-canvas-in-javascript/ http://felipenascimento.org/en/starting-with-canvas-in-javascript/#comments Fri, 18 Jun 2010 00:20:10 +0000 Felipe Nascimento http://felipenascimento.org/?p=266 Well, canvas is not that young feature, even though, people are still afraid of using it. Most of our browsers can understand it, and the others (I mean, the Internet Explorer, the onlly one which can’t) will “learn” it soon.
Now, I want to put here some tips about how to start working with canvas easily, and also, how to import images and draw then into it.

First thing, you need a canvas element, and you need to treat it for those that which can’t render the canvas element properly.

    <body>
        <canvas id="theCanvasElement">
            whatever you write in here, will be shown ONLY
            when your canvas cannot be rendered.
            Of course, it accepts HTML tags
        </canvas>
    </body>

Ok, now, using event handlers we will treat it in our javascript

    </body>
    <script>
          // yes, addEventListener does not work on IE
          document.addEventListener('load', canvasHandler, false);
    <script>
</html>

Good. When our page is loaded, it will call our method canvasHandler. Let’s see how we will open the canvas to use with javascript:

// let's create some global variables.
// You can use it better with namespaces
var canvas= null;
var ctx= null;
canvasHandler= function(){
    // first of all, we simply get the canvas element itself
    canvas= document.getElementById('theCanvasElement');
    // now, we need to have the CONTEXT to work with
    ctx= canvas.getContext('2d');
}

Great, we have now in our variable canvas, the HTML canvas element itself. While the variable ctx has got its context. The context is what we will use to draw. It has the mothods and properties to allow us to interact with the canvas in 2D.
No, unfortunately it does not offer any other context besides 2D.
Our canvas still has no properties. It has no with and height, we can set it then.
From now on, all the javascript code must be set inside the canvasHandler function’s body, under those lines shown before.

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

You probably know how to load an image from js, right?

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

Ok, you can use it to insert images inside your canvas. Just like this.

    // instantiate an image
    var img= new Image();
    // we need to use the image when it has finished to load
    img.addEventListener('load', function(){
        // after downloading the image, we can draw it into the canvas
        ctx.drawImage(this);
        // where this= the image just downloaded
    });
    // then, we say the image's url, to it start loading
    img.src= 'url.png';

Ok, now you can see an image inside your canvas. The drawImage method supports some different structures refered by its parameters:

    // draws the image in the position left=30, top=30
    ctx.drawImage(this, 30, 30);
    // draws the image in the 0/0 position, changing its size
    ctx.drawImage(this, 0, 0, 45, 75);
    // more complex, draws the image croping it
    ctx.drawImage(this, 0, 0, 150, 150, 0, 0, 480, 340);

When cropping, you specify the image (this), the position to start showing it (0, 0), then the size you want to crop it (150, 150). After that, you will tell the canvas the size and position the image really is(0, 0, 480, 340).

Soon, I’ll post about how to really draw into your canvas through javascript, adding lines, points and texts.

]]> http://felipenascimento.org/en/starting-with-canvas-in-javascript/feed/ 5 print_r (the same as in PHP) in Javascript, the print_j http://felipenascimento.org/en/print_r-the-same-as-in-php-in-javascript-the-print_j/ http://felipenascimento.org/en/print_r-the-same-as-in-php-in-javascript-the-print_j/#comments Sun, 28 Feb 2010 23:48:25 +0000 Felipe Nascimento http://felipenascimento.org/?p=223 Hey folks.
I prepared this small function to use, once it’s many times needed and we don’t have it natively in JavaScript. I have many times searched for it through google and couldn’t find a reall interesting lib to it.
Then, I prepared this one.
You can see the example of the output in my projects directory. And you can download the print_j js.

]]> http://felipenascimento.org/en/print_r-the-same-as-in-php-in-javascript-the-print_j/feed/ 0 Ajax Push / Comet with PHP http://felipenascimento.org/en/ajax-push-comet-with-php/ http://felipenascimento.org/en/ajax-push-comet-with-php/#comments Fri, 20 Nov 2009 14:06:14 +0000 Felipe Nascimento http://felipenascimento.org/?p=72 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();
        }
]]> http://felipenascimento.org/en/ajax-push-comet-with-php/feed/ 0 Two interesting JavaScript functions http://felipenascimento.org/en/two-interesting-javascript-functions-2/ http://felipenascimento.org/en/two-interesting-javascript-functions-2/#comments Fri, 20 Nov 2009 05:25:23 +0000 Felipe Nascimento http://felipenascimento.org/?p=77 Two interesting functions in JavaScript I’ve created due to “fix” a few problems I’ve fought against.
Both functins exist in PHP, and I needed to use’em in my client side.
The first one, is the strrev function. Javascript has in the Array prototype, the function reverse, but not in strings. Then, here goes the “one line” function to revert strings in javascript.

function strrev(str)
{
return str.split(”).reverse().join(”);
}

We must use it like this:
var rev= strrev(”Felipe Nascimento”);

we also could have put it into the prototype of our strings:

String.prototype.invert= function(){
return this.split(”).reverse().join(”);
}

In this case, the example would be:
“Felipe Nascimento”.invert();

Everything I did here, was just transform the string into an Array, revert it, and then transform it into a String again.

The second is a more complex function, but a quite useful one. It’s the number_format function, also inherited from PHP.
It’s signature is: numberFormat(num, dec, decPoint, thousandSep)
It receives a number or string, and returns it transformed by those patterns sent to it.
We can use it to change the decimal places(values after , or .), as it depends on the country parttener, and other detalis.
It’s usage is just like this:

alert(numberFormat(’1050.1′, 2, ‘.’, ‘ ‘));
alert(numberFormat(’10.50,1′, 2, ‘,’, ‘.’));
alert(numberFormat(’10050.123456′, 5, ‘,’, ‘ ‘));
alert(numberFormat(’10.50,1234′, 3, ‘~’, ‘.’));

The first example is the more used, in which we are forcing the value to have only 2 decimal places.
We can force it to have as many as we want, which will fill the value with zeros.
We can also choose the decimal point, and also the thousand separator.
Here, follows the code:

function numberFormat(num, dec, decPoint, thousandSep)
{
if(typeof num == ’string’)
{
if(num.indexOf(’,')>-1 && num.indexOf(’.')>-1)
{ // fixing strings
if(num.indexOf(’,') > num.indexOf(’.'))
{ // eg.: 10.000,000 => 10000.000
num= num.replace(’.', ”).replace(’,', ‘.’);
}else{ // eg.: 10,000.000 => 10000.000
num= num.replace(’,', ”);
}
}else{
if(num.indexOf(’,')>-1)
{ // eg.: 10000,000 => 10000.000
num= num.replace(’,', ‘.’);
}
}
}
dec= dec|| 2; // 2 decimal places, as default
num= Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
num= (”+num).replace(’.', (decPoint||’.'));
while(num.split(decPoint)[1].length < dec)
num+= ‘0′; // fixing decimal places, after the decimal point
// apply thousand separatores
num= num.split(decPoint);
num[0]= strrev(strrev(num[0]).replace(/([0-9]{3})/g, ‘$1′+(thousandSep||’ ‘)));
return num.join(decPoint);
}

I hope it becomes useful to you.

]]> http://felipenascimento.org/en/two-interesting-javascript-functions-2/feed/ 0 Absurd error using Internet Explorer http://felipenascimento.org/en/absurd-error-using-internet-explorer/ http://felipenascimento.org/en/absurd-error-using-internet-explorer/#comments Wed, 18 Nov 2009 04:00:12 +0000 Felipe Nascimento http://felipenascimento.org/?p=89 En:
Today, I fought with the following error in Internet Explorer: System Erro: -1072896658
I got curious, once it used to work prefectly in all the browsers, Internet epxlorer was blowing the error to me(ok, it is not a surprise at all)!
After a lot of tests and have searched all the web, I found out that our friend IE culdn’t build the Ajax object when it had come back if the charset of the current page was UTF-8. The solution? The absurdest one. I just had to change its charset to utf-8… yes, in lower-case.
Just the case changed the page itself.
I hope this post will help someone.

Pt:
Hoje me deparei com o seguinte erro no Internet Explorer: Erro de sistema: -1072896658 Fiquei curioso, uma vez que funcionava perfeitamente para todos os navegadores, exceto IE(o que não é nenhuma surpresa)! Apos muitos testes, e boas pesquisas na web, descobri que o IE nao conseguia construir o objeto ajax no seu retorno, caso o charset da página estivesse setado para UTF-8. A solução? Mais absurda que o problema, bastou setar o charset para utf-8. Sim, minúsculo, apenas. Espero que acabe ajudando alguem com isto, ja que me deu uma certa dor de cabeça.

]]> http://felipenascimento.org/en/absurd-error-using-internet-explorer/feed/ 0 jQuery at TargetTrust http://felipenascimento.org/en/jquery-at-targettrust/ http://felipenascimento.org/en/jquery-at-targettrust/#comments Wed, 18 Nov 2009 03:51:38 +0000 Felipe Nascimento http://felipenascimento.org/?p=87 Jaydson e eu apresentamos uma palestra na TargetTrust nesa noite.
A palestra foi muito legal, e conseguimos prender bem a atenção dos quase 20 interessados.
Abaixo, encontramos os slides da palestra.
Vamos ver se não transformamos isso em um novo curso, focado em jQuery.

Como Fazer (+) Em AplicaçõEs Ria Escrevendo ( )
]]> http://felipenascimento.org/en/jquery-at-targettrust/feed/ 1 Two interesting JavaScript functions http://felipenascimento.org/en/two-interesting-javascript-functions/ http://felipenascimento.org/en/two-interesting-javascript-functions/#comments Wed, 11 Nov 2009 12:04:18 +0000 Felipe Nascimento http://felipenascimento.org/?p=78 Two interesting functions in JavaScript I’ve created due to “fix” a few problems I’ve fought against.
Both functins exist in PHP, and I needed to use’em in my client side.
The first one, is the strrev function. Javascript has in the Array prototype, the function reverse, but not in strings. Then, here goes the “one line” function to revert strings in javascript.

function strrev(str)
{
	return str.split('').reverse().join('');
}

We must use it like this:
var rev= strrev(”Felipe Nascimento”);

we also could have put it into the prototype of our strings:

String.prototype.invert= function(){
	return this.split('').reverse().join('');
}

In this case, the example would be:
“Felipe Nascimento”.invert();

Everything I did here, was just transform the string into an Array, revert it, and then transform it into a String again.

The second is a more complex function, but a quite useful one. It’s the number_format function, also inherited from PHP.
It’s signature is: numberFormat(num, dec, decPoint, thousandSep)
It receives a number or string, and returns it transformed by those patterns sent to it.
We can use it to change the decimal places(values after , or .), as it depends on the country parttener, and other detalis.
It’s usage is just like this:

alert(numberFormat('1050.1', 2, '.', ' '));
alert(numberFormat('10.50,1', 2, ',', '.'));
alert(numberFormat('10050.123456', 5, ',', ' '));
alert(numberFormat('10.50,1234', 3, '~', '.'));

The first example is the more used, in which we are forcing the value to have only 2 decimal places.
We can force it to have as many as we want, which will fill the value with zeros.
We can also choose the decimal point, and also the thousand separator.
Here, follows the code:

function numberFormat(num, dec, decPoint, thousandSep)
{
	if(typeof num == 'string')
	{
		if(num.indexOf(',')&amp;gt;-1 &amp;amp;&amp;amp; num.indexOf('.')&amp;gt;-1)
		{ // fixing strings
			if(num.indexOf(',') &amp;gt; num.indexOf('.'))
			{ // eg.: 10.000,000 =&amp;gt; 10000.000
				num= num.replace('.', '').replace(',', '.');
			}else{ // eg.: 10,000.000 =&amp;gt; 10000.000
					num= num.replace(',', '');
				 }
		}else{
				if(num.indexOf(',')&amp;gt;-1)
				{ // eg.: 10000,000 =&amp;gt; 10000.000
					num= num.replace(',', '.');
				}
			 }
	}
	dec= dec|| 2; // 2 decimal places, as default
	num= Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
	num= (''+num).replace('.', (decPoint||'.'));
	while(num.split(decPoint)[1].length &amp;lt; dec)
		num+= '0'; // fixing decimal places, after the decimal point
	// apply thousand separatores
	num= num.split(decPoint);
	num[0]= strrev(strrev(num[0]).replace(/([0-9]{3})/g, '$1'+(thousandSep||' ')));
	return num.join(decPoint);
}

I hope it becomes useful to you.

]]> http://felipenascimento.org/en/two-interesting-javascript-functions/feed/ 0