[Résolu] Javascript qui ne se déclenche pas (Créer un compte)

  • Statut : non résolu
15 sujets de 1 à 15 (sur un total de 16)
  • Auteur
    Messages
  • #545629
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    Ma configuration WP actuelle
    – Version de WordPress :
    – Version de PHP/MySQL :
    – Thème utilisé : Refinery
    – Extensions en place : aucune en ce moment
    – Nom de l’hebergeur :
    – Adresse du site : en local

    Problème(s) rencontré(s) : Javascript qui ne se déclenche pas

    Bonjour,

    J’ai testé deux scripts JS -> un responsive et l’autre pas. Pourquoi deux ?? …. Car le premier ne fonctionnait pas avec WordPress. Mais je me suis vite rendue compte que malgré tout, j’ai le même souci avec le deuxième. 😕

    3 ème étape : un test concluant avec Dreamweaver, donc il doit être possible de l’utiliser avec le CMS en question.

    J’ai intégré dans le theme (header.php) avec le wp_enqueue_script les quatre fichiers JS + CSS.

    Ensuite dans le code php de la page concernée: insertion de l’appel du plugin via ce code

    <script type="text/javascript">
    	$(document).ready(function () { 				
            $("div#makeMeScrollable").smoothDivScroll({ 				
    	autoScrollingMode: "onStart" 			
    });
    </script>

    Idem pour les class et id dans le html

    Le JS ne se déclenche pas donc je me suis rendue dans le codex ( jQuery noConflict Wrappers) et j’ai testé plusieurs formes, style: jQuery(document).ready(function($){

    Mais rien à faire …. En ce moment, les tests sont en local, si nécessaire je mets en ligne.

    Merci d’avance et vous souhaite une excellente fin d’année!

    #988393
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    Bonjour,

    Quoi que je fasse, via la console, il y a le message suivant -> TypeError: $(…).smoothDivScroll is not a function

    N’est pas une fonction… Bon ben, je vais continuer à chercher …. 😉

    #988394
    didier07
    Participant
    Maître WordPress
    1965 contributions

    Coucou 🙂
    Tu as essayé le wp_enqueue_scripts dans le functions.php ?

    #988395
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    Oui, ils sont bien appelés dans le header -> thème enfant
    Exemple:

    wp_enqueue_script( ‘kinetic’, get_stylesheet_directory_uri (). ‘/carousel/js/jquery.kinetic.min.js’, array(‘jquery’) );

    J’ai résolu le -> TypeError: $(…).smoothDivScroll is not a function avec

    (function($) {
    // mettre son code ….
    });(jQuery);

    Mais bon il ne se passe toujours rien 😋… Je viens de constater que ce script utilise une version plus ancienne de Jquery (jQuery v1.9.1).
    Est-ce que ça a une influence ??

    Merci 🙂

    #988396
    didier07
    Participant
    Maître WordPress
    1965 contributions

    Est-ce que tu as vérifié que ton js est bien présent dans le code source de la page ? S’il n’y ai pas ou pas au bin endroit, ca ne rique pas de marcher 🙂
    La version de jquery, peu probable que ça ai une influence

    #988397
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    Oui, oui… J’ai procédé ainsi:
    functions.php avec wp_enqueue_script (4 fichiers js).
    Le css dans ma feuille de style.css (thème enfant)

    Ensuite via la page single-portfolio.php dans la deuxième boucle (pour l’instant, j’utilise le CPT natif du thème car ce ne sont que des tests afin de bien comprendre)

    La 2eme boucle:

    <section id="portfolio">
    <div id="makeMeScrollable">
    <ul class="nolist textcenter aligncenter">
    
     ‘DESC’, ‘post_type’ => ‘portfolio’, ‘posts_per_page’ => -1 ) );
    if ( $portfolio->have_posts() ) : while( $portfolio->have_posts() ) : $portfolio->the_post();
    $featured_image = wp_get_attachment_image_src( get_post_thumbnail_id(), ‘portfolio’); 
    ?>
    
    
    <li class=" animated bounceIn ">
    <a href="” title=””>
    <img class="zoomy" src="” alt=”” />
    <span class="magnify">+</span>
    </a>
    </li>
        
    		
    		</ul>
    	</div>
    </section>

    J’ai mis en-dessous le script Js et en-dessus de la boucle le CSS (modification du height en px)

    J’ai choisi celui-ci car je trouve que l’auteur a un air de famille avec le Père Noël, je fête demain et je dois encore faire les paquets
    :hs: …

    Voici le lien du carousel: http://smoothdivscroll.com/

    Bon ben ce n’est pas urgent … !! du moment que je ne deviens pas chauve … :D

    #988398
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    Hi!

    Le problème vient bien du JavaScript &WordPress, car j’ai effectué un test sur une page quelconque avec l’éditeur html, les images restent fixes… tel que dans l’exemple ci-dessus.

    Par contre avec une simple page en HTML hors WordPress c’est OK!

    #988399
    didier07
    Participant
    Maître WordPress
    1965 contributions

    A 99 chances sur 100 c’est un roblème d’inclusion trop tot de ton code js

    Si tu fais un CTRL + U tu vois tes js dans le code source de la page et dans l’ordre qu’il faut ou pas ?

    Si tu veux faire un test, place

    
        $(document).ready(function () {                 
            $(“div#makeMeScrollable”).smoothDivScroll({                 
        autoScrollingMode: “onStart”             
    });

    dans le footer

    #988400
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    grrr! c’est le 1% qui a raison -> dans le footer idem …

    Si c’est plus simple je peux mettre en ligne ça me prend 5 à 10 mn…

    #988401
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    J’ai mis en ligne…

    Je vais encore tester du côté CSS, celui-ci a été mis dans le fichier style.css. Il est peut-être préférable de le laisser dans une feuille de style à part.

    A suivre …

    Merci déjà pour tes réponses données à mes questionnements

    #988391
    didier07
    Participant
    Maître WordPress
    1965 contributions

    Tu l’as mis en ligne où ?

    #988392
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    Hahaa!! ça ne marche vraiment pas vu que je dois te mettre le lien …

    http://www.mangomedia.ch/portfolio/atelier-iva/

    Les vignettes en-dessous du svg -> tasse à thé …

    #988390
    didier07
    Participant
    Maître WordPress
    1965 contributions

    Pour commencer 🙂

    
        jQuery(document).ready(function ($) {                 
            $(“div#makeMeScrollable”).smoothDivScroll({                 
        autoScrollingMode: “onStart”             
    });

    #988402
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    Oui, ce matin, j’ai testé tous les jQuery noConflict Wrappers, dont celui-ci… J’ai remis tel quel …
    De plus, maintenant la feuille de style est appelé dans le header (theme > enfant)

    wp_enqueue_style(‘carousel-style’,get_stylesheet_directory_uri() . ‘/carousel/css/smoothDivScroll.css’);

    Si je ne me trompe pas: le div “scrollWrapper” est ajouté dans le code via le JS

    Arf!! C’est bien ++ prise de tête que les CPTs …

    #988403
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    Hello!!

    Ça évolue, les div qui sont gérés par le JS dans la page single-portfolio apparaissent enfin dans le code

    <div class="scrollingHotSpotLeft"></div>
    <div class="scrollingHotSpotRight"></div>
    <div class="scrollWrapper">
    <div class="scrollableArea" style="width: 1588px">

    J’ai mis dans le fichier jquery.smoothdivscroll-1.3-min.js

    jQuery.noConflict();
    (function( $ ) {
    $(function() {
    // More code using $ as alias to jQuery
    });
    })(jQuery);

    Réf: http://api.jquery.com/jquery.noconflict/

    En ce moment ce n’est plus en ligne, car il a encore des erreurs et le css doit être adapté… J’espère y arriver … 🙂

    Merci @didier07 de m’avoir mis sur la bonne voie.

15 sujets de 1 à 15 (sur un total de 16)
  • Le forum ‘Utilisation spécifique de WordPress’ est fermé à de nouveaux sujets et réponses.