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>
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)];
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 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 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
I've created a simple placeHolder for some extra javascript in jQuery - The issue is that the placeHolder is within some script tags and therefore isn't recognized by Sharepoint designer.
The page works correctly, so it hasn't bothered me until now, since you can't touch any part of the design view, without fixing the issue.
My code looks something like this in the master template:
<script type="text/javascript>
$(document).ready(function(){
<asp:ContentPlaceHolder id="PlaceHolderjQuery" runat="server" />
});
</script>
Is there a way to make this work correctly, so that the placeholder is actually recognized by Sharepoint Designer?
Thanks for the help!
I understood that you are trying to call a JavaScript function that is defined inside the PlaceHolder.
But your code wont work as the PlaceHolder is a Server Control and pushing it as a child element of the some other tag wont work. Script tag is a client processing tag. So What I would suggest is to change the logic as below.
In the master page I will have a JavaScript to call a function by default.
<script type="text/javascript>
$(document).ready(function(){
myOnLoadFunction();
});
</script>
And I will define the content Place Holder with a dummy function
<asp:ContentPlaceHolder id="PlaceHolderjQuery" runat="server">
<script type="text/javascript>function myOnLoadFunction(){ //do nothing }</script>
</asp:ContentPlaceHolder>
Now in your content page you can define
<asp:Content ID="javascript" ContentPlaceHolderID="PlaceHolderjQuery" runat="server">
<script type="text/javascript>function myOnLoadFunction(){ alert('Hello jQuery'); }</script>
</asp:Content>