Conflit jquery dans wordpress

**zup17** · 30/01/2017, 10h07

Bonjour,

J'aurais besoin de vos lumières !! J’ai construis un thème avec DIVI thème et j’ai ajouté le script midnight jquery, voilà le lien :
http://epicadesign.fr/midnight-js-mo...enu-au-scroll/

Et suite à l’installation du script midnight jquery, j’ai un conflit jquery. Quand je regarde dans mon navigateur avec l’inspecteur de code j’ai une erreur Jquery dans le fichier custom.js, le problème est sur cette ligne :

Code :

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

1
2
3
4
if ( $( this ).scrollTop() >= $( '.et_pb_scroll_' + $i ).offset().top - $side_offset ) {
							$( '.side_nav_item a' ).removeClass( 'active' );
							$( 'a#side_nav_item_id_' + $i ).addClass( 'active' );
						}

Vous pouvez voir l’erreur sur mon site : http://lacaveparis.com/nouveau/ .

Suite à cette erreur je n’ai plus les pictos sur ma page d’accueil qui apparaisse au scroll vers le bas, car je pense que ça rentre en conflit avec le script midnight jquery qui change la couleur du menu ancre quand ton passe sur la section Agence.

Merci de votre aide car je galère !! Milles merci ��

**zup17** · 30/01/2017, 10h08

Et voilà le message que j’ai dans la console quand j’examine les éléments dans mon navigateur chrome :

Uncaught TypeError: Cannot read property ‘top’ of undefined
at custom.js?ver=2.7.3:782
at dispatch (jquery.js?ver=1.12.4:3)
at r.handle (jquery.js?ver=1.12.4:3)

Et apparement le ‘top’ qui n’est pas défini est celui là je pense:

Code :

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

1
2
3
4
if ( $( this ).scrollTop() >= $( '.et_pb_scroll_' + $i ).offset().top - $side_offset ) {
							$( '.side_nav_item a' ).removeClass( 'active' );
							$( 'a#side_nav_item_id_' + $i ).addClass( 'active' );
						}

Je ne suis pas un pro du JavaScript, merci de votre aide et de vos conseils pour me dépatouiller de tout ça !! ��

**kalimukti** · 30/01/2017, 14h33

Bonjour,

Difficile de regarder ton code autrement qu'en surface, mais dans le code source de la page que tu mets en lien, tu n'as aucun éléments HTML de la classe .et_pb_scroll_ avec un chiffre derrière. Donc $( '.et_pb_scroll_' + $i ) est vide et $( '.et_pb_scroll_' + $i ).offset() est undefined. Un problème avec tes classes dans le thème ?

**zup17** · 02/02/2017, 11h45

Merci de ta réponse kalimukti !!

Envoyé par kalimukti

mais dans le code source de la page que tu mets en lien, tu n'as aucun éléments HTML de la classe .et_pb_scroll_ avec un chiffre derrière.

Je ne suis pas un pro du JavaScript, alors tu veux dire que dans mon thème. Il n'y a pas de class: .et_pb_scroll_ avec un chiffre, tu veux dire comme ça ?? .et_pb_scroll_1 !!

Envoyé par kalimukti

Donc $( '.et_pb_scroll_' + $i ) est vide et $( '.et_pb_scroll_' + $i ).offset() est undefined. Un problème avec tes classes dans le thème

Donc je comprends que se code JavaScript ne défini rien !!

Code :

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

1
2
3
4
if ( $( this ).scrollTop() >= $( '.et_pb_scroll_' + $i ).offset().top - $side_offset ) {
							$( '.side_nav_item a' ).removeClass( 'active' );
							$( 'a#side_nav_item_id_' + $i ).addClass( 'active' );
						}

Ma question cette partie de code JavaScript, sert pour la class active pour mon menu et/ou pour faire apparaitre mes images au scroll ?? J'ai l'impression un peu des deux !?

Merci de aide et de tes conseils !!

**Inazo** · 02/02/2017, 11h56

Bonjour,

A mon avis l'appel direct offset().top crée le soucis.

Essaye plutôt une forme comme ça :

Code :

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

1
2
3
4
5
6
 
var offset = $( '.et_pb_scroll_' + $i ).offset();
if ( $( this ).scrollTop() >= offset .top - $side_offset ) {
							$( '.side_nav_item a' ).removeClass( 'active' );
							$( 'a#side_nav_item_id_' + $i ).addClass( 'active' );
						}

@+

**zup17** · 02/02/2017, 13h05

Merci de ton aide Inazo,

Ok tu pense que le problème viendrai de ' offset().top ', je vais tester !!
Et je fais un retour.

Encore merci pour tes conseils !!

**zup17** · 02/02/2017, 19h16

Bonjour Inazo,

Envoyé par Inazo

Essaye plutôt une forme comme ça :

Code :

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

1
2
3
4
5
6
 
var offset = $( '.et_pb_scroll_' + $i ).offset();
if ( $( this ).scrollTop() >= offset .top - $side_offset ) {
							$( '.side_nav_item a' ).removeClass( 'active' );
							$( 'a#side_nav_item_id_' + $i ).addClass( 'active' );
						}

J'ai testé votre code, mais ça ne change rien !! Puis j'ai regardé le fichier custom.js qui pose problème mais je galère

Je te mets la fonction entière peut être tu pourras m'aider !? Merci de ton aide d'avance

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
if ( $( '.et_pb_section' ).length > 1 && $( '.et_pb_side_nav_page' ).length ) {
			var $i=0;
 
			$( '#main-content' ).append( '<ul class="et_pb_side_nav"></ul>' );
 
			$( '.et_pb_section' ).each( function(){
				if ( $( this ).height() > 0 ) {
					$active_class = $i == 0 ? 'active' : '';
					$( '.et_pb_side_nav' ).append( '<li class="side_nav_item"><a href="#" id="side_nav_item_id_' + $i + '" class= "' + $active_class + '">' + $i + '</a></li>' );
					$( this ).addClass( 'et_pb_scroll_' + $i );
					$i++;
				}
			});
 
			$side_nav_offset = ( $i * 20 + 40 ) / 2;
			$( 'ul.et_pb_side_nav' ).css( 'marginTop', '-' + parseInt( $side_nav_offset) + 'px' );
			$( '.et_pb_side_nav' ).addClass( 'et-visible' );
 
 
			$( '.et_pb_side_nav a' ).click( function(){
				$top_section =  ( $( this ).text() == "0" ) ? true : false;
				$target = $( '.et_pb_scroll_' + $( this ).text() );
 
				et_pb_smooth_scroll( $target, $top_section, 800);
 
				if ( ! $( '#main-header' ).hasClass( 'et-fixed-header' ) && $( 'body' ).hasClass( 'et_fixed_nav' ) && $( window ).width() > 980 ) {
					setTimeout(function(){
						 et_pb_smooth_scroll( $target, $top_section, 200);
					},500);
				}
 
				return false;
			});
 
			$( window ).scroll( function(){
 
				$add_offset = ( $( 'body' ).hasClass( 'et_fixed_nav' ) ) ? 20 : -90;
 
				if ( $ ( '#wpadminbar' ).length && $( window ).width() > 600 ) {
					$add_offset += $( '#wpadminbar' ).outerHeight();
				}
 
				$side_offset = ( $( 'body' ).hasClass( 'et_vertical_nav' ) ) ? $( '#top-header' ).height() + $add_offset + 60 : $( '#top-header' ).height() + $( '#main-header' ).height() + $add_offset;
 
				for ( var $i = 0; $i <= $( '.side_nav_item a' ).length - 1; $i++ ) {
					 if ( $( window ).scrollTop() + $( window ).height() == $( document ).height() ) {
						$last = $( '.side_nav_item a' ).length - 1;
						$( '.side_nav_item a' ).removeClass( 'active' );
						$( 'a#side_nav_item_id_' + $last ).addClass( 'active' );
					 } else {
						if ( $( this ).scrollTop() >= $( '.et_pb_scroll_' + $i ).offset().top - $side_offset ) {
							$( '.side_nav_item a' ).removeClass( 'active' );
							$( 'a#side_nav_item_id_' + $i ).addClass( 'active' );
						}
					}
				}
			});
		}

L'erreur est toujours la même " Uncaught TypeError: Cannot read property 'top' of undefined " même avec ton code !!

Merci pour le temps que tu me consacre !!

**zup17** · 02/02/2017, 19h55

Re Kalimukti,

Envoyé par kalimukti

Difficile de regarder ton code autrement qu'en surface, mais dans le code source de la page que tu mets en lien, tu n'as aucun éléments HTML de la classe .et_pb_scroll_ avec un chiffre derrière. Donc $( '.et_pb_scroll_' + $i ) est vide et $( '.et_pb_scroll_' + $i ).offset() est undefined. Un problème avec tes classes dans le thème ?

J'ai regardé et j'ai bien ma première section qui porte la class: .et_pb_scroll_0, puis la deuxième section .et_pb_scroll_1 et la troisième .et_pb_scroll_2 !!
Le problème apparemment de cette partie de code :

Code :

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

1
2
3
4
if ( $( this ).scrollTop() >= $( '.et_pb_scroll_' + $i ).offset().top - $side_offset ) {
							$( '.side_nav_item a' ).removeClass( 'active' );
							$( 'a#side_nav_item_id_' + $i ).addClass( 'active' );
						}

Et avec l'inspecteur de code de mon navigateur, il souligne en rouge surtout cette partie du code !!

Code :

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

).top - $side_offset ) {

Merci de tes conseils et de aide !!

**zup17** · 02/02/2017, 20h08

Pour plus de précision, le problème impact mon menu ancre qui est à gauche sur ma page d'accueil ( le menu avec le 1,2,3) l'url de mon site: http://lacaveparis.com/nouveau/.
Et le problème sur mon menu ancre est sur le "active" quand on clique sur le 2 ou 3, le active est décollé !! Testez vous comprendrais ... Un grand merci à vous pour votre aide et votre temps