When you put a google map and a plus one button on the same page it seems to create some strange rendering issues. In these examples WITH and WITHOUT the plus one button. If you click on a marker it will zoom in on it, then hit reset to zoom back out. You'll see the map doesn't render when the buttons included till you zoom in and out manually. Why? Anyone know a way around this?
EDIT: This issue seems to only happen in Google Chrome...IRONY!
Both worked fine for me in Firefox 6. In IE9 the google +1 button didn't even show up at all. No surprise there, really, although it should work. That might be, however, because you don't have fully valid HTML in your test document (with html and body tags). You might want to try that first.
You can also try using the HTML 5 tag for the google plus one button. I feel that is a safer alternative and it is fully HTML5-valid:
<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="250" ></div>
Check out the +1 Button Reference under "+1 Tag Attributes" for a complete list of possible attributes
Related
I can't find anybody facing the same problem as mine.
Every time I click an image on google image, suddenly the whole page disappear, but I'm still able to click things just like everything is still there.
I already turn off all extension, use incognito mode, after finally I try to use inspect element, and found attribute stating "Opacity: 0" on the body. And after unchecking the box (Quick disable attribute in inspect element chrome) everything shows up again.
I'm so confused on why this is happening.
Does anyone have ever facing the same problem?
Or how do I fix it?
It's so frustrating, because I have to refresh the page, every time I click on an image, or switch between images
so I was having this one. in the end, it was a virus.
In my case, it was showing an AD screen on the main google page, and in the sources>gstatic.com it had a different source which also was in a [unknown] source.
dug a bit up and discover some adware was using gstatic as a proxy to show ads on all browsers.
I solved it by running malwarebytes, it found it pretty quickly and solved it for me.
Posting this here because I'm hoping it helps people who search for this issue in the future.
part of the log
I wanted to add an Google CSE to the gitbook instead of the normal search engine.
It's no problem to add the GCSE to the gitbook, only the result is weird.
If I go directly to a page I can see the Search Box and can use it normally. If I look at the code there is a div: <div id="__gcse_0">.
If I now go through another chapter the Search Box disappears and there is another div instead of the previous in the code: <gcse:search>.
After I refresh the page the box appears again. This happens on Firefox and Chrome.
Do somebody know what the problem might be?
I've been trying to figure out this same issue... So far, I can only get it to stay by placing the google script into an overriding layout.html - but this is not recommended, and it isn't ideal for most placements. I've also noticed that the CSS that is loaded through the script then gets lost when switching pages (like the script itself was previously) so this solution would also be a pain to re-add all the css files. So it's a super messy solution, and hopefully some one has a better solution out there.
I'm using the Google SaveToDrive button on my webpage as shown here: https://developers.google.com/drive/savetodrive
However, the g-savetodrive button always shows up in a fixed size that does not match the rest of my UI/layout. Are there any parameters to it that we can change the size of the button?
I tried other possibilities that I saw in +1 and Google SignIn buttons also (like data-size, data-width, data-height), but none of them worked.
The short answer is: not easily.
The google api embeds the icon in an iframe, which means you'd have to do some fiddling with jquery to apply any style rules to the button.
see: How to apply CSS to iframe?
To make matters worse the img source is very small. Stretching it yields a very fuzzy image that I wouldn't recommend. At the very least you'll want to find a large drive image and use that instead.
I think your best bet is creating a custom button that emulates googles class and id tags. Hopefully you can reverse engineer the button click and hook your custom button up to the same functionality.
I'm trying to add a Like Box to my website (I have done several before) and I use iFrame code. When I fill in the info and click Get Code it shows the normal code options... HTML5 etc. However, when I click on the other code options nothing happens. It just stays on HTML5. I have tried several different browsers, reset my settings and tried again. Still doing the same thing... any help?
I'm dynamically generating an imagemap for a chart tool I have.
I was hoping to be able to set a border or color on the area tags so I could check everything was being generated with the right coords, but a little research shows this is not possible.
So whats the easiest way to check my image map is correct? Are there any browser tools which will "visualise" the areas?
What about using JavaScript (and jQuery) to test it?
http://davidlynch.org/js/maphilight/docs/demo_usa.html
This plugin will highlight image map areas.
You can use FireBug for that:
Right-click your image and choose "Inspect Element with FireBug"
In the HTML tab of Firebug, the image tag is highlighted: locate and expand the associated map tag, which usually is right after it
You can now place your mouse over each area tags to see them highlighted over your image
One way to visualize an area tag in Chrome is to add a tabindex to the area tag(s) you want to see, and then click or tab to it. Chrome will nicely highlight the actual outline of the clickable area.
This solution unfortunately doesn't work in Firefox.
Image Map Editor is a plug-in for Firefox. It is the best tool I have found so far, makes creating, inspecting, and editing image maps very easy.
In Chrome you can select the area of the image map and click on the three little dots
to the left and then select "focus"
Never thought I would ever say that, but this is one of the few cases where Dreamweaver could be helpful. You'll have an interface, you will be able to work with anchor points and set your imagemap easily.