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
Related
I am trying to recreate a player that is shown here - https://videojs-http-streaming.netlify.app/
As per the docs, here is my HTML. But quality/resolution control is missing
What needs to be changed in this HTML for that quality/resolution picker to render in the player as shown in the demo page.
<html>
<head>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
</head>
<body>
<video-js id=example-video-hls class="vjs-default-skin" controls>
<source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
type="application/x-mpegURL">
</video-js>
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-quality-levels#2.1.0/dist/videojs-contrib-quality-levels.js"></script>
<script>
var player = videojs('example-video-hls');
player.play();
</script>
</body>
</html>
videojs-contrib-quality-levels adds the quality selector API, but does not include a UI component.
That example is using videojs-http-source-selector for the menu.
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 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/
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());
The following code works on IE8, Safari 4.0.2 - but generates an empty page on Firefox 3.5.5. Any idea ?
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/tundra/tundra.css">
</head>
<body class="tundra">
<div style="width: 350px; height: 300px">
<div id="tc1-prog">
</div>
</div>
</body>
<script type="text/javascript" src="http://archive.dojotoolkit.org/nightly/dojotoolkit/dojo/dojo.js"
djConfig="parseOnLoad: true">;
</script>
<script type="text/javascript">
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
dojo.addOnLoad(function() {
var tc = new dijit.layout.TabContainer({
style: "height: 100%; width:100%;"
},
"tc1-prog");
var cp1 = new dijit.layout.ContentPane({
title: "Food",
content: "We offer amazing food"
});
tc.addChild(cp1);
var cp2 = new dijit.layout.ContentPane({
title: "Drinks",
content: "We are known for our drinks."
});
tc.addChild(cp2);
tc.startup();
});
</script>
</html>
Likely a cross-domain problem. The nightly build is posted for testing, but to actually use it locally, you must download the tarball. Otherwise, references are made to load individual modules using xhr+eval which break the browser's domain security model.
Your other choice is to use a "cross domain" build of Dojo, which is pretty much what you wanted to do and super simple to deploy -- just point at it with the script tag and off you go. That's what's available on the Google CDN.
You might want to put the script tag inside the body tag. For it to be valid HTML, it needs to be either in a body or head tag. An invalid document could certainly result in it not operating consistently between browsers.
Update: Also, you might want to try using a production build instead of the nightly build. I changed the URL to use http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js and it worked fine for me in FF. It was broken with the nightly build.
From the HTML 4.01 Spec:
An HTML 4 document is composed of three parts:
a line containing HTML version information,
a declarative header section (delimited by the HEAD element),
a body, which contains the document's actual content. The body may be implemented by the BODY element or the FRAMESET element.
<html>
<head>
<link ... />
</head>
<body>
...
<script ... >
</script>
</body>
</html>