href et fonctions

**danielhagnoul** · 09/12/2012, 00h28

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 !

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 :

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

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

**arnlig3550** · 09/12/2012, 10h40

bonjour,

c'est dingue ça ne fonctionne toujours pas !

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

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

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

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

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

**danielhagnoul** · 09/12/2012, 10h48

Bonjour

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

Code :

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

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');
		}
	}
}
*/

**arnlig3550** · 09/12/2012, 11h10

c'est pareil

je me demande si on va trouver la solution

^^

**danielhagnoul** · 10/12/2012, 22h12

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 :

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

$( "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 :

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

$( "body" ).on( "click", "[rel^='page-']", myClickEventHandler );

**arnlig3550** · 11/12/2012, 19h32

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 :

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

#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 ?

**danielhagnoul** · 11/12/2012, 23h47

Bonsoir

Essayer avec cette version de myClickEventHandler :

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

**arnlig3550** · 13/12/2012, 15h21

Bonjour,

Désolé pour cette réponse tardive.

J'ai donc essayé ce code, mais ça ne change rien.

. Voyez vous une autre solution ?

**danielhagnoul** · 13/12/2012, 21h13

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.

**arnlig3550** · 14/12/2012, 12h09

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

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

**danielhagnoul** · 14/12/2012, 21h07

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 :

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

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

Elle doit être changée en :

Code :

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

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

**arnlig3550** · 15/12/2012, 11h06

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)? ^^

**danielhagnoul** · 15/12/2012, 23h26

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 :

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

**arnlig3550** · 16/12/2012, 09h57

Bonjour,

Ca y est, nous sommes arrivé à nos fin, tout fonctionne parfaitement !

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 !

je n'y serai pas arrivé tout seul ça c'est sur !

Je mets donc ce sujet en résolu !

Merci à bientôt !

href et fonctions

jQuery

Discussions similaires

Partager

Partager