href et fonctions

Version imprimable

href et fonctions

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:

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:

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:

<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:

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

06/12/2012, 08h34
SpaceFrog

rajoute un preventDefault()?
06/12/2012, 14h17
arnlig3550

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 :cry: ^^
06/12/2012, 15h03
SpaceFrog

commence par mettre preventDefault() dans la zone de saisie sur la page de google ?
06/12/2012, 15h14
arnlig3550
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:

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

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().
06/12/2012, 15h37
arnlig3550
j'ai donc essayé ça :
Code:

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 :oops:

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

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

06/12/2012, 17h13
arnlig3550

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

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 !

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:

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:

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 !

07/12/2012, 20h59
arnlig3550

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 ? ^^
07/12/2012, 21h56
SylvainPV

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:

_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.
07/12/2012, 23h04
arnlig3550

oula ! :marteau: ^^

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› ?
07/12/2012, 23h18
SylvainPV

Non c'était juste pour désigner les différents liens histoire de pas s'emmeler les pinceaux. Mais visiblement c'est loupé :mrgreen:
08/12/2012, 10h14
arnlig3550

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

donc comment faire ?:roll:

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:

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']" ).

08/12/2012, 12h35
arnlig3550

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 ?

resalut,

j'ai fais un test avec ça:

Code:

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 ?

Bonsoir

Code:

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:

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 );

ok je comprend un peu mieux

j'ai donc essayé ça:

Code:

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'])

09/12/2012, 00h28
danielhagnoul
Citation:

Envoyé par arnlig3550

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

Oui ! :aie:

Si "l'autre lien" contient l'attribut rel="page-photos" , lors d'un clic il doit activer myClickEventHandler.

Mais utiliser e.preventDefault(), comme SpaceFrog l'a déjà dit depuis longtemps.
Code:

1 2 3 4 5 6 7 var myClickEventHandler = function( e ){ e.preventDefault(); // votre code // return false; // non, remplacé par e.preventDefault(); };

bonjour,

c'est dingue ça ne fonctionne toujours pas ! :arf:

voici mon code JS:

Code:

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
40
var myClickEventHandler = function( e ){
	 e.preventDefault();
	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 );

et le html du lien :

Code:

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

j'ai essayer en donnant un nouvel attribut a ce lien, puis ajouté dans la dernière ligne du code JS mais ça ne fonctionne pas non plus, j'ai simplement "#photos" qui s'ajoute dans la barre d'adresse.

mais je viens de voir que j'ai un autre code qui concerne le menu, est ce que ça peut venir de ça ? le voici:

Code:

1
2
3
4
5
6
7
8
9
function checkHash() {
	var hash = document.location.hash;
	if (hash != '') {
		var id = 'page-'+hash.replace('#', '');
		if ($('#'+id).html() != null) {
			$('#header nav a[rel="'+id+'"]').trigger('click');
		}
	}
}

Bonjour

Faites un test en plaçant le code en commentaire.

Code:

1
2
3
4
5
6
7
8
9
10
11
/*
function checkHash() {
	var hash = document.location.hash;
	if (hash != '') {
		var id = 'page-'+hash.replace('#', '');
		if ($('#'+id).html() != null) {
			$('#header nav a[rel="'+id+'"]').trigger('click');
		}
	}
}
*/

09/12/2012, 11h10
arnlig3550

c'est pareil :roll:

je me demande si on va trouver la solution :cry: ^^
10/12/2012, 22h12
danielhagnoul

Bonsoir

Si l'autre lien est un lien dynamique, c'est normal que cela ne fonctionne pas.

Essayer, pour jQuery 1.7 ou +, la dernière version c'est 1.8.3 :

Code:

$( "body" ).on( "click", "[rel='page-accueil'], [rel='page-presentation'], [rel='page-photos'], [rel='page-plan'], [rel='page-contact']", myClickEventHandler );

Comme tous les "rel=page-" sont concernés, il y a une écriture plus courte :

Code:

$( "body" ).on( "click", "[rel^='page-']", myClickEventHandler );
11/12/2012, 19h32
arnlig3550

Bonjour,

ah ça fonctionne avec ce code !

mais il reste un problème:

dans mon code d'origine, il y a une partie qui met un fond noir au bouton actif grâce a ce code css:

Code:

#header nav a:hover, #header nav a.active { background:#000;

et là le fond noir ne se met pas au bouton "photos" quand je clique sur mon lien

est-ce possible de réparer ça ?

Bonsoir

Essayer avec cette version de myClickEventHandler :

Code:

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
var myClickEventHandler = function( e ){
	e.preventDefault();
 
	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;
 
		$( "[rel^='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;
			});
		});
};

13/12/2012, 15h21
arnlig3550

Bonjour,

Désolé pour cette réponse tardive.

J'ai donc essayé ce code, mais ça ne change rien. :roll:. Voyez vous une autre solution ?
13/12/2012, 21h13
danielhagnoul

Bonsoir

Non, il faudrait être certain de l'autre lien (le lien dynamique).

Dans Chrome ou Firefox, touche F12, le volet source, élément ou script selon le navigateur, faire un "Copy as HTML" de la partie du code qui contient l'autre lien et le coller ci-dessous.

Bonjour,

J'ai fais comme indiqué dans votre message précédent, il y a presque toute la page (en simplifié), voici le code:

Code:

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<div id="page">
		<header id="header">
			<div class="content-width">
				<h1><a href="#accueil">LOGO</a></h1>
				<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>
			</div>
		</header>
		<article id="page-accueil" class="page active">
			<section class="content-width">
				<h1>ACCUEIL</h1>
				<div id="mynews" style="display:none"> <!---div contenant les news  ------>
					<div id="news1" class="news_style"> <!---1er news ------>
					<p><b>Nouveau site !:</b> Bienvenue sur notre nouveau site !</p>
					</div>
					<div id="news2" class="news_style"> <!---2eme news ------>
					<p><b>Nouvelles photos !:</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy <a href="#photos" rel="page-photos"> voir les photos ...</a></p>
					</div><!---Vous pouvez ajouter autant de news que vous voulez en ajoutant dautres div avec la classe news_style----->
				</div>
				<div id="news">
				<h1>ACTUALITES</h1>
					<div class="buttondiv" id="news_button" style="top: 257px;"><!---bouton de navigation ------>
						<img src="../../../images/prev.gif" align="absmiddle" id="news_prev"><img src="../../../images/pause.gif" align="absmiddle" id="news_pause"><img src="next0.gif" align="absmiddle" id="news_next">
					</div>
					<div class="clear"></div>
                    <div class="line"></div>
				<div align="left" id="mynewsdis"><!---div pour afficher les news  ------>
					<div class="news_border"><!----cadre des news---->
						<div id="showhere" class="news_show" style="display: block;"> <!---2eme news ------>
					<p><b>Nouvelles photos !:</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy <a href="#photos" rel="page-photos"> voir les photos ...</a></p>
					</div>
					</div>
				</div>
				</div>
			</section>
		</article>
		<div class="clear"></div>
		<article id="page-presentation" class="page">
			<section class="content-width">
				<h1>PRESENTATION</h1>
			</section>
		</article>
		<div class="clear"></div>
		<article id="page-photos" class="page">
			<section class="content-width">
				<h1>PHOTOS</h1>
			</section>
		</article>
		<div class="clear"></div>
		<article id="page-plan" class="page">
			<section class="content-width">
				<h1>PLAN</h1>	
			</section>
		</article>
		<div class="clear"></div>
		<article id="page-contact" class="page">
			<section class="content-width">
				 <h1>CONTACT</h1>
			</section>
		</article>
		
		<div class="clear"></div>

	</div>

le lien dynamique apparaît 2 fois (en rouge), alors que dans mon html je l'ai mis qu'une fois, appart ça je ne vois pas de différence ...

merci

14/12/2012, 21h07
danielhagnoul

Bonsoir

Je viens de tester les bouts de code (HTML, jQuery, CSS) dans ma page de test et ça fonctionne, j'avais oublié de vous faire changer la règle CSS :

Code:

#header nav a:hover, #header nav a.active { background:#000; }

Elle doit être changée en :

Code:

[rel^='page-']:hover, [rel^='page-'].active { background:#000; }
15/12/2012, 11h06
arnlig3550

Bonjour,

Bon il y a un hic ^^ soit je me suis mal exprimé, soit vous m'avez mal compris, ou soit le code ne fonctionne pas, lol, mais ce n'est pas grave je vais ré expliquer ;)

Mon menu fonctionne bien, background noir au bouton actif, tout est bon.

Le hic c'est à mon lien dynamique, le background noir se met à mon lien et pas au bouton "photos" de mon menu pour lequel il correspond.
En fait j'aimerai que quand je clique sur mon lien, ça fasse la même chose que si j'avais cliqué sur le bouton "photos" du menu.

Est-ce un malentendu ou c'est moi qui me trompe dans le code (ce que je ne pense pas)? ^^

Citation:

le background noir se met à mon lien et pas au bouton "photos" de mon menu pour lequel il correspond

Dans myClickEventHandler , il ne suffit pas de faire $( this ).addClass( "active" );, il faut faire $( "[rel='" + $( this ).attr( "rel" ) + "']" ).addClass( "active" );.

La totalité des codes modifiés dans leur dernière version :

[rel^='page-']:hover, [rel^='page-'].active { background:#000; }.

Code:

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 ){
	e.preventDefault();
 
	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;
 
		$('body').css({'overflow':'hidden'});
 
	$( "[rel^='page-'].active" ).removeClass( "active" );
 
	$( "[rel='" + $( this ).attr( "rel" ) + "']" ).addClass( "active" );
 
		$('.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;
			});
		});
};
 
$( "body" ).on( "click", "[rel^='page-']", myClickEventHandler );

16/12/2012, 09h57
arnlig3550

Bonjour,

Ca y est, nous sommes arrivé à nos fin, tout fonctionne parfaitement ! :ccool:
J'ai juste remis l'ancien code au niveau du CSS, car le noir au lien ne faisait pas terrible ^^

Je vous remercie beaucoup, vous m'avez sorti une grosse épine du pied ! :lol: je n'y serai pas arrivé tout seul ça c'est sur !

Je mets donc ce sujet en résolu !:D

Merci à bientôt ! ;)