Conflit js click(function) ?

Bonjour,

je viens vers vous pour un blocage que je n'arrive pas à comprendre et du coup pas à résoudre. J'ai deux classes de liens avec une animation pour chacune :

a.slidea (slideUp)
a.slide-book (slideDown)

Or dans mon code JS seul le clic sur le lien a.slidea fonctionne. Je ne comprends pas vraiment pourquoi l'autre bloque.

$(document).ready(function() {

      		$('.slide-book').click(function(a){
                a.preventDefault();
                var $href = $(this).attr('href');
            	$('div').slideDown(500, function(){
                    window.location = $href;
                });
                return false;
            });

            $('.slidea').click(function(e){
                e.preventDefault();
                var $href = $(this).attr('href');
                $('div').slideUp(500, function(){
                    window.location = $href;
                });
                return false;
            });
        });

Ces animations me permettent d'animer des transitions de pages, d'où le window.location.
Auriez-vous une petite idée sur l'objet de la discorde ? J'ai beau chercher des solutions je ne trouve pas, peut-être que je ne cherche pas avec les bons mots clés...

Merci pour vos retours

Bonjour,

Alors en fait il y a une petite erreur sur le slide-book c'est e mais pas a:

$('.slide-book').click(function(e){
                e.preventDefault();
                var $href = $(this).attr('href');
            	$('div').slideDown(500, function(){
                    window.location = $href;
                });
                return false;
            });

le "e" est le raccourci de "event" pour récupérer dans ce cas ci l'évènement click. Ce n'est pas une lettre au hasard

C'est pas faux Malheureusement ça ne résous pas ce petit blocage.

Peter-L a écrit :

le "e" est le raccourci de "event" pour récupérer dans ce cas ci l'évènement click. Ce n'est pas une lettre au hasard

Si si au contraire. C'est plus clair d'utiliser e ou event, mais on pourrait l'appeler monpetitpoulet que ça n'y changerait rien. On définit un callback avec un paramètre qui va recevoir un pointeur sur l'évènement, mais on l’appelle comme on veut.

Le code jQuery semble correcte, sauf le "return false" qui est redondant avec .preventDefault().

On peut voir le code HTML ou un exemple en ligne?

Oui oui pas de soucis, je vous le fais plus light

Le script JS d'animation de la page à son chargement et à sa sortie après un clic de lien

<script type="text/javascript">
window.onload=body_load;

    function body_load()
    {

 			$('#status').fadeOut(); 
            $('#preloader').delay(350).fadeOut('slow');
            $('body').delay(350).css({'overflow':'visible'});

    }

$(document).ready(function() {
     
 			$('.page-content').transition({x:'2500'}, function(){
                $(this).transition({x:'0'}, 'slow');
            });

      		$('.slide-book').click(function(e){
                e.preventDefault();
                var $href = $(this).attr('href');
                
            	$('div#outer-container').transition({x:'-2500'},5000, function(){
                    window.location = $href;
                });
                return false;
            });

            $('.slidea').click(function(e){
                e.preventDefault();
                var $href = $(this).attr('href');

                $('div#outer-container').slideUp(500, function(){
                    window.location = $href;
                });
                return false;
            });
        });
 </script>

Le HTML du dessous :

/* Menu principal */
<ul>
		<li><a href="URL_ARTICLE" title="TITRE" class="navh slidea">A propos</a></li>
		<li><a href="URL_RUBRIQUE" title="TITRE" class="navh slidea">Services</a></li>
		<li><a href="URL_RUBRIQUE" title="TITRE" class="navh slidea">Portfolio</a></li>
</ul>

/* Navigation une page à une autre */
<span class="suiv"><a href="#URL_ARTICLE" title="article suivant" class="slide_book"></a></span>
<span class="prec"><a href="#URL_ARTICLE" title="article précédent" class="slide_book"></a></span>

/* Le pre-loader */
<div id="preloader">
	<h3 class="h2 entry-title">TITRE</h3>
	<div id="status"></div>
</div>

/* Contenu à afficher dynamiquement */
<div class="outer-container" id="outer-container">
<div class="page-content">

	<div class="page-book sweet-justice">
			<h3 class="h2 entry-title">TITRE</h3>
			TEXTE
	</div>
</div>

Woualou, je vous ai fais grâce du code SPIP, j'ai été à l'essentiel.

Okay, je ne vois rien qui me ferais penser que ça ne doit pas fonctionner.

Est-ce que le jquery est bien présent dans chaque page chargée? Y a t'il un message d'erreur dans la console javascript?

EDIT :
En fait non, je viens de voir un truc bizarre.
Le .transition() c'est pas une méthode de jQuery, ça doit être un plugin. Il est présent dans la page?
Modifié par Oken (03 Dec 2013 - 16:30)

Ah oui, oui le plug Transit.js est bien là. Il marche très bien au chargement de la page. Là où ça bloque c'est à la sortie de page au clic sur "slide-book", il ne se passe rien. Si j'enlève cette partie, et passe la classe "slidea" dans mes liens précédent/suivant le slideUp fonctionne. D'ailleurs le SlideUp marche aussi très bien pour les liens de la classe "Slidea"

Petit résumé de l'usine à gaz et au charabia plus haut :
- Animation pre-loader : OK
- Animation au chargement de la page : OK
- Animation au clic lien de class "slidea" : OK
- Animation au clic lien de class "slide-book" : Rien

J'ai trouvé!!!!!!!!!!!!!!! l'erreur est toute toute bête:

dans ton fichier html tu as appelé ta classe "Slide_book" et dans ton css tu l'as écris "Slide-book"
C'est juste une question de tiret

@kustolovic

Oui mille excuses pour cette erreur, en fait à force d'utiliser le "e" par habitude c'était devenu une convention pour moi

Peter-L a écrit :
J'ai trouvé!!!!!!!!!!!!!!! l'erreur est toute toute bête:

dans ton fichier html tu as appelé ta classe "Slide_book" et dans ton css tu l'as écris "Slide-book"
C'est juste une question de tiret

Héhé, bien vu !

Ok j'ai honte Mais merci beaucoup pour avoir vu l'invisible. Quand on a le nez et les yeux dedans, un éléphant pourrait se greffer qu'on y verrait rien. On cherche toujours la petite bête!

Merci, merci

N'aies pas honte! ça m'arrive tout le temps

Les petites erreurs sont les moins évidentes à trouver parfois En tout cas je suis ravi qu'on ait pu t'aider à y voir plus clair!

Bonne continuation !