I have a page where I want all my images to fade in once they have loaded, but separately, and I have it working fine using the following...
<style>
img.imgfade {display:none;}
</style>
<script>
$(document).ready(function() {
$('img.imgfade').load(function() {
$(this).fadeIn('slow');
});
});
</script>
The problem I have here, is after navigating away from the page, and then coming back again, the images are no longer there. This is probably because they are already stored in the browser cache, and so are already loaded before my javascript runs.
I've been researching this all afternoon, but can't find an alternative where the images load and fade in seperately. One method I found says to include an .each() function to the .load(). This each can check if an image is already complete and if so just manually call .load() but when I add it, the images don't even load the first time round.
<script>
$(document).ready(function() {
$('img.imgfade').load(function() {
$(this).fadeIn('slow');
});.each(function() {
if(this.complete) {
jQuery(this).load();
}
});
</script>
SOLVED: The question was solved below, so I am sharing my full code incase it helps anyone else. This will fade in your images one at a time as they load, and also will not be affected by the browser caching images when you return to the page.
<style>
img.imgfade {display:none;}
</style>
<script>
(function ($) {
$(document).ready(function() {
$('img.imgfade').load(function() {
$(this).fadeIn('slow');
})
.each(function() {
if(this.complete) {
jQuery(this).load();
}
});
})(jQuery);
</script>
});.each(function() {
try to remove the semicolon ; otherwise your code will raise a syntax error.
Remember to also add a }); for your each(function()... )
So the code becomes
...
})
.each(function() {
if(this.complete) {
jQuery(this).load();
}
});
You can make this happen with modern CSS3 transitions and a onload attribute like so:
<img src="http://www.hdwallpapersfan.com/wp-content/uploads/2013/10/mountain-4.jpg" onload="this.classList.add('show')">
img {
opacity: 0;
-webkit-transition: 1000ms opacity;
-moz-transition: 1000ms opacity;
-ms-transition: 1000ms opacity;
-0-transition: 1000ms opacity;
transition: 1000ms opacity;
}
img.show {
opacity: 1
}
Example
Granted, I used vanilla JS with this.classList which may not be suitable for you if you need older browser support
But you can always swap out for jQuery: $(this).addClass('show')
And here's an example using jQuery to perform the fade in:
<img src="http://www.hdwallpapersfan.com/wp-content/uploads/2013/10/mountain-4.jpg" onload="$(this).fadeIn(1000)">
img {
display: none;
}
Example
Related
(I am 9 weeks into a boot camp, so I apologize for the potentially rudimentary nature of this...)
I am appending an element to the DOM (a button) within a conditional:
$('.buttonsAndInputs').append(`<button id="clearHistoryButton">Clear All</button>`);
When this button is clicked, it runs through a series of functions to empty an array and clear some other content off the DOM. I would like to use the .fadeOut method of jQuery to remove THE BUTTON.
I have this in a subsequent function:
$('#clearHistoryButton').remove();
I would like to:
$('#clearHistoryButton').fadeOut(1000);
...so that it disappears in a fancy fashion.
It's not working - it simply waits one second and then - POOF - is gone.
This is my first question. This community has been ESSENTIAL in my growth in this realm and, as always, I appreciate all of you so very much.
Did you try transition: opacity 1s in your CSS ?
Advantage:
Hardware accelerated (GPU), i.e. it doesn't bother your main processor (CPU) with this task, whereas jQuery's fadeOut() function is software based and does take CPU resources for that effect.
Steps:
Add transition: opacity 1s to your CSS rules of the desired button element
here: ( #clearHistoryButton )
Add a CSS rule with button.fadeMeOut with opacity: 0
Add a simple jQuery function to add the class ".fadeMeOut" at click
Then remove button with setTimeout(function(){$('#clearHistoryButton').remove()},1000)
Run code snippet
$(function() { // Shorthand for $( document ).ready()
$("#clearHistoryButton").on( "click", function() {
// first: fade out the button with CSS
$(this).addClass("fadeMeOut");
// then: after fadeOut effect is complete, remove button from your DOM
setTimeout(function(){
$('#clearHistoryButton').remove();
},1000);
});
});
button {
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
transition: opacity 1s;
}
button.fadeMeOut {
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="clearHistoryButton">Press to hide me</button>
I am trying to make a kind of template, for a dashboard page, where when a dashboard button is clicked, something is added to the DOM.
I was trying to template this, so that when someone makes a new dashboard for example, he has the option, to specify in CSS an animation that should run on each button when clicked. If an animation is defined on the button, the actual loading of the element should be delayed until the animation completes.
Now, if I actually specify an animation in css, everything works fine, because I am delaying the logical code with a callback on the animations end. My problem is, that I can't achieve the same, when there is no animation set to the element.
What I would want is something simmilar:
function buttonClick($button) {
$button.addClass('activated');
$button.one('animationend', function() {
// ... run the logic here
});
if (...no animation specified in activated class) {
// ... run the logic here
}
}
NOTE: I am using jQuery here, if there is a method specific in jQuery for this, that would also be okay for me, but a plain javascript method would be fine as well. I heard about the jQuery(":animated") selector, but when I was testing it, it seems that it only works for animations started with jQuery itself, and not with CSS3.
As you seem to use animation CSS for your animations (given that you use the animationend event), you could use getComputedStyle to verify the content of the animation-name CSS property.
Here is a demo with two buttons: one triggers an animation on click, while the other doesn't:
$("button").click(function () {
buttonClick($(this));
});
function hasAnimation($button) {
return getComputedStyle($button[0], null)["animation-name"] != "none";
}
function onEndAnimation($button) {
$button.removeClass('activated');
console.log("animation complete on button " + $button.text());
}
function buttonClick($button) {
$button.addClass('activated');
$button.one('animationend', () => onEndAnimation($button));
if (!hasAnimation($button)) onEndAnimation($button);
}
#yes.activated {
animation-duration: 1s;
animation-name: grow;
}
#keyframes grow {
from { width: 50px; }
50% { width: 100px; }
to { width: 50px; }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="yes" style="width: 50px">Yes</button><br>
<button id = "no" style="width: 50px">No</button>
I have a Javascript script that is sort of heavy to load and I noticed that on slower configurations, the script does load after the html markup, and that make my page to not work properly.
Loading the javascript first and then the html markup fixes my issue.
I found simple way to do it with the following :
Javascript :
jQuery(document).ready(function ($) {
$(window).load(function () {
setTimeout(function(){
$('#preloader').fadeOut('slow', function () {
});
},2000);
});
});
html :
<div id="preloader"></div>
<p>EXEMPLE</p>
and finally css :
#preloader {
position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 100%;
height: 100%;
overflow: visible;
background: #333 url('//cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/processing.gif') no-repeat center center;
}
http://jsfiddle.net/harshdand/593Lqqnm/2/
It is jQuery though. I would like to do the same in vanilla JS since I am not proficient with jQuery and for performance reasons.
Any way someone can show me the vanilla JS equivalent of the script or a better way ?
The (document).ready you use is triggered once the DOM is fully loaded.
In your case, as you mentioned, this means that your JS is also loaded.
So basically you're looking at the DOM to see if JS is loaded. I think a nicer solution would be to look at the JS directly an determine from that is you can remove the preloader.
But to answer your question, the vanilla equivalent could be something like this:
According to youmightnotneedjquery.com you could replace the (document).ready part with this:
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
You could than use this to trigger a CSS change in opacity, and remove the element completely once the opacity animation is done.
var target = document.getElementById('preloader');
target.style.opacity = '0';
setTimeout(function(){target.parentNode.removeChild(target);}, 1000);
In order to make the opacity fade nicely you need to add a transition to the preloader in CSS:
-webkit-transition: opacity 1000ms linear;
transition: opacity 1000ms linear;
Just make sure the animation in the CSS is the same duration as the timeout in the JS.
The complete code would be something like this: http://jsfiddle.net/8ua69dbL/10/
I have installed an infinite scroll script to my Tumblr blog, and am now in the process of adding a scroll-to-top button. I want this button to fade in once the user scrolls down past a certain point, and fade out when they scroll back up. I also want it to provide a smooth scroll, not just a jump to the top.
I am fluent with HTML and CSS, though I unfortunately know basically nothing about JavaScript and jQuery. I found this tutorial for the JS side of things which taught me how to get the desired scroll button. Everything worked great, but the only problem is that the fadeOut doesn't work - the element simply disappears. Sometimes, if I am lucky, it will start fading out a little for a microsecond or so, but then disappear.
Here is the JavaScript I'm using:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script>
$(function () {
$("#gotop")
.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('#gotop').fadeIn(500);
} else {
$('#gotop').fadeOut(500);
}
});
$('#gotop').click(function () {
$('html,body').animate({
scrollTop: 0
}, 400);
return false;
});
});
</script>
I have a simple anchor element in my HTML, styled in CSS using the id #gotop:
Top
CSS:
#gotop {position: fixed;
right: 2em; bottom: 2em;}
As it is, everything works fine, except for the fade out.
I've browsed the internet for similar such issues. I tried various things which I came across, though most of it was greek to me unfortunately.
Edit: I just had a thought. Is it possible that the fade out doesn't occur, because before it has time to fade out, the page has already scrolled back above the "hidden" zone and the element is immediately set to be hidden?
If anybody knows anything, it'd be much appreciated - thanks for your time!
Hope this helps
Js Fiddle Demo
$(function () {
$('#gotop').hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('#gotop').fadeIn(500);
} else {
$('#gotop').fadeOut(500);
}
});
$('#gotop').click(function () {
$('html,body').animate({
scrollTop: 0
}, 400);
return false;
});
});
Okay, after some mucking around I managed to figure out the problem.
It turns out that I had set all elements on my page to have a CSS3 transition assigned to them, through use of the * selector:
* {margin: 0; padding: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;}
I did this for convenience so that any hover I had would have a nice transition. However, it seems that this was what was causing my scroll-to-top button to misfunction!
I would suggest that anybody who is having the same problem as my checks any transitions they've used, and ensure that they're not affecting the to-top button. If there are any doubts, try removing them temporarily just to check.
Hope this helps.
I have searched through StackOverflow posts and various forums, but cannot find an answer. I have found answers for similar questions, but nothing breaks it down quite enough for me to understand. I understand a good deal of PHP and HTML, but am having difficulty with scripts.
How can I click on a link, get the href (or what do I need?), have it fade out the current content, find the content I'm trying to load (href or whatever in the link) and load it, then fade it in?
My previous problems with random bits of code I've tried:
While going from page to page if another link was clicked while loading, it would only partially fade the second page in.
Each link had to have it's own script to direct it there. Could never figure out how to make it get the href of the link clicked.
Examples were so complicated I couldn't modify them to what I needed exactly. I need to understand the process of it.
Something like:
$('.link').on('click', function(){
$('.content').fadeOut().load('/path/to/script', function() {
$(this).fadeIn();
});
});
The key to this to use a HTML page or PHP script which can return the content you want. You might want to retrieve the URL from another element or hard-code it into your script - your call. For more information about how load() works, visit jQuery's documentation.
I actually developed something just like this some time ago.
The trick (or a trick) is to wrap your page an an iframe, and on the parent window, have a div element that fades into view when a page is requested, and fades out when the page loads.
The parent window looks like this:
<!DOCTYPE html>
<html>
<head>
<title>< Page1 ></title>
<style>
html, body{
font-family:helvetica;
}
#fade, iframe {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
border-width:0px;
z-index:-1;
opacity:0;
color:#AAA;
background-color:#FFF;
-webkit-transition: opacity 300ms;
-moz-transition: opacity 300ms;
-o-transition: opacity 300ms;
}
iframe {
opacity:1;
z-index:1;
background-color:#FFF;
}
</style>
</head>
<body>
<div id="fade">
<h1>Loadin..</h1>
</div>
<iframe src="p1.html"></iframe>
<script>
var fade = document.getElementById("fade");
var iframe = document.getElementsByTagName("iframe")[0];
var t = null;
addEventListener("message", function(e) {
if(t!=null)clearTimeout(t);
fade.style.zIndex = "2";
t=setTimeout(function(){
fade.style.opacity = "1";
},0);
}, true);
iframe.addEventListener("load", function() {
if(t!=null)clearTimeout(t);
t=setTimeout(function(){
fade.style.opacity = "0";
},0);
document.title = iframe.contentWindow.document.title;
t=setTimeout(function(){
fade.style.zIndex = "-1";
},300);
}, true);
</script>
</body>
</html>
And the subpages would each have the following code:
<script>
function go() {
window.parent.postMessage("showLoadScreen", "*");
}
</script>
somepage.html
This code is a little different in that the fader doesn't pop up unless the requested resource is taking awhile to load. But, you get the idea.
Since the iframe only exists for visual purposes, it shouldn't cause any major problems. However, note that this code uses HTML5's postMessage API, and you may want to tweak it a bit.