Compatibilité de script de bannière sur internet explorer

Version imprimable

Bonjour,

je vous explique, j'utilise des prototypes js pour créer une bannière que ça marche nikel sauf sur internet explorer.
Le problème apparit sur cette ligne

Code:

1
2
 
banner = new AnimateBanner($("#banner"), "banner", tab, width, url);

avec $("#banner"): un sélecteur sur div qui va contenir la bannière.
banner: Le nom de la bannière
tab: un tableau conteneant les liens vers le contenu (suffix ou suite du lien)
width: largeur de la bannière
url: prefix de l'url
et voici le prototype:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
function AnimateBanner(banner, name, tab, width, url)
{
    this.banner = banner;
    this.name = name;
    this.tab = tab;
    this.url = url;
    this.width = width;
    this.box = new Array();
    this.ispartial = true;
}
 
AnimateBanner.prototype =
{
    init : function (nbW, nbH, partial, vertical)
    {
 
        this.nbH = nbH;
        this.nbW = nbW;
 
        for (var h = 0; h < nbH; h++)
        {
            this.banner.append('<div id="banner_h_' + h + '" style="overflow: auto; width: '+ this.width * this.nbW +';"></div>');
 
            if(partial != null)
            {
                if((h  < Math.round(nbH / 2))&& (vertical == '1')) {
 
                    this.banner.append('<div class="partial">' + partial+'</div>');
                    this.ispartial = false;
                }
            }
 
            for (var w = 0; w < nbW; w++)
            {
 
                this.banner.find('#banner_h_' + h).append('<div  style="display : inline; float: left; width="' + this.width + '""'
                    + ' id="banner_h_' + h + '_w_' + w + '">&nbsp;</div>');
                if(partial != null)
                {
                    if((w  < Math.round(nbW / 2))&& (vertical == '0')) {
 
                        this.banner.find('#banner_h_' + h).append('<div style="float: left;" class="partial">' + partial+'</div>');
                        this.ispartial = false;
                    }
                }
            }
        }
    },
 
    animate : function (time, effect, getBox)
    {
        var wait = 0;
        for (var h = 0; h < this.nbH; h++)
        {
            var temp = new Array();
 
            for (var w = 0; w < this.nbW; w++)
            {
                var box = this.banner.find('#banner_h_' + h + '_w_' + w);
                var animateBox = new (getBox(w,h))(box, this.name + ".box[" + h + "][" + w + "]", this.tab, this.width, this.url);
                animateBox.init(time, effect, wait);
                wait += 1000;
                temp.push(animateBox);
            }
            this.box.push(temp);
        }
    }
}

J'espére que c'est clair por vous.
Merci d'avance

18/11/2011, 11h49
Bovino

Citation:

Le problème apparit sur cette ligne

:roll:

Mais encore ?
C'est quoi le problème au juste ?
18/11/2011, 11h51
mino26tz

Citation:

Envoyé par Bovino

:roll:

Mais encore ?
C'est quoi le problème au juste ?

Salut Bovino.c'est que le bannière ne saffiche pas sur internet explorer. ;)

re

Ce qui est sur c'est que ie plante à l'instanciation de l'objet animateBanner, donc j'ai mis des alert partout dans le constructeur et ça s'affiche même sur ie. 8O
18/11/2011, 12h15
yjuliet

Quel est le message d'erreur affiché par Internet Explorer ???

Lorsque tu effectues des tests avec FF / Chrome, as-tu des avertissements dans la console JS ?
18/11/2011, 12h19
mino26tz

Citation:

Envoyé par yjuliet

Quel est le message d'erreur affiché par Internet Explorer ???

Lorsque tu effectues des tests avec FF / Chrome, as-tu des avertissements dans la console JS ?

L'erreur c'est: Cet objet ne gère pas cette propriété ou cette méthode.

Sur ff et chrome tout est nikel même pas un avertissement. :?
18/11/2011, 13h29
SpaceFrog

sur quelle ligne l'erreur ?
18/11/2011, 13h52
Bovino

Citation:

Envoyé par mino26tz

L'erreur c'est: Cet objet ne gère pas cette propriété ou cette méthode.

Tu as quelle version de IE ? Parce qu'à partir de la 8, tu as des outils de développement (appuyer sur F12) un peu plus loquaces en terme d'erreurs...

En tout cas,

Code:

this.banner.append('<div id="banner_h_' + h + '" style="overflow: auto; width: '+ this.width * this.nbW +';"></div>');

tu peux déjà commencer par mettre des unités à la propriété width.
D'autre part, ta façon de mélanger jQuery et du JavaScript natif n'est pas très propre.
18/11/2011, 14h02
mino26tz

Citation:

Envoyé par Bovino

Tu as quelle version de IE ? Parce qu'à partir de la 8, tu as des outils de développement (appuyer sur F12) un peu plus loquaces en terme d'erreurs...

En tout cas,

Code:

this.banner.append('<div id="banner_h_' + h + '" style="overflow: auto; width: '+ this.width * this.nbW +';"></div>');

tu peux déjà commencer par mettre des unités à la propriété width.
D'autre part, ta façon de mélanger jQuery et du JavaScript natif n'est pas très propre.

oui c'est intéressant les outils développeur sur ie8, Pour l'unité du width c'est corrigé ;). L'erreur est sur La ligne d'instanciation de l'objet animateBanner.

Pour le mélange du jquery et js, je sais que c'est pas trés propre. mais j'ai récupérer le code du script et j'ai fait que quelques modifications. :(..

Je suis en train de débuguer dans la class de animateBanner, mais débuguer du js c'est pas ce que j'aime le plus :aie:
Merci
18/11/2011, 14h03
mino26tz

Citation:

Envoyé par SpaceFrog

sur quelle ligne l'erreur ?

Salut spaceFrog, l'erreur c'est sur la ligne

Code:

banner = new AnimateBanner($("#banner"), "banner", tab, width, url);

:)