IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Creation de div qui ne dure pas


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé Avatar de Shandler
    Profil pro
    Inscrit en
    Février 2005
    Messages
    514
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2005
    Messages : 514
    Par défaut Creation de div qui ne dure pas
    Bonjour,

    J'ai ce code :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    $("#lien").click(function(){
            $(this).append('<div id="alert_charger">Donn&eacute;e charg&eacute;e</div>')
          $('#alert_charger').css({background:'#fff',position:'fixed','margin': '0 auto','z-index':100000,border: 'solid 3px #F43D3E', width: '300px' })
     
    $('#alert_charger').hide("slow");
    });
    Mon souci est quand je clique sur le lien pour lancer ce code le div génére ne dur pas il est disparait de suite a cause du hide donc j'aimerais savoir si il est possible de faire une sorte de pause entre la creation et le hide du div ?

    Merci a vous

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir.

    Après quelques petites corrections, voici un exemple avec un délai de 3,5s (modifiable) :
    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
     
        <script type="text/javascript">
            $(document).ready(function(){
     
                $("#lien").click(function(){
                    $(this).append('<div id="alert_charger"><p>Donn&eacute;e charg&eacute;e</p></div>');
     
                    $('#alert_charger').css({
                        background:'#ffffff',
                        position:'fixed',
                        margin: '0 auto',
                        zIndex: 100000,
                        border: 'solid 3px #F43D3E',
                        width: 300
                    }).hide(3500);    // 3.5s modifiable !
                });
     
            });
        </script>
    EDIT : on peut également mettre un délai avant l'exécution du hide()

    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
     
        <script type="text/javascript">
            $(document).ready(function(){
     
                //http://james.padolsey.com/javascript/jquery-delay-plugin/
                $.fn.delay = function(time, callback){
                    jQuery.fx.step.delay = function(){};
                    return this.animate({delay:1}, time, callback);
                }
     
                /*
                * Attention un id doit être unique.
                */
                var alertChargerNumber = 0;
     
                $("#lien").click(function(){
                    var number = alertChargerNumber++;
     
                    $(this).append('<div id="alert_charger' + number + '"><p>Donn&eacute;e charg&eacute;e</p></div>');
     
                    $('#alert_charger' + number).css({
                        background:'#ffffff',
                        position:'fixed',
                        margin: '0 auto',
                        zIndex: 100000,
                        border: 'solid 3px #F43D3E',
                        width: 300
                    }).delay(3500, function(){    // 3.5s de délai avant le hide()
                        $(this).hide("slow");
                    });
                });
     
            });
        </script>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre éclairé Avatar de Shandler
    Profil pro
    Inscrit en
    Février 2005
    Messages
    514
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2005
    Messages : 514
    Par défaut
    Merci beaucoup pour ton aide je prefere la 1er solution plus simple a mon gout.

    Merci encore

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. div qui ne descend pas jusqu'en bas
    Par grinder59 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 15/02/2008, 10h35
  2. Masquage de div qui ne fonctionne pas sur IE
    Par Ziltoid dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 18/12/2007, 19h31
  3. [AJAX] div qui ne disparaissent pas sous ie7
    Par starr dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 17/07/2007, 17h16
  4. Problème avec un div qui n'est pas pris en compte
    Par boss_gama dans le forum Général JavaScript
    Réponses: 11
    Dernier message: 25/07/2006, 16h32
  5. Div qui n'a pas une hauteur minimum
    Par Pumpkins dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 26/09/2005, 09h20

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo