IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Bibliothèques & Frameworks Discussion :

Effet slide qui ne fonctionne pas sous chrome [MooTools]


Sujet :

Bibliothèques & Frameworks

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    Janvier 2004
    Messages
    143
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2004
    Messages : 143
    Points : 49
    Points
    49
    Par défaut Effet slide qui ne fonctionne pas sous chrome
    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

  2. #2
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    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);

  3. #3
    Membre du Club
    Profil pro
    Inscrit en
    Janvier 2004
    Messages
    143
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2004
    Messages : 143
    Points : 49
    Points
    49
    Par défaut
    cela repond null / null
    merci pour l'info
    merci pour l'aide

  4. #4
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    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 ?

  5. #5
    Membre du Club
    Profil pro
    Inscrit en
    Janvier 2004
    Messages
    143
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2004
    Messages : 143
    Points : 49
    Points
    49
    Par défaut
    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 ?

  6. #6
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    "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');

  7. #7
    Membre du Club
    Profil pro
    Inscrit en
    Janvier 2004
    Messages
    143
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2004
    Messages : 143
    Points : 49
    Points
    49
    Par défaut
    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>

  8. #8
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    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.

  9. #9
    Membre du Club
    Profil pro
    Inscrit en
    Janvier 2004
    Messages
    143
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2004
    Messages : 143
    Points : 49
    Points
    49
    Par défaut
    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

  10. #10
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    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.

  11. #11
    Membre du Club
    Profil pro
    Inscrit en
    Janvier 2004
    Messages
    143
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2004
    Messages : 143
    Points : 49
    Points
    49
    Par défaut
    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

  12. #12
    Membre du Club
    Profil pro
    Inscrit en
    Janvier 2004
    Messages
    143
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2004
    Messages : 143
    Points : 49
    Points
    49
    Par défaut
    tu veus des copie des pages plus complette ?
    encore merci pour ton aide

  13. #13
    Membre du Club
    Profil pro
    Inscrit en
    Janvier 2004
    Messages
    143
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2004
    Messages : 143
    Points : 49
    Points
    49
    Par défaut
    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

  14. #14
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    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

  15. #15
    Membre du Club
    Profil pro
    Inscrit en
    Janvier 2004
    Messages
    143
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2004
    Messages : 143
    Points : 49
    Points
    49
    Par défaut
    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

  16. #16
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    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.

  17. #17
    Membre du Club
    Profil pro
    Inscrit en
    Janvier 2004
    Messages
    143
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2004
    Messages : 143
    Points : 49
    Points
    49
    Par défaut
    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 ...

  18. #18
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    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.

  19. #19
    Membre du Club
    Profil pro
    Inscrit en
    Janvier 2004
    Messages
    143
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2004
    Messages : 143
    Points : 49
    Points
    49
    Par défaut
    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

  20. #20
    Membre du Club
    Profil pro
    Inscrit en
    Janvier 2004
    Messages
    143
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2004
    Messages : 143
    Points : 49
    Points
    49
    Par défaut
    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 ....

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 2 12 DernièreDernière

Discussions similaires

  1. [Google Maps] Fonction qui ne fonctionne pas sous chrome mais bien sous firefox
    Par Msysteme dans le forum APIs Google
    Réponses: 1
    Dernier message: 04/06/2015, 21h29
  2. Fonction JS qui ne fonctionne pas sous Chrome
    Par hellsings dans le forum jQuery
    Réponses: 8
    Dernier message: 24/03/2012, 12h47
  3. css : hover qui ne fonctionne pas sous IE
    Par HwRZxLc4 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 11/09/2006, 15h52
  4. Evenement OnClick qui ne fonctionne pas sous firefox
    Par frechy dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 27/12/2005, 17h06
  5. [CSS] Effet de hover qui ne fonctionne pas sous IE
    Par Ricou13 dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 14/06/2005, 10h39

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo