Kommunauty
Connexion
Inscription

Javascript: conflit entre scripts


Ryu Messages : 1976

Salut tout le monde.

Je galère un peu avec javascript ces temps-ci, en tentant de faire une pseudo-scène animée. En gros j'ai un header, qui représente un ciel, avec des nuages de grosseurs différentes qui se déplacent à des vitesse différentes pour donner une impression de profondeur. Jusque là tout va bien, tout fonctionne. Ensuite j'intègre un slide à ce ciel, et à partir de là, le ciel refuse de s'animer. Pareil pour mes boites de dialogue qui contiennent des formulaire pour la connexion et l'envois de mail et qui s'ouvrent au clic. (2 icônes à droite dans le menu)

Voici l'exemple avec le ciel qui fonctionne (sans le slide): http://manthanon.me/sora/index000.html

Et ici l'exemple avec le slide mais le ciel qui ne s'anime plus: http://manthanon.me/sora/index.php

Quelqu'un aurait une petite idée de ce qui pourrait poser problème ?

mercredi 7 aout 2013 (Dernière édition mercredi 7 aout 2013)

Homer Messages : 1877

J'ai ça comme erreur :

Horodatage : 07/08/2013 15:59:21
Erreur : TypeError: $(...).leanModal is not a function
Fichier Source : http://manthanon.me/sora/index.php
Ligne : 16
mercredi 7 aout 2013

Ryu Messages : 1976

Ça ne m'aide pas vraiment car leanModal est utilisé pour faire apparaître mes boites de dialogue uniquement, ce qui n'explique pas pourquoi mes nuages, eux, ne sont plus animés. De plus, entre la version qui ne fonctionne pas et la version qui fonctionne la seul différence est l'ajout d'un slide:

<div id="da-slider" class="da-slider">
<div class="da-slide">
<h2>Bienvenue</h2>
<p>Hey, salut, tu vas bien ? Pas la peine de répondre, je ne peux pas t'entendre, mais c'est gentil quand
même. Alors ici c'est un peu le repère de la racaille intergalactique: on fait des nouilles, des jeux,
on boit des coups, bref, la grande vie de l'espace spacieux.</p>
<a href="#" class="da-link">Lire</a>
<div class="da-img"><img src="images/2.png" alt="image01" /></div>
</div>
<div class="da-slide">
<h2>Y'a un conflit =/</h2>
<p>Je ne sais absolument pas d'où ça vient, mais il y a un petit conflit entre mes script JS...</p>
<a href="#" class="da-link">Lire</a>
<div class="da-img"><img src="images/3.png" alt="image01" /></div>
</div>
<div class="da-slide">
<h2>C'est embêtant !</h2>
<p>Parce que bon, moi, j'aimerais bien que mes pitis nuages, eh bien qu'ils bougent ! =( Mais bon pas évident
tout ça franchement, ça me désole mes amis Kommunautiens.</p>
<a href="#" class="da-link">Lire</a>
<div class="da-img"><img src="images/1.png" alt="image01" /></div>
</div>
<div class="da-slide">
<h2>LOL une licorne</h2>
<p>Parce qu'il faut se l'avouer: les licornes c'est quand même la classe.</p>
<a href="#" class="da-link">Lire</a>
<div class="da-img"><img src="images/4.png" alt="image01" /></div>
</div>
<nav class="da-arrows">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</nav>
</div>
        </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
<script type="text/javascript">
$(function() {

$('#da-slider').cslider({
autoplay : true,
bgincrement : 450
});

});
</script>
(function( $, undefined ) {

/*
* Slider object.
*/
$.Slider = function( options, element ) {

this.$el = $( element );

this._init( options );

};

$.Slider.defaults = {
current : 0, // index of current slide
bgincrement : 50, // increment the bg position (parallax effect) when sliding
autoplay : false,// slideshow on / off
interval : 4000  // time between transitions
    };

$.Slider.prototype = {
_init : function( options ) {

this.options = $.extend( true, {}, $.Slider.defaults, options );

this.$slides = this.$el.children('div.da-slide');
this.slidesCount = this.$slides.length;

this.current = this.options.current;

if( this.current < 0 || this.current >= this.slidesCount ) {

this.current = 0;

}

this.$slides.eq( this.current ).addClass( 'da-slide-current' );

var $navigation = $( '<nav class="da-dots"/>' );
for( var i = 0; i < this.slidesCount; ++i ) {

$navigation.append( '<span/>' );

}
$navigation.appendTo( this.$el );

this.$pages = this.$el.find('nav.da-dots > span');
this.$navNext = this.$el.find('span.da-arrows-next');
this.$navPrev = this.$el.find('span.da-arrows-prev');

this.isAnimating = false;

this.bgpositer = 0;

this.cssAnimations = Modernizr.cssanimations;
this.cssTransitions = Modernizr.csstransitions;

if( !this.cssAnimations || !this.cssAnimations ) {

this.$el.addClass( 'da-slider-fb' );

}

this._updatePage();

// load the events
this._loadEvents();

// slideshow
if( this.options.autoplay ) {

this._startSlideshow();

}

},
_navigate : function( page, dir ) {

var $current = this.$slides.eq( this.current ), $next, _self = this;

if( this.current === page || this.isAnimating ) return false;

this.isAnimating = true;

// check dir
var classTo, classFrom, d;

if( !dir ) {

( page > this.current ) ? d = 'next' : d = 'prev';

}
else {

d = dir;

}

if( this.cssAnimations && this.cssAnimations ) {

if( d === 'next' ) {

classTo = 'da-slide-toleft';
classFrom = 'da-slide-fromright';
++this.bgpositer;

}
else {

classTo = 'da-slide-toright';
classFrom = 'da-slide-fromleft';
--this.bgpositer;

}

this.$el.css( 'background-position' , this.bgpositer * this.options.bgincrement + '% 0%' );

}

this.current = page;

$next = this.$slides.eq( this.current );

if( this.cssAnimations && this.cssAnimations ) {

var rmClasses = 'da-slide-toleft da-slide-toright da-slide-fromleft da-slide-fromright';
$current.removeClass( rmClasses );
$next.removeClass( rmClasses );

$current.addClass( classTo );
$next.addClass( classFrom );

$current.removeClass( 'da-slide-current' );
$next.addClass( 'da-slide-current' );

}

// fallback
if( !this.cssAnimations || !this.cssAnimations ) {

$next.css( 'left', ( d === 'next' ) ? '100%' : '-100%' ).stop().animate( {
left : '0%'
}, 1000, function() {
_self.isAnimating = false;
});

$current.stop().animate( {
left : ( d === 'next' ) ? '-100%' : '100%'
}, 1000, function() {
$current.removeClass( 'da-slide-current' );
});

}

this._updatePage();

},
_updatePage : function() {

this.$pages.removeClass( 'da-dots-current' );
this.$pages.eq( this.current ).addClass( 'da-dots-current' );

},
_startSlideshow : function() {

var _self = this;

this.slideshow = setTimeout( function() {

var page = ( _self.current < _self.slidesCount - 1 ) ? page = _self.current + 1 : page = 0;
_self._navigate( page, 'next' );

if( _self.options.autoplay ) {

_self._startSlideshow();

}

}, this.options.interval );

},
page : function( idx ) {

if( idx >= this.slidesCount || idx < 0 ) {

return false;

}

if( this.options.autoplay ) {

clearTimeout( this.slideshow );
this.options.autoplay = false;

}

this._navigate( idx );

},
_loadEvents : function() {

var _self = this;

this.$pages.on( 'click.cslider', function( event ) {

_self.page( $(this).index() );
return false;

});

this.$navNext.on( 'click.cslider', function( event ) {

if( _self.options.autoplay ) {

clearTimeout( _self.slideshow );
_self.options.autoplay = false;

}

var page = ( _self.current < _self.slidesCount - 1 ) ? page = _self.current + 1 : page = 0;
_self._navigate( page, 'next' );
return false;

});

this.$navPrev.on( 'click.cslider', function( event ) {

if( _self.options.autoplay ) {

clearTimeout( _self.slideshow );
_self.options.autoplay = false;

}

var page = ( _self.current > 0 ) ? page = _self.current - 1 : page = _self.slidesCount - 1;
_self._navigate( page, 'prev' );
return false;

});

if( this.cssTransitions ) {

if( !this.options.bgincrement ) {

this.$el.on( 'webkitAnimationEnd.cslider animationend.cslider OAnimationEnd.cslider', function( event ) {

if( event.originalEvent.animationName === 'toRightAnim4' || event.originalEvent.animationName === 'toLeftAnim4' ) {

_self.isAnimating = false;

}

});

}
else {

this.$el.on( 'webkitTransitionEnd.cslider transitionend.cslider OTransitionEnd.cslider', function( event ) {

if( event.target.id === _self.$el.attr( 'id' ) )
_self.isAnimating = false;

});

}

}

}
};

var logError = function( message ) {
if ( this.console ) {
console.error( message );
}
};

$.fn.cslider = function( options ) {

if ( typeof options === 'string' ) {

var args = Array.prototype.slice.call( arguments, 1 );

this.each(function() {

var instance = $.data( this, 'cslider' );

if ( !instance ) {
logError( "cannot call methods on cslider prior to initialization; " +
"attempted to call method '" + options + "'" );
return;
}

if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
logError( "no such method '" + options + "' for cslider instance" );
return;
}

instance[ options ].apply( instance, args );

});

}
else {

this.each(function() {

var instance = $.data( this, 'cslider' );
if ( !instance ) {
$.data( this, 'cslider', new $.Slider( options, this ) );
}
});

}

return this;

};

})( jQuery );
mercredi 7 aout 2013 (Dernière édition mercredi 7 aout 2013)

Solimar Messages : 26

Bonjour,

Je viens de voir que tu as deux fois inclus la bibliothèque jQuery (ce n'est pas la même version, certes), mais peut-être que le problème vient de là. Je m'étais fait avoir une fois, le problème venait d'une double déclaration.

Peux-tu essayer avec juste une déclaration ?

Edit : je viens de tester. Si tu supprimes la ligne : <script src="./Sora_files/jquery-1.6.3.min.js" type="text/javascript"></script> pour la remplacer par <script type="text/javascript" src="./Sora_files/jquery.min.js"></script> tout fonctionne.

Cela te permet de n'avoir qu'une seule déclaration de JQuery en gardant la version la plus récente.

mercredi 7 aout 2013 (Dernière édition mercredi 7 aout 2013)

Ryu Messages : 1976

Je me sens très con... Je savais au fond de moi que ça pouvait être qu'une bêtise dans le genre.

C'est un peu le bordel dans toutes mes déclarations donc bon. En tous cas merci beaucoup.

mercredi 7 aout 2013

Répondre Pour répondre, tu dois d'abord t'inscrire rapidement sur Kommunauty. Rejoins-nous vite !