Looks like facebook has once again changed the code for their comment widget. The old hoops we used to jump through of changing the width no longer work.
Examples that no longer work:
.fb-comments * {
width: 100% !important;
}
.fb-comments, .fb-comments span, .fb-comments iframe {
width: 100% !important;
}
The div which has the width set with inline CSS has an random-generated ID, like feedback_0GsySnrdOA4KOODKY, so you can't override it with CSS. The bastards.
Anyone have a solution which doesn't require javascript?
I don't understand why there isn't an option to create the widget with a percentage rather than a pixel. I mean ... is a responsive widget too much to ask for?
Follow this bug https://developers.facebook.com/x/bugs/256568534516879/
Some solution you can use...I found in the thread.
DEMO : http://jsfiddle.net/PZD54/1/
function fbCommentsWorkaround() {
function resizeFacebookComments(){
var src = $('.fb-comments iframe').attr('src').split('width='),
width = $('.fb-comments').parent().parent().width();
$('.fb-comments iframe').attr('src', src[0] + 'width=' + width);
$('.fb-comments iframe').css({width: width});
$('.fb-comments span').css({width: width});
}
FB.Event.subscribe('xfbml.render', resizeFacebookComments);
$(window).on('resize', function(){
resizeFacebookComments();
});
$('.fb-comments iframe').on('load', function() {
resizeFacebookComments();
$('.fb-comments iframe').unbind('load');
});
}
window.fbAsyncInit = function() {
FB.init({
appId : "596895303735715",
status : true,
cookie : true,
oauth : true,
xfbml : true,
logging : false
});
fbCommentsWorkaround();
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
this worked for me:
Add to the fb-comments div data-width="100%"
<div class="fb-comments" data-href="http://example.com/comments" data-width="100%" data-numposts="5" data-colorscheme="light"></div>
and it will be responsive when you resize the browser.
you can put the fb-comments div inside another div and give that div the width you want.
You can use the "data-mobile" attribute. (https://developers.facebook.com/docs/plugins/comments/)
But this will only work on a mobile device, if you want it to resize when resizing the width of your browser, you will need Javascript, I would use $("#element").attr("data-width","size you want"); and call it on load and on resize.
Related
I've got a parent DIV. Set with. I then have a inner DIV which is overflow-x: scroll.
It all works perfectly. But I want to display a message ONLY when scrolling is needed.
Is there a CSS or JAVASCRIPT method which can pick up on this without using libraries such as jQuery or Bootstrap?
Look for when I div is wider than the other...
function myFunction() {
var x = 0;
var parentWidth = document.getElementById("myDIV").clientWidth;
var x = document.getElementById("thisDIV").querySelectorAll(".awiderDIV");
if (x[0].clientWidth > parentWidth){
document.getElementById("scroll").style.display = "flex";
} else {
document.getElementById("scroll").style.display = "none";
}
}
I'm using primefaces ronin theme and I'm trying to make a full screen gmap no matter what the resolution of the screen is. how ever, unless I state the height in pixels, it won't work.
for example, if i set the height css attribute of the map to 100%, it doesn't show, and if I wrap the gmap with a div container with 100% height, it still doesn't work. how can I make a full screen responsive gmap?
You can show a full screen responsive p:gmap on following way:
Lets assume that p:gmap is defined like this (no need for style attribute)
<p:gmap id="gmap" center="41.381542, 2.122893" zoom="13" type="hybrid" />
Place following JavaScript on your page that will do the trick
<script>
function resizeElement(elementId,width,height){
console.log("Resizing element " + elementId + " W/H="+ width + "/" + height);
var element = document.getElementById(elementId);
element.style.width=width+"px";
element.style.height=height+"px"
}
function resizePfGmapFullScreen() {
var width = window.innerWidth - 20;
var height = window.innerHeight - 20;
resizeElement("gmap", width, height);
}
window.onload = function() {
window.dispatchEvent(new Event('resize'));
};
window.onresize = function(event) {
console.log("Screen is resized");
resizePfGmapFullScreen();
};
</script>
Advantage of this solution is that p:map will be automatically resized when screen is resized including screen orientation change on mobile devices.
It is tested running on the latest Primefaces version 6.1.
i am having a hard time finding any information on the ordering of directives and their updating of css properties.
for example, i have two directives, one to set an element to full screen height, and one to align content vertically.
app.directive('fullscreenElement', function() {
return {
restrict: "A",
link: function(scope,element,attrs){
$(element).each(function(){
$(this).css('height', $(window).height());
});
}
};
});
app.directive('alignVertical', function() {
return {
restrict: "A",
link: function(scope,element,attrs){
var height = $(element).height();
var parentHeight = $(element).parent().height();
var padAmount = (parentHeight / 2) - (height / 2);
$(element).css('padding-top', padAmount);
}
};
});
They both work independantly, the trouble is when they are nested, the align-vertical directive doesnt work, im assuming this is because the css height hasn't been set yet? how do i make sure it is set before the alignVertical directive runs? any tips for writing these two directives in a more angular way would be appreciated.
this works:
<header style="height:800px">
<div align-vertical>
this content is centered vertically as expected
</div>
</header>
this doesn't work (content doesnt center vertically, even though header height is now fullscreen):
<header fullscreen-element>
<div align-vertical>
the header element is now fullscreen height but this content is *not* centered vertically
</div>
</header>
thanks
Figured out a solution, posting it here in case anyone finds it helpful.
The trick is to use scope.watch and scope.evalAsync to monitor changes of height to the parent container and run them after rendering is complete.
app.directive('alignVertical', function() {
return {
link: function($scope, element, attrs) {
// Trigger when parent element height changes changes
var watch = $scope.$watch(function() {
return element.parent().height;
}, function() {
// wait for templates to render
$scope.$evalAsync(function() {
// directive runs here after render.
var that = $(element);
var height = that.height();
var parentHeight = that.parent().height();
var padAmount = (parentHeight / 2) - (height / 2);
that.css('padding-top', padAmount);
});
});
},
};
});
I have a div with applied property position: fixed;. I need to stop this property on some height of screen scroll. Any ideas?
I just need the css code only.
You can do it with jQuery pretty easily:
$(window).scroll(function(){
if ($(window).scrollTop() >= target) { // change target to number
$("#el").css('position', 'relative');
}
});
or pure JavaScript:
window.onscroll = function(){
if(window.scrollY >= target) { // change target to number
document.getElementById('el').style.position = 'relative';
}
};
I have a html page which is table based. I have a ul as menu few charts and few tables. I am trying to design it such that it just fits in any screen without any scrollbar. My browser doesn't honer the height=100% which i tried for the main table of the page. Any thoughts? Thanks in advance :)
you will not fit height as you want except using javascript, or use frameset
Here is javascript/jquery code that I have used to force the height of certain elements.
function resize(){
winH = 460;
if (document.body && document.body.offsetWidth) {
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winH = window.innerHeight;
}
$('#container').height(winH);
}
$(function(){
resize();
});
//the following code readjusts the element's height every time the browser window is altered.
window.onresize = function() {
resize();
}