Div recouverte d'un calque

Version imprimable

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:

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.

27/05/2011, 11h14
Macmillenium

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é.
27/05/2011, 11h24
Federico_muy_bien

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.

Non mais tu n'as pas besoin d'offset().

Code:

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é.

27/05/2011, 11h57
Federico_muy_bien

oula 8O
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 !