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
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)];
How can I scroll to a certain anchor tag inside the IFrame page?
Using the ingenious Iframe-Resizier Library by David J. Bradshaw
https://github.com/davidjbradshaw/iframe-resizer
I’m including an IFrame with a lot of content (=long page) inside the outer page. So if I link to the page, then much of the content isn't visible on the first screen and under certain circumstances I would like to jump to a specific anchor tag further down in the iframe.
<html>
<a href=“outer-page.html#somewhere_name” />
</html>
seems not to work
I am using "inPageLinks: true" like this:
<script type="text/javascript">
iFrameResize({
heightCalculationMethod: 'lowestElement',
inPageLinks: true
</script>
My question now is: How can I make the outer page scroll down to a certain anchor tag without the need to implement something new inside the iframe page? The anchor tag in this case is located inside the IFrame page.
When I include the IFrame page like
<html>
<iframe id=“strytl” src=“iframe-page.html#somewhere_name”></iframe
</html>
Then the (re)sizing of the IFrame seems not to work perfectly and contents at the top of the iframe are getting cut off.
But with moveToAnchor it works perfectly from inside the IFrame and the page is magically scrolling down to the anchor tag. So in the iframe page I can call:
<script type="text/javascript>
parentIFrame.moveToAnchor('somewhere_name’);
</script>
But how can I trigger this from the parent page?
<script type="text/javascript>
$('iframe#strytl').iFrameResize({moveToAnchor: 'somwhere_name'});
</script>
results in this error:
<script type=“text/javascript”>
[iFrameSizer][Host page: strytl] Ignored iFrame, already setup.and
</script>
And
<script type="text/javascript">
iFrameResize({
heightCalculationMethod: 'lowestElement',
inPageLinks: true,
moveToAnchor: 'somewhere_name'});
</script>
seems to have no effect at all.
(In this case the outer page and the iframe have different server names.)
<script type=“text/javascript”>
var myFrm = document.getElementById('strytl');
var myCw = myFrm.contentWindow;
myCw.parentIFrame.moveToAnchor(‘somewhere_name’);
</script>
result:
<script type=“text/javascript”>
Error: Permission denied to access property “parentIFrame"
</script>
Can I jump to an anchor in the iframe from the outer page at all?
Something like this.
<script type="text/javascript">
iFrameResize({
heightCalculationMethod : 'lowestElement',
inPageLinks : true,
initCallback : function (iFrame){
iFrame.iFrameResizer.moveToAnchor('someAnchor');
}
});
</script>
Right here, there is a website with a Google maps file of the international space stations current location.
http://n2yo.com/satellite/?s=25544
How can I embed this in a standard HTML page?
Using your browser, you can right-click on the HTML element and select "Inspect Element" to see the underlying HTML and copy it into your HTML. In this case, if you include the following HTML, this should embed the map in your website.
<script language="JavaScript">
var sid=25544;
var width=400;
var height=250;
</script>
<script type="text/javascript" src="http://www.n2yo.com/js/widget.js?r=joo9"></script>
In the n2yo website they explain how to embed a satellite to your site:
http://www.n2yo.com/widgets/
This is the code you should embed:
<script src="//www.gmodules.com/ig/ifr?url=http://www.n2yo.com/sat/iss.xml&synd=open&w=320&h=200&title=The+International+Space+Station+Tracker&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
An example on jsfiddle
You can add more customizations to the map here
I am new to meteor and I am trying to do multi-page application where http://www.mydomain.com/page1 will result a totally different page from http://www.mydomain.com/page2.
By totally different I mean that I don't want the page to be rendered by the client.
I tried to use meteor-router but What I got is something like:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/myapp.css?9297ad4aa173c4e0c19aebd27c62a5c43242bb93">
<script type="text/javascript">
__meteor_runtime_config__ = {"ROOT_URL":"http://localhost:3000","serverId":"iMp4kgzzeqDtktJoY"};
</script>
<script type="text/javascript" src="/packages/underscore/underscore.js?6d71e6711255f43c0de8090f2c8b9f60534a699b"></script>
<script type="text/javascript" src="/packages/meteor/client_environment.js?07a7cfbe7a2389cf9855c7db833f12202a656c6b"></script>
<script type="text/javascript" src="/packages/meteor/helpers.js?2968aa157e0a16667da224b8aa48edb17fbccf7c"></script>
...
...MANY MANY MANY SCRIPTS.... ?!?
...
...
<script type="text/javascript" src="/myapp.js?2866dcdb5c828b129cdd3b2498a4bf65da9ea43f"></script>
<title>myapp</title>
</head>
<body>
</body>
</html>
And this is not what I want. I want page1 route will return me:
<!DOCTYPE html>
<html>
<head>
My meta tags
</head>
<body>
page1
</body>
</html>
And I want page2 to return different meta tags with different content.
In order to be clear, lets assume that my clients sometime doesn't have javascript. I don't asking about whether meteor is the right framework! I am asking only if can I do this with meteor.
Meteor works a bit different compared to the traditional LAMP stack. Basically it works by patching out the DOM to only where the changes are needed as opposed to re-downloading the whole web page. It makes for a very satisfying end user experience on modern web browsers.
To use meteor router you need to find a spot that you want to patch out with new data for different pages with {{renderPage}}. You can use something like
<head>
<title>xx</title>
</head>
<body>
{{renderPage}}
</body>
<template name="page1">
<h2>Hello!</h2>
</template>
<template name="page2">
<h2>Ola!</h2>
</template>
Now you need to define a router in your client side javascript:
Meteor.Router.add({
'/page1': 'page1',
'/page2': 'page2'
});
So if you load /page1 you would see Hello! and if you load /page2 you would see Ola! as defined in the <template name="page2">..</template>
With the meta tags you need to use javascript to create them. With something like
$('head').append("<meta...");
Again this depends on your preference, personally I find these type of apps load ridiculously fast between web pages as compared to other 'thin' based websites. (Have a look at meteor.com to see how fast you can swap between the pages). The browser does need javascript, however.
Of note is in production mode there will only be 1 script tag.
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/