Adapter largeur de la Comments Box Facebook en fonction de la largeur de l'écran

**vhenin** · 18/01/2012, 20h47

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 :

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
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 &agrave; 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.

**NoSmoking** · 20/01/2012, 18h38

Bonjour,
cette mise en page passe par du CSS et de la mise en page bien senti et non par du recalcul.
- que fait-on si l'on utilise pas le navigateur fullSize ?
- que fait-on lorsque l'on redimensionne la fenêtre ?

Jettes un oeil dans La galerie CSS > Modèles de mise en page

**vhenin** · 25/01/2012, 21h11

Merci, noSmoking pour ta réponse.

Tu as entièrement raison. C'était mon premier site en CSS et j'ai eu tort d'y mettre des valeurs fixes... Du coup, le design ne s'adapte pas facilement. Je devrais retravailler le CSS... Mais j'avoue que le courage et le temps me manque.

V.

Adapter largeur de la Comments Box Facebook en fonction de la largeur de l'écran

JavaScript

Vue hybride

Discussions similaires

Partager

Partager