Div recouverte d'un calque [Résolu]

Federico_muy_bien · 27/05/2011, 10h54

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.

Macmillenium · 27/05/2011, 11h14

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

Federico_muy_bien · 27/05/2011, 11h24

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.

Macmillenium · 27/05/2011, 11h36

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

Federico_muy_bien · 27/05/2011, 11h57

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 !

27/05/2011, 11h14	#2
Macmillenium Rédacteur/Modérateur Inscription : mars 2008 Messages : 2 288 Détails du profil Informations personnelles : Sexe : Âge : 26 Localisation : France, Sarthe (Pays de la Loire) Informations professionnelles : Secteur : High Tech - Produits et services télécom et Internet Informations forums : Inscription : mars 2008 Messages : 2 288 Points : 3 205 Points : 3 205	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é. __________________ Je ne réponds pas aux questions techniques par MP.
	00

27/05/2011, 11h24	#3
Federico_muy_bien Membre habitué $USER Inscription : avril 2009 Messages : 140 Détails du profil Informations personnelles : Nom : $USER Âge : 25 Informations forums : Inscription : avril 2009 Messages : 140 Points : 119 Points : 119	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. __________________ La programmation aujourd’hui est une course entre les développeurs tâchant de concevoir des programmes de plus en plus nombreux et efficaces, convenant même aux imbéciles, et l’univers essayant de produire des idiots de plus en plus nombreux et efficaces. Jusqu’à présent, c’est l’univers qui gagne.
	00

27/05/2011, 11h57	#5
Federico_muy_bien Membre habitué $USER Inscription : avril 2009 Messages : 140 Détails du profil Informations personnelles : Nom : $USER Âge : 25 Informations forums : Inscription : avril 2009 Messages : 140 Points : 119 Points : 119	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 ! __________________ La programmation aujourd’hui est une course entre les développeurs tâchant de concevoir des programmes de plus en plus nombreux et efficaces, convenant même aux imbéciles, et l’univers essayant de produire des idiots de plus en plus nombreux et efficaces. Jusqu’à présent, c’est l’univers qui gagne.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email