Adapter largeur de la Comments Box Facebook en fonction de la largeur de l'écran
Bonjour,
J'ai trouvé ce code sur le web et ai essayé de l'adapter à mes besoins càd détecter la largeur de l'écran (résolution) et adapter la div des comments FB par rapport à celle-ci, pour ne pas que les comments chevauchent le partie centrale du site.
Merci pour toute aide ou commentaire appporté!!! ;-)
Je le fais sans doute très naïvement et très mal (est-ce que ce serait le 'data-width qui fait que de tte façon, ça se fixe à 300px? dans ce cas, comment atteindre ça et le modifier par javascript?):
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
48
49
50
51
52
53
54
55
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="../style/SecondStyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@import "../style/style_fr.css";
.fb-comments-800{width: 100px; color: red;}
.fb-comments-1024{width: 170px; color: green;}
</style>
<script language="javascript" type="text/javascript" >
function change_class() {
var faceb = document.getElementById("fb1");
faceb.className="fb-comments";
if (screen.width < 801) {
faceb.className="fb-comments-800";
}
if (screen.width < 1025) {
faceb.className="fb-comments-1024";
}
else {
break;
}
}
</script>
</head>
<body onload="couleur(); change_class()">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" id="fb1" data-href="http://www.ericmigom.be/fr/index.html" data-num-posts="3" data-width="300"></div>
<div class="fb-like" id="fb2" data-href="http://www.ericmigom.be/" data-send="true" data-width="300" data-show-faces="true"></div>
<div id="allBody">
<!-- begin allHeader -->
<div id="allHeader">
<div id="banner">
<h1>Eric Migom</h1>
<a href="#">
Retour à la page d'accueil
</a>
</div>
<!-- end allHeader -->
<!-- begin menu -->
<div id="menu">
<ul>
<li><a ....etc. reste du site |
page test à consulter sur http://www.ericmigom.be/migom2.html
Merci à tous pour votre aide précieuse!
Vh.
