11499 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Appuyer sur une touche pour changer de page [JS]

Bon mon titre est vraiment pas très évocateur mais je savais pas vraiment comment dire

Bon alors sur mon site je veux faire défiler les différentes div en appuyant sur des touches (par exemple les flèches avant et arrière)

J'ai récupérer ce code sur Codrops pour les animations (voir un peu plus bas) , actuellement la transition n'apparait seulement lorsque j'appuie sur un lien, mais j'aimerais le passer sur les touches du clavier.

Voila le code 


var PageTransitions = (function() {

	var $main = $( '#pt-main' ),
		$pages = $main.children( 'div.pt-page' ),
		$iterate = $( '#iterateEffects' ),
		animcursor = 1,
		pagesCount = $pages.length,
		current = 0,
		isAnimating = false,
		endCurrPage = false,
		endNextPage = false,
		animEndEventNames = {
			'WebkitAnimation' : 'webkitAnimationEnd',
			'OAnimation' : 'oAnimationEnd',
			'msAnimation' : 'MSAnimationEnd',
			'animation' : 'animationend'
		},
		// animation end event name
		animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],
		// support css animations
		support = Modernizr.cssanimations;
	
	function init() {

		$pages.each( function() {
			var $page = $( this );
			$page.data( 'originalClassList', $page.attr( 'class' ) );
		} );

		$pages.eq( current ).addClass( 'pt-page-current' );

		$( '#dl-menu' ).dlmenu( {
			animationClasses : { in : 'dl-animate-in-2', out : 'dl-animate-out-2' },
			onLinkClick : function( el, ev ) {
				ev.preventDefault();
				nextPage( el.data( 'animation' ) );
			}
		} );

		$iterate.on( 'click', function() {
			if( isAnimating ) {
				return false;
			}
			if( animcursor > 67 ) {
				animcursor = 1;
			}
			nextPage( animcursor );
			++animcursor;
		} );

	}

	function nextPage( animation ) {

		if( isAnimating ) {
			return false;
		}

		isAnimating = true;
		
		var $currPage = $pages.eq( current );

		if( current < pagesCount - 1 ) {
			++current;
		}
		else {
			current = 0;
		}

		var $nextPage = $pages.eq( current ).addClass( 'pt-page-current' ),
			outClass = '', inClass = '';

		switch( animation ) {

			case 62:
				outClass = 'pt-page-rotateCarouselLeftOut pt-page-ontop';
				inClass = 'pt-page-rotateCarouselLeftIn';
				break;
			
		}
		

		$currPage.addClass( outClass ).on( animEndEventName, function() {
			$currPage.off( animEndEventName );
			endCurrPage = true;
			if( endNextPage ) {
				onEndAnimation( $currPage, $nextPage );
			}
		} );

		$nextPage.addClass( inClass ).on( animEndEventName, function() {
			$nextPage.off( animEndEventName );
			endNextPage = true;
			if( endCurrPage ) {
				onEndAnimation( $currPage, $nextPage );
			}
		} );

		if( !support ) {
			onEndAnimation( $currPage, $nextPage );
		}

	}

	function onEndAnimation( $outpage, $inpage ) {
		endCurrPage = false;
		endNextPage = false;
		resetPage( $outpage, $inpage );
		isAnimating = false;
	}

	function resetPage( $outpage, $inpage ) {
		$outpage.attr( 'class', $outpage.data( 'originalClassList' ) );
		$inpage.attr( 'class', $inpage.data( 'originalClassList' ) + ' pt-page-current' );
	}

	init();

	return { init : init };

})();



J'ai essayer de rajouter ce code, mais cela ne marche pas 
if ( window.addEventListener ) 
{
	var kkeys = [], poupi = "13";
	window.addEventListener("keydown", function(e)
	{
		kkeys.push( e.keyCode );
		if ( kkeys.toString().indexOf( poupi ) >= 0 ) 
		{
			outClass = 'pt-page-rotateCarouselLeftOut pt-page-ontop';
			inClass = 'pt-page-rotateCarouselLeftIn';
		}
	}, true);
}



J'aimerais savoir comment faire cela.

Ensuite j'aimerais aussi faire un menu pour passer d'une div a une autre (je ne sais pas si c'est faisable :s)

Enfin voila
Si je n’ai pas été assez clair, je me tiens a votre disposition pour répondre à vos questions
Merci d'avance
Modifié par Denkaa (05 Nov 2013 - 15:57)
Salut,

Il faut juste remplacer le click par un keydown (ou l'ajouter) et vérifier la touche enfoncée qui a déclenché l'événement...

tm
Premièrement, merci de m'aider Smiley lol

Hum j'ai essayer de placer ce code (juste après le click) dans une reconnaissance de touche (la reconnaissance marche bien)
ev.preventDefault();
				nextPage( el.data( 'animation' ) );

Mais il ne se passe rien.
Je ne sais pas trop de quel click vous parlez :s

(j'ai oublié de préciser que j’étais débutant même si vous deviez vous en douter ><)
Finalement je pense pas faire avec la touche Entrée. Je vais juste le faire avec un menu.

Du coup je voudrais savoir comment faire avec un onclick (ca c'est deja dans le code) comment avancer de plusieurs pages (par exemple si je veux passer de la page 1 a la 4 directement, actuellement lorsque je clique sur le lien ca ne me met qu'une page)

J'espere que je suis assez clair ><

Merci
je te conseille si tu veux simplifier tes actions JavaScript d'utiliser ce plug-in jQuery " transition.js " qui est justement le portage des animations de codrops pour jQuery


<div class="pt-wrapper">
    <div class="pt-trigger-container">
        <button class="pt-trigger" data-animation="1" data-goto="-1">Go to next page</button>
        <button class="pt-trigger" data-animation="2" data-goto="-2">Go to previous page</button>
        <button class="pt-trigger" data-animation="58" data-goto="1">Go to page 1</button>
        <button class="pt-trigger" data-animation="51-52-53-54-55" data-goto="2">Go to page 2</button>
    </div>

    <!--All Pages-->

    <div class="pt-page pt-page-1">
        <h1><strong>Page 1</strong></h1>
    </div>
    <div class="pt-page pt-page-2">
        <h1><strong>Page 2</strong></h1>
    </div>
</div>


qui te permettras simplement de par ses Features :
Next page transition
Previous page transition
Go to a particular page
Add custom animation
Add a list of animation to be played randomly

de gérer de manière simple tes actions JavaScript que tu pourras d'ailleurs associée avec la fonction jquery : .keydown


// Fleche Gauche
$('element').keydown(function (e) {
    if (e.keyCode == 37) { /* tes actions JavaScript */ }
});

// Fleche Droite
$('element').keydown(function (e) {
    if (e.keyCode == 39) { /* tes actions JavaScript */ }
});

Modifié par tazzkiller (25 Oct 2013 - 23:47)
Ahah merci *_*
C'est parfait, j'ai pas encore essayer avec les keydown mais pour l'instant c'est niquel.
Je te remercie, je vais enfin pouvoir avancer.

Bonne fin de journée.

(Merci encore ><)
Modifié par Denkaa (26 Oct 2013 - 17:04)
J'ai toujours un petit problème : je ne sais pas quel bout de script mettre dans le keydown.
J'ai regarder un peu, du haut de mes infimes connaissances en JS je vois pas trop quoi mettre. Il a l'air de falloir récupérer plusieurs attributs, et je vois pas comment faire avec le keydown :s
dans ton html mets les boutons next et previous de la sorte ( ajout de la class "next" & "previous" ) :

<button class="pt-trigger next" data-animation="1" data-goto="-1">Go to next page</button>
<button class="pt-trigger previous" data-animation="2" data-goto="-2">Go to previous page</button>


et dans ton js : 


// Fleche Gauche
$('element').keydown(function (e) {
    if (e.keyCode == 37) { 
$('button.previous').trigger('click');
}
});

// Fleche Droite
$('element').keydown(function (e) {
    if (e.keyCode == 39) { 
$('button.next').trigger('click');
 }
});
J'ai essayer cela, mais ca ne marche pas.
le probleme vient du keydown, j'ai essayer de rentrer la ligne 
$('button.previous').trigger('click');


dans 

 if ( window.addEventListener ) {
var kkeys = [], konami = "37";
window.addEventListener("keydown", function(e){
kkeys.push( e.keyCode );
if ( kkeys.toString().indexOf( konami ) >= 0 ) {
$('button.previous').trigger('click');
}
}, true);
}


Et cela marche, mais cela ne marche pas si j'en met plusieurs...

Je ne sais donc pas trop comment faire, et je ne vois pas du tout pourquoi le keydown ne marche pas.
petite evolution : 
  if ( window.addEventListener ) {
var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65", previous = "37", next = "39"; 

window.addEventListener("keydown", function(e){
kkeys.push( e.keyCode );

if ( kkeys.toString().indexOf( konami ) >= 0 ) {
alert('Ca marche');
window.location = "page.secrete";
}

if ( kkeys.toString().indexOf( previous ) >= 0 ) {
alert('previous');
$('button.previous').trigger('click');
}

if ( kkeys.toString().indexOf( next ) >= 0 ) {
alert('next');
$('button.next').trigger('click');
}

}, true);

}


Ca ne marche que partiellement, Lorsque je veux avancer avec la fleche de droite ca marche, mais dès que je clique sur n'importe quelle autre touche ca avance d'un cran. Pareille pour la fleche precedente. ca ne doit donc pas etre tres bien comme technique >< (ou j'ai oublié quelque chose...)
dans mon premier code pour les keydowns et le .trigger('click') il faut passer un tab index à ta div et appliquer un focus dessus par la fonction $('#ton_conteneur').focus();
Merci bien de ton aide. Je n'ai pas réussi avec le focus (j'ai pas vraiment de connaissances en JS ><) mais j'ai réussi comme ça (si d'autres sont intéressés....) : 
  if ( window.addEventListener ) {
var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65", previous = "74", next = "75"; 
window.addEventListener("keydown", function(e){
kkeys.push( e.keyCode );


if ( kkeys.toString().indexOf( konami ) >= 0 ) {
alert('Ca marche');
window.location = "page.secrete";
}

 if ( kkeys.toString().indexOf( previous ) >= 0 ) {
/* alert('previous'); */
$('button.previous').trigger('click');
kkeys = [];
}

if ( kkeys.toString().indexOf( next ) >= 0 ) {
/* alert('next'); */
$('button.next').trigger('click');
kkeys = [];
} 

}, true);

}


Bon sinon, merci beaucoup pour ta patiente et ton aide.
Sujet clos
Aller à