We Keep Coding

Strange flickering after manipulating html with JS

I am stuck with a problem and I cannot figure out what the cause is, I have created a small js script that modifies a table element, but every time it does I see flickering of the elements, I checked the HTML elements and there is no white space or whatsoever.
Short video: https://i.imgur.com/86RODJL.mp4
Is it possible an css property that causes this behavior ?
Tried to troubleshoot by inspecting the html elements for white space or similar.
JS function:
function correctOrderQtyMinus(element) {
var elementTR = element.parentNode.parentNode.parentNode;
var totalExBTW = document.getElementById('totalExBTW');
var totalBtw = document.getElementById('totalBtw');
var btwAmount = document.getElementById('btwAmount');
if(document.getElementById('checkoutForm')) {
if(element.parentNode.querySelector('#productQty').value > 1) {
var newAmount =+ parseFloat(elementTR.querySelector('#productPriceTotalBtw').innerText) - parseFloat(elementTR.querySelector('#productPriceWithBtw').innerText);
elementTR.querySelector('#productPriceTotalBtw').innerText =+ newAmount.toFixed(2);
totalExBTW.innerText =+ (parseFloat(totalExBTW.innerText)- parseFloat(elementTR.querySelector('#productPriceExBtw').innerText)).toFixed(2);
totalBtw.innerText =+ (parseFloat(totalBtw.innerText) - parseFloat(elementTR.querySelector('#productPriceWithBtw').innerText)).toFixed(2);
btwAmount.innerText = parseFloat(totalBtw.innerText - totalExBTW.innerText).toFixed(2);
totalBtw.innerText = parseFloat(totalBtw.innerText).toFixed(2);
totalExBTW.innerText = parseFloat(totalExBTW.innerText).toFixed(2);
elementTR.querySelector('#productPriceTotalBtw').innerText = parseFloat(elementTR.querySelector('#productPriceTotalBtw').innerText).toFixed(2);
} else {
console.log('Cannot go less than 1');
}
}
event.preventDefault();
}

How to make an array.length counter update on user scroll using ReactJS

I'm trying to add a simple counter in the bottom of my app like this one:
And it is very simple atm, 80 is my array.length that is being populated through my axios request.
<div>{people.length.toLocaleString()}</div>
And as I scroll down the page, using react-infinite-scroll, the number goes up and up and this is just fine. What I'm trying to do is subtract the number as the user goes back up the page.
Is this something harder than I'm thinking? If so, don't give me the full answer, just give me the path to follow. Thanks.
This is what I'm trying to accomplish: https://mkorostoff.github.io/hundred-thousand-faces/

you can do by using scroll event with window.innerHeight and the element bottom height to check whether its available inside the display window.
You can try like this using onscroll event which is available in library itself.
let counter = 0;
[listofElement].find(ele => {
var conditionHeight = window.innerHeight;
var cordinat = ele.getBoundingClientRect().top;
counter++;
return conditionHeight < cordinat;
});
You can check here with sample working part.

Looking at the source of the page you've linked, the code uses this function to get the size of the page:
function getScrollPercent() {
var face_width = document.getElementById('first').clientWidth;
var face_height = document.getElementById('first').clientHeight;
var body = document.documentElement || document.body;
var faces_per_row = Math.floor(main.clientWidth / face_width);
var total_height = total / faces_per_row * face_height;
var scroll_percent = (body.scrollTop - main.offsetTop + body.clientHeight) / total_height;
var count = Math.floor(scroll_percent * total);
var chunked_count = count - (count % faces_per_row);
if (chunked_count > 0) {
counter.classList = "fixed";
}
else {
counter.classList = "";
}
return (chunked_count > 0) ? chunked_count : 0;
}
The essential bit is var scroll_percent = (body.scrollTop - main.offsetTop + body.clientHeight) / total_height;. Basically, if you can calculate your total height (assuming that isn't infinite), then you can use body.clientHeight, +/- offsets, divided by totalHeight to figure out how far down the page you are. Call this from an event listener on scroll, and you should be good to go.
Incidentally, if this is the infinite scroll library you're talking about using, it's no longer maintained in favor of react-infinite-scroller.

using react-infinite-scroll, you can't back axios request results or remove generated doms.
The solution is calculating width and height of every doms and calculate offset.
Check how many doms are above the scrollReact and so so.

When Using Critical CSS, Jquery function does is not running on load

I'm trying to optimise my website (http://www.mazion.co.uk).
As such, I tried to create critical CSS for the site using penthouse. (See Critical CSS used here - this was generated by the main developer of penthouse for me).
However, when using critical CSS, one of the subpages on my website does not load properly. BUT, when I fully inline the CSS (or don't do anything to optimise CSS), this sub-page loads correctly.
On this sub-page - http://www.mazion.co.uk/courses, there are a number of boxes that are resized using a JS function (see below) that is run on.ready and on.resize (i.e. when resizing the screen) which ensures that all boxes are of the same size.
When using critical CSS, the resizing function works on.resize but not on.ready. On the other hand, with inline CSS, the resizing function works as expected on.resize and on on.ready...
Thus, I was wondering if someone could help me in identifying the problem. I have tried to inline the styles for the boxes directly into the HTML, but I was unsuccessful...
You can see this problem by going to http://www.mazion.co.uk/courses/ and having a look at the boxes. If you then resize your browser, all the boxes will resize themselves so that they are all the same height... This resizing that make all the boxes the same height should actually happen automatically when the page loads....
Js Function (Not Extremely important to question, but helps in setting the scene)
jQuery(document).ready(function($){
$(window).resize(function() {
resizeCourseBoxes()
resizeTopBespokeCoursesBoxes()
resizeMidBespokeCoursesBoxes()
}).resize(); // Trigger resize handlers.
});
// Ensure that all the courses boxes are the same height (this ensures that the rows are of the same size...)
function resizeCourseBoxes() {
jQuery(function($) {
courseHeader = $('.course_header')
maxTextHeight = Math.max.apply(
Math, courseHeader.map(function() {
return $(this).height()
}).get())
for (var i = 0; i < courseHeader.length; i++) {
currentHeight = courseHeader[i].offsetHeight
new_padding = Number(maxTextHeight) - currentHeight + 10
courseHeader[i].style.marginBottom = new_padding + 'px'
};
})
}
// Ensure that all mid section (prices section) of the bespoke section is the same
function resizeTopBespokeCoursesBoxes() {
jQuery(function($) {
CoursePriceSection = $('.green_bx_top')
maxTextHeight = Math.max.apply(
Math, CoursePriceSection.map(function() {
return $(this).height()
}).get())
for (var i = 0; i < CoursePriceSection.length; i++) {
currentHeight = CoursePriceSection[i].offsetHeight
new_padding = Number(maxTextHeight) - currentHeight + 10
CoursePriceSection[i].style.marginBottom = new_padding + 'px'
};
})
}
// Ensure that all mid section (prices section) of the bespoke section is the same
function resizeMidBespokeCoursesBoxes() {
jQuery(function($) {
CoursePriceSection = $('.green_bx_mid')
maxTextHeight = Math.max.apply(
Math, CoursePriceSection.map(function() {
return $(this).height()
}).get())
for (var i = 0; i < CoursePriceSection.length; i++) {
currentHeight = CoursePriceSection[i].offsetHeight
new_padding = Number(maxTextHeight) - currentHeight
CoursePriceSection[i].style.marginBottom = new_padding + 'px'
};
})
}

The answer to my problem was simple:
Critical CSS is specific for each HTML page. Thus critical CSS for each individual page should be calculated separately...
(I was using the same critical CSS for all my subpages...).

Javascript error: Object Required in ie6 & ie7

I have a javascript function (epoch calendar) which displays a calendar when focus is set on certain text boxes. this works fine in ie8, ff (all versions as far as I can test), opera etc but doesn't work in ie7 or previous.
If i have it set up in a blank html test page it will work so I'm fairly sure it's a conflict with my css (provided to me by a designer).
I've traced the error to these lines of code -
Epoch.prototype.getTop = function (element) //PRIVATE: returns the absolute Top value of element, in pixels
{
var oNode = element;
var iTop = 0;
while(oNode.tagName != 'BODY') {
iTop += oNode.offsetTop;
oNode = oNode.offsetParent;
}
return iTop;
};
Epoch.prototype.getLeft = function (element) //PRIVATE: returns the absolute Left value of element, in pixels
{
var oNode = element;
var iLeft = 0;
while(oNode.tagName != 'BODY') {
iLeft += oNode.offsetLeft;
oNode = oNode.offsetParent;
}
return iLeft;
};
More specifically, if i remove the actual while loops then the calendar will display OK, just that its positioning on the page is wrong?
EDIT
Code below which sets 'element'
<script type="text/javascript">
window.onload = function() {
var bas_cal, dp_cal, ms_cal;
dp_cal = new Epoch('epoch_popup', 'popup', document.getElementById('<%=txtDateOfDiag.ClientID%>'));
dp_cal = new Epoch('epoch_popup', 'popup', document.getElementById('<%=txtDOB.ClientID%>'));
};
</script>
Note: I am using asp.net Master pages which is why there is a need for the .ClientID
EDIT
A further update - I have recreated this without applying css (but including the .js file provided by the designer) the code still works fine which, there must be some sort of conflict between the CSS and my JavaScript?

That would lead me to believe that the tagName does not match, possibly because you have it in upper case. You might try while(!oNode.tagName.match(/body/i)) {

what happens if you add a line of debug code like this:
var oNode = element;
var iLeft = 0;
alert(oNode);
This might give different results in different browsers; I think it may be NULL for IE.
You may want to have a look at the code that provides the value of the 'element' parameter to see if there's a browser-dependant issue there.

How to improve image cross-fade performance?

I want to be able to do a cross fade transition on large images whose width is set to 100% of the screen. I have a working example of what I want to accomplish. However, when I test it out on various browsers and various computers I don't get a buttery-smooth transition everywhere.
See demo on jsFiddle: http://jsfiddle.net/vrD2C/
See on Amazon S3: http://imagefader.s3.amazonaws.com/index.htm
I want to know how to improve the performance. Here's the function that actually does the image swap:
function swapImage(oldImg, newImg) {
newImg.css({
"display": "block",
"z-index": 2,
"opacity": 0
})
.removeClass("shadow")
.animate({ "opacity": 1 }, 500, function () {
if (oldImg) {
oldImg.hide();
}
newImg.addClass("shadow").css("z-index", 1);
});
}
Is using jQuery animate() to change the opacity a bad way to go?

You might want to look into CSS3 Transitions, as the browser might be able to optimize that better than Javascript directly setting the attributes in a loop. This seems to be a pretty good start for it:
http://robertnyman.com/2010/04/27/using-css3-transitions-to-create-rich-effects/

I'm not sure if this will help optimize your performance as I am currently using IE9 on an amped up machine and even if I put the browser into IE7 or 8 document mode, the JavaScript doesn't falter with your current code. However, you might consider making the following optimizations to the code.
Unclutter the contents of the main photo stage by placing all your photos in a hidden container you could give an id of "queue" or something similar, making the DOM do the work of storing and ordering the images you are not currently displaying for you. This will also leave the browser only working with two visible images at any given time, giving it less to consider as far as stacking context, positioning, and so on.
Rewrite the code to use an event trigger and bind the fade-in handling to the event, calling the first image in the queue's event once the current transition is complete. I find this method is more well-behaved for cycling animation than some timeout-managed scripts. An example of how to do this follows:
// Bind a custom event to each image called "transition"
$("#queue img").bind("transition", function() {
$(this)
// Hide the image
.hide()
// Move it to the visible stage
.appendTo("#photos")
// Delay the upcoming animation by the desired value
.delay(2500)
// Slowly fade the image in
.fadeIn("slow", function() {
// Animation callback
$(this)
// Add a shadow class to this image
.addClass("shadow")
// Select the replaced image
.siblings("img")
// Remove its shadow class
.removeClass("shadow")
// Move it to the back of the image queue container
.appendTo("#queue");
// Trigger the transition event on the next image in the queue
$("#queue img:first").trigger("transition");
});
}).first().addClass("shadow").trigger("transition"); // Fire the initial event
Try this working demo in your problem browsers and let me know if the performance is still poor.

I had the same problem too. I just preloaded my images and the transitions became smooth again.

The point is that IE is not W3C compliant, but +1 with ctcherry as using css is the most efficient way for smooth transitions.
Then there are the javascript coded solutions, either using js straight (but need some efforts are needed to comply with W3C Vs browsers), or using libs like JQuery or Mootools.
Here is a good javascript coded example (See demo online) compliant to your needs :
var Fondu = function(classe_img){
this.classe_img = classe_img;
this.courant = 0;
this.coeff = 100;
this.collection = this.getImages();
this.collection[0].style.zIndex = 100;
this.total = this.collection.length - 1;
this.encours = false;
}
Fondu.prototype.getImages = function(){
var tmp = [];
if(document.getElementsByClassName){
tmp = document.getElementsByClassName(this.classe_img);
}
else{
var i=0;
while(document.getElementsByTagName('*')[i]){
if(document.getElementsByTagName('*')[i].className.indexOf(this.classe_img) > -1){
tmp.push(document.getElementsByTagName('*')[i]);
}
i++;
}
}
var j=tmp.length;
while(j--){
if(tmp[j].filters){
tmp[j].style.width = tmp[j].style.width || tmp[j].offsetWidth+'px';
tmp[j].style.filter = 'alpha(opacity=100)';
tmp[j].opaque = tmp[j].filters[0];
this.coeff = 1;
}
else{
tmp[j].opaque = tmp[j].style;
}
}
return tmp;
}
Fondu.prototype.change = function(sens){
if(this.encours){
return false;
}
var prevObj = this.collection[this.courant];
this.encours = true;
if(sens){
this.courant++;
if(this.courant>this.total){
this.courant = 0;
}
}
else{
this.courant--;
if(this.courant<0){
this.courant = this.total;
}
}
var nextObj = this.collection[this.courant];
nextObj.style.zIndex = 50;
var tmpOp = 100;
var that = this;
var timer = setInterval(function(){
if(tmpOp<0){
clearInterval(timer);
timer = null;
prevObj.opaque.opacity = 0;
nextObj.style.zIndex = 100;
prevObj.style.zIndex = 0;
prevObj.opaque.opacity = 100 / that.coeff;
that.encours = false;
}
else{
prevObj.opaque.opacity = tmpOp / that.coeff;
tmpOp -= 5;
}
}, 25);
}