Vous n'êtes pas connecté - 0 membre connecté
Catégories
Graphisme
Flash (64)
Webdesign (88)
Print (81)
Programmation
PHP (112)
ASP (2)
CSS (29)
Hardware
PC (41)
Mac (19)
Linux (8)
Divers
Blabla (346)
1247 Sujets
16531 Réponses
Graphisme > Webdesign > jQuery avec span…
jQuery avec span...
 Yop !

Je commence à regarder du côté de jQuery... J'ai déjà réussi à faire quelques petits trucs sympas, mais je suis bloqué depuis quelques heures sur un détail...

Je souhaite faire apparaître un cadre lors du survol d'un texte. Tout marche déjà parfaitement quand je règle mon action un lien, ou sur " <li> ", voire " <ul> ", mais ne souhaitant voir la popup que lors du survol d'un texte, je souhaite rendre l'action active sur la <span> .

Mon code jQuery :

$(document).ready(function(){
    // Gestion des popup
    $('.liste_drag').mouseenter(function () {
        $('.popup', this).animate({
            left: 100,
            opacity: 0.75,
            height: 'toggle'
            }, 300, function() {
            // Animation complete.
        });
    });
    $('.liste_drag').mouseleave(function () {
        $('.popup', this).animate({
            left: -350,
            opacity: 0.75,
            height: 'toggle'
            }, 300, function() {
            // Animation complete.
        });
    });
})


Côté XHTML, j'ai, en gros :

<ul id='devis_liste'>
<li>
<a class='pop' href='lien.php'><span class='devisaccepte'>$numerodevis</span>
<span class='cout'> - $titredevis</span></a> - <span class='liste_drag'>[Apercu]</span>
</li>
</ul>
C'est sûrement un peu le bordel. Toujours est-il que je n'arrive pas à cibler le .liste_drag. Par contre ça marche très bien si je cible #devis_liste,
  • ,
      , etc… J'ai aussi essayé de plusieurs manières, genre "#devis_liste > .liste_drag", etc… En vain… Je ne dois pas avoir bien saisi le concept… Vous avez une idée ? Merci d'avance…
  • Posté le 14 06 2010 à 15h34
    Amo - Membre - www

    Réponses - jQuery avec span...
    << 1 2 >>
    Avant de commencer t'as vérifier toutes les autres erreurs qui pourraient arriver? cache, bon fichier etc?
    Posté le 14 06 2010 à 16h28
    o0o - Administrateur - www
    Oui, enfin je pense.
    Si je remplace "$('.liste_drag').mouseenter(f unction () {" par "$('li').mouseenter(function () {", par exemple, ça marche.
    Je pense que c'est un problème de ciblage du coup, ou de code...
    Posté le 14 06 2010 à 16h32
    Amo - Membre - www
    Pour le ciblage debug avec des alert
    J'ai testé avec un truc banal: api.jquery.com tu peux pointer sur la class du span le alert se lance
    Peut etre un probleme css souris absolute :o
    apres faut tester sous different navigateur.
    Posté le 14 06 2010 à 17h11
    o0o - Administrateur - www
    Huuum merci o0o !
    Tu m'as fait avancer !
    Avec des alertes, je me suis rendu compte que le survol du <span> fonctionnait bien. Ce qui cloche, c'est l'affichage du popup.

    J'ai placé le <div> du popup juste avant de fermer le </li> (ce qui me fait penser que je ne l'ai pas fait figurer dans le code), et le $('.popup', this).animate ne marche pas.
    Ca marche quand je fais $('.popup').animate, mais pour tous les popup de toutes mes lignes...
    Je suis perdu ! Y'a une combine pour savoir comment cibler les éléments ?

    Désolé je fais mon boulet mais c'est encore obscure...
    Posté le 14 06 2010 à 17h53
    Amo - Membre - www
    Pour te faire à jquery en douceur, ya un truc pas mal. ixedit.com
    Posté le 14 06 2010 à 20h06
    Geoffroy - Membre - www
    Sérieux, arrêtez de débugger avec des alert(), c'est moche (en plus d'être méga chiant ! :D).

    Firebug+console.log.

    Edit:
    Pour le prob, j'sais pas trop par contre. Avec un lien ce serait mieux. Mais j'ai pas touché au HTML/CSS/JS depusi 6 mois. Je dois être rouillé.
    Posté le 14 06 2010 à 20h08
    Ishiro - Membre - www
    console.log faut absolumment que je m'y mette :o, demain test de ixedit :D
    Posté le 14 06 2010 à 21h12
    o0o - Administrateur - www
     Hum sympa ixedit !
    Je me rappelle que tu l'avais posté sur le feed... J'ai testé, par contre le code m'est carrément incompréhensible !

    Ishiro > Hum ça m'a l'air puissant la partie Javascript de Firebug, je ne m'y étais jamais penché !
    Sinon je ne peux pas trop mettre de lien, il s'agit de ma base compta avec mes clients, devis, factures, etc... 
    J'ai bien essayé d'extraire une partie du code pour faire un sample, mais ça ne marche pas...

    En résumant, j'ai une liste faite à base de <ul> et de <li> .
    A l'intérieur de chaque li, j'ai un texte, puis un <div> avec la classe "popup".

    Du coup ce code qui marche :

    $('.liste_drag').mouseenter(function() {
            $('.popup').animate({
                left: 100,
                opacity: 0.85,
                height: 'toggle'
                }, 300, function() {
                // Animation complete.
            });
        });


    Il marche mais m'affiche les popup de toutes les <li> .
    Quand j'essaie de contraindre avec

    $('.popup', this).animate({

    Ca ne marche plus… C'est vraiment à ce niveau là que ça pêche… Peut-être que je n'ai pas saisi comment contraindre à une zone seulement mon animation… Merci de m'aider en tout cas ! A +
    Posté le 15 06 2010 à 10h37
    Amo - Membre - www
    Bon ça marche !
    J'ai intégré mon <div class="popup"> </div> à l'intérieur du <span> [Apercu], comme ça je peux ajouter l'élément "this" à mon script... C'était un problème de papa et de tit nenfant, je crois.

    C'est peut-être pas super orthodoxe d'un point de vue code, mais ça marche !

    Merci à tous en tout cas pour votre aide.
    Posté le 15 06 2010 à 11h24
    Amo - Membre - www
    o//
    Posté le 15 06 2010 à 12h59
    Geoffroy - Membre - www
    << 1 2 >>
    Partenaires

    Sujets Webdesign
    << 1 2 3 ... 8 9 >>
    Typographie web
    Auteur : o0o
    Posté le 15 08 2012 à 16h33
    3 Réponses (Nouveau sujet)
    Sujet visité 51227 fois
    Font face et pixel art
    Auteur : o0o
    Posté le 31 01 2012 à 11h52
    18 Réponses (Nouveau sujet)
    Sujet visité 11737 fois
    beta epicquote
    Auteur : Geoffroy
    Posté le 11 06 2011 à 01h10
    107 Réponses (Nouveau sujet)
    Sujet visité 20554 fois
    Titre h1 en texte (...)
    Auteur : o0o
    Posté le 11 04 2011 à 16h46
    15 Réponses (Nouveau sujet)
    Sujet visité 9927 fois
    Jimdo VS Wordpress
    Auteur : cactus
    Posté le 14 03 2011 à 17h07
    8 Réponses (Nouveau sujet)
    Sujet visité 11844 fois
    Load balancing
    Auteur : o0o
    Posté le 16 02 2011 à 09h22
    24 Réponses (Nouveau sujet)
    Sujet visité 10628 fois
    ie 7 développement
    Auteur : o0o
    Posté le 25 01 2011 à 12h38
    2 Réponses (Nouveau sujet)
    Sujet visité 8052 fois
    Proxy
    Auteur : o0o
    Posté le 10 08 2010 à 15h46
    6 Réponses (Nouveau sujet)
    Sujet visité 10748 fois
    Arnaque prestations
    Auteur : ug88
    Posté le 08 07 2010 à 10h27
    4 Réponses (Nouveau sujet)
    Sujet visité 7891 fois
    jQuery avec span…
    Auteur : Amo
    Posté le 14 06 2010 à 15h34
    11 Réponses (Nouveau sujet)
    Sujet visité 21226 fois
    << 1 2 3 ... 8 9 >>
    Mentions légales   -   Crédits   -   Nous contacter   -   © Benzor 2006