Unwanted scrolling with an iFrame - javascript

I embedded a JSnes embed page I had made (found here: https://chilibowlflash.netlify.app/example/megaman2.html) to a google site.
However, when I scroll down the whole page goes down with and not just the game inside the iframe. I don't want this. And instead want the game inside the iframe to go down, not the page inside the iframe or the actual google site . Any help? Or can't understand what I'm saying? I'm all ears!

Related

Removing focus from embedded Issuu content on page load

I'm embedding various content from Issuu on a web page. On page load the embedded content from Issuu is automatically in focus, with visible menus and shadows within the embedded iframe.
This seems to be the standard solution, and there's no way to prevent this with the given embed codes from Issuu. But I would really like to find a way to load the content without it being in focus before the user actually hovers/clicks the embedded area.
As of now the initial focus is only removed if I first click somewhere within the embedded content, and then move my pointer outside of the content.
Is there any way to sort this out with the help of jQuery?
I have tried to solve this by adding the following jQuery code:
$('#issuu_embed').blur();
I also tried to simulate a click on the embedded iFrame, in an attempt to replicate the behaviour mentioned above.
But neither does the trick, and I assume it takes a slightly more sophisticated piece of code to make this work.
Grateful for any hints that could point me in the right direction.
Live CodePen:
https://codepen.io/ehrogn/pen/PoEmJKv

Hyperlinks slide new pages rather than opening them

My manager asked me to try replicating the sliding feature here at this website:
https://insight.bakermckenzie.com/blockchains-and-laws
The navigator arrows at the right and left of the page direct the user to other pages of the site, but do so much like a carousel rather than simply opening the link in the traditional way. Even hitting the browser's "back/forward" buttons makes the site slide between the pages rather than opening them normally.
I've dug through the source code and used the developer tools, but can't find out how exactly the site is pulling this off. Any ideas? Seems like it could be JavaScript, but I'm not too sure.
I couldn't find the library that the site uses, but I'll try to explain it.
When you request a 'new page', by clicking on the arrows or the menu, all the content is loaded async. If you pay attention to the .page-container div, you can see that when you 'change' the page, the div with the content you are currently seeing moves to the side and then is completed removed from the page.
Step-by-step:
Request a page
New content loads into a div that is not visible yet.
The page you currently are moves to the side and then its content is removed when is completely hidden from the view (the whole html is deleted) .
The 'new page' that was requested follows the 'old' page movement.
It is like a carousel, but the new content is loaded async and the old one is removed.
Div responsible for the content

How to click iframe element in wordpress (all pages)?

I have a wordpress website, where I have pages with artists. This is an example: http://chasefetti.paradigmrecordsinc.com/ of a page from my website
On the top I have an iframe from arena.com
I want after the page loads to click the play button.
If I do it on the arenas page http://arena.com/artist/chasefetti like this (using firebug):
document.getElementsByClassName("fg icon-play-fg")[0].click()
it works, but on my website I guess it doesn't know about accessing the iframe.
How can I specify to access that iframe ?
Also the full mission that I gotta do is to play that button for each page. I am thinking to add a jquery that does what I want to do, to the templates page.
My main problem is accessing that element from the iframe
As far as I know(I tired it once) you can't do that, unless the source of the iframe is on the same site as yours, which isn't the case here.
Also check this same-origin policy.

To Grey Out the WHOLE Website when you click button inside Iframe contained in that website

I know how to grey out (adding grey color) to the whole website by a click of a button using css .
But here is an interesting scenario. I have a small IFrame embedded in the main website. Inside the Iframe I have a button. On-click the button I need to grey out the entire website. Currently I am only able to grey out the IFrame contents and not the entire website. If somebody can help me regarding this that would be great.
IFrame contents are on the same domain as the website but on different paths. For example if the website is xyz.com, the iframe contents displayed on that website are in xyz.com/cms.
Note: I only have access to the code sitting inside IFrame and not the outside bit. Hence I cannot code outside IFrame. Whatever I need to code I have to do it inside the IFrame.
Can't we do anything to window object to grey out the entire window?
I think setting the grey to when the iframe window has focus may work for you.
You didn't include any code so not sure if you're using jQuery, but try something like this.
while($(iframe).focus()){
$('document').addClass('grey-out');
}

Google maps API embedded in iFrame not centering on lat/long

I have used the Google Maps API to create a simple HTML page which I'm then embedding into an iFrame on another page.
Page works fine when outside of the iFrame however when within the iFrame, the window position doesn't scroll to center on the marker.
An example is here: http://webfe.omega.studiocoast.com.au/epping-club.aspx and click on club location.
On reading this I'm wondering why I'm using a iFrame and instead call the API directly from the parent page...
But any suggestions as to my first problem would be fantastic :)
After much searching I found the issue was related to the iFrame being embedded inside a jQuery accordion. It rendered correctly initially when the accordion was rolled up by however when it was rolled down, the map position was thrown out.
Managed to fix the marker location by creating a new event which fired out when the accordion rolled down which re-rendered the iFrame and map position.
Thats because you are embedding http://webfe.omega.studiocoast.com.au/media/Assets/Maps/EppingMap.html into an iframe that does not fit the whole screen (you are actually cutting the image and only showing the right corner of the map).. I would rather embed the map directly from google as you can copy the map in the exact size you want..
If you want to do it your way I would suggest you take a look at the javascript found when embedding directly from google..
Open this link in firefox and use firebug to analyze it.. then I guess you will find what you need.
http://maps.google.no/maps/empw?url=http:%2F%2Fmaps.google.no%2F%3Fie%3DUTF8%26ll%3D61.143235,9.09668%26spn%3D14.594437,39.506836%26z%3D5%26output%3Dembed&hl=no&gl=no

Categories