We Keep Coding

jQuery Won't Run On IE nor does normal JS

After creating a snippet of code using jQuery, making sure it works on chrome, I tested it out on IE and I realised that none of the jQuery code is running in it. I tried to fix this issue by changing all the jQuery to Pure JS. And still, I get no results. Is anyone here can help me understand why IE is so out of the loop and how I can fix this issue. It's for a client and they are using IE.
So the code is:
let Section5Run = true;
const myServices = $('.service-link');
function ServiceSlideIn(services, index = 0) {
if (services.length -1 < index) { return; }
$(services[index]).css('transform', 'translateX(0%)');
console.log("Section 5 occurance " + index);
setTimeout(ServiceSlideIn, 500 , services, ++index);
}
//On Load Page
$(document).ready(function() {
//When Window Is Scrolled
$(window).scroll( function(){
const MSOFFSET = $('.service-link')[0].clientHeight/2;
var bottom_of_object = $('#section-5-box').offset().top + MSOFFSET;
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object && Section5Run ){
Section5Run = false;
ServiceSlideIn(myServices);
}
});
});
Then it was converted to this:
function ServiceSlideIn(services, index = 0) {
if (services.length -1 < index) { return; }
services[index].style.transform = "translateX(0%)";
console.log("Section 5 occurance " + index);
setTimeout(ServiceSlideIn, 500 , services, ++index);
}
var cond = true;
document.addEventListener("scroll", function () {
var wind = window.scrollY;
var sec_5 = document.getElementById("section-5-box");
var items = document.getElementsByClassName("service-link");
var sec_off = offset(sec_5).top;
console.log("rest");
if (wind + (sec_5.clientHeight * 1.5) > sec_off && cond){
console.log("Clients's top: " + sec_off);
console.log("Client's Height is " + sec_5.clientHeight);
console.log("Window's height: " + (wind + sec_5.clientHeight/3));
console.log("items Length " + items.length);
ServiceSlideIn(items);
cond= false;
}
});
function offset(el) {
var rect = el.getBoundingClientRect(),
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
scrollTop = window.pageYOffset || document.documentElement.scrollTop;
return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}
Pretty basic slide animation done here.
Please do check the website for yourself cubeangle.com under Our Services the boxes will slide in right to left.
Thank you all.

if..else works inside IIFy but doesn't inside event listener

This code works exactly as intended:
(function(){
var $winWidth = $(window).width();
$( "#stop" ).prepend( "<p>Actual window width: " + $winWidth + "</p>" );
if ($winWidth < 700) {
$('.cycle-slideshow').attr('data-cycle-carousel-visible', '3');
} else if ($winWidth < 1000) {
$('.cycle-slideshow').attr('data-cycle-carousel-visible', '6');
} else {
$('.cycle-slideshow').attr('data-cycle-carousel-visible', '9');
}
}());
But this one happily shows width dynamically, as intended, but refuses support the same if ... else
$(window).on('resize',function() {
var $winWidth = $(window).width();
$('#stop p').remove();
$( "#stop" ).prepend( "<p>Actual window width: " + $winWidth + "</p>" );
if ($winWidth < 700) {
$('.cycle-slideshow').attr('data-cycle-carousel-visible', '3');
} else if ($winWidth < 1000) {
$('.cycle-slideshow').attr('data-cycle-carousel-visible', '6');
} else {
$('.cycle-slideshow').attr('data-cycle-carousel-visible', '9');
}
});
Please, can I get some explanations?
The pen is here: http://codepen.io/462960/pen/yyKrWP?editors=1010
I have even tried this one pattern without success:
$(window).on('resize',function() {
var $winWidth = $(window).width();
var atTribute;
$('#stop p').remove();
$( "#stop" ).prepend( "<p>Actual window width: " + $winWidth + "</p>" );
if ($winWidth < 700) {
atTribute = '3';
} else if ($winWidth < 1000) {
atTribute = '6';
} else {
atTribute = '9';
}
$('.cycle-slideshow').attr('data-cycle-carousel-visible', atTribute);
});
Could you reassure me that I have not misused var reassignment in the last one.

The if...else in your code is working fine. If you inspect the carousel and watch the data-cycle-carousel-visible attribute it is changing as intended on resize.
I assume the reason your IIFE is working as intended is because it is executing before the page is finished loading, which is likely when the cycle2 carousel plugin is run. At that point your attribute has been set to the correct number of slides.
When you change the attribute on resize, it is only changing the attribute in the DOM. The carousel plugin you are using doesn't watch for changes to that attribute, and therefore the visible number of slides does not change.
I did a little digging around and found that others were also looking for similar functionality with this plugin, so this link may help you move forward: https://github.com/malsup/cycle2/issues/68

Change sensitivity for jquery tinyscrollbar on mobile?

I'm using the jQuery tinyscrollbar plugin.
Is there anyway to change the sensitivity of the scrolling on mobile? It's super sensitive for long pages.
Have tried setting wheelSpeed to 160 but it doesn't seem to have any effect to the scrolling.

I rewrote the _drag function and it worked for me. But in my case, I'm not using a track thumb, only the scroll event.
function _drag(event) {
if (self.hasContentToSroll) {
var mousePositionNew = isHorizontal ? event.pageX : event.pageY,
thumbPositionDelta = hasTouchEvents ? (mousePosition - mousePositionNew) : (mousePositionNew - mousePosition),
thumbPositionNew = Math.min((self.trackSize - self.thumbSize), Math.max(0, self.thumbPosition + thumbPositionDelta));
if (thumbPositionDelta < 0) {
self.contentPosition -= self.options.wheelSpeed;
} else {
self.contentPosition += self.options.wheelSpeed;
}
self.contentPosition = Math.min((self.contentSize - self.viewportSize), Math.max(0, self.contentPosition));
self.thumbPosition = self.contentPosition / self.trackRatio;
$container.trigger("move");
$thumb.css(posiLabel, thumbPositionNew);
$overview.css(posiLabel, -self.contentPosition);
}
}

How to detect overlapping HTML elements

Is it possible to find easily elements in HTML page that are hidden by given element (div)?
I prefer jQuery if possible. Do you know such plugin or something?
I searched in jQuery API (http://api.jquery.com/), but didn't find something useful.

One possible solution is jQuery Collision extension: http://sourceforge.net/projects/jquerycollision/.
JQuery extension to return the collisions between two selectors.
Handles padding, margin, borders, and can determine either overlap or
portion outside. Returns JQuery "overlap" objects. Requires:
jquery1.8.3+, examples also require: jqueryui1.9.2+

It sounds like you're looking for something for debugging purposes, but please let me know if I've missed the question!
Firefox has a pretty neat 3D view (info here) that lets you see (more or less) exactly how the objects are being stacked. If you've never looked at it before, it's at least cool enough to check out.

You can use the following script:
http://jsfiddle.net/eyxt2tt1/2/
Basically what it does is:
calculating the dimensions of each DOM element, and comparing with user's mouse coordinate
if the match return a list of DOM elements
$(document).click(function (e) {
var hitElements = getHitElements(e);
var output = $('#output');
output.html('');
for (var i = 0; i < hitElements.length; ++i) {
output.html(output.html() + '<br />' + hitElements[i][0].tagName + ' ' + hitElements[i][0].id);
};
});
var getHitElements = function (e) {
var x = e.pageX;
var y = e.pageY;
var hitElements = [];
$(':visible').each(function () {
console.log($(this).attr("id"), $(this).outerWidth());
var offset = $(this).offset();
console.log('+++++++++++++++++++++');
console.log('pageX: ' + x);
console.log('pageY: ' + y);
console.log($(this).attr("id"), $(this).offset());
console.log('+++++++++++++++++++++');
if (offset.left < x && (offset.left + $(this).outerWidth() > x) && (offset.top < y && (offset.top + $(this).outerHeight() > y))) {
console.log('included: ', $(this).attr("id"));
console.log('from 0p far x: ', $(this).attr("id"), offset.left + $(this).outerWidth());
console.log('from 0p far y: ', $(this).attr("id"), offset.top + $(this).outerHeight());
hitElements.push($(this));
}
});
return hitElements;
}

How to check if a DIV is scrolled all the way to the bottom with jQuery

I have a div with overflow:scroll.
I want to know if it's currently scrolled all the way down. How, using JQuery?
This one doesn't work: How can I determine if a div is scrolled to the bottom?

Here is the correct solution (jsfiddle). A brief look at the code:
$(document).ready(function () {
$('div').on('scroll', chk_scroll);
});
function chk_scroll(e) {
var elem = $(e.currentTarget);
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
console.log("bottom");
}
}
See this for more info.

function isScrolledToBottom(el) {
var $el = $(el);
return el.scrollHeight - $el.scrollTop() - $el.outerHeight() < 1;
}
This is variation of #samccone's answer that incorporates #HenrikChristensen's comment regarding subpixel measurements.

Since it works without jQuery like that :
var isBottom = node.scrollTop + node.offsetHeight === node.scrollHeight;
I do :
var node = $('#mydiv')[0]; // gets the html element
if(node) {
var isBottom = node.scrollTop + node.offsetHeight === node.scrollHeight;
}

You can do that by
(scrollHeight - scrollTop()) == outerHeight()
Apply required jQuery syntax, of course...

Here is the code:
$("#div_Id").scroll(function (e) {
e.preventDefault();
var elem = $(this);
if (elem.scrollTop() > 0 &&
(elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())) {
alert("At the bottom");
}
});

Since 2012 Firefox contains the scrollTopMax property. If scrollTop === scrollTopMax you're at the bottom of the element.

Without jquery, for onScroll event
var scrollDiv = event.srcElement.body
window.innerHeight + scrollDiv.scrollTop == scrollDiv.scrollHeight

For me $el.outerHeight() gives the wrong value (due to the border width), whereas $el.innerHeight() gives the correct one, so I use
function isAtBottom($el){
return ($el[0].scrollHeight - $el.scrollTop()) == $el.innerHeight();
}