felipeNascimento.org(true);

Making the web a better place to live

Browsing Posts tagged JavaScript

Bug on IE when creating elements with 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

Three ways to reload or move the page

August 19, 2010 at 11:46 pm No comments

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.

JavaScript, Learned Stuff / Tips ,
Read more

Starting with Canvas in javascript

June 17, 2010 at 9:20 pm 5 comments

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.

JavaScript, Learned Stuff / Tips
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

Two interesting JavaScript functions

November 20, 2009 at 2:25 am No comments

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.
continue reading…

JavaScript, Learned Stuff / Tips ,
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