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>
Related
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 would like to make an HTML element fullscreen (a div), and have the pointer remain hidden.
This would seem straightforward (set cursor:none on the div when it becomes fullscreen), but it is not working correctly across browsers.
The snippet below works fine for Firefox, but in chrome 56/ Mac OSX, the mouse pointer reappears after some time (usually within 1-60 seconds).
Is there a reliable cross-browser way to hide the mouse pointer while fullscreen?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fullscreen mouse pointer</title>
<style>
.is-fullscreen {
cursor: none;
width: 100%;
height: 100%;;
background-color: white;
}
</style>
</head>
<body>
<div id="gofull">
FULLSCREEN AREA
</div>
<button onclick="makeFS()">Make fullscreen</button>
<script>
// Button to make a div fullscreen and add relevant style in that case
function makeFS() {
// Get FS element, add class, and go fullscreen
var el = document.getElementById("gofull");
el.classList.add('is-fullscreen');
if (el.requestFullscreen) {
el.requestFullscreen();
} else if (el.msRequestFullscreen) {
el.msRequestFullscreen();
} else if (el.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else if (el.webkitRequestFullscreen) {
el.webkitRequestFullscreen();
} else {
console.log('Your browser does not appear to support fullscreen rendering.');
}
}
</script>
</body>
</html>
Other notes
I have tried setting cursor:none on a different element than what gets made fullscreen (such as a child div), but this also did not help.
The pointer lock API seems like it would be massive overkill, and we'd rather not have to request an additional user permission for what seems like it should be simple to do in HTML/CSS.
Browser bug references
Only relevant browser bugs seemed video-related. This happens without video- just a static unchanging div.
Chrome fullscreen API bugs
Chrome browser fullscreen bugs
Compared FF 51 and Chrome 56 on Mac OS X.
1) The cursor can be any image you want it to be, using the declaration:
cursor: url([URI]), auto;
2) In base-64 encoding, a transparent single-pixel gif has the following Data URI:
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
Putting these two together, we can turn the cursor into a transparent single-pixel gif when it hovers over any given element:
Working Example:
div {
width: 100px;
height: 100px;
background-color: rgb(255,0,0);
cursor: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7), auto;
}
<div></div>
I have a web page that takes 20-30 seconds to load. Is it possible to open a popup ("Please wait...") that then closes when the page finishes loading? I have tried the following, but it's not working. The page loads as expected in all ways but one: the popup doesn't appear. I'm using Firefox as my development platform. When I reverse the conditions (make #container hidden/none and closePopup() resets to visible/block), it works perfectly (popup appears when page finishes loading). As a second question, even if I get this working, will it be enormously browser dependent? Thanks!
<html><head><style>
#container{
width : 100%;
height : 100%;
top : 0;
position : absolute;
visibility : visible;
display: block;
background-color : rgba(22,22,22,0.5);
}
#popup{
position : relative;
margin: 0 auto;
top: 35%;
width : 300px;
padding : 10px;
border : 1px solid black;
background : yellow;
box-shadow: 5px 5px 5px #252525;
}
</style>
<script language="javascript">
function closePopup(){
document.getElementById('container').style.visibility = "hidden";
document.getElementById('container').style.display = "none";
}
</script></head><body onload="closePopup();">
<div id="container"><div id="popup">Please Wait...</div></div>
20 seconds worth of stuff happens here.
</body></html>
The way this is written it runs the script to close the popup before the popup is even loaded. The script to close the popup is loaded in the head tag and then executed as the very first attribute of the body tag, but you did not enter any contents into the popup until later on in the body. Use the defer attribute in your script tag. So that the script to close the popup is not run until the page has finished parsing. Like so:
<script language="javascript" defer>
function closePopup(){
document.getElementById('container').style.visibility = "hidden";
document.getElementById('container').style.display = "none";
}
</script>
To answer your second question, using the defer attribute works on practically every modern browser. Including Safari, Chrome, Firefox 3.6+, Opera 15.0+, and Edge 10.0+
I have a situation where javascript code causes DOM/style changes that in turn should cause the page to render differently due to a change in the element that is under the mouse. A simple example is:
<style type="text/css">
#one {
position: relative;
}
#two {
background-color: green;
display: none;
}
#one:hover #two {
display: block;
}
</style>
<script type="text/javascript">
$(window).load(function(){
$('#one').on('click', function() {
$('#one').css('left', '100px');
});
});
</script>
<div id="one">One
<div id="two">Foo</div>
</div>
See http://jsfiddle.net/Lq7Ac/1/ - when you click "One" the elements move so that the ":hover" styling should no longer be applied, but they don't actually get updated until you move the mouse after the click.
Is there something I can do in the "click" binding to recalculate/re-render immediately?
Update: This appears to only affect chrome on linux. So possibly a bug in chrome. Still, if anyone has ideas about working around this it would be great to hear them.
Could try doing it with css classes, instead of the :hover selector.
http://jsfiddle.net/4tfYN/
I have a Facebook Like button implementation which is rendering fine in all browsers desktop and mobile. But the issues lies on low-res devices with resolution of 240x320. the Like button is causing the device to zoom into the page thus rendering horizontal scrolling.
The buttons is rendering fine on devices with width >= 320px like the iPhone etc., but older android devices with width less than that are facing issues.
The way I see it. The page loads fine, then makes a server call to Facebook and then returns with some parameter that breaks it all up. It is generating an <iframe>. I am trying to put width and overflow CSS parameters but none seem to work. I am initializing the Like button like this:
<div id="fb-root">
<!--Facebook begins-->
<div class="fb-like" data-href="<%=RedirectURL%>" data-send="false" data-layout="button_count" width="80" data-show-faces="false"></div>
<!-- ends -->
</div>
<script>
window.fbAsyncInit = function () {
FB.init({ appId: '328982000461228', status: true, cookie: true,
xfbml: true
});
FB.Event.subscribe('edge.create', function (response) {
ntptEventTag('ev=Social&Action=Method Shared');
});
};
</script>
<script type="text/javascript">
Put your like button into a div and apply the overflow hidden style on that div.
UDATE: Try also to set overflow hidden on the html and body tag (makes a big difference on fb page tabs).
A code snippet you also might find useful is this:
<meta name="viewport" content="width=320,user-scalable=false" />
<style type="text/css">
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-user-modify: none;
-webkit-highlight: none;
-webkit-user-select: none;
}
</style>
None of the above solutions helped. Finally got the answer. Although it is not the best solution, but it gets the job done.
I applied this to the parent container of the fb like button:
.socialIcons { display: inline-block; width: 200%; /* for low res androids */ overflow: hidden; margin: 5px 0 5px 10px; }
Facebook Like Button automatically generates an iframe on your page. Try set the width if the iframe with css or dynamically with javascript. The iframe has class="fb_ltr".
Detect a low resolution device, and use other like button layout which suits it better.
That one is :
data-layout="box_count" ,
it would take slightly more vertical space though, which is fine.
button_count
box_count
Did u check other regular sites on the same low-res browser? check twitter.com, if the scrollbar still appears its a problem in the browser (i ran into something like that), the definition of the browser full screen is always larger than the available width, i eventually had to define a "div" within the body with a specific width (320px) and dump the content inside of it, in addition to making the body overflow: hidden
On the outer container do this:
.fb-like-wrapper {
width:300px!important;
overflow-x:hidden!important;
margin: 5px 0 5px 10px;
display:block!important;
}
This was the easiest thing for me, works on iOS Safari if you use both:
html, body {overflow-x: hidden;}