Can anyone give me a example on how to format this. I am not familiar with Jquery and what I have tried does not work. I don't have the rep to add to the thread and ask. Any help would be greatly appreciated. I have a iframe google map in tabs that are not loading correctly very similar to this problem;
From a post Google map position incorrect on load
"The problem is that the place you want the map to center on ends up in the top left corner of the iframe for some reason. I think it's because on google's side the map resize event is firing too early before it knows the full size of the iFrame.
Remove the iframe src tag.
Embed the below javascript code somewhere below the iframe:
jQuery("iframe#headerMap").attr("src", "http://maps.google.com/maps/ms?etc etc....");
Because it loads the map after the iframe is there. If I still have problems in the future I'll try adding a short delay to the above code, making it run after document load."
Related
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
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!
I have a google map which has multiple markers pulled from a custom post type.
They also have info windows containing information from each post, but when the page is loading the infowindows/markers appear before the map does.
Is there a way I can set it so that the markers/infowindows only show once the map has fully loaded? Or have a screen which is shown until it's loaded?
I've attached a couple of screen grabs to show what I mean
Any help would be much appreciated, thanks!
Thanks, sorry about that, I solved it by adding css display:none to my marker div, this stopped them from all loading down the page but they all still worked on load
I'm working on a site that is using Highslide JS to create a slideshow window of larger product images when an image on the product page is clicked. I'm also using Piotr Rochala's fine jQuery plugin, slimScroll, as an alternative to ugly browser default scrollers on the same page.
The problem occurs when a product image is clicked, creating a new .highslide-controls div behind the slideshow that should only be in the top of the slideshow window. The div gets appended with each click, which I believe I've narrowed down to a conflict with the slimScroll script.
See: http://www.thelifeguardstore.com/newproductcart/pc/viewPrd.asp?idproduct=7409
I've attempted using jQuery's noConflict(), changing up the orders of when scripts are called, and looking at each script's JS code, but can't find exactly what's causing the problem. Although I have a feeling it's probably right in front of me, laughing maniacally.
Any help or clues as to what may be causing the issue is greatly appreciated.
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