Effet slide qui ne fonctionne pas sous chrome [Résolu]

micker · 28/06/2011, 15h14

hello a tous
voila j'ai un script de silde qui fonctionne avec mootools 1.11
sur mon site
http://www.lebbb.org/1-Programmation.html
(si on descend le menu descend)
le soucis c'est que sur chrome et safari niet ....
il fait une erreur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

mootools.v1.11.js:4457Uncaught TypeError: Cannot call method 'getStyles' of null

a cette ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.wrapper = new Element('div', {'Styles': $extend(this.element.getStyles('margin'), {'overflow': 'hidden'})}).injectAfter(this.element).adopt(this.element);

le code complet

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
Fx.Slide = Fx.Base.extend({
 
    options: {
        mode: 'vertical'
    },
 
    initialize: function(el, options){
        this.element = $(el);
        this.wrapper = new Element('div', {'Styles': $extend(this.element.getStyles('margin'), {'overflow': 'hidden'})}).injectAfter(this.element).adopt(this.element);
 
        this.element.setStyle('margin', 0);
        this.setOptions(options);
        this.now = [];
        this.parent(this.options);
        this.open = true;
        this.addEvent('onComplete', function(){
            this.open = (this.now[0] === 0);
        });
        if (window.webkit419) this.addEvent('onComplete', function(){
            if (this.open) this.element.remove().inject(this.wrapper);
        });
    },
 
    setNow: function(){
        for (var i = 0; i < 2; i++) this.now[i] = this.compute(this.from[i], this.to[i]);
    },
 
    vertical: function(){
        this.margin = 'margin-top';
        this.layout = 'height';
        this.offset = this.element.offsetHeight;
    },
 
    horizontal: function(){
        this.margin = 'margin-left';
        this.layout = 'width';
        this.offset = this.element.offsetWidth;
    },

n'étant pas a m'origine du code javascript je galere un peu pour trouver une solution
Merci par avance pour votre aide

vermine · 28/06/2011, 15h29

Bonjour,

J'ai l'impression que vous avez inclus deux fois le script scripts/jd.gallery.js. Mais bon, l'erreur ne vient pas de là.

Que donne ceci, après l'instruction this.element = $(el); ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
alert($(el) +  " / " + this.element);

micker · 28/06/2011, 15h37

cela repond null / null
merci pour l'info
merci pour l'aide

vermine · 28/06/2011, 15h49

Il faudrait faire un test pour voir si vous avez réellement besoin de la partie initialize. Sinon je regarderai tantôt ce qu'on peut faire. Vous avez tout le code JS concernant cette action ?

micker · 28/06/2011, 16h04

hello
c'est le script v1.11 complet
voulez vous que je le joigne ?
pour la fonction initialize ... n'hesitez pas a me dire quoi faire
sinon niveau code
le script
head

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="mootools.v1.11.js" type="text/javascript"></script>

body

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript" charset="utf-8">
		window.addEvent('domready', function() {
			var mySlide = new Fx.Slide('test');
			$('toggle').addEvent('click', function(e){
				e = new Event(e);
				mySlide.toggle();
				e.stop();
				});
			});
		</script>

il vous faut autre chose ?

vermine · 28/06/2011, 20h32

"test" est l'id d'une <div> ? On ne dirait pas. C'est "sidenav" qu'il faut, non ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var mySlide = new Fx.Slide('sidenav');

micker · 29/06/2011, 09h16

desoler erreur de ma par
deans les pages qui chargent mon effet
j'ai ca

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<script type="text/javascript" charset="utf-8">
		var slideEffect = new Fx.Style('sidenav', 'margin-top', {wait:false, duration:900, transition:Fx.Transitions.circOut});
		window.addEvent('load', function() {
			var top = $('sidenav').getPosition().y+10;
			window.addEvent('scroll', function(){
				slideEffect.start.delay(50, slideEffect, Math.max(0, document.documentElement.scrollTop - top));
				});
			});
	</script>

vermine · 29/06/2011, 10h02

Je m'y perds.

Je pense qu'il y a quelques erreurs de syntaxe et c'est d'autant plus troublant puisque FF l'accepte (IE prévient quand même d'une erreur malgré la bonne exécution).

Tout d'abord, votre code Mootools doit être dans la balise <head> et non pas dans une balise <div> en plein milieu du jeu de quilles.

Ensuite, vous devez exécuter votre code lorsque la page est chargé. Je vois que vous avez utilisé l'évènement onload. En fait, non. Le plus sûr est d'utiliser le domready :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
window.addEvent('domready', function() { 
/* votre code à éxecuter après le chargement de la page */
});

Finalement je vois :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var slideEffect = new Fx.Style('sidenav', 'margin...

Ca existe vraiment ça ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var slideEffect = new Fx.Slide('sidenav', 'margin...

On devrait déjà y voir plus clair après ces corrections.

micker · 29/06/2011, 10h23

hello
voici les modifs réalisées
dans le head

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<script src="mootools.v1.11.js" type="text/javascript"></script>
<script type="text/javascript">
	var slideEffect = new Fx.Slide('sidenav', 'margin-top', {wait:false, duration:900, transition:Fx.Transitions.circOut});
	window.addEvent('domready', function() {
		var top = $('sidenav').getPosition().y+10;
		window.addEvent('scroll', function(){
			slideEffect.start.delay(50, slideEffect, Math.max(0, document.documentElement.scrollTop - top));
			});
		});
	</script>

j'ai renome Style en Slide
puis j'ai enlever le script des pages
donc maintenant plus rien en bouge (je dois avoir fait une bourde)

encore merci pour ta patience et ton aide

vermine · 29/06/2011, 10h30

Ceci doit également être dans le domready :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var slideEffect = new Fx.Slide('sidenav', 'margin-top', {wait:false, duration:900, transition:Fx.Transitions.circOut});

Il y a beaucoup d'include dans votre page. Je ne parviens pas à la recréer donc je donne des indications un peu à l'aveuglette.

micker · 29/06/2011, 10h38

comme ceci ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
	var slideEffect = new Fx.Slide('sidenav', 'margin-top', {wait:false, duration:900, transition:Fx.Transitions.circOut});
	window.addEvent('domready', function(var slideEffect = new Fx.Slide('sidenav', 'margin-top', {wait:false, duration:900, transition:Fx.Transitions.circOut});) {
		var top = $('sidenav').getPosition().y+10;
		window.addEvent('scroll', function(){
			slideEffect.start.delay(50, slideEffect, Math.max(0, document.documentElement.scrollTop - top));
			});
		});
	</script>

oui le site est a bas de litetemplate ... desoler

micker · 29/06/2011, 10h50

tu veus des copie des pages plus complette ?
encore merci pour ton aide

micker · 29/06/2011, 11h33

j'ai mis à jour le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<script src="mootools.v1.11.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
		var slideEffect = new Fx.Slide('sidenav', 'margin-top', {wait:false, duration:900, transition:Fx.Transitions.circOut});
		window.addEvent('domready', function() {
			var top = $('sidenav').getPosition().y+10;
			var slideEffect = new Fx.Slide('sidenav', 'margin-top', {wait:false, duration:900, transition:Fx.Transitions.circOut});
			window.addEvent('scroll', function(){
				slideEffect.start.delay(50, slideEffect, Math.max(0, document.documentElement.scrollTop - top));
				});
			});
	</script>

ca me semble mieux mais ca ne bouge toujours pas

vermine · 29/06/2011, 12h54

Comme ceci, vous aviez laissé l'instruction en dehors même si vous l'aviez rajoutée dans le domready :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<script src="mootools.v1.11.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
 
		window.addEvent('domready', function() {
			var top = $('sidenav').getPosition().y+10;
			var slideEffect = new Fx.Slide('sidenav', 'margin-top', {wait:false, duration:900, transition:Fx.Transitions.circOut});
			window.addEvent('scroll', function(){
				slideEffect.start.delay(50, slideEffect, Math.max(0, document.documentElement.scrollTop - top));
				});
			});
	</script>

Disons que normalement, l'alert alert($(el) + " / " + this.element); ne devrait plus renvoyer nul. Mais bon, vous avez peut-être supprimé trop de code ? :-s

micker · 29/06/2011, 13h15

alors maintenant
le retour c'est
[object HTMLDivElement] / [object HTMLDivElement]
mais ca bouge toujours pas
merci pour la patience

edit si je fais
Style au lieu de Slide ca marche sous IE et FF mais toujours pas sur chrome
mais j'ai pas d'erreur sous l'outils de dev bizarre

vermine · 29/06/2011, 13h35

J'ai l'impression que cette instruction suffit en fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
window.addEvent('scroll', function(){
     slideEffect.start.delay(50, slideEffect, Math.max(0, document.documentElement.scrollTop - top));
     });
});

Et qu'il n'y aura pas besoin de créer un slide. Bien entendu, il faut remplacer slideEffect par $('sidenav').
Ha non je n'ai rien dit. Le slide c'est pour dérouler le menu. N'auriez-vous pas mélangé deux fonctionnalités ?

J'aimerais bien que vous me sortiez du tas les bouts de codes suivant :

- la gestion du menu de gauche qui se déroule horizontalement ;
- les blocs gauche et droite qui se déplacent selon le scroll.

Pour le premier, vous avez effectivement un slide. Par contre, pour le second, vous avez interceptez l'évènement scroll. Mais, la partie du slide comporte une erreur. Faut voir laquelle. Cette erreur empêche tous les navigateurs de fonctionner. Si vous remplacez Slide par Style, vous trompez FF et IE (même si IE râle quand même) qui passent alors à l'instruction du scroll qui est correcte. C'est pourquoi ça fonctionne avec Style.

micker · 29/06/2011, 13h51

j'avou ne pas avoir ecrsi cette partie du site ... le javascript et moi ....

l'idée étant que le side nav sous toujour placer au meme endroit malgres le deroulement de la page ...

vermine · 29/06/2011, 13h54

Essayez un peu ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<script src="mootools.v1.11.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
 
		window.addEvent('domready', function() {
                        alert("1");
			var top = $('sidenav').getPosition().y+10;
                        alert("2 : " + top);
			var slideEffect = $('sidenav');
                        alert("3 : " + slideEffect );
			window.addEvent('scroll', function(){
				slideEffect.start.delay(50, slideEffect, Math.max(0, document.documentElement.scrollTop - top));
				});
			});
	</script>

J'aimerais vérifier que le getPosition() fonctionne avec la version 1.11.

micker · 29/06/2011, 14h16

alors
si je met le code rien bouge
alert 1
alerte 2 :11
alerte [object HTMLDivElement]

si tu veus je peu mettre a jour mootools sans soucis

micker · 29/06/2011, 15h37

alors
si je mets ce code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<script src="mootools.v1.11.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
 
		window.addEvent('domready', function() {
			var top = $('sidenav').getPosition().y+10;
			var slideEffect = new Fx.Style('sidenav', 'margin-top', {wait:false, duration:900, transition:Fx.Transitions.circOut});
			window.addEvent('scroll', function(){
				slideEffect.start.delay(50, slideEffect, Math.max(0, document.documentElement.scrollTop - top));
				});
			});
	</script>

ca marche sous IE et FF pas sous chrome ni safari (il y a donc les alertes)
j'ai créer un zone de test
http://www.lebbb.org/new-bbb/-20-pro...90-15-2-1.html
Merci encore pour ton aide

j'ai fait une derniere modification
j'ai remplacer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var slideEffect = $('sidenav');

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

			var slideEffect = new Fx.Style('sidenav', 'margin-top', {wait:false, duration:900, transition:Fx.Transitions.circOut});

c'est ok pour FF et IE pas pour chrome
zarb ....

28/06/2011, 15h49	#4
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 2 686 Détails du profil Informations personnelles : Âge : 27 Informations forums : Inscription : mars 2008 Messages : 2 686 Points : 5 755 Points : 5 755	Il faudrait faire un test pour voir si vous avez réellement besoin de la partie initialize. Sinon je regarderai tantôt ce qu'on peut faire. Vous avez tout le code JS concernant cette action ? __________________ Elen Poukram - Isegoria - Sandawe
	00

28/06/2011, 20h32	#6
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 2 686 Détails du profil Informations personnelles : Âge : 27 Informations forums : Inscription : mars 2008 Messages : 2 686 Points : 5 755 Points : 5 755	"test" est l'id d'une <div> ? On ne dirait pas. C'est "sidenav" qu'il faut, non ? Code : Sélectionner tout - Visualiser dans une fenêtre à part var mySlide = new Fx.Slide('sidenav'); __________________ Elen Poukram - Isegoria - Sandawe
	00

29/06/2011, 10h30	#10
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 2 686 Détails du profil Informations personnelles : Âge : 27 Informations forums : Inscription : mars 2008 Messages : 2 686 Points : 5 755 Points : 5 755	Ceci doit également être dans le domready : Code : Sélectionner tout - Visualiser dans une fenêtre à part var slideEffect = new Fx.Slide('sidenav', 'margin-top', {wait:false, duration:900, transition:Fx.Transitions.circOut}); Il y a beaucoup d'include dans votre page. Je ne parviens pas à la recréer donc je donne des indications un peu à l'aveuglette. __________________ Elen Poukram - Isegoria - Sandawe
	00

28/06/2011, 15h37	#3
micker Invité régulier Inscription : janvier 2004 Messages : 70 Détails du profil Informations forums : Inscription : janvier 2004 Messages : 70 Points : 6 Points : 6	cela repond null / null merci pour l'info merci pour l'aide
	00

29/06/2011, 10h50	#12
micker Invité régulier Inscription : janvier 2004 Messages : 70 Détails du profil Informations forums : Inscription : janvier 2004 Messages : 70 Points : 6 Points : 6	tu veus des copie des pages plus complette ? encore merci pour ton aide
	00

29/06/2011, 13h15	#15
micker Invité régulier Inscription : janvier 2004 Messages : 70 Détails du profil Informations forums : Inscription : janvier 2004 Messages : 70 Points : 6 Points : 6	alors maintenant le retour c'est [object HTMLDivElement] / [object HTMLDivElement] mais ca bouge toujours pas merci pour la patience edit si je fais Style au lieu de Slide ca marche sous IE et FF mais toujours pas sur chrome mais j'ai pas d'erreur sous l'outils de dev bizarre
	00

29/06/2011, 13h51	#17
micker Invité régulier Inscription : janvier 2004 Messages : 70 Détails du profil Informations forums : Inscription : janvier 2004 Messages : 70 Points : 6 Points : 6	j'avou ne pas avoir ecrsi cette partie du site ... le javascript et moi .... l'idée étant que le side nav sous toujour placer au meme endroit malgres le deroulement de la page ...
	00

29/06/2011, 14h16	#19
micker Invité régulier Inscription : janvier 2004 Messages : 70 Détails du profil Informations forums : Inscription : janvier 2004 Messages : 70 Points : 6 Points : 6	alors si je met le code rien bouge alert 1 alerte 2 :11 alerte [object HTMLDivElement] si tu veus je peu mettre a jour mootools sans soucis
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email