I have this function that will show a LOADING image when page is loading:
<script>
function onReady(callback) {
var intervalID = window.setInterval(checkReady, 1000);
function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalID);
callback.call(this);
}
}
}
function show(id, value) {
document.getElementById(id).style.display = value ? 'block' : 'none';
}
onReady(function () {
show('all', true);
show('loading', false);
});
</script>
jsfiddle
What I want to do is add a fadeIn effect to show div #all WHEN LOADING is complete.
Can I add a fadeIn effect in function show? Can I use jquery? Any ideas?
You can use following to function for fade in & fade out effect using javascript. CREDIT
function fadeIn(el, display) {
el.style.opacity = 0;
el.style.display = display || "block";
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += .01) > 1)) {
el.style.opacity = val;
requestAnimationFrame(fade);
}
})();
}
function fadeOut(el) {
el.style.opacity = 1;
(function fade() {
if ((el.style.opacity -= .01) < 0) {
el.style.display = "none";
} else {
requestAnimationFrame(fade);
}
})();
}
And change your show function to following.
function show(id, value) {
var el = document.getElementById(id);
if(value)
fadeIn(el)
else
fadeOut(el);
}
UPDATED FIDDLE
You can use jQuery's fadeIn method. e.g
function show(id, value) {
if(value){
$("#" + id).fadeIn(2000);
} else{
$('#' +id).hide();
}
}
https://jsfiddle.net/az9uaspr/
Put this in your "head" tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
And Just change your show() like this:-
function show(id, value) {
if(value)
$("#"+id).fadeIn("2000");
else
$("#"+id).hide();
}
Related
I am working on a test project targeting android internet browser. I am hiding some object onLoad using javascript.
The problem is, that it is working in mozilla firefox but not working in android default internet browser.
Here is my full code:
<!DOCTYPE html>
<html>
<script type="text/javascript" async>
function ajaxpath_59c479660b217(url){return window.location.href == '' ? url : url.replace('&s=','&s=' + escape(window.location.href));}(function(){document.write('<div id="fcs_div_59c479660b217"></div>');fcs_59c479660b217=document.createElement('script');fcs_59c479660b217.type="text/javascript";fcs_59c479660b217.src=ajaxpath_59c479660b217((document.location.protocol=="https:"?"https:":"http:")+"//www.freecommentscript.com/GetComments2.php?p=59c479660b217&s=#!59c479660b217");setTimeout("document.getElementById('fcs_div_59c479660b217').appendChild(fcs_59c479660b217)",1);})();
function myFunction() {
document.getElementById("comment-ad").style.display = "none";
}
function myFunction2() // no ';' here
{
var elem = document.getElementById("fcs_Comment_59c479660b217");
if (elem.value=="Enter your comment here") elem.value = "Enter your post here";
else elem.value = "Enter your post here";
}
function myFunction3() // no ';' here
{
document.getElementById("comment-rss-feed").style.display = "none";
}
function showFilterItem() {
if (filterstatus == 0) {
filterstatus = 1;
$find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().showFilterItem();
document.getElementByClassName("ShowButton").innerHTML = "Hide Filter";
}
else {
filterstatus = 0;
$find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().hideFilterItem();
document.getElementById("ShowButton").innerHTML = "Show filter";
}
}
if (document.readyState === "complete") {
myFunction();
myFunction2();
myFunction3();
showFilterItem();
}
else {
window.onload = function () {
myFunction();
myFunction2();
myFunction3();
showFilterItem();
};
};
</script>
</body>
</html>
I'll put the whole script in domloaded event to be sure that js can find the dom elements. like that:
<script type="text/javascript" async>
document.addEventListener('DOMContentLoaded', function(){
function ajaxpath_59c479660b217(url){return window.location.href == '' ? url : url.replace('&s=','&s=' + escape(window.location.href));}(function(){document.write('<div id="fcs_div_59c479660b217"></div>');fcs_59c479660b217=document.createElement('script');fcs_59c479660b217.type="text/javascript";fcs_59c479660b217.src=ajaxpath_59c479660b217((document.location.protocol=="https:"?"https:":"http:")+"//www.freecommentscript.com/GetComments2.php?p=59c479660b217&s=#!59c479660b217");setTimeout("document.getElementById('fcs_div_59c479660b217').appendChild(fcs_59c479660b217)",1);})();
function myFunction() {
document.getElementById("comment-ad").style.display = "none";
}
function myFunction2() // no ';' here
{
var elem = document.getElementById("fcs_Comment_59c479660b217");
if (elem.value=="Enter your comment here") elem.value = "Enter your post here";
else elem.value = "Enter your post here";
}
function myFunction3() // no ';' here
{
document.getElementById("comment-rss-feed").style.display = "none";
}
function showFilterItem() {
if (filterstatus == 0) {
filterstatus = 1;
$find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().showFilterItem();
document.getElementByClassName("ShowButton").innerHTML = "Hide Filter";
}
else {
filterstatus = 0;
$find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().hideFilterItem();
document.getElementById("ShowButton").innerHTML = "Show filter";
}
}
if (document.readyState === "complete") {
myFunction();
myFunction2();
myFunction3();
showFilterItem();
}
else {
window.onload = function () {
myFunction();
myFunction2();
myFunction3();
showFilterItem();
};
};
});
</script>
This is my function
<script>
function animation(times,time,element,patch,forever,restart, frame = 0) {
if(restart ==1){
frame = 0;
$(element).show();
}
this.interval = setInterval(function(){
frame++;
$(element).attr('src',patch+''+frame+'.png');
if(frame == times){
if(forever == 0){
$(element).hide();
clearInterval(this.interval);
} else {
frame = 0;
}
}
},time);
}
</script>
It will be OK if I only use it once. But not OK if i use it much time. Help me.
Currently, I am using an archaic method of setting a variable true at the start of the animation and false after the animation has played (see below.) I also think something might be wrong with how I process animations in the interval because when I add an animation to the array of animations to be processed, it isn't processed. Here's my code:
var animationDone = true;
function g_e(e){
return document.getElementById(e);
};
class Main{
constructor(){
this.animations = [];
this.tasks = [];
}
start_animating(){
var x = setInterval(function (){
if (animationDone == true){
try{
alert(this.animations[0]);
this.aminations[0].func(this.animations[0].args);
this.animations.shift();
}
catch(e){
}
}
},1);
}
add_animation(f, a){
this.animations.push({func:f, args:a});
alert("animation added");
}
start_working(){
var x = setInterval(function (){
try{
this.tasks[0].func(this.tasks[0].args);
this.tasks.shift();
}
catch(e){
}
},1);
}
animation_blink(){
var blink = 0;
window.setInterval(function blinking(){
if (blink == 0){
document.getElementById("blinker").innerHTML = ">";
blink= 1;
}
else if(blink == 1){
document.getElementById("blinker").innerHTML=" ";
blink = 0;
}
}, 1000);
}
animation_fade(object){
var fade = 0;
var fadeOut = 0;
animationDone = false;
var interval = setInterval(function startFade(){
g_e(object.element).style.opacity = fade;
if(fade>1 && fadeOut == 0){
fadeOut = 1;
}
else if(fade < 0){
clearInterval(interval);
}
else if(fadeOut == 0){
fade = fade + 0.2;
}
else if(fadeOut == 1){
fade = fade - 0.2;
}
}, 500);
animationDone = true;
}
plbl(object){
animationDone = false;
var p = plbl.intervals;
if (!p)
plbl.intervals = p = {};
if (p[object.destination])
clear();
function clear() {
clearInterval(p[object.destination]);
delete p[object.destination];
}
var i = 0;
var elem = document.getElementById(object.destination);
p[object.destination] = setInterval(function(){
checkChar = object.message.charAt(i);
if(checkChar =="|"){
elem.innerHTML += "<br>";
}
else{
elem.innerHTML += object.message.charAt(i);
}
i++;
if (i > message.length){
animationDone = true;
clear();
}
}, object.speed);
}
command(input){
alert(input);
if(input == "y"){
g_e("start").style.display = "none";
g_e("startUp").style.display = "block";
this.add_animation("test", "test");
}
}
get_input(){
var x = g_e("input").value;
g_e("input").value = "";
return x;
}
key_checker(event){
var key = event.keyCode;
if (key == 13){
this.command(this.get_input());
return false;
}
}
start(){
this.start_working();
this.start_animating();
this.animation_blink();
}
}
alert("compiled");
main = new Main();
main.start();
The purpose of the code below is to alert online shoppers that they must select a color (via a select/option menu) before putting an item into their basket. If they don't select a color (ie, make a selection) some blinking text displays alerting them.
I'm trying to have the text blink 3 times then stop. I tried using some counter vars but didn't work. How can I re-write this so the blink executes 3 times only?
function blink() {
if ($('.pleaseSelect').css('visibility') == 'hidden') {
$('.pleaseSelect').css('visibility', 'visible');
} else {
$('.pleaseSelect').css('visibility', 'hidden')
}
}
function showNotice() {
timerId = setInterval(blink, 200);
}
$('#addToCart').click(function() {
if ($("select > option:first").is(":selected")) {
showNotice();
} else {
clearInterval(showNotice);
$('.pleaseSelect').css('visibility', 'hidden');
}
})
Well you can have counter declared and incremented each time blink is called. then check if you have called blink three times, clear the interval. Also your showNotice function is not defined properly.
var counter = 0,
timerId;
function blink() {
if ($('.pleaseSelect').css('visibility') == 'hidden') {
$('.pleaseSelect').css('visibility', 'visible');
} else {
$('.pleaseSelect').css('visibility', 'hidden')
if (counter > 4) {
showNotice(false);
}
}
counter++;
}
function showNotice(show) {
if (show) {
timerId = setInterval(blink, 200);
} else {
clearInterval(timerId);
counter = 0;
}
}
$('#addToCart').click(function () {
if ($("select > option:first").is(":selected")) {
showNotice(true);
} else {
showNotice(false);
$('.pleaseSelect').css('visibility', 'hidden');
}
})
Here is working fiddle
function blink(){
var blinkCount = 0;
return function () {
if($('.pleaseSelect').css('visibility')== 'hidden'){
$('.pleaseSelect').css('visibility', 'visible');
} else {
$('.pleaseSelect').css('visibility', 'hidden')
}
blinkCount = blinkCount + 1;
if (blinkCount === 3) {
clearInterval(timerId);
}
}
}
the only thing is that timeId is global - bad practice... however you would have to refactor more of your code in order to correct that issue.
another option is to just fadIn and fadeOut rather than what you're doing.
It would look something like:
if(element.val() == ''){
element.fadeOut("fast");
element.fadeIn("fast");
element.fadeOut("fast");
element.fadeIn("fast");
element.fadeOut("fast");
element.fadeIn("fast");
}
How about this example? Use an anonymous function to call your blink method and keep decrementing a counter.
id = setInterval(function () {
counter--;
if (!counter) {
clearInterval(id);
}
blink();
}, 200);
See the JSFiddle for the complete context.
You can accomplish the desired behavior using variables within a private scope:
$('#addToCart').click(function(e) {
blink(e);
});
function blink(e) {
var blink_count = 0;
var timer = setInterval(function(e) {
blink_count++;
$('.pleaseSelect').toggle();
if (blink_count >= 6) {
clearInterval(timer);
blink_count = 0;
}
}, 200);
}
my problem with load event is that when I test the page it doesn't work(don't hide the preloader image),but when I put the function in the .ready(), the function works(it hides).
here is the code:
JAVASCRIPT:
$(document).load(function(){
$("#loaderHolder").hide("fast");
});
$(document).ready(function(){
$('#slider').cycle();
$('.sf-menu').superfish({
autoArrows: false
});
$('.scroll').slimScroll({
height: '590px',
wheelStep:5,
size:'15px',
width:'590px',
position: 'left',
railColor:'#c5c5c5',
color:'#a2a1a1',
railVisible:true,
alwaysVisible:true,
distance: '565px'
});
$('.scroll').css('width','550px');
$('.gallery').colorbox();
$('#gallery img').hover(function(){ $(this).fadeTo(500, 0.3)}, function(){$(this).stop().fadeTo(500, 1)})
$("#home-link").click(function(){
if ($(".active").length == 0)
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{},700);
active.attr("class","vanished");
}
});
$("#about-link").click(function(){
if ($(".active").length == 0)
{
var hidden = $("#about");
hidden.show("slide",{},700);
hidden.attr("class","active");
}
else
{
if ($("#about").attr("class") == "active")
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{},700);
active.attr("class","vanished");
var hidden = $("#about");
hidden.show("slide",{},700);
hidden.attr("class","active");
}
}
})
$("#starters-link").click(function(){
if ($(".active").length == 0)
{
var hidden = $("#starters");
hidden.show("slide",{},700);
hidden.attr("class","active");
}
else
{
if ($("#starters").attr("class") == "active")
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{},700);
active.attr("class","vanished");
var hidden = $("#starters");
hidden.show("slide",{},700);
hidden.attr("class","active");
}
}
})
$("#gallery-link").click(function(){
if ($(".active").length == 0)
{
var hidden = $("#gallery");
hidden.show("slide",{},700);
hidden.attr("class","active");
}
else
{
if ($("#gallery").attr("class") == "active")
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{},700);
active.attr("class","vanished");
var hidden = $("#gallery");
hidden.show("slide",{},700);
hidden.attr("class","active");
}
}
})
$("#contacts-link").click(function(){
if ($(".active").length == 0)
{
var hidden = $("#contacts");
hidden.show("slide",{},700);
hidden.attr("class","active");
}
else
{
if ($("#contacts").attr("class") == "active")
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{},700);
active.attr("class","vanished");
var hidden = $("#contacts");
hidden.show("slide",{},700);
hidden.attr("class","active");
}
}
})
});
Try $(window).load() not $(document).load()
$(window).load(function () {
// run code
});
Try:
$(window).load
instead of
$(document).load
I think that $.load is method that actualy performs an AJAX request on given url (first parameter). If you want to do something on the document.load event you have to use $(document).ready()