[AJAX] Décalage lorsqu'il y a des balises HTML de mise en forme de texte

**rvm31** · 11/10/2014, 21h37

Bonjour.

je fais une requête AJAX sur des images. le texte s'affiche au dessus
Si dans mon script PHP j'utilise un simple echo ça fonctionne, mais dès que j'essaye de mettre le texte en forme avec des <H2> ou des <p> à chaque fois que j'ai un hover l'image se décale légèrement vers le bas, ce qui provoque un scintillement sur la page. Comment puis je mettre en forme le texte en évitant ce phénomène.
la page Html qui contient le script Jquery

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="infos"></div>
<div class="case" data="1"></div>
<div class="case" data="2"></div>
<div class="case" data="3"></div>
<div class="case" data="4"></div>
<div class="case" data="5"></div>

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
35
36
37
38
39
40
41
42
43
<script src="jquery-1.11.1.min.js"></script>
<script>
$(".case").mouseenter(function(){
	$(this).toggleClass('lux');
	var envoi=$(this).attr('data');
	$.ajax({
		url:'hover.php',
		type: 'GET',
		data:'id='+envoi,
		dataType:'html',
		// On reprend le même id que dans le précédent chapitre
       success : function(code_html, statut){
           $(code_html).appendTo("#infos"); // On passe code_html à jQuery() qui va nous créer l'arbre DOM !
       },
       error : function(resultat, statut, erreur){
       },
       complete : function(resultat, statut){
       }
    });
});
$(".case").mouseleave(function(){
	$(this).toggleClass('lux');
	$('#infos').empty();
});
$(".case").click(function(){
	$(this).toggleClass('cliquer');
	var envoi=$(this).attr('data');
	$.ajax({
		url:'com.php',
		type: 'GET',
		data:'id='+envoi,
		dataType:'html',
		// On reprend le même id que dans le précédent chapitre
       success : function(code_html, statut){
           $(code_html).appendTo("#infos"); // On passe code_html à jQuery() qui va nous créer l'arbre DOM !
       },
       error : function(resultat, statut, erreur){
       },
       complete : function(resultat, statut){
       }
});
});
</script>

le PHP

Code php :

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
<?php
$sql = "SELECT * FROM `case` WHERE `idcase` = '$choix'";
$req = mysqli_query($liendb, $sql);
if (!mysqli_query($liendb, $sql)) {
	printf(mysqli_error($liendb));
}
$data = mysqli_fetch_assoc($req);
$titre = $data['titre'];
$com = $data['com'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
 
<h2><?php echo $titre?></h2>

et le CSS

Code css :

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
.case{
	width:8vw;
	min-width: 50px;
	height: 8vw;
	min-height: 50px;
	border: solid 2px grey;
	background-image: url(images/case-defaut-normal.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	float: left;
}
.lux{
	background-image: url(images/case-defaut-hover.jpg);
	cursor:pointer;
}
.cliquer{
	background-image: url(images/case-defaut-hover.jpg);
	background-color:rgba(255, 240, 0, 1.0);
}
#infos{
	height:300px;
	width:50%;
}

**Bovino** · 17/10/2014, 11h11

dès que j'essaye de mettre le texte en forme avec des <H2> ou des <p>

Bah non, de ce que je vois, tu ne te contentes pas de ces balises, au contraire tu ajoutes aussi un doctype et un head qui n'ont rien à faire dans un retour d'appel AJAX.

**rvm31** · 17/10/2014, 19h21

ok merci on dirait que c'est mieux

[AJAX] Décalage lorsqu'il y a des balises HTML de mise en forme de texte

AJAX

Discussions similaires

Partager

Partager