I am Using Google Picker api to access my google drive folder's files. The following html page uses picker to load my google docs. However after I select a doc and press select option the picker dialog box is not closing. nor even when I press the close button on the right top of the iframe. I think the problrm is in the picker call back but I don't know how to recitfy this. I include the html page here.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Picker Example</title>
<!-- The standard Google Loader script. -->
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Use the Google Loader script to load the google.picker script.
// google.setOnLoadCallback(createPicker);
google.load('picker', '1');
// Create and render a Picker object for searching images.
function createPicker() {
var picker = new google.picker.PickerBuilder().
addView(google.picker.ViewId.DOCS).
setCallback(pickerCallback).
build();
picker.setVisible(true);
}
// A simple callback implementation.
function pickerCallback(data) {
var url = 'nothing';
if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
var doc = data[google.picker.Response.DOCUMENTS][0];
url = doc[google.picker.Document.URL];
}
var message = 'You picked: ' + url;
document.getElementById('result').innerHTML = message;
}
</script>
</head>
<body>
<div id="result">
<button onclick="createPicker()">Upload Files </button>
<iframe></iframe>
</div>
</body>
</html>
The Picker requires some cross-domain communication that cannot be done if you open the page locally (e.g. open the html file from your disk).
Host the same page on a web server and it should work as expected.
The problem is that i didnt use a google api key to authenticate my communicating with google...Once the close is activated it calls pickercallback with a json file provided by google... which is not authenticated when i dont have a key...
The problem is with this line...
<script src="http://www.google.com/jsapi"></script>
It should be like ..
<script src="http://www.google.com/jsapi?key=#########################"></script>
replace #'s with your google api console key....you can generate a key here https://code.google.com/apis/console/
Related
I am aiming to build a google chrome extension that displays a different link to a different website every time it is used.
That is, I have a list of websites and I want to iterate through the list such that each time I click the extension the next link is shown.
Currently my popup.html file looks like this
<!DOCTYPE html>
<html>
<head>
<title>My First Chrome Extension</title>
<style>
#popup{
width:300px;
height:200px;
text-align:center;
line-height:200px;
}
</style>
<script src="popup.js"></script>
</head>
<body>
<div id="popup">
next link
</div>
</body>
</html>
(the popup.js file is empty). When I click my extension icon, it will display a link to "some_url.com" which opens in a new tab (great). What I am looking for is to be able to then display "another link" when I click the extension icon again ("another link" being the next from some predefined list).
I would be very grateful for help/resources to be able to add this behaviour to the extension. I am new to chrome extensions (and javascript) and don't know where to go next.
You can create a anchor tag with some id on popup.html page
<a id="show-links" target="_blank"></a>
Then in your popup.js file, add a hfref attribute to this element using javascript
var a = document.getElementById('show-links');
//create an array with all links
links_array = ["some_link.com", "some_link1.com", "some_link2.com"];
//assign links to a from array at random
a.href = links_array[Math.floor(Math.random() * links_array.length)];
When using the Web player Javascript API I cannot get the .Customization properties to be applied on the Spotfire 7.0 web player.
When I use the identical html script in Spotfire 6.0 Web Player the customizations for Hide toolbar and Hide status bar disappear as expected (see below).
Any suggestions would be appreciated.
ps. I noticed that the .open parameters for the Parameter Configuration Block 'SetPage(pageIndex = 2);' also fail to be applied in my 7.0 web player but do work on 6.0.
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<script type="text/javascript" src="./GetJavaScriptApi.ashx?Version=6.0"></script>
<script type="text/javascript">
window.onload = function()
{
var wpCustomization = new spotfire.webPlayer.Customization();
wpCustomization.showToolBar = false;
wpCustomization.showStatusBar = false;
webPlayer1 = new spotfire.webPlayer.Application("http://spf2/spotfireweb/", wpCustomization);
webPlayer1.open('/Information Model/Analyses/Operations/Operations Management Dashboard/Dashboard Mockup','Dashboard','SetPage(pageIndex = 2);' );
}
</script>
</head>
<body >
<div id="Dashboard" ></div>
</body>
</html>
please apply the latest hotfix; I think this was fixed in HF001:
TSWP-8143 - Customization settings in javascript mashup code is not applied correctly.
you can get the hotfixes and installation instructions at http://support.spotfire.com/patches_spotfire.asp#spotfire70
I am developing a website where i need to embed Google moderator in my website, i went through the help of Google but couldn't do it. So what are the steps to embed the Google Moderator to my website. Thanks in advance.
Second result for 'embed google moderator':
First, place the following code in the HEAD section of your page:
<script src="https://www.google.com/moderator/static/moderator-embed-api.js" type="text/javascript"></script>
Next, create an empty element on your page with a specified ID that will contain the embedded Moderator page, for example
<div id=”moderator-embed-target”></div>
In your browser, open the existing Moderator page that you want to embed and retrieve the URL, for example:
https://www.google.com/moderator/#16/e=409f
For basic uses, below the target element you created above, include the URL of your Moderator page and the ID of the target element in this code:
<script type="text/javascript">
MODERATOR_embed("https://www.google.com/moderator/#16/e=409f", "moderator-embed-target");
</script>
For advanced uses, you can specify the height, width and language of the embedded page using code like below, instead of using the MODERATOR_embed function:
<script type="text/javascript">
var mod = new MODERATOR("https://www.google.com/moderator/#16/e=409f");
mod.hl = "es";
mod.width = 1000;
mod.height = 500;
mod.embed("moderator-embed-target");
</script>
Putting it all together: Here’s a sample page that embeds this Moderator series using default properties:
<html>
<head>
<title>Embedding Moderator Sample</title>
<script src="https://www.google.com/moderator/static/moderator-embed-api.js" type="text/javascript"></script>
</head>
<body>
<div id="moderator-embed-target"></div>
<script type="text/javascript">
MODERATOR_embed("https://www.google.com/moderator/#16/e=409f", "moderator-embed-target");
</script>
</body>
</html>
You can view this example in your browser here: http://google-moderator-api-samples.googlecode.com/hg/samples/simple-embed-api/simple-embed-api-example.html
Information found at:
https://sites.google.com/site/moderatorhelpcenter/home/embedding-moderator
I am trying to make an editable box (kind of a richTextBox) using html5 (contenteditable="true") and jquery. I need to find out position of each element inside the editable div so that I can insert a page break like microsoft word does.
Here is the page
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Context Menu Plugin Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#divEdit").keyup(function(){
$.each($("#divEdit").find("*"), function(i,item){
alert(item.position());
});
});
});
</script>
</head>
<body>
<h1>jQuery Context Menu Plugin and KendoUI Demo</h1>
<div style="width:740px;height:440px" contenteditable="true" id = "divEdit">
<p>
<img src="http://www.kendoui.com/Image/kendo-logo.png" alt="Editor for ASP.NET MVC logo" style="display:block;margin-left:auto;margin-right:auto;" />
</p>
<p>
Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows
accessibility standards and provides API for content manipulation.
</p>
<p id="para">Features include:</p>
<ul>
<li>Text formatting & alignment</li>
<li>Bulleted and numbered lists</li>
<li>Hyperlink and image dialogs</li>
<li>Cross-browser support</li>
<li>Identical HTML output across browsers</li>
<li>Gracefully degrades to a <code>textarea</code> when JavaScript is turned off</li>
</ul>
<p>
Read more details or send us your
feedback!
</p>
</div>
</body>
The problem is that alert(item.position()) is not fetching anything. The error that comes in firefox developer toolbar is 'item.position is not a function'.
My guess is that it has to do something with the type of each element in $("#divEdit").find("*") as all the elements are different.
Any help would be appreciated.
Thanks
You need to get the jQuery object out of item, as position() is a jQuery method, hence the complain about position() is not a function
$(item).position() // instead of item.position()
Or even more concise:
$.each($("#divEdit").find("*"), function(i,item){
alert(item.position());
}
change to
$('#divEdit').find('*').each(function() {
alert($(this).position());
})
Change this line
alert(item.position());
to
alert($(item).position());
I have an extension which adds a bar at the top of a webpage. i have inserted the iframe in the content script using
document.body.insertBefore(iframe, document.body.firstChild);
The iframe has a button
<button id="mybutton">Click to help</button>
When the user clicks the button I want to redirect them to a new url in the same window. Is this possible?
The reason I want to do this is on certain websites I would like to change the url to include an additional parameter. I chose the iframe option as it more visible than an extension in the bar. Therefore if there is an alternative way to do this I would be happy to learn about it.
Your iframe.....
<html>
<head>
</head>
<script type="text/javascript">
function changeParent(e){
parent.location="http://google.com.au";
}
function onLoad(){
document.querySelector("#mybutton").onclick = changeParent;
}
</script>
<body onload="onLoad()">
<a id="mybutton">Change Parents URL</a>
</body>
</html>
Would be a good case for info bars if they ever come out of experimental....
http://code.google.com/chrome/extensions/experimental.infobars.html