I' ve got a wild Javascript conflict since my client has decided to put his videos on Youtube. It's clear the conflict occurs between the iframe's javascript and my code (only a randomized fadin on the background)... The whole page resizes weirdly as soon as the video plays. The elements in the page loose their position AND width !!! I've tried to stop my script and also to remove the iframe: The window resizes well in both cases. This is not happening with other browsers (Safari 5 neither):
Unfortunately the site's already online:
http://www.digitalvideo.fr
You can reach my script via the source code (right click).
Any help REALLY APPRICIATED !!!
Thank's
Solution found !!
For those who could be interested:
Safari 6 dosen't have any problem dealing with z-index but, for any reason a Javasctript DOM element z-index modification while using YouTube iframe causes real problems on the displayed page (even and especially on non-modified elements).
In my case i was modifying this property on 2 div blocks.
Solved.
Related
I've been working on a CSS / HTML drop down navigation for my blogspot.com site. After coding it a few hours I had accidentally closed the tab to find out no matter what or where I tried the CSS on blogspot, the CSS wouldn't work again. Now, the HTML/CSS works anywhere else, just not on blogspot anymore.
These are the things I did:
1. Created a entire new blog under the same account, then applied
html/css
2. Cleared cookies, cache and restarted browser
3. Tried multiple browsers
4. Used stylish extension to override
5. Used console in firefox to edit HTML on other sites and added my
code to see if it worked elseware
6. Used a different computer
7. Used mobile network instead of ISP
Despite doing everything pretty much to get the css/html to work blogspot, it will refuse it now no matter what. I am guessing it is obviously an issues with blogspot.com such as a glitch or bug that I may have now caused. It also shows a lot of CSS code struck out in the styles inspector when you inspect a site via right-click.
I dab in javascript / jquery sometimes and I am wondering if there is a way to force my CSS to force override.
CSS/HTML http://jsfiddle.net/rpksx66u/
My blogspot site: https://vitalintel.blogspot.com/
Im about to pull my hair out.
update: so I moved the css/html/script element to another part of the page and it works. When the element is placed in the Cross-Column's sections in layout, it refuses to use any CSS.
This question has me completely stumped. Since it's in a browser extension, I can't post my code.
The issue is apparently that mouse events inside the iframe (hovering over a link, over text, selecting...) are off by about 200px, this includes right clicks as shown in this screenshot:
The red dot is the actual mouseclick location. Again, since this is an extension (I'm actually doing the JS part in Tampermonkey, it's easier) I can't try it out in other browsers so it might just be chrome.
The iframe is to contain third-party dynamically loaded content so I can't use a div or other element. It's also reused and is dynamically inserted on load.
This also doesn't happen the first time content is inserted instead it takes a few "cycles" to appear.
Any ideas?
This was apparently a Chrome bug, albeit a strange one. I started having other issues so I reinstalled Chrome and upgraded to Windows 8 (I was planning to anyway), the bug seems to have gone away.
EDIT: It just came back, it turns out that the issue was that I was using -webkit-transform: scale() to show and hide the frame with a transition, removing this fixes the issue.
So, to all those with iframe mouse event issues in Chrome/WebKit: check all of your transforms and any CSS3 effects, try removing them one at a time.
Precondition:
I have an aspx-page with iframe inside. This iframe points to the url handled by MVC on the same site (it's hybrid site, both standard ASP.NET and ASP.NET MVC). The resulting page rendered by MVC contains a lot of scripts references.
Problem:
IE9 throws an exception on every single script it load in iframe. These exceptions are similar to this one:
Error: 'Function' is undefined
That is, it says that the most basic things every window has is somehow absent. Once you clicked through all of these popups, the page just works as designed!
If I load a URL from <iframe /> src attribute in the browser directly, everything works as expected.
If I open the page in another browser (I tried Opera, Firefox), everything works as expected -- no errors.
So, what IE9 wants?
There is this msdn page about this bug (or feature).
You get these kinds of errors when you move the iframe element around in DOM. In such cases, IE 9 garbage collects the iframe (causing your undefined bug) and reloads it at another position.
In general, you should create the element, set its src attribute only once and then put it somewhere in the DOM tree once. It has nothing to do with the code which runs in the iframe itself.
I have encountered this same situation in the wild. Basic symptoms:
You load script code in an iframe
The script code runs early (from the head section or top of body)
IE complains about some missing native object
I found that it can often be prevented by delaying the execution of the script code until onload or DOMContentLoaded... Not much help I know but this is one of the most difficult IE scripting bugs I have ever encountered. I upped the score of your question, hope it will be found by others as well and we can get a more detailed answer.
Also see this question:
Error in Internet Explorer 9 (not earlier versions or other browsers) when including jQuery in an iframe
Placing the following script block at the very top of the iFrame html <head> seems to resolve the issue in my case. Basically, it forces the iframe to reload, which as some have pointed out, solves the issue. It seems relatively safe, because, without things like 'Object' and 'Date', javascript is essentially useless.
<script type="text/javascript">
if(typeof(Object)==="undefined"){
window.location.reload();
}
</script>
Try loading the javascript at the end after complete web page is loaded. I feel the script is executing even before the iframe is completely loaded.
for some suggestion of scripting in IE9 view the given link below
http://blogs.msdn.com/b/ie/archive/2010/06/25/enhanced-scripting-in-ie9-ecmascript-5-support-and-more.aspx
Further investigation revealed that the solution is to add the offending iframe to it's dom location BEFORE setting the 'src' attribute.
Once the 'src' has been set, changing location of the iframe within the DOM stack forces IE9 to garbage collect it.
Once 'src' has been set, iframe can be resized and changed via css positioning, but cannot change the relative location in the DOM stack.
Often times, plugins like dialogs and lightboxes will stuff an iframe with src already set into the dom, then append / prepend or whatever, triggering the GC to take place.
function waitForjQuery(){
if(typeof jQuery!='undefined'){
//Do yor stuff!
}
else{
setTimeout(function(){
waitForjQuery();
},500);
}
}
waitForjQuery();
I'm currently trying to put together a rich text editor that includes widgets from a different location then the site the rich text editor is on. I'm doing this by providing an Iframe in the content area that is placed at the cursor.
Now the idea behind this instead of providing some kind of placeholder until they finish editing is so they can see what they are talking about while they type.
Now the iframe works perfectly fine in Chrome loads the content as expected, but in Firefox it seems to have disabled javascript in this case (notice none of the script files being downloaded), which is an issue as the widgets are extremely javascript heavy and don't function without it.
I have provided below a JSFiddle showcasing this issue, the site im loading in the iframe is just a javascript game but you will see it doesn't work in firefox but its okay in chrome!
http://jsfiddle.net/reefbarman/2uYja/2/
Any help is appreciated
Scripts won't be executed when designMode is activated (source). Internet explorer was the first browser to add this feature, and Mozilla implemented a similar function, heavily inspired by Microsoft.
Your code functions in Chrome, because Chrome has implemented designMode in a different way.
Well after some research and experimentation I was dealing with two different issues that looked like one.
Firstly I made a change to the rich text editor I was using to use contentEditable only as this seems to be the standard going forward and its a heavily html5 app im working on. So with designMode = 'Off'; the iframe would load in normal situations. But I had a strange issue where adding the iframe to soon after adding another element to the editable area caused the iframe not to load, so just delaying the add of the iframe by some time allowed that dynamically added iframe to load!
Problem solved!
I have a some trouble with iFrame.
Basically, I have drop down basic CSS menu and right underneath it I have iFrame with flash from external website.
Unfortunately whenever the menu drops down it goes underneath the iFrame.
Is there a way using jQuery , JavaScript or CSS to prevent the menu from disparaging behind the iframe?
Many Thank
Dom
You can try putting your Flash object into opaque window mode (wmode = 'opaque'), but because of the Iframe, I still expect some inconsistency.
http://www.communitymx.com/content/article.cfm?cid=e5141
You could also try coupling this with what's known as an "Iframe shim". It's definitely a hackish work-around, but one that Google themselves have used, sooo... take that as you will.
http://www.oratransplant.nl/2007/10/26/using-iframe-shim-to-partly-cover-a-java-applet/
iframe shimming or ie6 (and below) select z-index bug
http://www.google.com/search?q=iframe+shim
Good luck :) #Vili might still have the right idea with just hiding the Iframe when your menu opens. This is certainly the lowest level, and should probably happen for any browsers that don't support these other "fixes" (hacks).
(BTW, you can forget Z-Index helping on any platform or browser. Iframes and Flash both exist on macro-layers above the normal document flow. A DIV will never show in front of either without some finagling).
AFAICT it will always be broken on linux, since Flash doesn't play nicely with the z-index directive.
On other platforms you should be able to tweak z-index to your needs.
Maybe visibility: hidden; on the iframe, when the menu is opened?