Can't get Getters from SoundCloud HTML5 Widget API - html

I'm struggeling with the Soundcloud HTML5 Widget API. The Methods and Events are working fine, but i can't log the getters. I've been looking around in the Soundcloud API documentation but i can't find the problem. The Soundcloud Playground is working fine, but the examples they give in their blog http://developers.soundcloud.com/blog/html5-widget-api, arent. So i'm wondering, am i missing something here, or is there something wrong with the API? This is my stripped HTML, wich is not working:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var widget = SC.Widget(document.getElementById('sc-widget'));
widget.bind(SC.Widget.Events.READY, ready());
function ready() {
widget.getDuration(function(durationSC) {
console.log('Duration: ' + durationSC);
});
}
$('button').click(function() {
widget.toggle();
});
});
</script>
</head>
<body>
<iframe id="sc-widget" src="http://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/39804767&show_artwork=false&liking=false&sharing=false&auto_play=false" height="195" scrolling="no" width="480" frameborder="no"></iframe>
<button>Play / Pause</button>
</body>
</html>

Thanks for reporting this. There is indeed a problem with the API right now – a quick fix will be to use https in the widget's iframe src.
We'll try to deploy the fix as soon as possible and fix the documentation to point at https which should be used.

Related

Google Apps Script return image in doGet function

I am unable to figure out how to return an image in Google Apps Script. I've also gone through a lot of documentation and am unable to find anything clear.
In PHP, the equivalent function would be:
header('Content-Type: image/gif');
echo "\x47\x49\x46\x38\x37\x61\x1\x0\x1\x0\x80\x0\x0\xfc\x6a\x6c\x0\x0\x0\x2c\x0\x0\x0\x0\x1\x0\x1\x0\x0\x2\x2\x44\x1\x0\x3b";
I've tried functions like:
function doGet() {
return ContentService.createTextOutput("\x47\x49\x46\x38\x37\x61\x1\x0\x1\x0\x80\x0\x0\xfc\x6a\x6c\x0\x0\x0\x2c\x0\x0\x0\x0\x1\x0\x1\x0\x0\x2\x2\x44\x1\x0\x3b");
}
}
But it does not seem to work. I basically want to return a 1x1 pixel image.
Google Apps Script ContentService only supports returning plain text, ATOM, CSV, iCal, JavaScript, JSON, RSS, vCard, and XML content.
It depends on your user case, but you can use HtmlService and the data URI scheme to embed an image:
GS:
function doGet(e) {
template = HtmlService.createTemplateFromFile('html');
return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">
</body>
</html>
Also you can use HTML5 and Canvas:
<canvas id="myCanvas" width="1" height="1"></canvas>
Or JavaScript to create a gif

Embedding an HTML page keeps redirecting me?

I'm attempting to write a simple html doc to automatically refresh every 5 seconds. However, I want to embed a web page into this. I've tried embed tags, object tags, and iframe tags. However, each time the page refreshes I am automatically redirected to the page that I am trying to embed. My current code version is here:
<html>
<head>
<title>MEETME REFRESHER</title>
<script>
window.setInterval("reloadIFrame();", 30000);
function reloadIFrame()
{
document.frames["meetframe"].location.reload();
}
</script>
</head>
<body>
<iframe src="http://www.meetme.com/apps/home" name="meetframe"></iframe>
</body>
</html>
Am I using incorrect tags or is there something obvious that I'm missing here?
I have been on about 10 sites similar to W3Schools, however to no avail. Could it be an issue localized to Chrome? I remember doing something similar to this back in school, though using Internet Explorer. Any help or input is much appreciated!
Try this. Using sandbox attribute of an iframe. Source and more information here.
<html>
<head>
<title>MEETME REFRESHER</title>
<script>
window.setInterval("reloadIFrame();", 3000);
function reloadIFrame()
{
var fr=document.getElementById('meetframe');
if(fr!=null) document.getElementById("container").removeChild(fr);
var iframehtml="<iframe sandbox='allow-same-origin allow-scripts allow-popups allow-forms' src='http://www.meetme.com/apps/home' id='meetframe'></iframe>";
document.getElementById("container").innerHTML=iframehtml;
}
</script>
</head>
<body>
<div id = "container">
<iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms" src="http://www.meetme.com/apps/home" name = "meetframe" id="meetframe"></iframe>
</div>
</body>
</html>

Skype button is not visible

I would like to add the Skype button (https://dev.skype.com/skype-uri/generator) to my Google site.
The code pasted in the Google Site HTML box does not work (not so much javascript works correctly in this gadget), so I have tried with a custom Google Apps Script. I have made a very basic one, but the Skype button is not displayed (only the 'blabla').
<html>
<head>
<script type="text/javascript" src="http://cdn.dev.skype.com/uri/skype-uri.js></script>
</head>
<body>
<div id="SkypeButton_Dropdown_clandriot_1">
<script type="text/javascript"> Skype.ui({ "name": "dropdown", "element": "SkypeButton_Dropdown_clandriot_1", "participants": ["clandriot"], "imageSize": 24 }); </script>
</div>
blabla
</body>
</html>
(I have obviously added the doget())
Any idea why it does not work?
Thank you for your help
What have you added in the doGet() is more important. Can you please post that. You should be doing something like
function doGet(){
var string = 'your html code';
return HtmlService.createHtmlOutput(string);
}
Remember that despite doing the above, all of your code may not work since HTML code is sanitized by Caja so you should test your code in the Caja playground before deploying it.

Loading content using AJAX and jQuery

I am a newbie to jQuery and was trying to load content dynamically using AJAX and jQuery using the following code but its not working.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("button").click(function()
{
$(".text").load("http://api.jquery.com/get/");
});
});
</script>
<title>AJAX with jQuery</title>
</head>
<body>
<div class="text">Sushil</div>
<button>Load Text</button>
</body>
</html>
You are violating the same origin policy. Just open your console and see the error message when you click the button. Things will become clearer to you. If not please get back
I ran your code and I got this error:
XMLHttpRequest cannot load http://api.jquery.com/get/. Origin null is not allowed by Access-Control-Allow-Origin.
I googled it and I got this: Origin null is not allowed by Access-Control-Allow-Origin

displaying <div> in transparent popUp

i need to display the section as PopUp while onload(). but i don't know how to call this javascript function(function($)). name has confused me. also if any other way to call this div section as popup .please sugesst. Thanks
<html>
<head>
<script>
// function name is function($)
function($){
}
</script>
</head>
<body>
<div>
<!-- body of the popUp -->
</div>
</body>
</html>
The $ function is probably the one defined in jQuery, so you will need to include the jQuery JavaScript library if you want to use it for showing a pop up.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
Including just this library will define the $ function and you can then use jQuery functions in your JavaScript code. However this will not create a pop-up. There are many jQuery plugins that can be used to create a pop-up.
jQuery dialog?
http://jqueryui.com/demos/dialog/
Loads of examples on there