Jquery et les effets

Information importante

En raison d'un grand nombre d'inscriptions de spammers sur notre site, polluant sans relache notre forum, nous suspendons la création de compte via le formulaire de "sign up".

Il est néanmoins toujours possible de devenir adhérent•e en faisant la demande sur cette page, rubrique "Inscription" : https://www.drupal.fr/contact


De plus, le forum est désormais "interdit en écriture". Il n'est plus autorisé d'y écrire un sujet/billet/commentaire.

Pour contacter la communauté, merci de rejoindre le slack "drupalfrance".

Si vous voulez contacter le bureau de l'association, utilisez le formulaire disponible ici, ou envoyez-nous un DM sur twitter.

Submitted by 10-nice on

Bonjour,

j'utilise drupal 6.9 avec jquery_ui et jquery_update activés.

Je n'arrive pas du tout à utiliser les effets natifs de jquery, j'ai bien un objet lorsque j'affiche un $( 'mon element' ) mais si je fais $( 'mon element' ).hide( "slow"); par exemple il ne se apsse absolument rien.

Y a-t-il quelque chose de spécial à faire vis à vis de drupal ou jquery pour que cela fonctionne ?

Merci d'avance.

Forum : 
Support général
Version de Drupal : 
6.x

Soumis par davidm le 4 Février, 2009 - 18:02

Question : as tu déjà utilisé jquery auparavant ?

Pour commencer je te conseille fortement d'utiliser jQuery avec la fonction noconflict en déclarant :

var $j = jQuery.noConflict();

Ca te permet d'utiliser $j au lieu de $ et d'éviter les conflits avec d'autres librairies.

En ce qui concerne ce que tu veux faire as tu bien utilisé document ready ?

<script type="text/javascript">

$j(document).ready(function() {

      $('mon element').hide( "slow");

});

</script>

Ceci dit masquer un élément au chargement de la page, je ne vois pas très bien à quoi ça sert... en général on utilise un lien pour contrôler l'affichage / le masquage, pour un site que j'ai mis en place j'ai un formulaire de recherche qui est affiché/masqué avec un lien (là, j'utilise toggle mais c'est la même logique) :

$j(document).ready(function() {
             $j('#formulaire_recherche').hide();

             $j('a#show_recherche').click(function() {
                         $j('#formulaire_recherche').toggle(400);
                        return false;  });
     });

Soumis par 10-nice le 4 Février, 2009 - 18:04

j'utilisais surtout scriptaculous au lieu de jquery.

Mais dans le cas présent je n'ai rien ajouté à mon site à part des modules drupal.

Pour ce qui est de la fonction ready non je ne m'en sert pas, je veux des effets au click de certains éléments qui des fonctions spécifiques à chaques élément cliqué.

(un fadein/fadeout sur des listes de menu au passage de souris par exemple)

faut-il que j'associe les évènement et les fonctions associés en js directement dans la fonction ready ?

Soumis par 10-nice le 4 Février, 2009 - 18:26

Bon ben je ne suis pas embalé :s

voici mon code :

var $j = jQuery.noConflict();

$j(document).ready(function() {

$j( '#opener' ).mouseover( function () {
$j( '#list' ).fadeIn();
return false;
} );
$j( '#opener' ).mouseout( function () {
$j( '#list' ).fadeOut();
return false;
} );

} );

Le hic c'est que mon opener est une div, et la list une div en absolute placée en dessous mais appartenant à la div opener en terme de hierarchie (

).

Si je fais un hide/show tout bète en javascript j'ai pas de soucis, là avec cette solution jquery dès que je bouge ma souris ma list se met à clignoter un temps proportionnel au temps que j'aurais passé à bougé la souris, au dessus et en dehors de la div list (et donc opener).

Une idée ?

Soumis par 10-nice le 5 Février, 2009 - 13:55

Bon apparemment l'évènement over et out en javascript sur un élément en absolute contenu dans un élément non absolute (et meme en float) pose souci (évenement over et out se lance lors du moindre déplacement de la souris sur l'élément), donc j'ai du réaliser une tempo lancé sur le out qui est détruit à la detection du over. Ca marche plutot pas mal même si c'est très capilotracté tout ça...

pour ceux que ca interesse :

    var $j = jQuery.noConflict();
    var tempo = 1;
    var menuItemOpened = false;
    var menuItemCloser = false;
    var currentOpenItem = false;

    function temporizeCloseItem( menuItem ) {

        // Si aucune menu n'est ouvert
        if( !menuItemOpened ) {

            // On ferme le menu sélectionné
            $j( '#' + menuItem ).fadeOut( "fast" );
        }
    }

    function displayMenuItem( menuItem ) {

            // Si le menu ouvert est différent de celui à ouvrir
            if( currentOpenItem != menuItem ) {

                // On stock le menu à fermer
                var itemToClose = currentOpenItem;

                // On remet à zero le menu ouvert courant
                menuItemOpened = false;

                // On ferme le menu ouvert
                temporizeCloseItem( itemToClose );
            }

            // Si aucun autre menu est ouvert
        if( !menuItemOpened ) {

            // On affiche le menu
            $j( '#' + menuItem ).fadeIn();
            currentOpenItem = menuItem;

            // Si une tempo de fermeture de menu a été lancée
            if( menuItemCloser ) {
                window.clearTimeout( menuItemCloser );
                menuItemCloser = false;
            }

            // On renseigne le menu ouvert
            menuItemOpened = menuItem;
        }
    }

    function hideMenuItem( menuItem ) {

        // Si un menu est ouvert
        if( menuItemOpened ) {

            // On lance la temporisatino de fermeture du menu
                menuItemOpened = false;
            menuItemCloser = setTimeout( "temporizeCloseItem( '" + menuItem + "' )", tempo );
        }
    }