I've implemented Sign-In using Google's tutorials, but the button doesn't really fit in with the design of the website I'm using it in. I'd like to use an image my graphic designer made instead. Is it currently possible to use a custom image for Sign-In buttons?
You can use gapi.signin.render to render a specified container as a sign-in button.
For example if in your HTML code you have:
<button id="mySignIn">SignIn</button>
The Javascript call would be something like:
gapi.signin.render("mySignIn", {
'callback': signinCallback,
'clientid': 'CLIENT_ID',
'cookiepolicy': 'single_host_origin',
'requestvisibleactions': 'http://schemas.google.com/AddActivity',
'scope': 'https://www.googleapis.com/auth/plus.login'
});
Also, remember to follow the branding guidelines.
The following code is used to add the login button to the page right?
<span id="signinButton">
<span
class="g-signin"
data-callback="signinCallback"
data-clientid="CLIENT_ID"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-scope="https://www.googleapis.com/auth/plus.login">
</span>
</span>
Have you tried to simply replace the class "g-signin" with your own class??
If g-signin is required for google themselves, to determine which is the actual signin button, you could always add a subclass to it.
<span class="g-signin custom" ...></span>
In your CSS this would be shown as:
.g-signin .custom {
/*properties*/
}
Related
is this possible?
I want to add a public event from a google+ page to users calendar with api calls. Unfortunately, the google+ api returns not all information about the event. So i'm searching for an option to add this event to the calendar like the "take part" button on google+.
#Alex, have you tried
Sharing interactive posts
Interactive posts provide an easy and prominent way to allow users to share your site or app with their connections and invite them to take action, for example, RSVP for an event.
To add a add button to your site:
<script >
window.___gcfg = {
lang: 'zh-CN',
parsetags: 'onload'
};
</script>
<script src="https://apis.google.com/js/client:platform.js" async defer></script>
Then create your button:
<!-- Place the tag where you want the button to render -->
<button
class="g-interactivepost"
data-contenturl="https://plus.google.com/pages/"
data-contentdeeplinkid="/pages"
data-clientid="xxxxx.apps.googleusercontent.com"
data-cookiepolicy="single_host_origin"
data-prefilltext="Engage your users today, create a Google+ page for your business."
data-calltoactionlabel="CREATE"
data-calltoactionurl="http://plus.google.com/pages/create"
data-calltoactiondeeplinkid="/pages/create">
Tell your friends
</button>
I have a set of buttons that each can open the modal. The first one opens fine, but if you don't close the modal the second one fails with 'Uncaught TypeError: undefined is not a function.
I have a bunch of links:
<a data-toggle="modal" data-dismiss="modal" data-target="#modal-form" href="partial/forums-modal.html">Open Modal A</a>
<a data-toggle="modal" data-dismiss="modal" data-target="#modal-form" href="partial/facebook-modal.html">Open Modal B</a>
I tried: Twitter Bootstrap open modal over an already opened modal
Not a big help either. Hiding a previous modal when opening a new one.
Yes I have jquery loaded before bootstrap.
The fix for the first error 'Uncaught TypeError' was to upgrade from bootstrap 3.1.1 to 3.2.0. Once this is done, clicking on the second div, the modal closes rather than staying open with the new content.
To update the content, I went down the ajax path. These modals are themselves loaded by ajax (mobile-first and they aren't mobile). Therefore, in a similar vein to Reload Content in Modal Twitter Bootstrap I used the following code:
$('body').on('click', 'a[data-target=#modal-form]', function(ev) {
console.log("clicked");
ev.preventDefault();
var target = $(this).attr('href');
$('#modal-form').load(target, function() {
$('#modal-form').modal("show");
});
});
I want to click the submit button of the webpage i am displaying in my Web Browser but it seems not to work at all here is my code:
WebBrowser1.Document.Forms(0).InvokeMember("image")
i was basing on the html code of the button i want to click which is:
<div class="buttonRow forward">
<input type="image" src="includes/templates/template_default/buttons/english/button_send.gif" alt="Send Now" title=" Send Now ">
</div>
did i miss something? i really need help.
Try setting this property
Webbrowser.AllowNavigation = True
On my home page, there is a link to user's show page
<a id="event_shortcut" href="http://localhost:3000/users/1#event_tab">show events</a>
and in user's show, I used bootstrap tab,
<ul id="user_show_tabs">
<li >
Profile
</li>
<li>
Events
</li>
<li class="active">
Account
</li>
</ul>
When I click on the link it should go to the user's show page and the event tab should be in foucs.
So in js I did like this,
$("#event_shortcut").live("click", function(event){
event.preventDefault();
window.location = $(this).attr("href");
$('#user_show_tabs a[href="#event_tab"]').tab('show');
});
this js code redirects the user to the show page but the event tab is not set focus.
I don't know what I am missing. Help me!
When you redirect to another page, the tab list is getting refreshed. You either need to put in logic to only have the class="active" on the tab for the current page, or you need to use the tab-content method and have all of the pages load in separate content divs, so the tabs don't actually leave the page they just change which <div> is being displayed.
Check out the Javascript section of Bootstrap to get more info on how to do this. http://twitter.github.com/bootstrap/javascript.html#tabs
in the view(this is haml)
%ul
li{:class => "#{check_if_active('release')}"
= link_to "release", part_release_path(#current_organisation, #part)
and in helper
def check_if_active(tab)
case params[:controller]
when "parts"
if ['release'].include?(params[:action])
tab == "properties" ? "active" : "null"
end
end
I am trying to use the combobox provided by Dijit inside of a custom-made widget. I have been using Dojo's tutorial on comboboxes to guide me.
When I implement a stand-alone webpage similar to their tutorial examples, everything worked fine; but when I ported the code into my custom-made widget, it just renders the combobox as a plain HTML text box.
Here's what my custom widget's template looks like:
<div class='customWidget'>
...
<div dojoAttachPoint="mainDiv" class="mainDiv">
<div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" url="states.txt"></div>
<input dojoType="dijit.form.ComboBox"
store="stateStore"
value="California"
searchAttr="name"
name="state2" />
<button dojoAttachEvent="onclick:chooseState">OK</button>
</div>
...
</div>
In the widget code, I require the combobox and read store:
dojo.require("dijit.form.ComboBox");
dojo.require("dojo.data.ItemFileReadStore");
I also tried putting these includes in a <script/> within the custom widget (similar to the way they do it in the tutorial), but it didn't work (in fact, it appears as if the script tag wasn't even evaluated, since I couldn't reference a function I declared inside of it!)
Do you have widgetsInTemplate in your widget declaration?
dojo.declare('my.widget.Cool',[ dijit._Widget, dijit._Templated ], {
widgetsInTemplate: true,
// rest of widget JS here
});
Here's an article about including other widgets in your template.
Have you tried adding:
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.addOnLoad(function(){
dojo.parser.parse();
});
</script>
(from Dojocampus) to ensure Dojo is parsing the page? Are there any errors in your Javascript console? Is the page rendering any normal Dojo widgets?