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.
Related
I've implemented the invisible reCAPTCHA and it's all working fine, but Google in their wisdom add a terms/privacy box as an overlay on the bottom right side of the screen:
Unfortunately because I already have a schedule box there it looks a mess. Both Google and my scheduler are external code so I feel like I don't have control. Is there anyway to block/change sides etc the Google terms.
Just found this, although it doesn't give much control:
g-recaptcha tag attributes and grecaptcha.render parameters
If you add:
data-badge="bottomleft"
or
data-badge="inline"
It allows you to flip sides or put it in the form. In my opinion Google needs to address this, I'd happily have a link to all their privacy/terms but this encroaches massively on my site..
I see this type of menu all over the Internet as a way to filter out data:
Does it have a specific name? I'm particularly interested in seeing how the pushed in effect is achieved. I've gone through the Chrome developer tools but viewing the CSS applied Chrome only returns a few classes and not the id of the element.
The menu type does not have a specific name as far as I know (although for all effects and purposes it is a set of radio buttons).
The pushed in effect is caused by an inset shadow and darker background color.
Here is a JSFiddle.
That menu is from Google maps.
It is what I might call an "icon" menu.
Buttons are not pushed in.
Instead, the images are swapped in and out depending on what is chosen.
Javascript is used to change the images and the content below the images.
Use Chrome and go to Google Maps. Type in an address and then click Get Directions. Once the buttons appear, right click on one of the button and choose Inspect element. That will show you the code that Googe is using.
The pushed effect is simply an image applied to the element when it's clicked
They're usually done with sprites
Here are some sprites from google
When the image is hovered/clicked a different spot on the image is used as the background for that element.
I am wondering how to create dynamic elements in a JSP webpage? For example, what I want to do is that I have a Selection Box, in which a user selects an image. Upon clicking a button (or possibly after selecting an item), the image will 'slide down' (like how PPT slides slide down when changing slides) and rest on the center of the screen.
Or at least another simpler case would be, when clicking a button, a text box will appear each time you click the button. So far, the only idea I have of this is by using visibility but that will limit me.
Can you help me on how to do these things or if it is possible to do these with only JSP? Additionally, is it possible for elements to 'pop up' (like in facebook photo viewer) without refreshing the page?
Thank you!
You want things to happen on the client, so you need to be focusing on the HTML, CSS and JavaScript. The fact you generate the HTML using JSP is irrelevant.
Build on things that work
Write JS logic for adding new content based on the form options
Write JS logic for manipulating the CSS to do the animation
Consider using a library such as YUI or jQuery to help with the JS, and using CSS 3 Transitions for the animation.
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
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.