I added a Like button to a friend's website. In all browsers (IE7-8-9, Firefox 6, Chrome), if a visitor is logged into their FB account, a box with a scroll bar appears next to the Like button and remains visible. It's hard to see what is in the box, but it appears to be my own Facebook page. Can this box be removed or a setting changed so it doesn't show?
The login button actually has a different state when you're logged in. I'm going to assume that you've set the size of the button div via CSS. If you've done that, then you'll get that effect. Play with the width/height values of the container.
Related
I'm working on an Electron app, attempting to create a sidebar. At first, only the arrow should be showing, while the rest of it is off the screen. When a user hovers over the arrow (displayed below), I want it to pull out the rest of the sidebar to be used by the user. However, I'm having a problem where because the browser window size remains the same, the css hover animation goes off the browser window and disappears. How can I translate the browser window on hover? Or if there is a better solution, please provide it.
Current Progress
I'm having a weird issue with page render while using AngularJS and Chrome.
I'm creating a cart icon that only shows when there's at least one element in my cart. The code is:
<a ng-style="{visibility:myCart.checkCartExistence()?'visible':'hidden'}" href="/cart"><span ng-bind="myCart.getCartQty()"></span></a>
Here's the problem:
Top image shows the page as soon as an article is added to the cart.Bottom image shows the same page when you scroll down a bit.
The cart icon and the quantity aren't displayed immediately and only show up when you scroll down the page. The weirdest thing is that if you scroll all the way up, the cart icon disappear again.
The same happens with the title that is set dynamically, when you're at the top of the page it shows TITLE A, if you scroll down a bit it updates to TITLE B. If you scroll up it shows TITLE A again.
Unfortunately I can't post any link to the page so I'm wondering if anyone knows what this is without actually seeing the page.
NOTE THAT:
This happens with Chrome.
I tried with other browsers and it looks like they don't have this issue.
I managed to make it work somehow, clearing the browser cache but it came up again soon after.
If I use the history back button of my browser to navigate back to a page with a facebook like button somewhere at the bottom, chrome shows some additional white space at the bottom of the page after the <html>-Tag.
The white area is not there when I navigate on the same page normally (not using browser history)
Using the element inspector I see that the <html>-Tag closes just where the white area starts.
It occurs even with overflow: hidden; on the <html>-Tag
If I remove the fb like button from the page, there is no such white gap.
It seems to be browser specific as I can't reproduce it in Firefox.
Does anybody know where that comes from and how to get rid of it?
Thanks!
I'm having a similar issue. I have a Like button on my product pages and if you click the back button and end up on a page where a like button is the button loads late and is hidden behind other elements.
I found a piece of code that helped but didn't completely solve the issue. I can't remember the code but if you search enough you can find it and maybe solve your issue.
I am making a simple website and I am encountering a problem whenever I reload it.
I placed my menu at the middle of the screen and when you clicked it, it needs to go down to the content. My problem is, whenever I reload it, it would still go up and show the upper picture. What I want is that after one of the menu is pressed, the menu should now stay on the upper corner of the screen without showing the upper picture (Sample website -> http://ec2-54-84-168-45.compute-1.amazonaws.com/Teapop/)
It seems like my url code that directs it on a particular div (e.g menu#teapop_nav)` doesn't work as I expected after I deployed it on the hosting site even though it works well on my local build.
Without using any javascript code, is there a fix for this using html5/css3?
Thank you.
i just tested it on my computer (chrome & firefox) and it seems to work. And also on page refresh. The picture is always on the top.
I have a facebook like button in a hidden modal div which when a user clicks a button that modal appears.
Unfortunately the facebook button that appears has a red rectangle on it, see below:
I am using IE9 (this issue does not appear in other browsers).
Why on earth does this happen? Is there any way i can solve this while still keeping my modal div hidden?
First thing to do is hit F12 to bring up the Developer Tools window.
Click the 'Select element by click' icon, then click on your Like button.
Now examine the Style window (from bottom to top) to see what's applying a red border.