I'm having trouble getting the Facebook Comments Plugin responsive. Apparently they constantly change the way of rendering the frame and thus is very difficult to find a solution on the web.
Apparently the newest form was implemented in March 2014.
The old way was by CSS but it does not solve the problem nowadays. Apparently a javascript to rewrite the code that will call the frame code is required. This code should also make the adaptation of "data-width" every change browser size.
Someone already implemented this solution? Does anyone know another way to solve?
Thank you very much.
It looks like you can now specify 100% width in the facebook comments box like so, but it only works for page load. At least it's better than before.
<div class="fb-comments"
data-href="http://example.com/"
data-width="100%"
data-numposts="5"
data-colorscheme="light">
</div>
I still had to add the following CSS if you want to change the width as the window change, and there's not guarantee that it won't change in the future. Hopefully the above code will eventually be fully responsive.
.fb-comments span,
.fb-comments iframe {
width: 100% ! important;
}
Related
I've been developing a mobile-first site, using Firefox as the primary browser. I have a branding logo at the top of the page, loaded by way of the WordPress customizer. The logo appears fine in Firefox, but disappears in Chrome and Safari when at a width of 320px. (That's the base width for this project.)
I'm just troubleshooting and trying to find the best way to fix the problem. I'm not really sure what's causing the issue, yet, though. I was hoping to get some other perspectives on this.
Here's the link:
--- link removed ---
Thanks!
I would like to suggest you something that had helped me a lot of times when I did not know from where comes a problem:
Reduce the content only to the part you want to fix(or in case if you have a bug and do not know from where comes - start removing code element by element).
BTW in the developer tools is showing a lot of errors.
Thanks, Marin. I appreciate your suggestions. I think my server at work may be contributing to the issue. For the time being, though, switching the width and height from % to em has at least resulted in the images being visible in chrome and safari. I think I'll have to wait until I can test it outside my workplace to be sure, though. Lol. Thanks, again.
I recently took an interest in building websites and am still very inexperienced, so my apologies if this is easily answered.
I was asked by a friend to build her a simple portfolio website for fashion designs. As such, the website mainly has image galleries. The images come in various sizes and rather than ordering them manually to make it look better, I found the Masonry plugin. I implemented masonry.pkgd.min.js into my code (initialized through the HTML) and ran into two issues:
The main issue that might make question 2 moot entirely… It looks fine in IE and Firefox, but the images come up overlapping in Chrome and it looks horrible. I cleared my cache several times and tried implementing the imagesLoaded plug-in, which did absolutely nothing. I am very new to Javascript and as such have to rely on copy/pasting this sort of plug-in whereas someone else might be able to delve in and tweak it, but at the same time I had no issues getting tabbed content and this does work in two browsers. Any idea why it doesn’t work in Chrome and what I can do to fix it?
After the plug-in, I don’t seem to have any control over automatically centering the image columns in the gallery/container and they are aligned left by nature. I more or less fixed this by manually setting a margin-left that puts everything in the right place, but would like to know if there is a better solution.
Please let me know if I need to include screenshots or specific code.
Issue One:
Try adding imagesLoaded. Chrome in particular has an issue if you don't use it with masonry. I suggest trying the solution in the third box first, it's the easiest and fastest loading. This code will go in your .js file if you have one, or in your script tags if you don't.
If the "why" interests you, it's because your containers load before your pictures and don't know how tall they should be.
Issue Two:
You're right on with this one. You can't center the whole masonry container itself (you can get close, but at certain browser widths there will be a small gutter on the right), but you can center the images within their containers by adding a margin like you did or using:
position: relative;
margin-right: auto;
margin-left: auto;
I've implemented the solution described in this previous post Resizing an iframe based on content and it's almost working great, but not quite.
The problem I'm getting is that sometimes it calculates the height correctly, sometimes it calculates it way too short and the content gets chopped off.
I'm looking for some suggestions as to what may cause this, because everyone else seems to have success. It seems to me that if the height is calculated incorrectly, then perhaps the calculation is happening before all the data has loaded into the iFrame from the external source. But that is a guess, and I am by no means a JS expert.
Is there something I can do to ensure that the calculation is done after the external page has finished loading?
It is pretty much impossible to get the height calculated right. I have played around with it for quite some time. One of the things I have experienced is, if you have a form inside the iframe and there are some error handling events in the form. Lets say there is a table in the form with hidden rows etc. Then when the errors appear the table gets "higher" as the rows start appearing, so the height range is now different again. Whenever there is a post back done inside the iframe one can not control the height. I have tried about every solution posted out there and could not get it calculated right. I had to estimate the "highest" height and hard code it to be that height.
I expect the issue is that you need to detect when the content in your iFrame is changing and then resize your iFrame again. In modern browsers you can use mutationObserver to do this, but it doesn't work in IE10 downwards, so you have to use failbacks to workaround this.
I wrote a small library that looks after all these issue and will keep an iFrame sized to it's content. Work's in modern browsers and IE8 upwards.
https://github.com/davidjbradshaw/iframe-resizer
I'm developing a product to be used by a number of customers alongside our Web application.
Quick background:
These customers have incorporated into their pages a widget that we've developed.
The widget's content can be modified by using our application.
The idea behind this product is a bookmarklet that we supply, which will "highlight" our widget on their page, turning it into a clickable link that leads to an administration panel in our app.
The "highlight" effect actually involves some z-index tricks; we create a semi-transparent "backdrop" <div> just a few ticks below the maximum-supported z-index to gray out the page; then, we adjust the z-index of our widget to sit on top of that translucent backdrop. The visual effect should look about like this:
http://skitch.com/troywarr/dtexp/example-good
However, in Safari, as well as Firefox under certain conditions, there seem to be some sort of rendering artifacts that prevent this from looking as intended:
http://skitch.com/troywarr/dteqx/example-bad
As you can tell from the screenshot, a couple of elements (our logo image and the <iframe> that holds an advertisement) are still "bright," as intended. But, the rest of the widget is still shaded-out.
I've been poking around with Firebug for quite a while to try to get at the source of the problem, but I haven't had any revelations. I'm hoping that someone has experienced a similar issue, or recognizes the "visual signature" of this kind of problem. Or, if you're simply adept at JavaScript/jQuery and/or Firebug, I could really use your help trying to figure out where this approach is falling short.
I created a test bookmarklet as a live example. To see it, please:
Open Firefox (the version under development currently only works there reliably).
Go to this page and drag the link there to your Bookmarks Bar: Example Bookmarklet
Navigate to: http://www.sfgate.com/cgi-bin/article.cgi?f=/n/a/2010/07/30/sports/s170637D86.DTL
Click the bookmarklet while on that page, and you should see what I'm referring to.
Thanks very much in advance for any help! This has me baffled.
I was about to give up on this, but I think I found the problem. You have a hell of a lot of DOM elements going on here, but luckily that isn't the issue causing this problem.
The iframe inside DIV#onespot_nextclick needs a background color of #FFF.
Simple!
I know that this question is asked a lot, I checked all of the "related questions" before posting this and I tried all of the different solutions I could find, but to no avail.
I am working on a site at Site Page and there is a header navigation using Pop Menu Magic which the original creator used, it currently is hiding under the swf that is playing below it in only IE while working perfectly in Firefox.
I have tried everything from changing the wmode to transparent or opaque, using z-index on the different divs, ensuring they have a defined position, etc.
Any help would be greatly appreciated.
Here's the "embed" code:
<div id="slideShow">
<div id="flashcontent">
This text will be replaced by the SWFObject Flash Inclusion.
</div>
<script type="text/javascript">
var so = new SWFObject("flash-banner2.swf", "mymovie", "747", "258", "8", "#000");
so.addParam("quality", "high");
so.addParam("wmode", "opaque");
so.write("flashcontent");
</script>
</div>
Thanks again for your help.
Stack Overflow only let's me post 1 hyperlink initially so I'll put the css In a comment.
Get rid of that position: relative in the universal selector rule (*) starting off your CSS. That's a really bad idea. Removing it fixes the problem.
It does break the site a number of ways (presuming that this: http://www.onlineuticacollege.com/david/ is in fact the site you're talking about), but you should fix that where those problems occur, not by relatively positioning everything.
Note: When saying problem in IE, make sure to say what version since there are 3 major ones out there now. I will guess 6.
It is a "feature" of IE6 when windowed objects such as flash and select elements do not abide by z-index rules. Fix is either to hide or to use an iframe "shim"
Talked about here: iframe shimming or ie6 (and below) select z-index bug