I'm talking about this site here: malcolmtanti.com
I am using this function:
<script>
var image = new Image();
image.onload = function () {
$('header').animate({opacity: 1}, 2000);
}
image.src = "./images/background.jpg";
</script>
to animate the fade in of my main background image and the title etc. It should fade in the header element in my css.
This is the CSS:
header{
position: relative;
background: url(../images/background.jpg) no-repeat top center;
background-size: cover !important;
-webkit-background-size: cover !important;
/*height: 700*/
top:50px;
min-height:95%;
max-width: 100%;
overflow: hidden;
opacity:0;
}
For some reason, the first time I access the site, the picture loads for me, but once I press refresh, the opacity of the header tag is remaining 0. How can this be?
It might be a problem with the browser caching the image so that when you refresh the page it doesn't fire the animation since the image is already preloaded.
Try loading the image with a unique id (like the current time) to prevent this.
<script>
var image = $('<img/>');
var srcText = './images/background.jpg?t=' + new Date().getTime();
image.attr('src', srcText).load(function() {
$(this).remove();
$('header').animate({opacity: 1}, 2000);
});
</script>
U have used the link from (link tag, script tag )the href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" and src of the script like this. Don't use like this. copy the code of above link and place it in your folder and refer that local link..
Related
I've been searching on many posts but almost all of them are confusing.
I'm working with animate.css into a which is at the middle of my page.
For default the animation is played when the page is loaded, but i want that it play when i reach the (when i'm scrolling).
Please, don't say about JS Reveal, i'd like to use the animation from animate.css
What i was trying:
HTML
<!-- Others div above -->
<div class="row sf-medida" id="sf-medida" onscroll="Animar();">
<!-- Others div below -->
JS
function Animar() {
setTimeout(function(){
document.getElementById("sf-medida").style.visibility = "visible";
$("#titulo-general").addClass("animated fadeInLeft");
$(".sub-titulo").addClass("animated bounceInRight");
$(".titulo-izquierda").addClass("animated swing");
$(".texto-1").addClass("animated fadeIn");
$(".texto-2").addClass("animated fadeIn");
},1000)
}
But it doesn't work, however, i've tried adding
window.addEventListener("scroll", Animar);
But what it does is that the animation is played whenever i scroll on the page,
This can be very easily done using little jquery. All you need to do is listen to the scroll event, then check if user have scrolled to the target element. If the user did, then add animation class from your animate.css. Adjust your if condition according to your desires. Check the below code and fiddle https://jsfiddle.net/15z6x5ko/ for reference
$(document).ready(function(){
$(document).scroll(function(evt){
var v2 = Math.abs($('.box').position().top - $(window).height()/2);
var v1 = $(this).scrollTop();
if( v1 > v2 ){
console.log('in');
$('.box').addClass('animated flip')
}
});
});
So as per your request, let me try to explain the code line by line
$(document).ready(function(){
This is easy to understand. It just waits for browser to load all HTML & CSS first and when everything is loaded, the javascript code inside this function will run.
$(document).scroll(function(evt){
This is an event handler, our callback function will run whenever user scrolls on document. Remember change $(document) according whatever the parent is of your target element. So if your target div is inside another div whose class is .parent then use $('.parent').scroll . As for my code I am listening the event on document. When my document scrolls, my event will trigger.
var v1 = $(this).scrollTop();
This code will get the amount of scrolling user had done in pixels.
var v2 = Math.abs($('.box').position().top - $(window).height()/2);
This is a simple math that checks the position of my target div from its parent element subtracting the half of the size of window from it. This will return the pixel positing of your target div. So when user reaches this pixel positing while scrolling, your animation will start.
$('.box').addClass('animated flip')
Now this code simply adds the animation css classes into the target div as soon as user scrolls to the target div.
I'm using "WoW.js" for my scroll reveal library. It's pretty easy to use, like for real. One line of code
<div class="wow fadeIn">content</div>
Here, take a look: http://mynameismatthieu.com/WOW/docs.html
Here's an example using Jquery.
In it we use .scrollTop and .height to measure the videos container from the top of the page so that we know when it comes into view when scrolling. (it's actually set to load when it reaches 100px below the bottom of the viewable area, a sort of preload. you can adjust it to whatever you like.)
The video load is done by copying the url from data-src= into src= when the video container is at the desired spot on the page. (in this case, 100px below the viewable area)
fiddle
note, the video won't load on stack so be sure to view the fiddle
https://jsfiddle.net/Hastig/xszu6b1p/
I scraped it together from these two answers..
Youtube Autoplay
Ladyload Images
$(window).scroll(function() {
$.each($('iframe'), function() {
if ( $(this).attr('data-src') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) {
var source = $(this).data('src');
$(this).attr('src', source);
$(this).removeAttr('data-src');
}
})
})
body {
margin: 0;
}
.filler {
display: flex;
justify-content: center;
align-items: center;
height: 800px;
}
.filler-top { background-color: blue }
.filler-btm { background-color: green; }
.video-container {
/* css tricks - responsive iframe video */
/* https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
display: flex;
justify-content: center;
background-color: red;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filler filler-top">filler top</div>
<div class="video-container">
<iframe data-src="https://www.youtube.com/embed/f0JDs4FY8cQ?rel=0&autoplay=1"></iframe>
</div>
<div class="filler filler-btm">filler bottom</div>
This code loads correctly the spinner, but how do I hide it after loading completes?
iframe {
background-image: url("http://jimpunk.net/Loading/wp-content/uploads/loading2.gif");
background-repeat: no-repeat;
background-position: 50% 50%;
}
As an alternative solution, you can do this as well:
<div id="spinner">
<div>
<img src="http://www.ajaxload.info/images/exemples/25.gif" />
</div>
</div>
<iframe border=0 name=iframe src="http://www.w3schools.com" width="950" height="633" scrolling="no" noresize frameborder="0" onload="document.getElementById('spinner').style.display='none';"></iframe>
Style the position of the spinner absolute to the page container to center it appropriatedly
Try jQuery:
$( document ).ready(function() {
$( "iframe .load" ).hide();
});
and create a second css-class for the loading-action:
.load{
background-image: url("http://jimpunk.net/Loading/wp-content/uploads/loading2.gif");
background-repeat: no-repeat;
background-position: 50% 50%;
position: absolute;
width:100%;
height:100%;
}
iframe{
position:relative;
}
Let me know if it works.
Here it is, using font-awesome and jQuery:
$(document).ready(function () {
showSpinnerWhileIFrameLoads();
});
function showSpinnerWhileIFrameLoads() {
var iframe = $('iframe');
if (iframe.length) {
$(iframe).before('<div id=\'spinner\'><i class=\'fa fa-spinner fa-spin fa-3x fa-fw\'></i></div>');
$(iframe).on('load', function() {
document.getElementById('spinner').style.display='none';
});
}
}
You could listen to when the iframe is loaded, and then put a class on the iframe, setting background image to nothing.
iframe.onload = function() {
// remove spinner
};
Sorry for the short answer, but I'm on a phone atm :)
I just wanted to add that another way to do this without Javascript is to have the spinner appear behind the iframe, and give the iframe an initially transparent background; so long as the iframe's content has a background colour it will cover the spinner once it loads.
This is a great way to do this if your iframe is "single-use", i.e- it loads embedded content only once and contains no clickable links, or if you don't care about displaying the spinner once the initial content has loaded.*
There are two easy ways to do this:
CSS Background
HTML:
<div class="iframe_container">
<iframe src="http://example.org"></iframe>
</div>
CSS:
.iframe_container {
background-image: url('path/to/spinner.gif');
background-position: center;
background-repeat: no-repeat;
}
.iframe_container iframe {
background: transparent;
}
Basically the spinner is a background for .image_container, positioned in the center, and visible because the iframe's background is initially transparent. When the iframe content loads it covers the image, even if an error occurs.
Z-Index
HTML:
<div class="iframe_container">
<img class="spinner" src="path/to/spinner.gif" />
<iframe src="http://www.example.org"></iframe>
</div>
CSS:
.iframe_container {
position: relative;
}
.iframe_container .spinner {
position: absolute;
top: 50%;
left: 50%;
}
.iframe_container iframe {
background: transparent;
z-index: 1;
}
In this case we have our spinner embedded as a specific element (which you may need to do for Bootstrap spinners and such), which is positioned using CSS. The iframe in this case covers the image because it has been given a z-index (you may need to use a higher number, if other elements with z-indexes) but the trick is essentially the same.
Notes
As long as it doesn't bother you that the spinner is still technically in the background this works great for a single page-load iframe, or when you only care about the first load.
This is also a good trick to use if you want your site to support users with Javascript disabled, as they won't be left with a spinner that won't disappear.
*If you want to re-use a spinner via Javascript you can still do-so using the z-index option, by setting the spinner's z-index to be higher than the iframe's, like so:
var e = getElementById('my_iframe');
e.onload = function() {
var e = getElementById('my_spinner');
e.style.zIndex = 0;
}
e.onunload = function() {
var e = getElementById('my_spinner');
e.style.zIndex = 100;
}
This works by pushing the spinner above the iframe when unloading (source is changed) and behind it again on load (new content is visible).
You can use jquery on load
$('#showFrame').on("load", function () {
console.log('iframe loaded completely'); //replace with code to hide loader
});
================================================================
=========================2022 Answer==========================
Iframes have a onLoad attribute that you can set to a function
In react you could do something as such:
const spinner = async () => {
document.getElementById('spinner').style.display = 'none';
}
Rendered in a Modal as such:
<div
id="spinner"
style={{
backgroundColor: '#ECECFE',
borderRadius: '8px',
padding: '20px',
}}
>
<Loading
spinnerColor="#2E7DAF"
text="Loading...."
/>
</div>
<iframe id="iframeid" src="" width="650px" height="650px" onLoad={spinner} ></iframe>
</div >
How can I do to change background image onClick with jquery or java script?
For Example: I have Six(6) images and I want change to NEXT background image when i click on ">" (next arrow) and change to previous background image when I click on "<" (back arrow).
I'm developing this website with responsive html5 and css3.
<script type="text/javascript" src="jquery-1.8.2.min.js"></script> //jquery inside the folder ok
<script type="text/javascript">
var images = ['url("../images/1366x768/image-_0107.jpg")', 'url("../images/1366x768/image-_0012.jpg")'], curIndex = 0; // here I set the images inside the desired folder
// Left arrow selector
$('.backarrow').click(function () { //here I set the back arrow "<"
if (curIndex > 0) {
// Container selector
$('backgrounds').css('../images/1366x768/image-0061.jpg', images[--curIndex]); // here I set my file backgrounds.css and the default image configured there
}
});
// Right arrow selector
$('.nextarrow').click(function () {
if (curIndex < images.length - 1) {
// Container selector
$('backgrounds').css('../images/1366x768/image-0061.jpg', images[++curIndex]);
}
});
</script>
<!--HTML 5 -->
<div id="square">> <!-- here I call my jquery -->
</div>
<div id="square">< <!-- here I call my jquery -->
</div>
/* CSS3 */
/* backgrounds.css */
body {
background: #dcd8d5 url(../images/1366x768/image-_0061.jpg) no-repeat center center fixed; -webkit-background-size: cover;
-moz-background-size: cover; -o-background-size: cover; background-size: cover }
/* default.css */
.nextarrow {
font-size:20px; color:#666; font-style:normal
}
.backarrow {
font-size:20px; color:#666; font-style:normal
}
WHAT I'M DOING WRONG?
The jQuery approach for this is below:
$("#background").css("background-image","url(img_url_here)");
I'm not entirely sure what you are trying to select so I made a jsfiddle which will hopefully make it easier for you to figure out:
JSFiddle
The error seems to be in this line:
$('backgrounds')
What exactly are you trying to select with this? If is an object with id = "backgrounds" you should use $('#backgrounds'), if it's a class you can select it by using $('.backgrounds'). The way you are using, jQuery is trying to search for an element (i.e. tag) named "backgrounds". (Which I'm pretty sure is not what you are trying to do)
Any way, in case you want to change the background-image from, let's say, your body element you should use something like:
$(document).ready(function() {
$(".nextarrow").click(function(){
{
$('body').css("background-image","url(../images/1366x768/image-0061.jpg)"); // Correct the path to your image
}
}
Alternatively, you can change the background-image from an element which id happens to be "backgrounds" using:
$('#backgrounds').css("background-image","url(../images/1366x768/image-0061.jpg)"); // Correct the path relative to the html document this script is running.
I hope it helped. Cheers
I have a GIF animation that is large and I am having it display a loading icon until the GIF is loaded. Once it is loaded the GIF shows. Works great but I want to add a "replay" button to trigger the GIF to replay (reload).
Code for the loading and GIF:
HTML
<div id="loader" class="loading img-center"></div>
CSS
#loader {
width: 600px;
height: 450px;
margin: auto;
}
#loader.loading {
background: url(/Images/ajax-loader.gif) no-repeat center center;
width:32px;
margin:auto ;
}
JS
var $j = jQuery.noConflict();
$j(function () {
var img = new Image();
$j(img)
.load(function () {
$j(this).hide();
$j('#loader')
.removeClass('loading')
.append(this);
$j(this).fadeIn();
})
.error(function () {
})
.attr('src', '/2012/images/august/sailboat.gif');
});
The above code works fine. Now for the "Replay" or "Reload" Code that Does not Work:
HTML
<a id="refresh" href="#"> Replay Animation </a>
JS
$j(function() {
$j("#refresh").click(function() {
$j("#loader").load("/2012/images/august/sailboat.gif")
})
})
I know there is some error with the JS but with my lack of skill in JS I do not know what I should be doing or trying. Any help or advice is greatly appreciated!
Thanks!
Check this:
$j("#refresh").click(function() {
$j("#loader").find('img').attr("src", "/2012/images/august/sailboat.gif");
});
As in your previous code you're append the image within #loader so, $('#loader').load(..) will not work. Find the image within #loader and then change the src of that image.
You could also append timestamp to avoid image loading from cache if needed:
$j("#refresh").click(function() {
var timestamp = new Date().getTime();
$j('#loader').find('img').attr('src', '/2012/images/august/sailboat.gif'+'?'+timestamp);
});
I have an animated gif banner on my website that is around 2MB. For people with slow connections, I want to include some Javascript that will only display (and start playing) this gif when it is fully loaded, so that the rest of the website will already display whilst the gif is still loading. Ideally, I would have one image (loading.gif) be displayed first, and then switched to the banner (banner.gif) with javascript when banner.gif is loaded.
How do I do this? (I'm new to Javascript)
Thanks!
You can do this using an Image object, like so (do this when you want to start loading the banner, probably in onload):
var banner = new Image();
var loading = new Image();
var bannerElement = document.getElementById("banner"); // assumes an element with id "banner" contains the banner image - you can get the element however you want.
banner.src = "location/of/the/image.gif";
loading.src = "loading.gif";
banner.onload = function() {
bannerElement.removeChild(bannerElement.lastChild);
bannerElement.appendChild(banner);
};
bannerElement.removeChild(bannerElement.lastChild);
bannerElement.appendChild(loading);
Your banner element should look like this:
<div id="banner"><img src="location/of/the/image.gif" alt="Banner" /></div>
This is so that 1) The bannerElement.removeChild part will work and 2) To keep with the principles of progressive enhancement so people without JavaScript aren't left out.
How about a jquery script like http://jqueryfordesigners.com/image-loading/
So you would do
<style type="text/css" media="screen">
<!--
BODY { margin: 10px; padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
H1 { margin-bottom: 2px; }
DIV#loader {
border: 1px solid #ccc;
width: 500px;
height: 500px;
overflow: hidden;
}
DIV#loader.loading {
background: url(/images/spinner.gif) no-repeat center center;
}
-->
</style>
$(function () {
var img = new Image();
$(img).load(function () {
//$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
$(this).hide();
$('#loader').removeClass('loading').append(this);
$(this).fadeIn();
}).error(function () {
// notify the user that the image could not be loaded
}).attr('src', 'myimage.jpg');
});
Note, you dont need to create a new image element if you already have one set. If you create one already then you can just use a selector. something like $('#myimage').load(... which is an image tag with an id called myimage.
I don't think you need JavaScript for this - you can set your image area's background image with css (use a very small image so that it appears quickly) and then within that area have your image tag with the 2mb image's src already set. That way it should appear when ready.
example css:
#banner {background: url('/img/banner-background.jpg');}