The link below works fine in FireFox and Chrome, however when try to open it in IE nothing seems to work or load.
I am loading the whole website inside of the iFrame. I initial analysis is it could be jQuery as there is no jquery reference in the iFrame.
Can the run on all browsers.
http://hitin.net/projects/aurion/aurion.html
I have tested it on IE9
JsFiddle: http://jsfiddle.net/ZhdMF/
<body>
<div id="content">
<iframe width="100%" height="100%" src="http://www.auriongroup.com/">
</div>
</iframe>
</div>
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#content
{
position:absolute; left: 0; right: 0; bottom: 0; top: 0;height:100%;
}
Update:
My intention is to load the website inside the iFrame and host the iFrame page on a different domain then auriongroup.com
Regards,
Hitin
I found some introduction from here
It says,
Cross browser ?
The Flippy plugin works fine for every modern web browser except Internet Explorer 8 and before (of course…). In this demo I used the excanvas.js file to allow the use of canvas in older IE versions. You can find it here.
So the issue happens because IE8 and prior versions doesn't support canvas. You can try excanvas.js mentioned by the author.
Related
After testing in BrowserStack, I've concluded that using scrollTo() with option parameter behavior: smooth does not work in Chrome and Edge since version 81. Version 80 of both Edge and Chrome was working as expected. According to MDN, it should be working with no asterisk. (unlike Safari)
In popular answers such as this one, using behavior: smooth is the recommended way to enable smooth-scrolling in your web application.
Here's a small reproducible:
<html>
<button onclick="goToAnchor('b')">Scroll to B</button>
<div id="a" style="height: 1000px; background-color: blue;">Blue</div>
<div id="b" style="height: 1000px; background-color: red;">Red</div>
<div id="c" style="height: 1000px; background-color: green;">Green</div>
</html>
<script>
function goToAnchor(anchor) {
let rect = document.getElementById(anchor).getBoundingClientRect();
window.scrollTo({
left: rect.left + window.pageXOffset,
top: rect.top + window.pageYOffset,
behavior: 'smooth',
});
}
</script>
The expected behavior would be that the browser window smoothly interpolate the view down to the red div. It does this properly in all versions of Firefox I've tested. In all of the versions of Chrome since v81, and all versions of Edge since v81, it seems to use the behavior of behavior: auto - i.e. it jumps to the div rather than smoothly interpolating the view.
In version 80 of both Edge and Chrome, it behaves just like Firefox, meaning this bug (?) must've been introduced in version 81 - perhaps in the shared Chromium code-base?
I find it very unlikely that I am the first person to find this issue, as it has been not been working since April, and must therefore conclude I am doing something wrong. Can someone point towards the error in the code? Or is the Chrome and Edge APIs really broken? Is the behavior hidden behind a feature flag, like in Safari?
I believe I've found the culprit, and interestingly, it seems it is Firefox that is the odd one out.
In this StackOverflow thread about detecting RDP connections, the current top answer says:
You can use the following media query:
#media screen and (prefers-reduced-motion: reduce) { . . . }
The prefers-reduced-motion part is interesting. It seems in my testing that this also changes scrollTo() calls with scroll-behavior: 'smooth' to jump rather than interpolate.
I did an addendum to the question's code example to demo the feature:
<html>
<button onclick="goToAnchor('b')">Scroll to B</button>
<p class="reduced-motion">Reduced motion is enabled.</p>
<div id="a" style="height: 1000px; background-color: blue;">Blue</div>
<div id="b" style="height: 1000px; background-color: red;">Red</div>
<div id="c" style="height: 1000px; background-color: green;">Green</div>
</html>
<style>
.reduced-motion {
display: none;
}
#media (prefers-reduced-motion) {
.reduced-motion {
display: inline;
}
}
</style>
<script>
function goToAnchor(anchor) {
let rect = document.getElementById(anchor).getBoundingClientRect();
window.scrollTo({
left: rect.left + window.pageXOffset,
top: rect.top + window.pageYOffset,
behavior: 'smooth',
});
}
</script>
It will now say "Reduced motion is enabled." next to the button depending on your OS and browser configuration. In that case, the scrollTo call will simply jump rather than interpolate.
In short, the issue is that BrowserStack's remote desktop control is also enabling this flag.
I try to make a test with the MS Edge Version 87.0.664.60 and Google Chrome Version 87.0.4280.88.
On my side, the code works fine on both browsers.
Here is my test result: (Above is the MS Edge and below one is the Google Chrome browser)
You are making this test using the BrowserStack. It is can be possible that the issue is related to BrowserStack.
I suggest you try to make a test using the actual browsers. It may help you to find the cause of the issue.
I found a line of code here: parent.document.body.clientWidth How can I get a parent window's height from within iFrame using jQuery? that i use to find the width of the parent page from an iframe.
It works in Edge, IE 11, Firefox but not for Chrome or Opera.
Is there a fix or perhaps a different solution to the problem?
Example
IFrame
html
<body onresize="bodyRePr()">
<script src="examplescript.js"></script>
[...]
</body>
js
function bodyRePr(){
if (parent.document.body.clientWidth > 720){
document.getElementById("example").style.width = "460px";
}
else{
document.getElementById("example").style.width = "100%";
}
}
I see this error when opening the page in Opera, not sure what it means.
requested:
html is of another page including the iframe
<body onscroll="toggleMenu()" onload="startup()" onload="getBrowserInfo()" onresize="bodyRe()">
[...]
<nav id="profileMenu">
<iframe id="profileMenuIframe"></iframe>
<div onclick="closeProfileMenu()" class="closeBtn">╳</div>
</nav>
[...]
</body>
css
#profileMenu{
z-index: 6;
position: fixed; top: 0; left: 0;
width: 500px; height: 100%;
margin-left: -100%;
background: rgb(30,30,30);
transition: margin-left 0.2s;
}
#profileMenuIframe{
width: 500px;
}
You can't test frame/parent references offline in Chrome, using file:// URL's as shown in your example.
And you can't reference your online resources either, while testing offline, because that would be cross-site scripting.
To test your parent frame references, you either need to use a browser that supports offline URL's the same way it supports online URL's, or test both parent and frames using an HTTP server.
I have a div with display:none as style attribute value. In css, a background image url is set for this div. I simply don't want the request for the image to be fired until the div is visible later through some JS code. In Firefox , the network tab shows that the request is not issued which is as expected. But in Chrome developer tools I found that the request for the image is actually fired after the DOMContentLoaded event. What could be the possible reason of different behaviors with hidden elements in these two different browsers ?
Markup:
<html>
<head>
<title></title>
<style type="text/css">
.remoteAudioSoundButton{
background: url("http://ourserverurl/images/image_lady.png");
width: 200px;
height: 200px;
border: 2px black;
}
</style>
</head>
<body >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='remoteAudioSoundButton' style="display:none"></div>
<script type="text/javascript">
window.onload = function(){
console.log("inside onload");
};
</script>
</body>
</html>
Screenshots:
Chrome:
Firefox:
Why not add the background to a specific class? This way the image will only be loaded when the specific class is added to the element.
$(function(){
$('button').click(function() {
$('.remoteAudioSoundButton').toggleClass('visible');
});
});
.remoteAudioSoundButton{
display: none;
width: 200px;
height: 200px;
border: 2px black;
}
.visible {
background: url("http://ourserverurl/images/image_lady.png");
display: block;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='remoteAudioSoundButton'></div>
<button>Toggle Class</button>
Here is documentation of different browser behavior:
http://justinmarsan.com/hidden-elements-and-http-requests/
Which says:
Chrome and Safari (WebKit)
WebKit downloads the file every time except when a background is
applied through a non-matching media-query. Firefox
Firefox won’t download the image called with background image if the
styles are hidden but they will still download assets from img tags.
Opera
Like Firefox does, Opera won’t load useless background-images.
Internet Explorer
IE, like WebKit will download background-images even if they have
display: none;
So to answer the question of why:
A quick argument for either side:
Firefox - Don't load until the content is visible:
No reason to load something not being viewed, improve page load time.
Webkit - Load the image on pageload: So, perhaps JavaScript decides to make the element visible later, the transition might be choppy if the image is not preloaded, and any other number of arguments for preloading images.
And a brief discussion of the topic:
http://robertnyman.com/2010/03/11/do-hidden-elements-load-background-images/
Browsers may load images that are related to elements that have display:none; set.
I have worked around this before by using a technique like this snippet:
document.getElementById('showKitty').addEventListener('click', function() {
var kitty = document.getElementById('kitty');
kitty.src = "https://placekitten.com/g/200/300";
kitty.classList.toggle('hidden');
});
.hidden {
display:none;
}
<h1>What Can JavaScript Do?</h1>
<img id="kitty" class="hidden">
<button id="showKitty">Show kitten</button>
Actually I want to show the modal window over pdf and its working well in IE, Chrome & Mozilla Firefox but its not working on Safari 5.1.7
So Will any 1 please help me to find some solution on this ? I am getting this issue on Windows Operating System i.e XP, Windows 8 & Windows 7.
Here is my JS Fiddle link : http://jsfiddle.net/xdrc1nou/
Below is my code as well
HTML
<div id="divHover">try me</div>
<div id="divHoverChild">hello</div>
<iframe id="ifBG" src="about:blank"></iframe>
<iframe id="ifPDF" src="http://bitcoin.org/bitcoin.pdf"></iframe>
Javascript
$().ready(function () {
var $child = $("#divHoverChild");
var $ifBG = $("#ifBG");
$("#divHover").mouseover(function () {
$child.slideDown();
$ifBG.slideDown();
})
$child.mouseout(function () {
$child.slideUp();
$ifBG.slideUp();
});
});
It will be quite difficult to find someone with OSX Lion running Safari 5.1 to have an answer for your question (that's almost 3 versions back, with Yosemite just around the corner), and a world-wide usage of less than 0.5% of the browser.
With that in mind this answer gives you some pointers, it has not been tested by me.
In general when embedded iframes don't play nicely with the overlays on a page a common solution is applying these styles to the problematic iframes:
<iframe id="ifPDF" src="http://bitcoin.org/bitcoin.pdf" style="position: relative; z-index: -1;></iframe>
See if this does it.
A less elegant solution would be to hide the problematic iframes when overlays are triggered to be shown, and therefore avoid the overlap (since the overlapping element is gone).
Just for the record in Safari 7 it works perfectly, just like in the other modern browsers you mentioned to be functioning OK.
What about using object and ember:
<object src="http://yoursite.com/the.pdf" width="700px" height="700px" style="position: relative; z-index: -1;">
<embed src="http://yoursite.com/the.pdf" style="position: relative; z-index: -1;">
</embed>
</object>
I can't test too. I am running Linux.
I need help writing a conditional with javascript for 2 videos. I have searched around but I guess I am confused about how to set my variables. I have 1 video (flash iframe) that I'd like to show on a desktop browser's site but I would like a different video (non-flash) to show when viewing the site on a mobile device.
These are the two videos:
<html>
<div id="desktop_video">
<iframe src="url-here" height="650" width="600" frameborder="no" scrolling="no" marginwidth="0px" marginheight="0px"></iframe>
</div>
<div id="mobile_video">
<script type="text/javascript" src="http://url-here"></script>
</div>
</html>
Say, you're trying to show the desktop at a minimum browser width of 480px, this would be your CSS:
#mobile_video {
display: none;
}
#desktop_video {
display: block;
}
#media only screen and (max-width: 480px) {
#desktop_video { display: none; }
#mobile_video { display: block; }
}
Though the desktop should already be block, I added to code to be clear it's necessary. This is just a simple way to do this.
You could use the Navigator.useragent to detect client's browser. (There are a lot of resources out there if you search for it.)
I took the following line from javascriptkit which will check if the user is using a mobile device...
//returns true if user is using one of the following mobile browsers
var ismobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i)
You can display the mobile video (non-flash) if ismobile returns true. Or else you can just display the iframe video.
Hope this helps you to get a start. As I mentioned, there are lots of resources out there to help you with this solution, even on SO...
How to detect a mobile device with javascript