When not logged in into Facebook, a green "Sign Up" button sometimes appears on top inside the Facebook Like Box (using the iFrame version). I say sometimes, because it doesn't show up when logged out from FB in my primary browser Chrome (in which i usually use Facebook), but it does show up in FF (so far checked in 8) MSIE (checked in 9).
The main problem i have with the button is that the layout is inconsistent and sometimes appears broken (i have screenshots, but can't post them here because i'm a new user).
So my question is, can this button, or the whole "create and account" header be removed? If not, any suggestions on how i could make this look decent in FF and MSIE?
Thanks
Henrik
This is a cookie issue, since this ugly green "sign up" button appears in any browser that you never used to log in with Facebook.
I've been experiencing the same problem on different browsers, and if you try cleaning up your cookies in your favorite browser then you will see the green button appear again, whatever the browser.
If you use the likebox plugin in iframe mode, this can be avoided by discarding the public profile options, ie setting "stream" and "show_faces" to false.
This is an iframe example that works:
<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:245px; height:75px;"
src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fonglesetpaillettes81
&width=245&height=100&colorscheme=dark&show_faces=false&border_color=%23D4A7AD&stream=false&header=false">
</iframe>
Hope this helps.
Related
I have a fully functionnal SPA website (Reactjs) which I just made responsive. Everything went smooth except that the site refuses any "scroll movement" on the body, preventing the mobile browser bottom bar to disappear. It is a one page website which I created to have everything displayed full-screen (no need to scroll anything), so I suppose that it is CSS linked, but I just have absolutely no clue on what is happening. Actually, on my Samsung S20+, only the opened burger menu accepts any page scroll movement, permitting me to hide those navigator bars (up and bottom). But once again, I see no specific CSS differences between that burger menu and the main page. Could anyone help me on this ? I'm so lost with it that I don't even know what kind of information I could add in this post except the URL of the website: https://www.epistolads.net.
NB: the sources maps are available on the website, for testing purpose
EDIT 1: just noticed that I can achieve the desired result (scroll on page to hide nav bar) by first zooming a little, if it speaks to anyone.
EDIT 2: Also, I may no "refresh the website" by scrolling "out of screen" up.
Ho mine, got it ! Some month ago, to be sure that no forgotten content gets out of the screen, I added a "overflow-y: hidden;" on the body of the index.html file itself! Changing it back to "auto" gave me back full control on mobile. In case of other people would meet the same problem...
I have set up the following in my angular app
I have an image with the following ng-mouseover and ng-mouseleave events tied to the image tag
<img ng-mouseover="infoIconStyle={'height':'50px','padding':'10px'}" ng-mouseleave="infoIconStyle={'height':'0','padding':'0'}" src="images/info-icon.svg" />
These mouse over events are then sent to the following div
<div class="dataBoxInfoContent" ng-style="infoIconStyle">{{description}}</div>
Therefore when ng-mouseover is triggered the dataBoxInfoContent div opens due to the height going from 0 to 50px and when ng-mouseleave is triggered the div closes again.
However for some reason ng-mouseleave is not trigged when the mouse leaves the image and this is only in Google Chrome. All works fine in internet explorer and mozilla firefox.
Anyone know why this is the case?
I had a similar problem with Chrome and eventually tracked the issue down to a specific Chrome Extension (for me, it was the AngularJS Batarang extension).
If you have any javascript-profiling extensions, the slowness that those add to your page can sometimes cause unusual behavior in events (in particular, the mouse-movement events).
In the "Profiles" tab of the Chrome debugger, use the "Collect JavaScript CPU Profile" to find out which scripts, if any, are hogs, and then if you hover over the script on the right, it will tell you which chrome extension the hog is a part of.
I'm creating a web app exclusively for the iPad/mobile-Safari. The homepage is a run-of-the-mill HTML/CSS page with 3 main sections. But once you click on either of the 3 main buttons, you are directed to a page constructed with 2 iFrames (one on top for Nav, one on bottom for Content)
The problem was that before either of these 3 pages loaded there was a quick flash of white color and then the page loaded. I tried hiding the visibility style of the iframe and then onLoad change it to 'visible' and that worked. But it worked only once, when the iFrame-constructed page first loads. Once it loads and I click on a link on that page, the white flash is back because the iFrame has loaded already so it's already visible.
I tried the obvious like adding a css style to the iframe with a background color (also tried an inline style) but the same thing happened. Any ideas on how to solve it? Thanks!
You can do this cheat:
<iframe src="..." style="visibility:hidden;" onload="this.style.visibility='visible';"></iframe>
In the content, you can catch all link and form:
document.getElementsByTagName("a").addEventListener("click", function(e){
window.top.document.getElementsByTagName("iframe")[0].style.visibility = "hidden";
});
Explain:
First time, your iframe is hidden, and you can see the background of your main page (not white of iframe)
After loaded, Javascript will make iframe is visible and you can see content and background of iframe.
When click a link inside iframe, a trigger will fire, and Javascript will hide iframe again.
I met that problem, and that a whole day to trying to fix, but I cannot except above way. You can meet that issue on Chrome, Firefox, and other browsers, not just on Safari Mobile.
I think the same with KimKha. But "visibility" does not work well sometimes, so I think using "opacity" is better.
<iframe src="..." style="opacity:0;" onload="this.style.opacity=1;"></iframe>
I came across this issue, found lots of solution like KimKha mentions..
None of the solutions assist in further page transitions in the iframe and hiding it really is not a good solution.
With lots of trail and error I came up with the following which fixed my IOS webkit iFrame transition white flash issue, ironically it's such a simple solution:
Just add this to your CSS
html{background:#000}
change the colour to your desired color.
It looks like what the ultimate issue with IOS webkit is when your iframe calls another page, IOS removes the body from the current page for a split second before rendering the content from the new page. by forcing the HTML to have the background colour (default will naturally be white) this fixes the white flicker.
Also note that if your server is set to not allow caching of the .css file providing the styles then you will always get the flicker.
In apache to ensure caching look at
ExpiresByType text/css "access plus 30 days"
I have the developer toolbar for IE7, which is great when I want to inspect the page layout in a fashion similar to the functionality of firebug for firefox.
However I am working with a web site that opens a new window with the toolbars disabled, and I cannot access my dev toolbar button! Is there a way to force IE7 to always show the toolbar?
I don't believe you can.
You can recover the navigation toolbar (back, forward, address bar, search box) in a chromeless window (one opened without navigation toolbar, menus, other toolbars) by hitting F11, then F11 again, but that still doesn't give you access to the IE Developer Toolbar.
What will sometimes work is to hit CTRL+N while the new, chromeless window has focus. Doing that will open a new chromed (toolbars, menus, etc) to the same URL as the chromeless window. The trick won't work very well if the chromeless window URL is the result of a POST, or does a GET that modifies state in some way on the server.
I imagine that this happens because the pop-up window is opened using a javascript window.open() call specifying not to have the toolbars on the new window?
One possibility is opening the page source, finding the javascript call that opens the window, and pasting it into the address bar, modifying it to not disable toolbars.
For example, if the call currently looks like:
window.open(url, "newWindow", "toolbar=no,width=500,...");
Edit the address bar to read something like:
javascript:window.open(url, "newWindow", "toolbar=yes,width=500,...");
When you push enter on that, it should pop up the window just the same, but with toolbars.
IE8 has the dev toolbar built-in, so you can always access it via F12. Consider upgrading?
I'm having a problem with IE7 when clicking on images that open up using the Lightbox 2 javascript image viewer. Instead of overlaying the image on the current page it opens the image into a separate page.
Not sure if this is an AJAX problem possibly ? Works fine in Firefox.
Anybody else come across this before ?
Your page is performing the fall-back behaviour you would expect in the following scenarios...
JavaScript is disabled
There is an error in the JavaScript that is creating the lightbox effect (look out for a very brief flash of the yellow error icon before the next page loads - or fire up some dev tools)
There is a JavaScript error on the page before the image is clicked, which has stopped execution of JavaScript on the page (look out for the yellow error icon in the status bar again!)
The only thing I can think of is that I have google toolbar amd McAfee security installed that may be blocking the overlay (????) but don't think that should make any difference.