I have strange problem. I'm trying to integrate hangout button in my website to enable user to open the lecture directly from the website and I used the sample code in Google Hangout API Documentation
https://developers.google.com/+/hangouts/button#hangout_button_code
button it didn't work, so what is the problem ?
<script src="https://apis.google.com/js/platform.js" async defer> </script>
<div id="placeholder-div3"></div>
<script>
gapi.hangout.render('placeholder-div3', {
'render': 'createhangout',
'hangout_type': 'onair',
'initial_apps': [{'app_id' : '184219133185', 'start_data' : 'dQw4w9WgXcQ', 'app_type' : 'ROOM_APP' }],
'widget_size': 175
});
</script>
I'm thinking your problem has to do with the fact that you are deferring your library script, but not gapi.hangout.render script. So, my guess is your gapi.hangout.render code is running before the library it utilizes ever gets to load.
Try just removing the async and defer attributes and see if that works for you.
The async I would imagine might also cause problems if your render method is getting called before the library loads fully.
To follow-up, I looked at the gapi.hangout.render method and it's not clear about the first parameter, but disregard my previous answer and try this:
<script>
gapi.hangout.render(document.querySelector('#placeholder-div3'), {
'render': 'createhangout',
'hangout_type': 'onair',
'initial_apps': [{'app_id' : '184219133185', 'start_data' : 'dQw4w9WgXcQ', 'app_type' : 'ROOM_APP' }],
'widget_size': 175
});
</script>
Related
I am trying to embed google plus posts in my application.
I have loaded platform.js file in header
<script>
window.___gcfg = {
lang: 'en-US',
parsetags: 'onload'
};
</script>
<script src="https://apis.google.com/js/platform.js" async defer>
</script>
<script>
function renderWidget() {
gapi.post.render("widget-div", {'href' : 'https://plus.google.com/109813896768294978296/posts/hdbPtrsqMXQ'} );
}
</script>
In html page
Render the embedded post
<div id="widget-div"></div>
When I clicked on the link, it shows nothing. Is there anything to be added. Here is the reference i followed https://developers.google.com/+/web/embedded-post
You might be opening HTML file directly in browser, which could be problem in some browser(s) (i.e. In Google Chrome. You can verify the issue here).
Try running it using a local-server(XAMPP maybe) so the URL will look similar to http://localhost/yourpath/test.html
Hope this helps!!
I am required to remotely include into my appcelerator project, a javascript file available at a particular link, and use the function declared in that file to process some data.
What i would like to achieve is something like the following in html -
<script src="https://some-link/Data.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var testVariable = someMethod(localdata);
});
//use testVariable as necessary
</script>
//someMethod() is declared in remotely available Data.js
I am a newb at Appcelerator and im not really able to follow some of the threads i have come across, so some detailed help would be really appreciated. Thank you in advance.
Well according to me , you should first understand few points first :
You want to include a remote file hosted at some server , now as the Titanium code converts to native code at compile time , you cannot include Titanium API's from remote file.
If you want to include a remote file , then only option which I see is loading that file in webview.
Now coming to your problem , as you said that you want to fetch some data only from remote server by triggering some JS function from remote file. So following is what would I do :-
a/ Create a hidden webview in my main window with a EventListener of webview. Something like :
var webview = Titanium.UI.createWebView({url:'localHtmlFile.html'});
//event listener to handle the response from webview
Ti.App.addEventListener('fromWebView', function(e)
{
var testVariable = e.data;
});
b/ In localHtmlFile.html file :
<!DOCTYPE html>
<html>
<body>
<script src="https://some-link/Data.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var testVariable = someMethod();
//respond the fetch data to the main window via fireEvent
Ti.App.fireEvent( 'fromWebView', { data : testVariable } );
});
</script>
</body>
</html>
PS : This is just a logic to begin with , you have to edit code according to your requirements
I am currently switching a plugin from TinyMCE 3.x to the new version TinyMCE 4.0.26. I encountered heavy problems when trying to internationalize my plugin labels.
Within my plugin.js, I am loading the language pack by calling
tinymce.PluginManager.requireLangPack('myplugin');
with my i18n file langs/de.js looking something like this:
tinyMCE.addI18n('de', {
myplugin: {
button : 'Link einf\u00FCgen/bearbeiten',
title : 'Link einf\u00FCgen/bearbeiten'
}
});
When I access the the static context
tinymce.i18n.data.myplugin
I can see that both variables button and title are available.
THE PROBLEM:
When calling editor.getLang('myplugin.button') I get {#myplugin.button} instead of the appropriate variable value.
After I investigated the source code a little bit, I found out that it expects the language code to exist within the tinyMCE.i18n.data....., which is not available
getLang: function(name, defaultVal) {
return (
this.editorManager.i18n[(this.settings.language || 'en') + '.' + name] ||
(defaultVal !== undefined ? defaultVal : '{#' + name + '}')
);
},
#see https://github.com/tinymce/tinymce/blob/4.0.26/js/tinymce/classes/Editor.js#L1105
Have I done something wrong? Has anyone created a plugin for the new TinyMCE version and managed to get the internationalization working?
Thanks to everyone, who tried to help me out on this. Unfortunately I could not make my plugin work with translated labels in the popup window, but finally found a solution.
Everything below works perfectly okay and easy in TinyMCE version 4.2.6.
Here the steps to make everything work with a plugin named example:
Create your plugin directory at plugins/example
Create the required plugin JS file plugins/example/plugin.min.js ( take a look at the example http://pastebin.com/jEARrtWN ) - As #msqar recommended I added the requireLangPack call right before my plugin function.
Now create your translation files ( Please replace de_AT by your language code ) at langs/de_AT.js and plugins/example/langs/de_AT.js
tinymce.addI18n('de_AT', {
'Title': 'Titel',
'Example plugin': 'Beispielplugin'
});
All the ( in my example ) english labels are automatically translated to de_AT when setting up TinyMCE like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<textarea name="test"></textarea>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="tinymce/tinymce.min.js"></script>
<script>
jQuery(document).ready(function ($) {
$('textarea').tinymce({
theme: "modern",
plugins: 'example',
toolbar: 'example',
language:'de_AT'
});
})
</script>
</body>
</html>
The result
When opening the dialog using the button inside the toolbar, the window title Example plugin is automatically translated to Beispielplugin
NO special calls to editor.getLang required.
I hope this guide works for other developers around here too. I would appreciate any positive or negative feedback.
Thanks a lot to all the developers here at #stackoverflow.
You can use the following to directly access the right strings:
tinymce.EditorManager.i18n.data[ed.getParam('language') + '.myplugin_name']['my_key'];
I finally made it work, maybe it can help, this is 1 year old though, but can help others.
Since the entire way of creating a plugin changed from 3.X to 4.X, the requireLangPack i was adding to my plugin was in an incorrect location.
I was doing:
tinymce.PluginManager.add('myplugin', function(editor, url) {
tinymce.PluginManager.requireLangPack('myplugin');
...
});
When it should be:
tinymce.PluginManager.requireLangPack('myplugin');
tinymce.PluginManager.add('myplugin', function(editor, url) {
...
});
Also, the way I accessed those variables was:
editor.getLang("myplugin").title;
Instead of
editor.getLang("myplugin.title");
Hope it works for other people under the same circumstance.
Here's a situation. My customers would be having their own web pages. On that page they might have an iFrame in which they can show a page located on my server. Outside the iFrame they would have simple buttons, which when clicked should execute javascript functions in iFrame.
So basically the code of customer's web page on customer's domain would be something like this
<input type="button" value="Say Hi" id="TestButton">
<iframe src="myserver.com/some_html_page.htm" width="800" height="550"></iframe>
And code of myserver.com/some_html_page.htm would be
$("#TestButton").click(function(){
alert("Hi");
});
I did my reserach and I am aware of the Browser Security issues, but I want to know is there any way to handle this, may be with json or something ?
As you can already tell (given the parent and child are on different domains), you definitely cannot reach up from the child iFrame into the parent to listen for events.
One way around this is to pass messages between the pages. This will require your clients to include additional javascript in their page as well as the iFrame which points to your server. This is supported in native javascript with postMessage, but including the library #Mark Price suggests will make your life much easier.
So here goes an example:
Clients Page:
...
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.postMessage.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#TestButton").click(function(){
jQuery.postMessage("say_hi", "myserver.com/some_html_page.htm");
});
});
</script>
</head>
<input type="button" value="Say Hi" id="TestButton">
<iframe src="myserver.com/some_html_page.htm"></iframe>
Code on myserver.com/some_html_page.htm:
...
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.postMessage.min.js"></script>
<script type="text/javascript">
// you will need to set this dynamically, perhaps by having your
// clients pass it into the URL of the iFrame,
// e.g. <iframe src="myserver.com/some_html_page.htm?source_url=..
var source_origin = "clients_page.com/index.html";
var messageHandler = function (data) {
// process 'data' to decide what action to take...
alert("Hi");
};
$.receiveMessage(messageHandler, source_origin);
</script>
</head>
Probably it would be nice to bundle the client code up into a single library that they could include, so your clients aren't burdened with writing their own javascript.
As a caveat, I wrote this code off the top of my head and it is likely be rife with typos. I have used this library before to accomplish similar goals, and I hope this answer is a useful jumping off point for you (along with the plugin documentation).
Let me know if I can clarify anything, and best of luck! :)
You could try this jquery plugin from Ben Alman, providing you can have the plugin running on both yours, and your clients servers - see the examples for ways to execute js cross domain :
http://benalman.com/code/projects/jquery-postmessage/docs/files/jquery-ba-postmessage-js.html
Lets consider if you have a function called test() which loads under Iframe, then you can access that test() function as below
document.getElementsByName("name of iframe")[0].contentWindow.functionName()
e.g.
document.getElementsByName("iframe1")[0].contentWindow.test()
One of the common patterns of doing cross-domain requests, is using JSONP.
Are someone succed to use the method FB.Canvas.setUrlHandler please?
I've already read the following URL's
http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setUrlHandler
http://​developers.facebook.com/blog/​post/555
but it still don't work... Someone to help me please?
Thanks in advance.
Here is my source code , when I execute this, nothing gets logged in the console:
<html>
<head>
</head>
<body >
<div id='fb-root'> </div>
<script type="text/javascript" src="http://?connect.facebook.net/en_US/?all.js"> </script>
<script type="text/javascript">
FB.init({
appId : 'MY_APP_ID',
oauth : true,
status : true,
cookie : true,
oauth : true,
xfbml: true
});
function testUrlHandler(data) {
if (data.path.indexOf("test1"?) != -1)
console.log('test1');
else if (data.path.indexOf("test2"?) != -1)
console.log('test2');
else
console.log('default');
}
FB.Canvas.setUrlHandler(te?stUrlHandler);
</script>
</body>
</html>
Per the documentation, the callback is only for links on the parent iframe (Facebook UI)
Registers the callback for inline processing (i.e. without page
reload) of user actions when they click on any link to the current app
from Canvas, including:
All ticker stories
Bookmarks
Requests from the bookmarks drop-down list
Request Notifications stories.
Your links in app wont fire the event.
I've spend 3 hours trying to understand what's wrong with it. Sometimes (really rare occasions ) this thing works just fine, and sometimes FB api just ignores this callback.
Solution - set the callback with delay after init, solution: How to work with facebook setUrlHandler?