I want the page and contents in it to be displayed ONLY AFTER my big background images are loaded.I've tried so many ways to do it, I just can't find a way.
Already tried $(document).ready - not working.
body
{
padding: 0;
margin: 0;
background-color: #ffffff;
width: 100%;
overflow-x: hidden;
background: url('images/dark.jpg');
background-attachment: fixed;
background-size: cover;
}
You could show an overlay with loading animation
<div id="preloader"></div>
#preloader
{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 9999;
background: #FFFFFF url('URL TO AN ANIMATED LOADING GIF') no-repeat center center;
}
and set it to display: none after all content is loaded
window.onload = function() {
document.querySelector('#preloader').style.display = "none";
};
You can use setTimeout function to display the data after you backgrounds.
Thanks
Try this:
You must do this for every images. For example:
$('selector_images').each(function(idx, img) {
var img = $(img).attr('src', '/big_image.jpg')
.on('load', function() {
if (!this.complete) {
console.log('broken image!');
} else {
//Show content
}
});
});
Hope this helps!
Related
I am a bit new to coding. I have a div with a background image. I want to be able to change the image from its blurred version to a clearer version as I scroll down. My HTML code is like this:
<div class="intro">
<div class="blur" style="background-image: url("blurimage.png");"></div>
<div class="clear" style="opacity: 0.00666667; background-image: url("image.png");"></div>
</div>
My CSS code is like this:
.intro{
display: table;
width: 100%;
height: 700px;
position: relative;
}
.blur{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
z-index: -10;
background-color: #222;
}
.clear{
background-size: cover;}
I have tried using many javascript functions but no avail. Please guide me as to how can I do this by using a Javascript function.
Thanks!
Using JavaScript you could try
document.addEventListener("scroll", function(event) {
// this code is executed each time the user scrolls
var scrollPosition = window.pageYOffset;
// scrollPosition is 0 at the top of the page
// it contains how many pixels have been scrolled down
});
Hope that helps.
Add this to your JS file (I assume you have jQuery included as well):
jQuery(document).ready(function($) {
scrollPosition = $(document).scrollTop();
$('body').scroll(function() {
$('.intro .clear').animate({
height: scrollPosition,
}, 300);
});
});
Also add this to .clear:
.clear {
position: absolute;
top: 0;
left: 0;
height: 0;
background-size: cover;
}
Also keep in mind that this code will work if you have your image on top of the page. Otherwise feel free to change $(document).scrollTop() with the actual selector of the parent element.
I would also recommend renaming the clear class with some other name, since if you decide to use CSS framework or plugin at later point, that class name might be reserved for clearfix styles.
see here jsfiddle
made a simple example with changing the background-color . this is for example purposes only because i can't use your images
also...you need only 1 div inside the intro and toggle classes on that div from .blur to .clear and vice-versa and use CSS to style those classes.
the idea is that you have only one div w to which you change the background depending on the scroll
HTML :
<div class="intro">
<div class="blur"></div>
</div>
CSS :
.intro{
display: table;
width: 100%;
height: 700px;
position: relative;
}
.intro div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
z-index: -10;
}
.blur{
background-image: url("blurimage.png");
background-color: red;
}
.clearimg {
background-size: cover;
background-color:blue
background-image: url("image.png");
}
JQ :
$(window).scroll(function() {
if ($(window).scrollTop() > 0) {
$(".intro div").addClass("clearimg")
$(".intro div").removeClass("blur")
}else{
$(".intro div").addClass("blur")
$(".intro div").removeClass("clearimg")
}
});
I have a div that contains a single div that acts as an overlay, along with another div that contains some images. The overlay has an opacity so that the images can be seen, but text can be still be read.
However, when I animate the opacity of the image, it ignores the overlay during the animation, until it is finished.
He's the code:
HTML
<div class="container">
<div class="overlay"></div>
<div class="image-container">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
</div>
</div>
CSS
.container {
position: absolute;
top: 0;
z-index: 1;
height: 100%;
overflow: hidden;
background-color: yellow;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
opacity: 0.78;
background-color: rgb(245, 245, 245);
}
JavaScript
var image = document.getElementsByTagName("IMG")[0];
image.style.opacity = 0;
setTimeout(function() {
image.style.transition = "opacity 3s linear";
image.style.opacity = 1;
}, 1000);
I also have a jsfiddle example:
https://jsfiddle.net/ygqov8t4/
I have tested this in Chrome, Firefox, and Safari on Mac. All browser have the same behaviour, so maybe this is by design?
I have tried doing this using JavaScript, but I was not able to get the animation functioning, and I am concerned about performance because this is going to be run on a lot (100+) images.
image.onload = function() {
var self = this;
for (var i = 0; i < 1000; i++) {
setTimeout(function() {
self.style.opacity = i/1000;
}, i);
}
}
Try forcing the overlay to be above the image by setting its z-index to 1
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
opacity: 0.78;
background-color: rgb(245, 245, 245);
z-index: 1;
}
https://jsfiddle.net/05pwwtm7/1/
I want to show a loading gif when a user is loading away from the page. I do this when it is loading like this:
CSS:
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(https://i.imgur.com/Bpa5eIP.gif) center no-repeat #fff;
}
JavaScript:
<script>
$(window).load(function() {
Animate loader off screen
$(".se-pre-con").fadeOut("slow");;
});
</script>
HTML:
<div class="se-pre-con"></div>
I could do this by adding .onClick to each link on the page but that would take time and I want to know if there is a easier way to show the gif upon loading away from the page.
Watch unload event or beforeunload event just as you do with load!
For example:
$(window).on("unload",function() {
//your animation here
});
Also you can add a delay or something so the animation can end before leaving the page:
var triggered = false;
$(window).on("unload",function(event) {
if (triggered === true) {
return; //this is run automatically after the timeout
}
event.preventDefault();
// your animation here
triggered = true; // set flag
setTimeout(function(){$(this).trigger('unload');},1000); //set animation length as timeout
});
I used this question for my solution: How to trigger an event after using event.preventDefault()
try using this
$(document).ajaxStart(function() {
$("#loading").show();
});
$(document).ajaxComplete(function() {
$("#loading").hide();
});
});
CSS
.wait {
top: 100px;
z-index: 2000;
height: 100%;
width: 100%;
vertical-align: bottom;
position: relative;
}
.loader {
background-position: center center;
z-index: 1000;
height: auto;
width: 100%;
position: absolute;
}
.loaderimg {
height: 100%;
width: 100%;
}
HTML
<div id="loading" class="loader">
<h2 class="text-center wait">Loading results, please be patient</h2>
<img class="loaderimg" src="img/scr_01.gif" />
</div>
I have added few elements with "visibility:hidden; position:fixed;" to the top of the page and for some reason, when I launch the script in Chrome, it makes "#pageOverlay" visible, but fails to unhide other elements. Here is the JS function that fails:
function showImage(element) {
//locating currentGalleryItemIndex
for (currentGalleryItemIndex = firstGalleryItemIndex; currentGalleryItemIndex <= lastGalleryItemIndex; currentGalleryItemIndex++) {
if (galleryItems[currentGalleryItemIndex] === element) break;
}
//general settings
fillPreviewArea();
pageOverlay.style.visibility = "visible";
previewArea.style.visibility = "visible";
previewAreaCloseLink.style.visibility = "visible";
previewAreaActive = true;
}
The same thing doesn't happen in Firefox and IE11 and it only works in chrome if I change all "position:fixed;" to "position:absolute;"; which isn't what I want to use.
The page that uses the script is here:
http://spongebobia.com/spongebob-captures/gallery.php
And the actual script is here:
http://spongebobia.com/spongebob-captures/scripts/previewArea.js
How to make it work while keeping "position: fixed;"?
It's about "z-index". Your pageOverlay's CSS should look like this:
#pageOverlay {
background: gray;
width: 100%;
height: 100%;
z-index: 500;
top: 0px;
left: 0px;
position: fixed;
visibility: hidden;
z-index: 2;
}
and your previewAreaContainer like this:
#previewAreaContainer {
position: fixed;
visibility: hidden;
top: 10px;
left: 50%;
margin-left: -344px;
width: 670px;
height: 540px;
z-index: 3;
}
I have a requirement in HTML5.
News,Business,People and Branding are 4 images and i added all into the background image.
When i mouse hover on the News image, Background image should change and mouseout should show old background image.
I dont know what to writen on the mouseover function.
please check the code and let me know where changes are required.
Intranet Application
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
#BG {
background-image: url('img/asianwoman.jpg');
width: 100%;
height: 100%;
min-height: 100%;
min-width: 100%;
background-size: 100% 100%;
}
</style>
<script type="text/JavaScript">
function mouseOverFunction(){
}
function mouseOutFunction(){
}
</script>
If the requirement is that one element affects the background of another, you will require JS. Assuming id="news" is the triggering element and id="BG" is the receiving element:
document.getElementById("news").addEventListener("mouseover", function() {
document.getElementById("BG").style.backgroundImage = "url(img/southamericangrandmother.jpg)";
}, false);
document.getElementById("news").addEventListener("mouseout", function() {
document.getElementById("BG").style.backgroundImage = "";
}, false);
Javascript
var e = document.getElementById('id');
e.style.backgroundImage = 'url(image.gif)';
JQuery
$('#id').css('background-image','url(image.gif)');
CSS (3)
#id{
background-image:url(image.gif);
}
#id:hover{
background-image:url(mouseoverimage.gif);
}
Use Javascript code ..
document.getElementById('BG').onmouseover = function()
{
document.getElementById('BG').style.backgroundImage = "url('image.png') no-repeat";
};
WORKING DEMO
html, body {
margin: 0;
padding: 0;
height: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
#BG {
background-image: url('http://www.hdwallpapers3d.com/wp-content/uploads/2013/04/Flower-wallpaper-29.jpg') ;
width: 500px;
height: 500px;
}
#BG:hover {
background-image: url('http://radiantq.com/wp-content/uploads/2011/11/software_box.png');
}
simply do with css
with effect
#BG {
background-image: url('img/asianwoman.jpg');
width: 100%;
height: 100%;
min-height: 100%;
min-width: 100%;
background-size: 100% 100%;
transition:background 2s;
-webkit-transition:background 2s; /* Safari */
}
#BG:hover {
background-image: url('img/yourNewImage.jpg');
}