J'ai un site que je suis en train de construire et j'ai décidé d'y mettre une boîte "J'aime Facebook" dans la barre latérale. Le site a 2 résolutions en fonction de la largeur de la fenêtre. Le site a deux résolutions en fonction de la largeur de la fenêtre.
Dans le grand css, je veux que la boîte "facebook like" ait une largeur de 410px et dans le petit css, je veux que la boîte "facebook like" ait une largeur de 200px.
Je ne suis pas très doué en jquery, donc si quelqu'un peut m'aider à faire cela, je lui en serais très reconnaissant. Un exemple de ce que je cherche à faire peut être vu sur http://net.tutsplus.com
Jusqu'à présent, j'ai procédé de la manière suivante :
<div class="block facebookLikeBox">
</div>
$(window).resize(function(){
if ($(window).width() > 1200) {
$('.facebookLikeBox').html('<fb:like-box href="http://www.facebook.com/pages/TheFinishedBox/191240420888444" width="410" show_faces="true" stream="false" header="true"></fb:like-box>');
}
}
else {
$('.facebookLikeBox').html('<fb:like-box href="http://www.facebook.com/pages/TheFinishedBox/191240420888444" width="200" show_faces="true" stream="false" header="true"></fb:like-box>');
}
}).trigger('resize'); Et j'ai ça dans la tête
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>Je ne sais pas trop ce qu'il faut faire, car il ne charge rien.
EDIT :
function adjustStyle(width) {
width = parseInt(width);
if (width > 1024) {
$('#sidebar .tip').addClass('vertical');
$('.facebookLikeBox').html('<fb:like-box href="http://www.facebook.com/pages/TheFinishedBox/191240420888444" width="410" show_faces="true" stream="false" header="true"></fb:like-box>');
FB.FBXML.parse(document.getElementsByClassName('.facebookLikeBox'));
} else {
$('#sidebar .tip').removeClass('vertical');
$('.facebookLikeBox').html('<fb:like-box href="http://www.facebook.com/pages/TheFinishedBox/191240420888444" width="200" show_faces="true" stream="false" header="true"></fb:like-box>');
FB.FBXML.parse(document.getElementsByClassName('.facebookLikeBox'));
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});
<head><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script></head>Voici une mise à jour, si vous êtes curieux : voici en direct : http://thefinishedbox.com
