I have a gif that appears as my site is loading however the gif dissapers and the page appears after everything has loaded except the background images called via css.
How could I have the gif fade away only after the background images have loaded.
I am using this code for the loader:
html:
<html class="loading">
<!-- All the things -->
</html>
css:
html {
-webkit-transition: background-color 1s;
transition: background-color 1s;
}
html, body {
/* For the loading indicator to be vertically centered ensure */
/* the html and body elements take up the full viewport */
min-height: 100%;
}
html.loading {
/* Replace #333 with the background-color of your choice */
/* Replace loading.gif with the loading image of your choice */
background: #333 url('loading.gif') no-repeat 50% 50%;
/* Ensures that the transition only runs in one direction */
-webkit-transition: background-color 0;
transition: background-color 0;
}
body {
-webkit-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
}
html.loading body {
/* Make the contents of the body opaque during loading */
opacity: 0;
/* Ensures that the transition only runs in one direction */
-webkit-transition: opacity 0;
transition: opacity 0;
}
javascript
// IE10+
document.getElementsByTagName( "html" )[0].classList.remove( "loading" );
// All browsers
document.getElementsByTagName( "html" )[0].className.replace( /loading/, "" );
// Or with jQuery
$( "html" ).removeClass( "loading" );
Thank you
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.splash').fadeTo(555,0, function() {
$(this).remove();
});
});
</script>
</head>
<body>
<div class="splash" style="position: absolute; width: 100%; height: 100%; background-image:url(mygif); background-repeat: repeat;"> </div>
<!-- All the things -->
</body>
</html>
tested ! => http://jsfiddle.net/3m3S8/
Related
I am prepending an image to a div that contains another image. This is allowing me to get a transition between the two images on hover.
Problem:
The problem is that the image that is supposed to be hidden underneath, the dynamically loaded ones, is loading first and displays. Is there a way to load the image via jQuery after everything has been loaded? If not that, can I hide the image until everything is loaded then display it?
Javascript:
(function($) {
if ($('#bottom-art-jason').length) return; // only add once
var jsonArt = '<img id="bottom-art-jason" src="https://static1.squarespace.com/static/5fbc13ab28cdca2d92d13045/t/5fbd6f1fc40cee429f55218e/1606250271337/Jason_Art.jpg" class="thumb-image loaded" style="left: 0%; top: -1.76471%; width: 100%; height: 103.529%; position: absolute;"/>';
$('#block-2091ad01016e0c16fbf5 .image-block-wrapper').prepend(jsonArt);
})(jQuery);
HTML:
<div class="image-block-wrapper">
<img class="thumb-image top"
src="https://static1.squarespace.com/static/5cae826d21d24e00012dc02b/t/5e0a26c2afc7590ba0a3b443/1603914016365/Jason-5941.jpg">
</div>
CSS:
#block-2091ad01016e0c16fbf5 {
position:relative;
margin:0 auto;
}
#block-2091ad01016e0c16fbf5 img {
position:absolute;
left:0;
z-index: 2;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#block-2091ad01016e0c16fbf5 img.loaded:hover {
opacity:0;
}
You can use the jQuery load event.
For Example:
var loaded = false;
firstIMG.on("load", ()=>{
if(!loaded){
var secondIMG = '<img id="bottom-art-jason" src="https://static1.squarespace.com/static/5fbc13ab28cdca2d92d13045/t/5fbd6f1fc40cee429f55218e/1606250271337/Jason_Art.jpg" class="thumb-image loaded" style="left: 0%; top: -1.76471%; width: 100%; height: 103.529%; position: absolute;"/>';
$('#block-2091ad01016e0c16fbf5 .image-block-wrapper').prepend(secondsIMG);
loaded = true;
};
});
I want to immediately darken the page background and display a loading icon on link click. The background is darkened correctly, but the loading icon is not displayed. I can't find the reason.
JS to add the class "loading" to the body tag on link click (onclick="addLoading()"):
function addLoading() {
document.body.className += ' ' + 'loading';
};
CSS:
body {
-webkit-transition: background-color 1s;
transition: background-color 1s;
}
html, body { min-height: 100%; }
body.loading {
background: #333 url('http://code.jquery.com/mobile/1.3.1/images/ajax-loader.gif') no-repeat 50% 50%;
-webkit-transition: background-color 0;
transition: background-color 0;
opacity: 0;
-webkit-transition: opacity 0;
transition: opacity 0;
}
It works fine, only the ajax-loader.gif is not visible. There is just the dark background.
On the target page it works as it should (initially load the darkened background with loading icon and make the page content visible as soon as the loading of the page is finished):
var body = document.getElementsByTagName('body')[0];
var removeLoading = function() {
setTimeout(function() {
body.className = body.className.replace(/loading/, '');
}, 3000);
};
removeLoading();
CSS:
the same as above
I want to create a webpage that works for js and none-js visitors. For js-visitors the start image shall fade in, so it has to be hidden before. At the moment it is hidden too late, namely when the js has loaded. I cannot hide it by default , because in this case none-js visitors will not see it. Any ideas?
HTML
<div class="startImage">...</div>
JS
$('.startImage').hide().delay(200).fadeIn(200);
You should just use css to fade the div in then.
.startImage {
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
Working JSFiddle -
http://jsfiddle.net/bpzpb00q/
CSS
.startImage {
display:none;
}
HEAD
<noscript>
<style>.startImage {display:block}
</style>
</noscript>
JS
$(document).ready(function() {
$('.startImage').fadeIn(200)
});
in this case <noscript> tag would be useful, add 2 same elements and and one warp with <noscript> tag and another element with css properly display:none
<noscript>
<div class="startImage">...</div>
</noscript>
<div class="startImage forJS" style="display:none">...</div>
And target <selector> $(".startImage.forJS")
<script>
$(function(){
$('.startImage.forJS').delay(200).fadeIn(200);
})
</script>
Use the <noscript> tag for the non JavaScript users and duplicate its content for the JavaScript users.
To the duplicated content add a class modifier like .hidden to set it to display: none by default. Apply your fadeIn function to it.
If you don't like the duplication you could have the JavaScript take the content from the <noscript> tag create a DOM element from it and inject it into the page.
$(function() {
$('#box').delay(200).fadeIn();
});
.box {
width: 300px;
margin: 0 auto;
border: 1px solid #c66;
background-color: #f99;
color: #fff;
font-size: 24px;
padding: 24px;
font-family: Helvetica, Arial;
text-align: center;
}
.hidden {
display: none;
}
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<noscript>
<div class="box">Content</div>
</noscript>
<div id="box" class="box hidden">Content</div>
I would consider using the <noscript> tag, like so:
$(window).load(function() {
$("#startImage img").css("opacity", "1");
});
#startImage img {
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
}
<noscript>
<style type="text/css">
#startImage img {
opacity: 1;
}
</style>
</noscript>
<style type="text/css">
#startImage img {
opacity: 0;
}
</style>
<div id="startImage">
<img src="http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg" alt="Hero2" />
</div>
Even though it doesn't seem to work when you run the code snippet, the following demo should work in the 5 major browsers.
if you are using the fadeIn(200) to the "startImage" class
then there is no need to hide the selector as well as not need to give delay
so
that above method is right try it
I am revealing an element using a CSS transition that is triggered by a JavaScript scroll event however this transition is affecting the background color of an adjacent element in Safari (5.1.7) and Chrome (27.0.1453.93) on a Mac (10.6.8) which makes no sense at all. I think I have stumbled upon a bug.
I duplicated the issue in Safari only using the following, stripped-down code and created a jsfiddle (http://jsfiddle.net/5AEMF/) but the issue does not occur within that framework:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Opacity transition affecting color of adjacent element</title>
<style>
* {
margin: 0;
padding: 0;
}
#bar {
height: 100px;
background-color: #FF0000;
}
#content {
opacity: 0;
height: 9999px;
background-color: #0000FF;
-webkit-transition: opacity 0.25s ease-in-out;
-moz-transition: opacity 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
#content.scrolled {
opacity: 1;
}
</style>
<script type="text/javascript">
var scrolled = false;
var init = function() {
onScroll(null);
window.addEventListener('scroll', onScroll);
};
var onScroll = function(e) {
if (window.scrollY > 0 && !scrolled) {
scrolled = true;
document.getElementById('content').className = 'scrolled';
} else if (window.scrollY === 0 && scrolled) {
scrolled = false;
document.getElementById('content').removeAttribute('class');
}
};
window.addEventListener('load', init);
</script>
</head>
<body>
<div id="bar"></div>
<div id="content"></div>
</body>
</html>
I wonder if there's a workaround for this issue. Any help would be greatly appreciated.
Use colors in RGB form eg: color:rgba(255, 106, 0, 0.24) the last parameter in this property 0.24 is an opacity. make it 0 and it will be transparent.
Can't figure this out, need another pair of eyes. The footer is dispalyed properly at the bottom of the page. On click, the trace appears in the console. Not animating the transition in any browser. THANKS for looking!!
HTML
<link rel="stylesheet" href="stylesheets/appoverwrite.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/appscripts.js"></script>
<div id="appfooter">....</div>
APPOVERWRITE.CSS
#appfooter {
position:fixed;
width: 100%;
bottom: -350px;
height: 400px;
clear:both;
font-size: 11px;
background: #000;
border-top: 1px dotted #d83800;
z-index: 1000;
transition: bottom 2s;
-moz-transition: bottom 2s;
-webkit-transition: bottom 2s;
-o-transition: bottom 2s;
}
#appfooter .transition {
bottom: 0px;
}
APPSCRIPT.JS
jQuery(document).ready(function($){
$appfooter = $('#appfooter');
show_footer();
});
function is_touch_device() {
return !! ('ontouchstart' in window);
}
function show_footer() {
var open = false;
$appfooter.click(function() {
console.log("show_footer");
if (open == false) {
$appfooter.addClass("transition");
open = true;
} else {
$appfooter.removeClass("transition");
open = false;
}
});
}
Your problem is simple ;). Assuming that you want to show the footer, #appfooter .transition applies to elements which have the transition style that are descendants of the appfooter element. Use #appfooter.transition, or simply .transition instead. (I'm sure you must have just missed this by mistake.)
As a bonus here is some simplified JS for you:
var appfooter = document.getElementById("appfooter");
appfooter.onclick = function () {
appfooter.classList.toggle("transition");
}
See http://jsfiddle.net/MD8HL/