offset().top not working in Safari - javascript

Having problem offset().top not working in Safari. Works fine on all other browsers but seems to break in Safari. Any suggestions?
$(window).scroll(function(){
collapseNav();
});
function collapseNav() {
if ($(".navbar").offset().top > 50 ) {
// code here
} else {
// code here
}
}

You can fix this issue like this
// as of 1.4.2 the mobile safari reports wrong values on offset()
// http://dev.jquery.com/ticket/6446
// remove once it's fixed
if (/webkit.*mobile/i.test(navigator.userAgent)) {
(function($) {
$.fn.offsetOld = $.fn.offset;
$.fn.offset = function() {
var result = this.offsetOld();
result.top -= window.scrollY;
result.left -= window.scrollX;
return result;
};
})(jQuery);
}

Found a work around using $(window).scrollTop(). So it looks like this:
$(window).scroll(function(){
collapseNav();
});
function collapseNav() {
if ($(window).scrollTop() > 50 ) {
// code here
} else {
// code here
}
}

Related

Scroll function works fast in mac and touchpad

I have a slider and I made a code that goes next and prev with mouse scroll. But it doesn't work well with mac and touchpad. how can I fix it? Can I put some delay or something I tried to use some setTimeout but it didn't work well or I didn't do it right.
$('#body').on('mousewheel', function (event) {
if (typeof event.originalEvent.wheelDeltaY === 'undefined') {
console.log("could not find mouse deltas")
}
var deltaY = event.originalEvent.wheelDeltaY;
var scrolledUp = deltaY < 0;
var scrolledDown = deltaY > 0;
if (scrolledDown) {
if (swiper_color.activeIndex > 2) {
goTop();
activeIndexToTwo();
} else {
swiper_color.slidePrev();
swiper_image.slidePrev();
swiper_desc.slidePrev();
swiper_title.slidePrev();
swiper_jar.slidePrev();
}
}
if (scrolledUp) {
if (swiper_color.activeIndex < 2) {
swiper_color.slideNext();
swiper_image.slideNext();
swiper_desc.slideNext();
swiper_title.slideNext();
swiper_jar.slideNext();
} else {
checkscroll();
}
}
});
I'd recommend throttling the function. You could write a throttle function, or use one from a library like Lodash (Lodash throttle docs)
function yourFn (event) {
// ... all of your js here
// ...
}
$('#body').on('mousewheel', _.throttle(yourFn, 100));
The 100(ms) above means your function can only fire every 100ms, feel free to modify the time to your liking.

Unexpected behaviour jquery

I am trying to write a code which fires on element coming into view and also when the element goes out of view
var _2017 = $("#2017").offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() - _2017 > -200) {
jQuery('[id*="_2017"]').each(function(index) {
$(this).delay(200 * index).fadeIn(200);
});
} else {
jQuery('[id*="_2017"]').each(function(index) {
$(this).delay(200 * index).fadeOut(200);
});
}
});
The problem is that jQuery does not target all divs with the id. This code works fine
var _2017 = $("#2017").offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() - _2017 > -200) {
jQuery('[id*="_2017"]').each(function(index) {
$(this).delay(200 * index).fadeIn(200);
});
} else {
}
});
But when I include the code when the element goes out of view. It does not target all divs.
If anyone can help and explain to me what I am doing wrong. Thanks

jQuery issue: Cannot read property of undefined

My code seems to be working fine on JSfiddle, but once im placing it to the a webpage that has jquery already loaded in the DOM, i get this console error, as seen on the screenshot.
The iframe selector that I do target, exists.
Any ideas?
$(document).ready(function() {
var stickyTop = $("iframe[id*='google_ads_iframe']").offset().top;
$(window).scroll(function() {
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop && $(".adSlot.headBanner").height() - $(".sticky").height() > windowTop) {
$("iframe[id*='google_ads_iframe']").css('position', 'fixed');
} else {
$("iframe[id*='google_ads_iframe']").css('position', 'relative');
}
});
});
$("iframe[id*='google_ads_iframe']")
will return array. You need to iterate through each of them.
Something like this
$("iframe[id*='google_ads_iframe']").each(function(i, val){
$(val).offset().top;
...
});

Combine jQuery scroll and load

I'm using the following code to detect if the page is scrolled beyond 150px.
The code works fine but I'd like to know if theres any way to combine the scroll and load functions as currently I'm repeating code.
Appreciate any help.
var nav = $(".header");
$(window).scroll(function () {
if ($(this).scrollTop() > 150) {
nav.addClass("header-bg");
} else {
nav.removeClass("header-bg");
}
});
$(window).load(function () {
if ($(this).scrollTop() > 150) {
nav.addClass("header-bg");
} else {
nav.removeClass("header-bg");
}
});
Nevermind I figured it out, for anyone else who gets stuck with:
var nav = $(".header");
$(window).on("load resize scroll",function(e){
if ($(this).scrollTop() > 150) {
nav.addClass("header-bg");
} else {
nav.removeClass("header-bg");
}
});

Check if Widget is Available Before Running Jquery Function

I am using the Jquery plugin isotope. Depending on the screen resolution I need to destroy the isotope widget to prevent it from running its function. I am using the following code:
$(window).smartresize(function(){
if($(window).width() < 700) {
container.isotope('destroy');
}else {
container.isotope({$options});
}
});
This works fine on the first resize, the isotope widget is destroyed. However, if I resize again (below 700px) the following exception is thrown:
cannot call methods on isotope prior to initialization; attempted to call method 'destroy'
How can I check to see if container.isotope exists before running container.isotope('destroy');?
Complete Working Code
$(window).load(function(){
var container = $('{$this->selector}')
if($(window).width() > 701){
container.isotope({$options});
}else{
container.isotope = false;
}
$(window).smartresize(function(){
if($(window).width() < 700) {
container.find('.item').removeAttr('style');
if(container.isotope) {
container.isotope('destroy')
container.isotope = false
}
} else{
container = $('{$this->selector}')
container.isotope({$options})
}
});
});
$(window).smartresize(function(){
if($(window).width() < 700) {
if(container.isotope) {
container.isotope('destroy')
container.isotope = false
}
} else if(container.isotope) {
container.isotope({$options})
}
})
How about:
if (container.isotrope)
//It exists. Do whatever
else
//Does not exist. Do whatever else
end

Categories