Incredible shrinking Facebook comments - javascript

This one is an odd one. I've got HTML5 Facebook comments on one of my pages, and after the page loads, the Facebook comment area starts to shrink horizontally until it reaches 5 or 0px. You can see it here:
http://www.rocketcases.com/casestarter/captain-quinn
I cannot figure out why this has started to happen. It didn't start off like that, it just started doing it recently.
I've tried disabling all my other JS, and it's still happening. I've searched Google and StackOverflow. It doesn't seem like anyone else has ever come across this.
Any ideas? Am I missing something very obvious?

Set the span's width which is inside the fb-comments fb_iframe_widget container to 100% !important.
Like this:
.fb_iframe_widget span { width: 100% !important}
EDIT:
The reason appears to be in one of Facebook's scripts, which calculates the width of the element relative to the parent element. A piece from the script:
s.height=Math.max(this._shrinker.offsetTop,0)
What this means is, unless the parent element (in your case, the div with the classes fb-comments and fb_iframe_widget) has a fixed width, the script will loop and keep on reducing the width.
Here's the snippet from the script if you're interested: http://pastebin.com/GesPgQNY

Setting a min-width for the element will solve the problem. and it is better to assign a unique class to plugin's parent element, to avoid future conflicts.
.fb-comments.fb_iframe_widget span:first-child {
min-width: 600px;
}

It was because I had added some custom CSS to size the width of the FB comments div.
.fb-comments, .fb-comments iframe[style] {width: 90% !important;
Once I removed that, it works just fine. So odd.
Thanks for the help!

Related

Hide scrollbar / remove scrollbar

I have been wondering for quite a while now how can you achieve this: https://www.apple.com/mac-pro/
As I put it in my own terms, removing the scrollbar or hiding it. I know you can easily put overflow:hidden but that wouldn't really solve the problem, as in Chrome for example it will not let you scroll with the mouse-wheel (pretty annoying).
I've been looking for quite a while now how to achieve something similar to that, which by the way I have no idea how to call it (again I search it as hiding the scrollbar, removing scrollbar) but no success yet.
If anyone can point me to the right direction, that would be really awesome!
I think that the page does not fill more than the window , so that is why there is no scroll bar. When you do scroll up or down , there are most likely event listeners that are just altering the content.
body { overflow:hidden } would work in some browsers , but not all - So , to avoid having a scroll bar, just don't have the content get larger than the window.
It seems like a slightly altered take on Parallax Scrolling.
If you google for it, you can find a million and one different ways of doing it, tutorials, examples, templates, etc.
Change overview.css on line no 10
position: fixed;
Remove following from overview.css on line 415 and 8
overflow: hidden;
Just add the code below to your css file.
::-webkit-scrollbar {
display: none;
}
Caution !
This will disable all the scrollbar so be sure to put it in a specific class or id if you just want one to be hidden.

CSS elements seem to overlay when zooming in

I am trying to create a HTML site with CSS styling and run into the following issues:
Depending on monitors size, my HTML element's positioning changes. So if It's a bigger screen, then lets say everything fits correctly. But if you open it in a smaller screen, not everything is displayed!
If I zoom in the browsers view, the elements begin to overlay each other - yet I want to stay where they are (even if that means they wont be displayed on screen due to a high zoom IN).
(I cannot post images yet, so I'm adding a link to the picture to explain abit more):
I am also posting a fiddle where you can see my CSS for the MENU and the HTML part that is connected with it:
I have to write some code, but my code is too long and wouldn't look nice.
My Fiddle
It would be really nice of you, if you can help me out here. If it's a problem more complicated to explain on how to fix it, I'd kindly ask, if you can change my fiddle to a working version (if it's not too much to ask).
I have checked already similar Questions, but there were no efficient answers that helped me to solve my problem.
So, the reason that you are getting this behavior comes down to the fact that you have set your two buttons to each be fixed with the position set to %. This means the position of each is calculated as a percent relative to the 'viewport' (the browser window). If the window is only 500px wide, then your 40% left position button sits at 200px and the 50% left position button sits at 250px, thereby causing them to overlap.
Generally, I would not use fixed positioning here, but it's really not possible to provide a better alternative without seeing more of your code. (Perhaps you'd like to get feedback in general by posting all of your code on CR).
You can solve the problem by wrapping both elements in a div and give that div your fixed position values for the first element and allow the second button to be positioned relative to the first.
Here's an example of that approach and your updated fiddle:
Change your HTML:
<div class="btns">
<a href='index.html' class='button_lay'>NONE</a>
<a href='dft.html' class='button_dft'>NONE2</a>
</div>
Add a rule for the .btns class to your css and remove the fixed positioning from each of the buttons:
.btns {
position: fixed;
top: 80%;
left: 40%;
min-width: 300px;
}

Font rendering issue on hover/click/jquery events

building a mobile site using bootstrap 3 which makes use of the collapse js plugin.
My issue is that when you hover over the font in the collapse (it's worth noting that this happens with system fonts and is not just a web-font issue, it's just easier to show with a webfont) or click the font it changes in appearance. Parts of the font are removed or the size changes. I'm not sure why this is happening and I've tried the following:
-webkit-font-smoothing
text-rendering
adding a fixed line height
backface-visiblity
However, none of those work. I'm running out of ideas and while it's harder to show in a screenshot it is 100% a big and noticeable issue when interacting with the site.
I'm assuming it's something to do with the collapse jquery but I can't find anything in the bootstrap repo, on here or from a general google search (hard thing to search for haha) so any help would be appreciated. I don't have much code related to the fonts but:
.panel-tap {
position: relative;
display: block;
width: 100%;
line-height: 1;
font-size: 16px;
}
The panel has some padding but this isn't altered during the animation, nor are any styles added during the animation (only class names are added to display/hide the content below.
I can't post a link to the site but hopefully this is enough info.
Thanks
edit: Worth noting that I've tried removing all styles associated with it (i.e position) and tried adding specific styles to make sure it isn't being overridden across the site (i.e adding font-weights, line-heights, borders etc)
edit2: This doesn't happen all the time, it stops after a few seconds or a few clicks, it's totally inconsistent
edit3: Disabled the animation/jquery side of collapse and it still does it
Some Ideas:
Have you tried setting all the CSS annimation properties to 0/none. It might be picking something up from a parent/bad selector elsewhere.
Double checked there is no CSS for :active or :focus. Or maybe a span around the text that has a relative font-size ( em, % etc)
I remember having trouble with something similar and position:relative;. Can you wrap a span around the text and give it position:static;
Is there an active class or something that might be causing the issue?
Thats all I can think of at the mo. But might help.

Issue with container holding marquee animation - jquery

I’m having an issue with a container holding the marquee and i’m not sure what’s causing it.
Essentially, the container is stretching way too far, causing the animation to flash across extremely fast (because the animation accounts for the width).
I don’t want to state a width for the marquee because I want the container to stretch to whatever its siblings width is.
I’ve created a fiddle to display what’s happening. In the fiddle, i’ve included the exact html included on my own webpage.
I assume there’s an issue with the css of one of the other elements, but what? What's causing the container to stretch to extreme lengths?
FIDDLE: http://jsfiddle.net/uz9pG/
This is the jquery plugin marquee that i'm using http://jquery.aamirafridi.com/jquerymarquee/
Tables, fluid widths and overflow hidden tricks don't really get along well. You'll either need to change your code to use a different markup structure or put a fixed width on one the containing divs within your <td>.
Also, you have conflicting settings in your JS vs data-attributes in your markup. <div data-duration="2000" data-direction="right" class="marquee">
Here's a working version. http://jsfiddle.net/uz9pG/2/ Takes a second for the marquee to start. You'll need to adjust your margin code to sort that out. This one removes the tables altogether but you can just as easily add a fixed width to something like your .module_content div if that works for your design.
.module_content {
width: 400px;
overflow: hidden;
}

Contentflow auto resize issues

I'm using this javascript plugin: http://jacksasylum.eu/ContentFlow/
Well, I'm a beginner in js programming and I have this problem:
When I resize the browser window, the images are reduced too. But i don't have any idea how to turn off the resize function. I tried to comment many lines of codes that have .resize or something but it didn't work. I was searching on google but with no success for the answer, I hope someone could help me here :/
did you try to style the class item with fix width because I think this is the issue.
As I can see the class item is use on each div and everything is set with % width.
.item{
width:200px;
}
note that I put 200px but choose the size you want.

Categories