I'm using the standard share button plugin for Google+, and after the button there's a bit of text that reads "Share this on Google+":
<script >
window.___gcfg = {
lang: 'zh-CN',
parsetags: 'onload'
};
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
I'd like to hide or remove that text, but since it's in the iFrame it's not possible to do it with CSS. I'm finding the documentation lacking or confusing on their dev pages for this share buttons.
https://developers.google.com/+/web/share/
Is there any way to remove that text?
You can use the data-annotation attribute and set its value to none, eg:
<div class="g-plus" data-action="share" data-annotation="none"></div>
More info here within the share tag attributes of the docs.
Related
When pages with Vue components are translated via chrome's translate option, the vue components stops re rendering and updating the view.
Ex: Translate https://v2.vuejs.org/v2/guide/#Handling-User-Input on chrome using the translate option from chromes's context menu into a different language, the reverse message demo stops working.
Since Google translate plugin updates DOM outside of Vue's control, this is sort of expected. Looking for any work arounds that let both co-exist. The sections can be marked with "notranslate" class but that would mean it is no longer translatable.
React inspite of being based on virtual DOM, works even with DOM being modified by translate plugin.
A possible workaround is to use the Vue special attributes key (as described here) and ref (as described here).
Here it is an example I did, starting from the link you provide above:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js Reverse Example</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-5" class="demo">
<!-- Adding Vue attributes here -->
<p :key="message" ref="msg">{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script>
var vm = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
// vm.$refs.msg.innerText retrieves the translated content
this.message = vm.$refs.msg.innerText.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
As you may notice, the DOM element where you'd like to maintain the Vue reactive behavior (i.e.: the reverse operation here), has been enriched with both a key attribute and a ref one.
The idea here is to use:
:key to force replacement of the element instead of reusing it;
ref to register a reference to the element: it is used in reverseMessage method in order to get the translated innerText content after the Google translation is performed.
For sure, this workaround would affect the performance, but at least it provides the expected behavior (i.e.: the reverse function properly working also after a page translation).
I wrote a simple angular application in a learning purpose. However the controllers are working in my system but not in plunker. But, that is not my concern. My concern is I am unable to see the linked pages inside ng-view. They are rather opening as a new page replacing the home page. Secondly, the expressions are not reflecting their values. Kindly help me out. I have uploaded the codes in plunker.
Link to Plunker
<div ng-controller="RamFirstCtrl">{{name}}</div>
<div ng-include="'navbar-top.html'"></div>
<div style="border:1px solid green; position:relative;" ng-view></div>
Noticed couple thing:
http to https, there is error in console, it might be the reason it doesn't work in plunker
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
you have to use the url define in your router:
ng-href="aboutUS.html" to ng-href="#!/aboutUS"
.when("/aboutUS", {
templateUrl : "aboutUS.html"
})
<div>
<a ng-href="#!/aboutUS">
AboutUs
</a>
</div>
Note:#! will be added to url by angular router by default
My code :
<script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script>
<g:plusone id="googleModuloContentButton" href="http://www.mywebsite.com/?IDL=1" size="medium"></g:plusone>
It create the Google+ badge. But after if on a click handler I do :
gapi.plusone.render('googleModuloContentButton', {
href: "http://www.mywebsite.com/?IDL=2"
});
the destination link for the +1 doesnt change...still the one setted on the first rendering. Why? And how can I fix it?
You have automatic rendering turned on. Changing the script line to:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{parsetags: 'explicit'}
</script>
Currently your button has already been told to render. Adding the parameters above should allow your code to work.
You might also consider if setting the href this way the best method as opposed to using canonical links or prepopulating the href. What is your use case?
I have a test jsp with:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript">
</script>
<script type="text/javascript">
dojo.require("dojo.widget.Tree");
dojo.require("dojo.widget.TreeSelector");
dojo.require("dojo.widget.TreeNode");
dojo.require("dojo.widget.TreeContextMenu");
</script>
</head>
<body>
<div dojoType="TreeSelector" widgetId="treeSelector"></div>
<div dojoType="Tree" widgetId="treeWidget" selector="treeSelector"toggler="wipe">
<div dojoType="TreeNode" widgetId="1" title="First node" isFolder="false"></div>
<div dojoType="TreeNode" widgetId="2" title="Second node">
<div dojoType="TreeNode" widgetId="2.1" title="Second node First Child"></div>
<div dojoType="TreeNode" widgetId="2.2" title="Second node Second Child"></div>
</div>
<div dojoType="TreeNode" widgetId="3" title="Third node" isFolder="false"></div>
</div>
This will not work in any browser.
I thought this would be easy, it seems the dojo library is not being downloaded/found?
Do I need to do anything else?
Also, my IDE, JDeveloper, reports that the attribute "dojoType" is not defined on element div.
I have to say, this example looks like it is taken from a very old version of dojo, but you're trying to run it against Dojo 1.5. That most likely won't work. dojo.widget hasn't existed since...0.4, 0.9 maybe.
You may be right in your comment to the previous answer in that no parseOnLoad: true was necessary in the original example, but I'd also assure you that that example was not running any version of Dojo anywhere near what you're running it with.
Based on what you're looking at there, you may want to start somewhere like here: http://www.dojotoolkit.org/reference-guide/dijit/Tree.html
I'm not sure what the default behavior is when it's not present, but you probably need to define a djConfig with parseOnLoad set to true (or call the parser directly). See the following links for more information:
http://docs.dojocampus.org/djConfig
http://dojocampus.org/content/2008/03/08/the-dojo-parser/
Follow the:
Google AJAX Libraries API Dev Guide,
and the Google API Loader's Guide.
You need to:
register for an API key (or use a direct link as you did),
if not using a direct link but google.load, you need to defer the execution of your code using an onload callback.
Personally, I would just do something like:
within the <head> section of my.html:
<script type="text/javascript" src="http://www.google.com/jsapi?key=MY_API_KEY_GOES_HERE"></script>
<script type="text/javascript" src="my.js"></script>
in my.js:
google.load("dojo", "1.5", {
uncompressed: true
});
function OnLoad() {
/* do stuff here */
}
google.setOnLoadCallback(OnLoad);
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?