Here's my code which I hosted in a public folder in dropbox
This simple animation freezes after a while when running on google chrome, I tested on 4 different browsers(Chrome, IE 9, Opera, Firefoc). The "page loading" animation runs smooth on all browsers except chrome, what might be causing this?(wont run on jsfiddle as well)
PS: It may take up to 10 - 15 secs until the animation freezes, I know this wouldn't be a problem in the application later, but I still wanna know why it does so because it doesnt on other browsers.
you call infiniteLoop with a few setTimeouts. Why don't us simply use recusion for this?
EDIT: This one works as you may want it to work. It uses jQuery's step callback to calculate the percentage. if it is > 70 %, it starts the next animation.
$(document).ready(function() {
var parent = $('.loadingBar').width(),
parentWidth = parent.toString(),
colors = ["red","blue","yellow","green"],
idx = 0;
var extend = function(color) {
var colorClass = '#' + color + 'Bar',
currentIndex = parseInt($(colorClass).css('z-index')),
afterIndex = currentIndex + 4;
var backColor = $(colorClass).css('background-color');
$(colorClass).css('z-index', afterIndex)
.animate({width:parentWidth},
{step:function(width,tween){
var percent = Math.round(width/parentWidth*100);
if((typeof $(this).data("next") === "undefined" || $(this).data("next") === null) && percent >= 70){
$(this).data("next",true);
if(idx > colors.length-2)
idx = 0;
else
idx++;
extend(colors[idx]);
}
},
duration:2000,
complete:function(){
$(this).data("next",null);
$(this).css('width', '0px');
$('.loadingBar').css('background-color', backColor);
}
});
}
extend(colors[0]);
});
Related
I have a simple loading bar made with css, you update the css and the bar fills, super simple.
I decided to update the bar with jQuery, works great but now I throw it into a practical environment. I have a bunch of files being downloaded and each time a file successfully downloads, it updates the position. The main problem is that it downloads the files so fast, and places the files correctly fast enough that it just doesn't update the loading bar unless I set a timeout interval of 300-400ms..it does log into console and I made an interval function that continously checks to see if a file is finished based on a global variable. No matter where I place the function to update the loading bar or how I update it, it seems the Dom will not react unless there's a big enough delay between files OR it will react at the very end (jumps to 100).
Is there any way to wait for a Dom to be updated by J's OR can you spot a problem in my code that causes this issue?
I also tried promises too but it didn't change how the browser reacts to the function.
This is all being done inside a Cordova environment but I tested it on chrome too and it works as long as the pc is powerful enough it seems.
The file Transfer function has an "on Success" too but that doesn't do anything as the Dom wont update in it until after all the downloads are done OR there's a delay
My solutions so far is to either intentionally lag the downloader, or lag it every 10 or 20 files to update the position
Edit: here's my loading bar Js
var colorInc = 100 / 3;
function setWater(myval)
{
var val = myval;
var waitForMe = $.Deferred();
if(val != ""
&& !isNaN(val)
&& val <= 100
&& val >= 0)
{
setTimeout(function(){waitForMe.resolve()}, 100);
var valOrig = val;
val = 100 - val;
if(valOrig == 0)
{
//$("#percent-box").val(0);
$(".progress .percent").text(0 + "%");
}
else $(".progress .percent").text(valOrig + "%");
$(".progress").parent().removeClass();
$(".progress .water").css("top", val + "%");
if(valOrig < colorInc * 1)
$(".progress").parent().addClass("red");
else if(valOrig < colorInc * 2)
$(".progress").parent().addClass("orange");
else
$(".progress").parent().addClass("green");
}
else
{
setTimeout(function(){waitForMe.resolve()}, 100);
$(".progress").parent().removeClass();
$(".progress").parent().addClass("green");
$(".progress .water").css("top", 100 - 67 + "%");
$(".progress .percent").text(67 + "%");
//$("#percent-box").val("");
}
return waitForMe.promise();
};
Dowload tracker:
var DLProgress = null;
function updateProgress() {
var oldNum = 0;
DLProgress = setInterval(function(){
if(!doneArts) {
doneArts = true;
downloadHelper("Articles",articleSize,33.33,0);
}else if(currPos >= totalSize - 1){
clearInterval(DLProgress);
goNews();
currPos = 0;
doneArticles = false;
doneJson = false;
doneArts = false;
} else if(currPos >= articleSize && !doneArticles) {
doneArticles = true;
downloadHelper("json",jsonSize,33.33,33.33);
} else if(currPos >= articleSize + jsonSize && !doneJson) {
doneJson = true;
downloadHelper("img",imgSize,33.33,66.66);
}
if(oldNum != currPos) {
oldNum = currPos;
setWater(Math.ceil(100 * currPos / totalSize));
}
},5);
}
Download Helper :
function downloadHelper(name,size,maxPerc,startingPoint) {
dataFiles[name].forEach(function(file){
var getItem = localStorage.getItem(name+"/"+file[0]) || null; //might not work
if(getItem === null || getItem !== file[1]) {
//download file.
if(file[0] !== null && file[1] !== null) {
//setWater(Math.ceil(100 * currPos / totalSize)).done(function(){downloader(name+"/"+file[0],file[1]);});
setTimeout(function(){downloader(name+"/"+file[0],file[1])},window.dltime);
window.dltime += 200;
}
}
});
};
File transfer used :
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file-transfer/
It Does update after each download helper has finished
Is there any way to wait for a Dom to be updated by J's OR can you spot a problem in my code that causes this issue?
The DOM is updated each time the download is completed - it could be a problem.
We should separate upload progress and animation. When file is downloaded you should just change some kind of Model and use requestAnimationFrame recursively to animate a progress bar.
requestAnimationFrame is called 60 times per second, but will generally match the display refresh rate, paused in most browsers when running in background tabs or hidden <iframe>s in order to improve performance and battery life.
I think you have the case with the variable currPos. Use debug tool to mark the lines and inspect value of currPos. Somehow your code is managed to jump it 0 to articleSize.
I have a piece of code, that's changing my div background on mousescroll and it's working fine in Chrome and Opera, but it doesn't in Firefox and IE/Edge.
I have two divs, the inner one has a background image that is changing on scroll down, the outer one is simply bigger so there is space to scroll.
In Firefox and IE/Edge, the scroll or doesn't work either skips an image, sometimes even doesn't purceed to scrolling the rest of the content on the website.
http://jsfiddle.net/s6qrfo9n/1/
Any ideas why?
Here it is (and I know it's poorly written, but I'm new to javascript and it does the job):
$(document).ready(function(){
var numberofscroll = 0;
var lastScrollTop = 0;
$("#home").scroll(function(){
var st = $(this).scrollTop();
(st > lastScrollTop) ? numberofscroll++ : numberofscroll--;
console.log(numberofscroll);
console.log(lastScrollTop);
console.log(st);
if (numberofscroll<2){
change_background2(numberofscroll);
}
else if (numberofscroll<3){
change_background3(numberofscroll);
}
else if (numberofscroll<4){
change_background4(numberofscroll);
}
lastScrollTop = st;
});
function change_background2(numberofscroll){
var i;
for (i = 2; i <= 2; i++) {
$("#home").css("background-image","url('images/movie_" + i + ".jpg')");
}
}
function change_background3(numberofscroll){
var i;
for (i = 3; i <= 3; i++) {
$("#home").css("background-image","url('images/movie_" + i + ".jpg')");
}
}
function change_background4(numberofscroll){
var i;
for (i = 4; i <= 4; i++) {
$("#home").css("background-image","url('images/movie_" + i + ".jpg')");
}
}
});
The problem lies in the smooth scrolling feature of firefox and ie (see this question). This causes the jQuery scroll event to fire multiple times every time you scroll, thus the 'missing' images--they are being put in, but then they're replaced so fast you can't see them.
Unfortunately, since you can't disable the smooth scrolling feature on people's browsers, there isn't really a perfect solution to this. The best solution is to debounce your scroll event handler. There are many ways to implement a debounce (google it for some ideas). A simple one would be just toggling a boolean after a timeout and checking it every time you run the function:
var dontHandle = false;
$("#home").scroll(function () {
if (dontHandle) return; // Debounce this function.
dontHandle = true;
window.setTimeout(function() {
dontHandle = false;
}, 400); // Debounce!--don't let this function run again for 400 milliseconds.
});
Here's your updated JSFiddle. You may need to play with the debounce time. Best of luck.
I'd say your code is working as intended but I have a couple thoughts about the scroll event.
The scroll event will only be fired if scrolling actually takes place. Nothing will happen if your div doesn't scroll. You could get around that by using another library, check out this stackoverflow answer for some suggested libraries. Also, keep in mind that the scroll event is extremely sensitive, so the "skipping" of images may simply be a result of scrolling too fast.
I cleaned up your code to make better use of the change_background function.
var numberofscroll = 0;
var lastScrollTop = 0;
$(document).ready(function(){
$("#home").scroll(function(e) {
var st = $(this).scrollTop();
console.log(numberofscroll, lastScrollTop, st);
(st > lastScrollTop) ? numberofscroll++ : numberofscroll--;
//make sure numberofscroll stays in range
if(numberofscroll <= 0) {
numberofscroll = 1;
} else if(numberofscroll > 4) {
numberofscroll = 4;
}
change_background(numberofscroll);
lastScrollTop = st;
});
function change_background(numberofscroll) {
$("#home").css("background-image","url('http://coverjunction.s3.amazonaws.com/manual/low/colorful" + numberofscroll + ".jpg')");
}
});
Your change_background functions have been rolled into one function and numberofscroll will stay within a certain range to ensure the image you want actually exists.
Hope that helps!
I have the following code which works in Firefox-20 and Opera but not in Chrome-26 or IE-10. The keyup functions adds Indian commas to the amounts.
$(document).ready(function() {
$("#readyArea").on('change', function() {
$("#underConstArea").val($(this).val()).trigger('change');
});
$('.comma').on('keyup', this, function commaFormatted(){
var delimiter = ","; // replace comma if desired
var amount = $(this).val().replace(/\,/g,'');
var a = amount.split('.',2);
var d = a[1];
var i = parseInt(a[0],10);
if(isNaN(i)) { return ''; }
var minus = '';
if(i < 0) { minus = '-'; }
i = Math.abs(i);
var n = new String(i);
var a = [];
var cnt=0;
while(n.length > 2)
{
if(cnt == 0)
{
var nn = n.substr(n.length-3);
n = n.substr(0,n.length-3);
cnt++;
}
else
{
var nn = n.substr(n.length-2);
n = n.substr(0,n.length-2);
}
a.unshift(nn);
}
if(n.length > 0)
{
a.unshift(n);
}
n = a.join(delimiter);
amount = n;
amount = minus + amount;
$(this).val(amount);
});
});
Here is the JSFiddle link. (As I said if I open this link in Firefox or Opera the js works but not in Chrome or IE). There are no js errors on the console either. Do I need to do something specific for Chrome and IE?
EDIT
Just to clarify, it is the onChange event that is not firing in Chrome and IE. The same is firing in Firefox and Opera.
I tested on Chrome, and the commas did fine, but I never saw the underConstArea update, while I did see it do so on Firefox after leaving the textbox.
I'm not sure what is happening there, but I have several ways of fixing it.
First, it seems that whether $("#readyArea").on('change') fires is browser dependent. I don't know why, but it seems that Chrome doesn't throw a change event when you're changing the code. Maybe it's trying to avoid an infinite loop of changes; I'm not really sure.
If you're happy with the underConstArea only updating when the number is done (as it behaves in firefox), you can do so on focusout instead of on change. I changed your top lines to
$("#readyArea").on('focusout', function() {
$("#underConstArea").val($(this).val());
});
and it worked fine for me in Chrome and Firefox. Here's an updated fiddle.
Alternatively, if you want it to update every time the user types, just update underConstArea within your commaFormatted function. Just add
$("#underConstArea").val(amount);
at the bottom of your function.
And the link to the second option I offered. Note that I removed any event catching on #readyArea.
I've put together a small test at http://jsfiddle.net/Hwqb3/3/ this morning. This is on the back of a larger project with pagination. I have tried this with native JS and jQuery. The test uses jQuery.
A quick search on SO says that Chrome handles things poorly if background-size is set, but this is not the case here. No trace of background-size in the source, and inspecting elements shows no background-size being set / inherited.
Ignore the initial page load while 5,000 elements are added to the list. It is only a few seconds, but it just so there are some elements to test with.
In Firefox 18.0.1, the moving between pages is almost instant and in IE9 there is maybe a 0.1s delay between mouse click and the paged results refreshing; However, in Chrome (24.0.1312.57 m) the delay is a noticeable 1-2 seconds.
I spent the majority of my night last night pouring over my code to see if I can find the cause before writing this test. This is bare bones and still has the issue.
I can only assume that Chrome is handling the element.style.display=''; poorly. Without that (even looping through the 5,000 elements to display='none') the thing is snappy.
Any ideas? Client wants pagination on a result set of around 4,000 - 7,500, but doesn't want page reloads and doesn't understand that they should apply filters to whittle that list down to <100, as no one is ever going to page through 200 - 375 pages looking for something specific.
Last resort is AJAX calls, which may be slightly quicker on Chrome. Untested yet though.
Thanks in advance.
Code from jsfiddle, excluding the jQuery CDN link
HTML:
First
Previous
Next
Last
<br>
<ul id='list'>
</ul>
JS:
window.onload=function() {
window.list=$('#list'), window.max=20, window.page=0, window.pages=0, window.elements;
var i=0;
while(i<5000) {
i++;
list.append("<li>"+i+"</li>");
}
jump('first');
};
function jump(operation) {
window.elements=list.find('li');
window.pages=Math.ceil(window.elements.length/window.max);
if(operation=='first') {
window.page=0;
}
else if(operation=='last') {
window.page=(window.pages-1);
}
else if(operation=='+1') {
window.page=(window.page+1);
if(window.page>=window.pages) {
window.page=(window.pages-1);
}
}
else if(operation=='-1') {
window.page=(window.page-1);
if(window.page<0) {
window.page=0;
}
}
var showing=0, total=0;
window.elements.each(function() {
var show=false, self=$(this);
if(showing<window.max) {
if(total>=(window.page*window.max) && total<((window.page*window.max)+window.max)) {
self[0].style.display='';
showing++;
show=true;
}
}
if(!show) {
self[0].style.display='none';
}
total++;
});
}
check this
window.onload = function() {
window.list = $('#list'),
window.max = 20,
window.page = 0,
window.pages = 0,
window.elements;
var i = 0;
var html = '';
while(i < 5000) {
i++
html += '<li>' + i + '</li>';
}
list.append(html);
window.elements = list.find('li');
window.pages = Math.ceil(window.elements.length/window.max);
jump('first');
};
function jump(operation) {
if (operation == 'first')
window.page = 0;
else if (operation == 'last')
window.page = window.pages - 1;
else if (operation == '+1')
(window.page + 1 >= window.pages) ? window.page = window.pages - 1 : window.page++ ;
else if (operation == '-1')
(window.page - 1 < 0) ? window.page = 0 : window.page--;
var index = page * window.max;
window.elements.hide().slice(index, index + window.max).show();
}
http://jsfiddle.net/Hwqb3/16/
I want to display several images of the same size at the same position, one at a time, with a 5s interval between each change. To do so I've used jQuery.Timer, that uses setInterval() to call some show_next_image() function every 5s.
It actually does work with IE, Opera, Safara, Firefox and.. partly with Google Chrome. It's not working with Google Chrome if I open a new window and directly type my website URL: it'll show the second image and stop. And with any other situation (reload, from another link, not right after opening a new window) it'll badly work: one can see the back image before the front image is shown.
Thus I'm wondering whether I've done something wrong with my JavaScript source. What I do is I use a front and a back image. When I want to show the next image, the back img source is set to the new image, and the front image is faded out while the back one is faded in through jQuery. You can check it out at http://www.laurent-carbon.com/ (in French). The two img are identified with bg1 and bg2.
var images = ["/img/IMG_0435bg.jpg", "/img/IMG_0400bg.jpg", "/img/maisonnette 2.jpg", "/img/IMG_0383bg.jpg", "/img/IMG_0409bg.jpg", "/img/IMG_0384bg.jpg"];
var idx = 1;
var waitTime = 5000; // ms
$(document).ready(function() {
$("#bg2").hide();
$.timer(waitTime, load_next);
$.preLoadImages(images);
});
function load_next(timer) {
var toshow = images[idx];
idx++;
idx %= images.length;
back_image().attr('src', toshow);
swap_images();
}
function front_image() {
return (idx % 2 == 0) ? $("#bg1") : $("#bg2");
}
function back_image() {
return (idx % 2 == 0) ? $("#bg2") : $("#bg1");
}
function swap_images() {
back_image().fadeOut('slow');
front_image().fadeIn('slow');
}
Thanks,
Ceylo
Ok I've worked out a solution .... without the use of plugins.
Demo
http://jsfiddle.net/morrison/PvPXM/9/show
source
http://jsfiddle.net/morrison/PvPXM/9/
This approach is a lot cleaner and removes the problem I had while viewing your page in chrome: the animation getting out of sync and flashing.
The only thing you have to do in the HTML is wrap the two images in a <div id="fadeBox" style="position:relative"></div>
$(function() {
var images = [
"http://www.laurent-carbon.com/img/IMG_0435bg.jpg",
"http://www.laurent-carbon.com/img/IMG_0400bg.jpg",
"http://www.laurent-carbon.com/img/maisonnette 2.jpg",
"http://www.laurent-carbon.com/img/IMG_0383bg.jpg",
"http://www.laurent-carbon.com/img/IMG_0409bg.jpg",
"http://www.laurent-carbon.com/img/IMG_0384bg.jpg"
];
var idx = 1;
var max = images.length;
var easing = "swing";
var waitTime = 5000; // ms
var fadeTime = 2000; // ms
var fadeShow = function(fadeTime, fadeDelay) {
var $topImage = $("#fadeBox img:last");
$topImage.fadeTo(fadeDelay, 1, function() {
$topImage.fadeTo(fadeTime, 0, easing, function() {
$topImage
.fadeTo(0, 1)
.insertBefore("#fadeBox img:first")
.attr("src", images[++idx == max ? idx = 0 : idx]);
fadeShow(fadeTime, fadeDelay);
});
});
};
fadeShow(fadeTime, waitTime);
});
Hope this helps
PS thanks to Levi for cleaning the code up a bit.
Answer: http://jsfiddle.net/morrison/RxyZY/
Notes:
You are trying to reinvent the wheel. You are creating a simple slideshow. There are numerous plugins to do exactly this and much more. I used jQuery cycle in my example, which is extremely customizable.
You should wrap your stuff up in a function, creating an expression. In my example, the (function($){}(jQuery)) is what does the trick. It scopes your variables to the function, rather than the global namespace.