href et fonctions

**arnlig3550** · 05/12/2012, 19h58

Bonjour à tous,

J'ai un soucis avec un action a déclencher sur un lien du type <a href="#"> voir les photos ...</a>

J'aimerais que ce lien déclencle la même action que le bouton "Photos" de mon menu, dont voici son code html :

Code html :

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

1
2
3
4
5
6
7
8
 
<nav>
        <a href="#accueil" rel="page-accueil" class="active">Accueil</a>
	<a href="#presentation" rel="page-presentation">Presentation</a>
	<a href="#photos" rel="page-photos">Photos</a>
	<a href="#plan" rel="page-plan">Plan d'accès</a>
	<a href="#contact" rel="page-contact">Contact</a>
</nav>

et son code JS :

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
 
var _is_animating_page = false;
	$('#header nav a').click(function() {
		if ($(this).hasClass('active') || _is_animating_page) return false;
 
		if ($(this).hasClass('none')) {
			document.location = $(this).attr('href');
			return false;
		}
 
		_is_animating_page = true;
 
		var div 			= '<div class="back-nav"></div>',
			_width 			= $(this).outerWidth(), 
			_height 		= $(this).outerHeight(), 
			_top 			= $(this).offset().top, 
			_left 			= $(this).offset().left,
			_rel 			= $(this).attr('rel'),
			_width_page 	= $(window).width(),
			_final_width 	= ($(this).index() > $('#header nav a.active').index()) ? _width_page : -_width_page;
 
		$('#header nav a.active').removeClass('active');
		$(this).addClass('active');
 
		$('body').css({'overflow':'hidden'});
 
		$('.page.active').css({'position':'absolute', 'width':'100%'}).animate({left:'-='+_final_width}, 500, 'easeInExpo', function() {
			$('.page.active').css({'position':'relative', 'width': 'auto', 'left': 'auto'}).removeClass('active').hide();
			$('#'+_rel).addClass('active').show().css({'position':'relative', 'width':'100%', 'left': _final_width}).animate({left:0}, 500, 'easeOutExpo', function() {
				$('body').css({'overflow':'auto'});
				_is_animating_page = false;
			});
		});
 
		return false;
	});

J'ai essayé de remettre le même code à mon lien comme au bouton du menu, cet à dire :

Code :

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

<a href="#photos" rel="page-photos"> voir les photos ...</a>

Mais ça ne fonctionne pas, et j'ai essayé la fonction trigger comme ceci:

Code :

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

1
2
3
4
5
 
$('#news2 p a').click(function() {
		$('#header nav a[rel="page-photos"]').trigger('click');
		return false;
	});

Mais ça ne fonctionne pas non plus, l'ai-je bien écris ?

Quelqu'un peut-il m'aider à résoudre ce problème ?

Merci

**SpaceFrog** · 06/12/2012, 08h34

rajoute un preventDefault()?

**arnlig3550** · 06/12/2012, 14h17

Salut,

Merci pour ta réponse, mais où est ce que je met ce code ? ^^
Je suis débutant et j'ai du mal avec le JS

^^

**SpaceFrog** · 06/12/2012, 15h03

commence par mettre preventDefault() dans la zone de saisie sur la page de google ?

**arnlig3550** · 06/12/2012, 15h14

Oui c'est ce que j'ai fais ne vous inquiétez pas ^^ mais j'ai du mal à comprendre le rapport de cette option et ce que je souhaite faire

Pouvez vous m'expliquez comment procéder ?

est ce que le code ci-dessous est bon déja ? ^^

Code :

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

1
2
3
4
5
 
$('#news2 p a').click(function() {
	$('#header nav a[rel="page-photos"]').trigger('click');
	return false;
});

**SpaceFrog** · 06/12/2012, 15h27

un click sur un lien si il n'est pas inhiber lancera le href ...
il faut inhiber le href !

soit pas un return false comme dans ton dernier code ...
ou de préférence avec un preventDefault().

**arnlig3550** · 06/12/2012, 15h37

j'ai donc essayé ça :

Code :

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

1
2
3
4
5
 
$('#news2 p a').click(function() {
	$('#header nav a[rel="page-photos"]').trigger('click');
	preventDefault();
});

mais ça fonctionne pas, je vois juste le lien du href qui s'ajoute dans la barre d'adresse, mais c'est tout

**SpaceFrog** · 06/12/2012, 16h15

je ne pense pas que tu aies été voir la doc sur preventDefault()

Code :

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

1
2
3
4
5
6
 
$('#news2 p a').click(function(e) {
        e.preventDefault();
	$('#header nav a[rel="page-photos"]').trigger('click');
 
});

**arnlig3550** · 06/12/2012, 17h13

Si, j'ai regardé sur google, j'ai regardé un tutoriel Javascript, mais j'y comprends pas grand chose, désolé

J'ai essayé votre code mais ça fait la même chose, cet à dire que je vois juste le lien du href qui s'ajoute dans la barre d'adresse, mais c'est tout !

**SylvainPV** · 07/12/2012, 16h26

Bonjour,
Pas la peine de faire un trigger click, ce serait compliquer le problème.

Dans le code tu surveilles les évènements sur $('#header nav a'), autrement dit les liens de ton header. C'est pour ça que les liens que tu mets en dehors du header ne fonctionnent pas.

Il faut compléter ton binding évènements, par exemple comme ceci :
$('#header nav a, a.animate-page')

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
 
var _is_animating_page = false;
	$('#header nav a, a.animate-page').click(function() {
		if ($(this).hasClass('active') || _is_animating_page) return false;
 
		if ($(this).hasClass('none')) {
			document.location = $(this).attr('href');
			return false;
		}
 
		_is_animating_page = true;
 
		var div 			= '<div class="back-nav"></div>',
			_width 			= $(this).outerWidth(), 
			_height 		= $(this).outerHeight(), 
			_top 			= $(this).offset().top, 
			_left 			= $(this).offset().left,
			_rel 			= $(this).attr('rel'),
			_width_page 	= $(window).width(),
			_final_width 	= ($(this).index() > $('#header nav a.active').index()) ? _width_page : -_width_page;
 
		$('#header nav a.active, a.animate-page.active').removeClass('active');
		$(this).addClass('active');
 
		$('body').css({'overflow':'hidden'});
 
		$('.page.active').css({'position':'absolute', 'width':'100%'}).animate({left:'-='+_final_width}, 500, 'easeInExpo', function() {
			$('.page.active').css({'position':'relative', 'width': 'auto', 'left': 'auto'}).removeClass('active').hide();
			$('#'+_rel).addClass('active').show().css({'position':'relative', 'width':'100%', 'left': _final_width}).animate({left:0}, 500, 'easeOutExpo', function() {
				$('body').css({'overflow':'auto'});
				_is_animating_page = false;
			});
		});
 
		return false;
	});

Là j'ai choisi de compléter le binding évènements sur les liens avec une classe "animate-page"

Donc rajoute la classe à ton lien :

Code :

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

1
2
 
<a href="#photos" class="animate-page" rel="page-photos"> voir les photos ...</a>

Et ça devrait marcher ! Prochaine étape, passer le sélecteur $('#header nav a, a.animate-page') en argument d'une fonction pour l'associer à ton script. Ce sera plus facile !

**arnlig3550** · 07/12/2012, 20h59

Merci SylvainPV pour ton aide,

J'ai compris les modifications que tu as fais à mon code grâce a tes explications (enfin les rajouts de code ^^), mais désolé ça ne fonctionne toujours pas.

Je vois le lien du href qui s'ajoute dans la barre d'adresse, et curieusement, la scroll bar de mon navigateur remonte tout en haut ! c'est à dire au niveau de mon menu.

Y'a t-il un hic dans le code ? ^^

**SylvainPV** · 07/12/2012, 21h56

Le hash dans l'URL et le retour en début de page, c'est le comportement normal de ton ancre (non bloqué par le JS return false)

A regarder de plus près ton script, il ne semble pas du tout être prévu pour être flexible au niveau du DOM. En particulier cette ligne :

Code :

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

_final_width 	= ($(this).index() > $('#header nav a.active').index()) ? _width_page : -_width_page;

qui compare l'index de l'élément avec celui du lien actif dans le header, or si le lien se trouve ailleurs alors cet index n'a plus rien à voir.

Donc il faut retravailler ce script. Le plus simple que je vois, c'est :
1) récupérer le href du <a> cliqué en milieu de page (appelons ce lien a1)
2) chercher le <a> du header correspondant à ce href (appelons ce lien a2)
3) plutôt que $(this).index(), qui fait référence à a1, utiliser $(a2).index()

Il y a peut-être (sûrement) d'autres soucis avec ce script, vu qu'on sort du cas d'utilisation et qu'il semble pas flexible du tout.

**arnlig3550** · 07/12/2012, 23h04

oula !

^^

là je commence a ne plus comprendre grand chose lol

quand vous dites a1 et a2, ce sont des ID que je dois donner à mes 2 liens ‹a› ?

**SylvainPV** · 07/12/2012, 23h18

Non c'était juste pour désigner les différents liens histoire de pas s'emmeler les pinceaux. Mais visiblement c'est loupé

**arnlig3550** · 08/12/2012, 10h14

ah ok ^^ je ne suis pas du tout doué en la matière vous savez ^^

donc comment faire ?

**danielhagnoul** · 08/12/2012, 11h50

Bonjour

Je ne prends pas le temps de lire la totalité des messages, car dès le premier la chose me semble mal engagée.

Plutôt qu'un gestionnaire unique sur l'événement "click" pour traiter tous les cas, je construirai un gestionnaire par attribut "rel".

Code :

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

1
2
3
4
5
6
7
8
9
10
$( "[rel='page-photos']" ).on( "click", function(){
    // code spécifique pour ce cas, concernent tous les éléments du DOM ayant cet attribut "rel".
});
 
 
$( "[rel='pagep-presentation']" ).on( "click", function(){
    // code spécifique pour ce cas, concernent tous les éléments du DOM ayant cet attribut "rel".
});
 
// etc.

Si par exemple, trois éléments du DOM ont cet attribut : un tag "a", un tag "div", et un tag "span". Si le tag "span" ne doit pas être traité, alors il faut écrire : $( "a[rel='page-photos'], div[rel='page-photos']" ).

**arnlig3550** · 08/12/2012, 12h35

merci pour cette nouvelle solution

je vais essayer de comprendre tout ça ^^, mais sinon le reste du code ne change pas ? et faut le remettre pour chaque évenement click ?

**arnlig3550** · 08/12/2012, 22h46

resalut,

j'ai fais un test avec ça:

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
var _is_animating_page = false;
	$( "[rel='page-photos']" ).on( "click", function(){
		if ($(this).hasClass('active') || _is_animating_page) return false;
 
		if ($(this).hasClass('none')) {
			document.location = $(this).attr('href');
			return false;
		}
 
		_is_animating_page = true;
 
		var div 			= '<div class="back-nav"></div>',
			_width 			= $(this).outerWidth(), 
			_height 		= $(this).outerHeight(), 
			_top 			= $(this).offset().top, 
			_left 			= $(this).offset().left,
			_rel 			= $(this).attr('rel'),
			_width_page 	= $(window).width(),
			_final_width 	= ($(this).index() > $('#header nav a.active').index()) ? _width_page : -_width_page;
 
		$('#header nav a.active').removeClass('active');
		$(this).addClass('active');
 
		$('body').css({'overflow':'hidden'});
 
		$('.page.active').css({'position':'absolute', 'width':'100%'}).animate({left:'-='+_final_width}, 500, 'easeInExpo', function() {
			$('.page.active').css({'position':'relative', 'width': 'auto', 'left': 'auto'}).removeClass('active').hide();
			$('#'+_rel).addClass('active').show().css({'position':'relative', 'width':'100%', 'left': _final_width}).animate({left:0}, 500, 'easeOutExpo', function() {
				$('body').css({'overflow':'auto'});
				_is_animating_page = false;
			});
		});
 
		return false;
	});

mais ça ne fonctionne que pour le bouton "photos" de mon menu, pas pour mon autre lien

et j'ai peur que ca fasse beaucoup de code de cette façon, non ?

**danielhagnoul** · 08/12/2012, 23h02

Bonsoir

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
/*
 * Si le contenu de la fonction est nécessaire dans chaque cas,
 * vous ne devez écrire qu'une seule fois la fonction !
 */
var myClickEventHandler = function( e ){
	// votre code
};
 
$( "[rel='page-photos']" ).on( "click", myClickEventHandler );
 
$( "[rel='pagep-presentation']" ).on( "click", myClickEventHandler );
 
// etc.

Code :

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

1
2
3
4
5
6
/*
 * Dans ce cas, on peut écrire directement :
 */
$( "[rel='page-accueil'], [rel='page-presentation'], 
	[rel='page-photos'], [rel='page-plan'], 
	[rel='page-contact']" ).on( "click", myClickEventHandler );

**arnlig3550** · 08/12/2012, 23h24

ok je comprend un peu mieux

j'ai donc essayé ça:

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
39
var myClickEventHandler = function( e ){
	var _is_animating_page = false;
 
		if ($(this).hasClass('active') || _is_animating_page) return false;
 
		if ($(this).hasClass('none')) {
			document.location = $(this).attr('href');
			return false;
		}
 
		_is_animating_page = true;
 
		var div 			= '<div class="back-nav"></div>',
			_width 			= $(this).outerWidth(), 
			_height 		= $(this).outerHeight(), 
			_top 			= $(this).offset().top, 
			_left 			= $(this).offset().left,
			_rel 			= $(this).attr('rel'),
			_width_page 	= $(window).width(),
			_final_width 	= ($(this).index() > $('#header nav a.active').index()) ? _width_page : -_width_page;
 
		$('#header nav a.active').removeClass('active');
		$(this).addClass('active');
 
		$('body').css({'overflow':'hidden'});
 
		$('.page.active').css({'position':'absolute', 'width':'100%'}).animate({left:'-='+_final_width}, 500, 'easeInExpo', function() {
			$('.page.active').css({'position':'relative', 'width': 'auto', 'left': 'auto'}).removeClass('active').hide();
			$('#'+_rel).addClass('active').show().css({'position':'relative', 'width':'100%', 'left': _final_width}).animate({left:0}, 500, 'easeOutExpo', function() {
				$('body').css({'overflow':'auto'});
				_is_animating_page = false;
			});
		});
 
		return false;
 
};
 
$( "[rel='page-accueil'], [rel='page-presentation'], [rel='page-photos'], [rel='page-plan'], [rel='page-contact']" ).on( "click", myClickEventHandler );

mais j'ai toujours que le menu qui fonctionne !^^ l'autre lien ne veut rien savoir grrr!! ^^

sinon je crois que vous avez mis une virgule en trop dans votre dernier code, non ? (juste après [rel='page-contact'])

href et fonctions

jQuery

Discussions similaires

Partager

Partager