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 :

Div recouverte d'un calque


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé Avatar de Federico_muy_bien
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    154
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : Avril 2009
    Messages : 154
    Par défaut Div recouverte d'un calque
    Bonjour à tous !
    Je développe une interface web en HTML5, et pour afficher l'aide sur les différents champs à remplir j'aimerai "innover". Au lieu d'abuser des titles, j'aimerai recouvrir les inputs présents par l'aide.

    J'ai une div qui contient mes inputs. Au clic du bouton aide, j'aimerai que cette div soit recouverte d'une nouvelle div noire transparente à 0.2, sur laquelle est écrit l'aide pour les inputs que l'on voit en transparence. Je me suis bien expliqué ?

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
                           <div class="module_content">
    					<input type="text" name="experiment_title" placeholder="Enter an explicit name for your study" required size="60" />
    					<input type="text" id="realisation_date" name="realisation_date" class="datepicker" placeholder="Realisation date" required />
    					<div class="clear"></div>
    					<label>Project:</label>
    						<select><option>select the project</option><option>project1</option><option>project2</option></select>
    					<label>Description:</label><textarea name="experiment_desc" rows="6" cols="60" ></textarea>
    				<div class="clear"></div>
    			</div>

    J'utilise du JQuery. Je pensais récupérer à l'aide de JQuery les dimensions de la div au clic sur le bouton help. Créer une div avec comme style pour le fond du noir avec de la transparence et la placer au même endroit que la div class="module_content"

    Quelles sont les fonctions qui peuvent m'aider ? A quoi je dois faire attention (compatibilité IE9/FF4 min) ? Existe-t-il un plugin jquery ? Comment appelez vous ce moyen pour faciliter mes recherches ?

    Merci à ceux qui prendront le temps de me répondre!
    Bonne journée.

  2. #2
    Rédacteur
    Avatar de Macmillenium
    Homme Profil pro
    Développeur front-end
    Inscrit en
    Mars 2008
    Messages
    2 333
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur front-end
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 2 333
    Par défaut
    Baaah, tu ouvres une DIV positionnée en absolute à l'aide du jQuery ... Je ne vois pas le rapport avec HTML5.

    Et attention à l'abus de placeholder, celui-ci n'est pas implémenté sur tous les navigateurs et pose des problèmes d'accessibilité.

  3. #3
    Membre confirmé Avatar de Federico_muy_bien
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    154
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : Avril 2009
    Messages : 154
    Par défaut
    Salut Macmilleniuim.
    Je crée la div en récupérant height et width, je la place en absolu avec offset(). OK
    Qu'est ce qu'il se passe quand il y a un redimensionnement ? Je relance le positionnement de la div ?

    Pour placeholder je sais, je regarde pour parrer à ça.

  4. #4
    Rédacteur
    Avatar de Macmillenium
    Homme Profil pro
    Développeur front-end
    Inscrit en
    Mars 2008
    Messages
    2 333
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur front-end
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 2 333
    Par défaut
    Non mais tu n'as pas besoin d'offset().

    Code html : 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
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
     
    <!doctype html> 
    <html lang="fr"> 
     
    <head> 
    	<meta charset="utf-8"> 
    	<title>sans titre</title>
    	<style>
                    .module_content {
                            position:relative;
                            width:600px;
                            border:1px solid red
                    }
                    
                    .help-content {
                            display:none;
                            position:absolute;
                            top:0; right:0; bottom:0; left:0;
                            background:rgba(0, 0, 0, .2)
                    }
            </style>
    </head> 
     
    <body>
     
    <div class="module_content">
    	<a href="#" class="help">aide</a>
    	<input type="text" name="experiment_title" placeholder="Enter an explicit name for your study" required size="60" />
    	<input type="text" id="realisation_date" name="realisation_date" class="datepicker" placeholder="Realisation date" required />
    	<div class="clear"></div>
    	<label>Project:</label>
    	<select><option>select the project</option><option>project1</option><option>project2</option></select>
    	<label>Description:</label><textarea name="experiment_desc" rows="6" cols="60" ></textarea>
    	<div class="clear"></div>
     
    	<div class="help-content">Aide</div>
    </div>
     
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script>
            $(".help").click(function() {
                    $(".help-content").show()
            })
    </script>
     
    </body>
    </html>

    Pense aussi à utiliser les labels explicites pour associer chaque champ à son intitulé.

  5. #5
    Membre confirmé Avatar de Federico_muy_bien
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    154
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : Avril 2009
    Messages : 154
    Par défaut
    oula
    Effectivement, en fait c'est tout con...
    C'est parfait ! C'est exactement ce que je recherchais.
    Désolé de pas avoir plus réfléchis.

    Merci beaucoup !

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

Discussions similaires

  1. Bloquer tous les événements d'un calque div
    Par SpIrIt505050 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 27/11/2009, 09h46
  2. Suite de l'ID de la DIV (mais que d'un calque)
    Par grandpa006 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 22/07/2008, 18h59
  3. Calque DIV relatif sans occuper de place
    Par asalem dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 18/10/2007, 15h50
  4. problème de calque (DIV), de décalage et de résolution
    Par sroux dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 29/06/2006, 08h16
  5. Calque/div
    Par jbr_85 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 24/02/2006, 12h45

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