IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Juin 2010
    Messages
    40
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Juin 2010
    Messages : 40
    Par défaut 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 : 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.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    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

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Juin 2010
    Messages
    40
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Juin 2010
    Messages : 40
    Par défaut
    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Insérer Comment Box Facebook sur ma page et non sur mon profil
    Par sativemusic.ch dans le forum Facebook
    Réponses: 0
    Dernier message: 14/11/2011, 22h50
  2. Réponses: 12
    Dernier message: 06/07/2010, 09h16
  3. Listbox et datatemplate : comment faire pour qu'il prenne la largeur complète ?
    Par zax-tfh dans le forum Windows Presentation Foundation
    Réponses: 3
    Dernier message: 25/06/2009, 09h50
  4. Réponses: 2
    Dernier message: 30/01/2009, 11h36
  5. Largeur d'une liste box
    Par poiiop dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 26/09/2004, 23h47

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo