I'm facing a rare issue with the modal I made. I had a iframe to load a embedded youtube video on the modal, it was working well on a separate HTML file (an empty) that I had created to test it.
When I tried loading it on a local template of the actual site the youtube video is truncated. And, when i press ctrl+shift+i (the console) the whole video comes out. I searched for any possible solution to the issue.
Can anyone help me. Attaching the photo beneath.
Guys I somehow fixed this issue.
Issues Faced:-
1) I noticed that the truncated video becomes full-sized when I pull up the console log (crtl+shift+i)
2)I tried reloading the div content using innerHTML
3)I tried applying min-height property, the div comes out in the full size but the video still remains the same.
How I fixed it:-
I removed the src from the iframe and then on the function to show the modal i added a line to set the iframes source. This somehow fixed my issue.
Addntly, I also removed all the previous changes made to the CSS and JS file, as listed above.
I know both the question and the solution sounds weird (It does to me too)
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
For utilising content script advantages, I tried writing html code inside my chrome extension and tried injecting it into a created iframe using content script. It actually works, however it seems blurry (I have tried --webkit-font-smoothing: antialiased - and also if I go to the direct URL of the html page inside the extension (http://chrome-extension://ext_id/views/my_html.html), it doesn't get blurred on the actual html).
var elt = document.createElement('iframe');
elt.id = 'my_iframe';
elt.src = chrome.extension.getURL('views/my_iframe.html')
elt.setAttribute('scrolling', 'no');
document.getElementsByTagName('body')[0].appendChild(elt);
This is the approach I used. And again, if I go to http://chrome-extension://ext_id/views/my_html.html it doesn't get blurry (please check image at the bottom).
So I started investigating what may be causing the issue.
First, I tried to inject live websites into the iframe through src attribute, and they don't get blurry:
elt.src = "https://example.com"
However, here, one thing I realised for iframe is that all the other URLs that I fetch seem like this in the Inspect Element.
The iframe element is openable and it has #document as child which has all the html content as grandchildren
However, my one looks like this on the DOM that it doesn't open and I don't have #document tag either.
Second thing I tried was getting the content of the html page using
$.get(chrome.extension.getURL('views/my_html.html'), function(data, status){
// and inject data inside the iframe, however that
// caused path errors of separated files such as css and js..
});
.. because in my html file, I included files as
<link href="/styles/my_css.css" rel="stylesheet" type="text/css">
<script src="/libs/jquery-3.2.1.min.js"></script>
Thirdly, I tried zooming on the page to see what's happening. When I zoom, it gets blurry and very interestingly, if I open Inspect Element, it gets zoomed it also which doesn't on any iframe or any other website. It seems like I have injected a JPEG image in the iframe; and even inspect element gets blurry inside the iframe
If I inject any website into my iframe, even if I zoom in 1) Inspect Element doesn't get magnified, 2) Even if I zoom, it doesn't get pixelated or blurry simply because it's code; however in my case, it's acting like an image.
It's driving me insane how and why this is happening. Do you have any ideas thoughts what may be causing it or how to overcome this issue?
For recreating the issue, you can follow this method
Also, I have created a simplified extension for replicating the issue: https://drive.google.com/open?id=1y0Dopp1GhU47tWhXgxoGUy3DaDsQDouc
Even an almost empty project, it's blurry:
However it doesn't on webpage URL to the same html
I have a page that contains only one image, say first.png. Near the end of the page's body, and way after the first image, I use Javascript to dynamically add a second image as an img node. For example:
document.getElementById('special-notice').innerHTML = "<br>There's an additional image:<br><img src='second.jpg' width='100px'/>";
This worked on my devices. However, a testing user reported seeing first.png at the place where second.jpg should be, and any further Javascript was not executed, possibly due to an error. The problem disappears after clearing the browser cache (Safari on iPhone).
In what scenarios would a browser display a wrong image?
The client's website has product listings. The prices for the product are pulled dynamically in through an iFrame at the bottom of the page. There is Javascript on the page that automatically resizes this iFrame to the correct height based upon how big the iFrame content is, once it's loaded.
The client is reporting that when printing the page, they cannot see anything from the iFrame where the prices should be - apparently it is not printing in IE, just the main page itself.
I am on a Mac and so can't test in IE, so I'm having a hard time experimenting with this.
Can anyone clarify the expected behaviour in this situation? Is it possible to get IE to print both page and included iFrames by default, and if so, how would I go about doing this? I can only find examples for printing a specific frame from a parent window.
Thanks!
The expected behaviour should be what you're experiencing in other browsers. If the page is printed, the iframe should be printed along with it. It would be difficult to imagine that everyone else got it wrong and IE got it correct in this instance.
Below is a bit of speculation on what the issue might be, but without knowing more/seeing code it's difficult to know the specifics:
This issue could be due to some css that you may have on your page. I've read of similar iframe printing issues where the visibility was set to hidden initially resulting in the iframe not printing correctly. To get around this specific case the user had to set the width and height to 0px. Without knowing more about your site, I can not correctly predict that this is happening.
Another issue may by your dynamic resizing based on the contents of the iframe. A simple test would be to comment that section out and set a generic width and height on the iframe to see if the printing issue still occurs. Perhaps those dynamic styles are not being carried over to the print stylesheet and are not getting applied (therefore not appearing at all).
As a quick suggestion, look into css media types:
print
Intended for paged material and for documents viewed on screen in
print preview mode. Please consult the section on paged media for
information about formatting issues that are specific to paged media.
Helpful link: Print Specification
This was an interesting point, so I did a test using IE8 (on a server, not locally).
I printed in IE8 a web page that included an iframe of something that I built. And it printed some of the contents the first time (the other contents showed up black). The second time I printed, the iframe contents were all black.
However, in my example, the contents in the iframe are changing constantly (images and text that fade in and out) and the css background behind it is black.
This test has the contents of the iFrame on a different host server than the contents of the main page. But to my knowledge, there is a cross-domain policy file working here.
Cross-domain policy issues were my first guess, but it's entirely possible there is some issue with how internet explorer renders the screenshot when it sends it to the printer.
If you are using Javascript, then why not try window.print() function along with print media CSS.
I can't explain why IE isn't working, but maybe you can fix the problem by adding this part of code into the parent page, in order to force each iframe to be refresh :
$(document).ready(function() {
if($.browser.msie) {//Only for IE
$('iframe').each(function() {
$(this).attr('src', $(this).attr('src'));
});
}
});
To get the browser, i use this method.
And i don't use contentDocument.location.reload(true); method to be sure the iframe to be refresh. See SO topic.
Try this Plugin it will solved your problem
http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/
I've got the same problem with this post:
How to fix flickering in IFrames?
Unfortunately, there's no solution (and I'm afraid of negative ratings too :) ).
I can't provide a page where you can see the behaviour (as it's intranet) - but I'll try to explain it:
When I open an external page via lightbox, I get a disturbing 'flickering' when clicking on links... i.e. I try to open an image gallery located on an internal server - clicking on the "next" link lets the page flicker before moving on to the next page.
If I open any other web page (google, some newspaper, ...) I do not get this behaviour - it's much faster, so it seems like the content of the first page is replaced by the content of the next one. In my image gallery it's much slower: the first page disappears, then the next page appears. I get this flickering only with lightbox-popup, not, if I load the page in another window.
I tried differend JavaScript frameworks (jQuery, Scriptaculous, Standalone) - so I guess it's my image gallery which causes this behaviour... any ideas?
It would be really (!) appreciated... thanks!
Best regards,
Stefan
As Max mentions, source would be useful.
Also, try using Fiddler or Firebug's Net panel to look at the actual HTTP requests that are being made - perhaps your image gallery is POSTing to itself before redirecting to another page?