11521 sujets

JavaScript, DOM et API Web HTML5

Erreur Javascript - Wordpress

Bonjour à tous, voilà mon problème j'ai une erreur dans ma console chrome rapport au script ci-dessous, je ne comprend pas cette erreur, qui de plus n’apparaît pas sur mon site statique, j'espère que vous pourrais m'aider, en vous remercient d'avance Smiley smile

Voilà quelques infos utile :
- Version de WordPress : 4.7.4
- Version de PHP/MySQL : 5.5.38 / 5.7.12
- Thème utilisé : Larme (thème custom)
- Extensions en place : Block Bad Queries (BBQ) (20161114), Broken Link Checker (1.11.2), Forum_wordpress_fr (4.1), Jetpack by WordPress.com (4.8.2), Juiz Last Tweet Widget (1.3.6), Limit Login Attempts (1.7.1), Media File Renamer (3.3.0), Server IP & Memory Usage Display (1.4.0), Social Media Widget (4.0.6), TinyMCE Advanced (4.5.6), UpdraftPlus - Backup/Restore (1.12.40), Use Google Libraries (1.6.2.1), WordPress Popular Posts (3.3.4), WP Editor (1.2.6.3), WP Security Audit Log (2.6.2), Yoast SEO (4.6)
- Adresse du site : http://localhost:58348 (je sais c'est usless)
- Nom de l'hébergeur : Microsoft-IIS/10.0

L'erreur dans la console :
floatable.js:3 Uncaught TypeError: Cannot read property 'top' of undefined
at floatable.js:3
at floatable.js:15

et voilà les codes js, php et css :

Floatable.js
( function() {
	var positionElementInPage = $('#site-header-menu').offset().top;
	$(window).scroll(
		function() {
			if ($(window).scrollTop() >= positionElementInPage) {
				// fixed
				$('#site-header-menu').addClass("floatable");
			} else {
				// relative
				$('#site-header-menu').removeClass("floatable");
			}
		}
	);
} )();


functions.php (du thème) :
function load_jquery() {
     
    if( !is_admin()){
      wp_deregister_script('jquery');
      wp_register_script('jquery','https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js', false, '');
      wp_enqueue_script('jquery');
} 
}
add_action('init', 'load_jquery');
 
function load_floatable() {
     
    if (!is_admin()) {
        wp_enqueue_script('script-float-1', '/wp-content/themes/Larme/js/floatable.js');
} 
}
add_action('init', 'load_floatable');


Et enfin le css :
div#site-header-menu {
    position:relative;
    top:0;
    height:2.45em;
    margin:.5em 10% 0 10%;
    padding:0;
    z-index:3; 
}

div#site-header-menu.floatable {
    position:fixed;
    width:80%;
    margin-top:0.5em;
}

Modifié par Lart-iste (28 Apr 2017 - 16:12)
Bonjour,

essayer de placer cette ligne:

var positionElementInPage = $('#site-header-menu').offset().top;


dans la function scroll juste après

$(window).scroll(
Re, merci de ta réponse @allan00958, mais l’erreur était dans le php et non dans le js, voilà la solution, il suffisait d’enregistrer le script avant de l’appelé.

Code avant :
wp_enqueue_script('script-float', '/wp-content/themes/Larme/js/floatable.js');

Code après :
$js_directory = get_template_directory_uri() . '/js/';
wp_register_script( 'floatable', $js_directory . 'floatable.js', 'floatable', '1.0' );
wp_enqueue_script( 'floatable' );
Sujet clos
Aller à