I'm making a responsive site and need to include a Facebook Like-Box for the client's Facebook fanpage. The developer page for the like-box has a widget for customization, but it doesn't allow you to set a width in percentages.
I've searched around and the closest I've got was this page from 2010, which refers to a fb:fan widget that allows you to link custom CSS. I tried to get this tutorial to work but it fails with this error:
<fb:fan> requires one of the "id" or "name" attributes.
So, to recap, I need a Facebook Like Box that I can either set up to be fluid, or which allows me to pass custom CSS to the iFrame it generates. Anyone able to point me in the right direction?
I found this Gist today and it works perfectly: https://gist.github.com/2571173
/* Make the Facebook Like box responsive (fluid width)
https://developers.facebook.com/docs/reference/plugins/like-box/ */
/* This element holds injected scripts inside iframes that in
some cases may stretch layouts. So, we're just hiding it. */
#fb-root {
display: none;
}
/* To fill the container and nothing else */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
width: 100% !important;
}
You thought it couldn't be done? AHA! Have at you, Facebook and your wicked fixed-width ways: I wrote a JQuery script to undo all your evil!
$(document).ready(function(){
var fbWidth;
function attachFluidLikeBox(){
// the FBML markup: WIDTH is a placeholder where we'll insert our calculated width
var fbml = '<fb:like-box href="http://www.facebook.com/YOURFANPAGEORWHATEVS" width="WIDTH" show_faces="false" stream="true"></fb:like-box>';//$('#likeBoxTemplate').text().toString();
// the containing element in which the Likebox resides
var container = $('#likebox');
// we should only redraw if the width of the container has changed
if(fbWidth != container.width()){
container.empty(); // we remove any previously generated markup
fbWidth = container.width(); // store the width for later comparison
fbml = fbml.split('WIDTH').join(fbWidth.toString()); // insert correct width in pixels
container.html(fbml); // insert the FBML inside the container
try{
FB.XFBML.parse(); // parses all FBML in the DOM.
}catch(err){
// should Facebook's API crap out - wouldn't be the first time
}
}
}
var resizeTimeout;
// Resize event handler
function onResize(){
if(resizeTimeout){
clearTimeout(resizeTimeout);
}
resizeTimeout = setTimeout(attachFluidLikeBox, 200); // performance: we don't want to redraw/recalculate as the user is dragging the window
}
// Resize listener
$(window).resize(onResize);
// first time we trigger the event manually
onResize();
});
What is does is it adds a listener to the window's resize event. When it resizes, we check the width of the Likebox' containing element, generates new XFBML code with the correct width, replaces the containing element's children with said XFBML and then trigger the Facebook API to parse the XFBML again. I added some timeouts and checks to make sure it doesn't do anything stupid and only runs when it needs to.
Much has changed since the OP.
By simply choosing iFrame and setting your width to 100%, your FB Like Box should be responsive.
Basically FB adds this to the iFrame:
style="border:none; overflow:hidden; width:100%; height:300px;".
Been struggling with the exact same problem. A quick & simple solution is to use the iframe based Facebook Like box.
<iframe class="fb-like-box" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&height=500&colorscheme=light&show_faces=true&border_color&stream=true&header=true" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
Note the assigned 'fb-like-box' class and all the removed inline styles. The class for the iframe could look something like this:
.fb-like-box {
width: 100% !important;
height:500px;
border:none;
overflow:hidden;
}
Looks like it doesn't matter what the height and width are that are defined in the iframe's src tag. Just place the iframe into some fluid element like a cell in a CSS grid layout.
(includes ideas from: http://updateox.com/web-design/make-facebook-comment-and-like-box-fluid-width/)
I used the HTML5 version of Facebook Like Box and here is what worked for me:
.fb-like-box,
.fb_iframe_widget span,
.fb_iframe_widget iframe {
width:100% !important;
}
You cannot set the like-box to anything other than a pixel width. My suggestion is to place it in a DIV or SPAN that is fluid with overflow set to hidden. Sure, it's going to crop off part of the like-box, but by having the requirement of fluid, this is your best bet.
Here's a small work around that appends the HTML5 Facebook LikeBox Plugin into the DOM with a response height or width.
$(document).ready(function(){
var height = $(window).height();
var width = $(window).width();
var widget_height = parseInt((height)*0.9);
var widget_width = parseInt((height)*0.3);
var page_url = "http://www.facebook.com/Facebook";
$(".fb-plugin").append("<div class='fb-like-box'
data-href='"+page_url+"'
data-width='"+widget_width+"'
data-height='"+widget_height+"'
data-colorscheme='dark'
data-show-faces='true'
data-border-color='#222'
data-stream='true'
data-header='true'>
</div></div>");
});
The comment above from Ed and Matthias about using 100% for the iframe worked great for me. Here is my iframe code
ORIGINAL WITHOUT FIX:
<iframe src="//www.facebook.com/plugins/likebox.php?
href=https%3A%2F%2Fwww.facebook.com%2FXXXXXXXXXX&
width&height=290&colorscheme=dark&
show_faces=true&header=true&stream=false&
show_border=true&appId=XXXXXXXXXX"
scrolling="no" frameborder="0"
style="border:none; overflow:hidden; height:290px;"
allowTransparency="true"></iframe>
UPDATED WITH 100% FIX:
<iframe src="//www.facebook.com/plugins/likebox.php?
href=https%3A%2F%2Fwww.facebook.com%2FXXXXXXXXXX&
width&height=290&colorscheme=dark&
show_faces=true&header=true&stream=false&
show_border=true&appId=XXXXXXXXXX"
scrolling="no" frameborder="0"
style="border:none; overflow:hidden; height:290px;width:100%"
allowTransparency="true"></iframe>
The only change is adding "width:100%" to the style attribute of the iframe
note that the code above has "XXXXXXXXXX" in place of the unique references
Related
I'm using the ag-grid-community:^24.1.0 and ag-grid-react: ^24.1.1in the react application. When I set the rowHeight as 25, it is displayed as shown below.
<div className="ag-theme-alpine" style={ { height: 400, width: 600 } }>
<AgGridReact rowSelection="multiple"
rowData={rowData}
rowHeight={25}>
...
</AgGridReact>
</div>
I tried setting
div.ag-theme-alpine div.ag-cell{font-size: 12px !important;vertical-align: middle;} as told in some other posts but there is no change.
However, when I remove the following property from the developer tool, it starts appearing fine.
I want to set the uniform rowHeight(other than the default). How can this be achieved?
You can set the row height to be static in the gridOptions or via the property rowHeight={25} the way you did.
However, agGrid also has a hardcoded value for the line-height that makes the rows only accept single line text.
changing the lineHeight, to something you prefer is the way to go if you want to start changing the rowHeight in addition to the fixed value.
Note: rowHeight field values don't work at all if you are in the infiniteRow model that is commonly used for server-side pagination because agGrid has problems calculating rowHeights and gridHeights if it doesn't know the full extent of the rows data.
if you want to change the lineHeight on all cells you can use the defaultColDef attribute cellClass and pass a class that forces the lineHeight
EDIT: here is how I do it,
in the defaultColDef object :
defaultColDef: {
....
cellClass:'cell-wrap-text',
....
}
then define that class like this:
.cell-wrap-text{
white-space: normal !important;
line-height: 23px !important;
}
the whitespace line will make your text break and go back to line, since agGrid doesn't allow that by default.
after doing so, you can set the rowHeight in the react component like you already did.
I have an embedded iframe that has been created publishing a google doc.
The iframe automatically applies a large padding to its body resulting in the text being a very narrow and ugly column. I have to change that.
I have tried to create a custom directive:
app.directive('iframeWithStyle', [function(){
return {
restrict: 'A',
link: function(scope, element, attrs){
element.on('load', function(){
var iframe = element[0];
var grabbedElement = iframe.querySelector("body");
// -> grabbedElement is null here
});
}
}}]);
which is applied to:
<iframe iframe-with-style
src="https://docs.google.com/document/d/somethingABC123/pub?embedded=true">
</iframe>
but iframe.querySelector returns null and iframe.contentWindow.document results, as expected, in
Uncaught DOMException: Blocked a frame with origin
"http://localhost:8100" from accessing a cross-origin frame.
I have looked at a workaround but I have a feeling that it's overkill (ex: safe cross-communication with messages).
I tried to fight the padding with some css applied to what I can reach.
For example:
iframe {
padding: 0px !important;
margin-left: -50px;
margin-right: 50px;
}
css applied to the body of the iframe seems to be simply ignored.
Once upon a time there were some convenience attributes, such as marginwidth. Tried that too.
I was also wondering if google does not offer some "sugar" but googling around did not help.
Note: it really does not have to be an iframe, but I need to show that formatted gdoc within the app in a way that it is readable; and for that I need to reduce that padding.
Adding a plunker: https://plnkr.co/edit/XIkgPe7ecLyFfhq1Q3Sv?p=preview
Change the last portion of your url from true to false.
https://docs.google.com/document/d/1s2nOQZ39dKD-hsmox5twmmKKkuXzOopT1eXFbMh5DeE/pub?embedded=false
The demo includes use of all of the embedded elements:
<iframe>, <embed>, and <object>
Plunker
When you set embedded=true Google server will add a class named .c1 to the <body> of the content inside the <iframe>
.c1 {
background-color: rgb(255, 255, 255);
max-width: 468pt;
padding: 72pt 72pt 72pt 72pt;
}
That's just plain reckless of Google if you ask me. I suggest that you set padding on the content itself and set embedded=false.
There's no need to use an iframe. You can send a CORS request to GET your document in javascript using a regular XMLHttpRequest. The response is an html document which you can read, modify or render.
See this answer for some example code: https://stackoverflow.com/a/53965010/8932511
I want to display entire content of my database table on html page.I am trying to fetch record from database first and store in ArrayList. What is the best way to do it in java using PostgreSql database ??????
You are using iframes to embed those “previews”, I assume?
In that case, you could achieve this by making the iframe element itself larger, and then use transform: scale() to scale it down again to the target size.
Check the following example – I used example.com for the iframe content, that site is not responsive, as you can see in the first 200px*200px iframe.
The second iframe is 500px*500px – and scaled down by a factor of .4, which is effectively 200px again. Since scaling an element down this way still leaves the space it would have taken originally reserved, it is placed inside a div element that cuts of that overflow.
iframe, #i2 { width: 200px; height: 200px; }
#i2 { overflow: hidden; display: inline-block; }
#i2 iframe { width: 500px; height: 500px; transform:scale(.4); transform-origin: top left; }
<iframe src="https://example.com/">
</iframe>
<div id="i2">
<iframe src="https://example.com/">
</iframe>
</div>
https://jsfiddle.net/5hk9m446/
One thing you should be aware of, is that this will not work for just any website. Via the X-Frame-Options header websites can tell the browser, that they don’t want to be displayed in (i)frames on a different domain. In that case, you can’t do it client-side with iframes; you probably have to render a preview as an image server-side or something like that.
CSS Transforms can help you to downscale iframes.
See this example
http://jsbin.com/wiperebifa/edit?html,css,output
Please also notice with iframes your mouse events are targeted to those pages.
You can use glass pane(s) over the iframes to capture these events or alternatively you can hide iframes and display their content with canvas.
There is a lot of information on how to use ng-class and ng-style on elements. But I was wondering if there is a way to use angular to change the "settings" of a class.
So for example, say that you had a css class that looked as follows:
.testclass {
color: red;
background-color: blue;
}
I want to use angular to change the color:red to color:black, without attaching angular to the HTML DOM object, but via the class instead.
OK, this isn't a very useful example. What I was really planning to use it for was to hide part of ck-editor (class cle_top) and I want to set the whole class to hidden when someone clicks a button (and visible if the click it again).
======== To make it clearer, this is the bit of HTML I want to hide =======
<span id="cke_1_top" class="cke_top cke_reset_all" role="presentation" style="height: auto; -webkit-user-select: none;"><span id="cke_8" class="cke_voice_label">
Editor toolbars</span><span id="cke_1_toolbox" class="cke_toolbox" role="group" aria-labelledby="cke_8" onmousedown="return false;">
<span id="cke_11" class="cke_toolbar" aria-labelledby="cke_11_label" role="toolbar"><span id="cke_11_label" class="cke_voice_label">
But I need to do it without being able to add angular hooks in the HTML code (like adding ng-class to the span, which would have been a simple solution)
Attached is a JSfiddle that shows my problem, and as you can see, the toolbar button does nothing.
http://jsfiddle.net/vrghost/uqvo3ceh/
Which kind of works now, it adds the class invisible to the span, however, it does not hide the span that it is looking at.
Use the same process on a test text and it works...
Don't know of anything that will edit the class itself, but that probably isn't want you want to do. Other options are:
1) Create a second class, that comes after the first one in your CSS file that adds / changes the properties you want. Ex:
.testclass {
color: red;
background-color: blue;
}
.newclass {
color: green; // change property in first CSS class
display: none; // or hide
}
Then apply the second class conditionally:
<div class="text-class" ng-class="{newclass: hideScopeFlag}">blah</div>
2) Simply use ng-if, ng-hide, or ng-show if all you are doing is hiding something. Ex:
<div class="text-class" ng-hide="hideScopeFlag">blah</div>
or
<div class="text-class" ng-show="!hideScopeFlag">blah</div>
Why not simply toggle the class off/on for that element when the user clicks the button? (Edit: You said you want to "set the whole class to hidden" - I am assuming you mean to remove the class?)
To answer your question though, you can do this with JavaScript using document.styleSheets.
See this Stack Overflow question and the blog post it references. It mentions that there may be some browser compatibility issues. I have not investigated this.
EDIT: This implementation of 'ng-toggle' will allow you to hide or show an element with a single button.
The simplest solution without messing with the stylesheets is to add a new rule like
.visibleOff .testclass {
color: black;
}
and then you just need to toggle the "visibleOff" class on a parent element (the wrapper or the body element) of the editor.
To hide certain elements in the DOM you can also use a $scope variable that acts as a boolean. You can set it to false by default and on button click toggle it to true and back.
$scope.hidden = false;
$scope.toggleHide = function(){
$scope.hidden = !$scope.hidden;
}
In your dom you can then wrap your element with an ng-hide="hidden" attribute like so:
<div ng-hide="hidden">...</div>
<button ng-click="toggleHide()">togglehide</button>
A plunker example can be found here: http://plnkr.co/edit/?p=preview
If anyone wanted to know how to do this, potentially this could be useful for other things as well.
Created a function that uses document.querySelector to find the element, then just do a toggle to turn on or of, and that, as they say, is it folks.
$scope.toolBarVisible = function(){
console.log("Changing visibility");
var element = document.querySelector( '.cke_top' );
console.log("Just to do some debugging we check " + element);
var myEl = angular.element( element );
myEl.toggle();
element = document.querySelector( '.cke_bottom' );
myEl = angular.element( element );
myEl.toggle();
var myEl2 = angular.element( document.querySelector( '.test' ) );
myEl2.toggleClass("invisible")
}
And for those that are looking closely, yes, it hides the bottom as well, and all without changing ckeditor or the code.
Hope someone finds it helpful.
I have a requirement to print the View model data using Print Button.
Currently i have a div and assigning my view content to it. This div has been already added in backbone region. In my javascript function, i am just setting the viewmodel content to the printdiv and it working with out any issue.
But the content which i have added for printing is getting appended in the browser HTML also, I dont want to show that in my browser. I tried setting visible hidden and display none to my printingdiv. but then printing is not working since the content is not visible
CSHTML:
<div id="printdiv"/>
JS:
Myapp.printdiv.show(viewData.view);
window.print();
Init.JS
Myapp.addRegions({
printdiv: '#printdiv',
});
Please help me to resolve this issue
Thanks
The best way to handle this sort of problem is with a print-specific stylesheet. This article explains how to do that in detail, but the short version is that you define your non-print styles as normal, then use CSS code like the following to override print-specific styles:
#printdiv {
display: none
}
#media print {
#printdiv {
display: block;
}
}