Is there any way to combine (collect) all scroll functions? - javascript

I have more than one scroll function like this:
FIRST
$(document).scroll(function(){
if(!$(".hotel-search-box").length){
return false;
}
var y = $(this).scrollTop();
if (y > $(".hotel-search-box").offset().top) {
$('.sticky-checkin').show();
} else {
$('.sticky-checkin').hide();
}
});
SECOND
$(document).scroll(function() {
if (!$("#aniStickyNav").length) {
return false; //Check if the element exist
}
var y = $(this).scrollTop();
if (y > $(".after-scroll-sticky").offset().top+$(".hotel-search-box").height()) {
$('#aniStickyNav').show();
} else {
$('#aniStickyNav').hide();
}
});
THIRD
$(window).on('scroll', function () {
backToTop();
});
I tried this way:
$(window).scroll(function(){
function siziArayalim(){
var y = $(this).scrollTop();
if (y > 800) {
$('.sizi-arayalim').fadeIn();
} else {
$('.sizi-arayalim').fadeOut();
}
}
function aniStickyNav(){
if (!$("#aniStickyNav").length) {
return false; //Check if the element exist
}
var y = $(this).scrollTop();
if (y > $(".after-scroll-sticky").offset().top+$(".hotel-search-box").height()) {
$('#aniStickyNav').show();
} else {
$('#aniStickyNav').hide();
}
}
function stickyCheckin(){
if(!$(".hotel-search-box").length){
return false;
}
var y = $(this).scrollTop();
if (y > $(".hotel-search-box").offset().top) {
$('.sticky-checkin').show();
} else {
$('.sticky-checkin').hide();
}
}
siziArayalim();
aniStickyNav();
stickyCheckin();
});
but nothing works.
Because of more than one scroll function some js functions are not working as expected that is why I wonder that how to combine all window.scroll function in a just one function healthy?

There are some issues with your code, first one is that you declare your functions inside the scroll function. This is not OK for performance. The second one is $(this) you are using inside the functions. I don't know what "this" is. In that context you are using, this will be the window object but i don't think that's what you need. Need more info here.
function siziArayalim(){
var y = $(this).scrollTop();
if (y > 800) {
$('.sizi-arayalim').fadeIn();
} else {
$('.sizi-arayalim').fadeOut();
}
}
function aniStickyNav(){
if (!$("#aniStickyNav").length) {
return false; //Check if the element exist
}
var y = $(this).scrollTop();
if (y > $(".after-scroll-sticky").offset().top+$(".hotel-search-box").height()) {
$('#aniStickyNav').show();
} else {
$('#aniStickyNav').hide();
}
return true;
}
function stickyCheckin(){
if(!$(".hotel-search-box").length){
return false;
}
var y = $(this).scrollTop();
if (y > $(".hotel-search-box").offset().top) {
$('.sticky-checkin').show();
} else {
$('.sticky-checkin').hide();
}
return true;
}
$(window).scroll(function(){
siziArayalim();
// check if the functions return false, if not, continue
if(!aniStickyNav()){
return false;
}
if(!stickyCheckin()){
return false;
}
});

Related

How Can I Get The mousedown Condition In for loop?

I want to get the mousedown condition in for loop.
But I cannot get it even if I mousedown trigger element(ex:#mousedown_button).
How can I get mousedown condition after starting for loop?
$("#mousedown_button").mousedown(function() {
for_loop()
});
function for_loop() {
for (i = 50; i > 0; i--) {
// I cannot get the count_flag(always false even if I mousedown #mousedown_button)
count_flag = get_mousedown_condition();
if (count_flag == false) {
break;
}
console.log(i);
var start = new Date();
while ((new Date() - start) < 250);
}
}
function get_mousedown_condition() {
// get the count flag
$("#mousedown_button").mouseover(function() {
return false;
}).mouseleave(function() {
return false;
}).mousedown(function() {
return true
}).mouseup(function() {
return false;
});
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='mousedown_button'>Click</div>
the way you tried, you bind all the event-handlers like 50 times and their return value will never enter your desired scope, because i am not sure what you try - i just leave this as an answer how you could store your "count_flag" and retrieve it in your loop
var count_flag = false;
function for_loop() {
for (i = 50; i > 0; i--) {
if (count_flag == false) {
break;
}
console.log(i);
var start = new Date();
while ((new Date() - start) < 250);
}
}
function set_mousedown_condition {
$("#mousedown_button").mouseover(function() {
count_flag = false;
}).mouseleave(function() {
count_flag = false;
}).mousedown(function() {
count_flag = true;
for_loop(); // start the loop also here instead of override the binding
}).mouseup(function() {
count_flag = false;
});
}
// initialize everything once
set_mousedown_condition()

jquery window.scroll doesn't work properly

in this page I have 3 window.scroll functions but my events isn't working properly but if I remove another 2 window.scroll the very first window.scroll function works as expected.My jquery codes are in below
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$('.sizi-arayalim').fadeIn();
} else {
$('.sizi-arayalim').fadeOut();
}
});
$(document).scroll(function() {
if (!$("#aniStickyNav").length) {
return false; //Check if the element exist
}
var y = $(this).scrollTop();
if (y > $(".after-scroll-sticky").offset().top+$(".hotel-search-box").height()) {
$('#aniStickyNav').show();
} else {
$('#aniStickyNav').hide();
}
});
$(document).scroll(function(){
if(!$(".hotel-search-box").length){
return false;
}
var y = $(this).scrollTop();
if (y > $(".hotel-search-box").offset().top) {
$('.sticky-checkin').show();
} else {
$('.sticky-checkin').hide();
}
});
you can use if (!$("#aniStickyNav").length) {
return false;
without putting into scroll function,
and try to combine others into just one.

jQuery plugin that bind mousedown prevent click in client code

I have plugin jQuery-splitter that bind to document.documentElement:
$(document.documentElement).bind('mousedown.splitter touchstart.splitter', function(e) {
if (splitter_id !== null) {
current_splitter = splitters[splitter_id];
$('<div class="splitterMask"></div>').css('cursor', current_splitter.children().eq(1).css('cursor')).insertAfter(current_splitter);
current_splitter.settings.onDragStart(e);
}
}).bind('mouseup.splitter touchend.splitter touchleave.splitter touchcancel.splitter', function(e) {
if (current_splitter) {
$('.splitterMask').remove();
current_splitter.settings.onDragEnd(e);
current_splitter = null;
}
}).bind('mousemove.splitter touchmove.splitter', function(e) {
if (current_splitter !== null) {
var limit = current_splitter.limit;
var offset = current_splitter.offset();
if (current_splitter.orientation == 'vertical') {
var pageX = e.pageX;
if(e.originalEvent && e.originalEvent.changedTouches){
pageX = e.originalEvent.changedTouches[0].pageX;
}
var x = pageX - offset.left;
if (x <= current_splitter.limit) {
x = current_splitter.limit + 1;
} else if (x >= current_splitter.width() - limit) {
x = current_splitter.width() - limit - 1;
}
if (x > current_splitter.limit &&
x < current_splitter.width()-limit) {
current_splitter.position(x, true);
current_splitter.find('.splitter_panel').
trigger('splitter.resize');
//e.preventDefault();
}
} else if (current_splitter.orientation == 'horizontal') {
var pageY = e.pageY;
if(e.originalEvent && e.originalEvent.changedTouches){
pageY = e.originalEvent.changedTouches[0].pageY;
}
var y = pageY-offset.top;
if (y <= current_splitter.limit) {
y = current_splitter.limit + 1;
} else if (y >= current_splitter.height() - limit) {
y = current_splitter.height() - limit - 1;
}
if (y > current_splitter.limit &&
y < current_splitter.height()-limit) {
current_splitter.position(y, true);
current_splitter.find('.splitter_panel').
trigger('splitter.resize');
//e.preventDefault();
}
}
current_splitter.settings.onDrag(e);
}
});
And in user code when I use this code the click don't work when I click on splitter (div between panels) it work when I click on the panel.
var counter = 0;
$(document.documentElement).on('click', function(e) {
console.log('x');
var $target = $(e.target);
if ($target.is('.vsplitter, .hsplitter')) {
if (++counter == 2) {
console.log('double click');
$target.parents('.splitter_panel').eq(0).data('splitter').position(20);
counter = 0;
}
} else {
counter = 0;
}
});
When I comment out the $(document.documentElement).bind('mousedown.splitter touchstart.splitter' code I can double click on the splitter. Anybody have a clue why is this happening?
It was caused by .splitterMask div.

Complex jquery scroll

I need to trigger a function specifically after an user scroll almost at the bottom of the page then up until certain point. How do I do it properly?
advertisement.refreshAd = function() {
$(window).scroll(function(event) {
if('almost at the end then scroll up to certain point')
{console.log('trigger refresh!');}
});
}
What you are looking for is the jQuery function scrollTop(). The code would look something like this:
var atEnd = false;
advertisement.refreshAd = function() {
$(window).scroll(function(event) {
if($(document).scrollTop() > $(document).height()-500) { //point1
atEnd = true;
} if (($(document).scrollTop() < point2) && atEnd){
console.log('trigger refresh!');
}
});
}
Try below code
<script>
var touchedBottom = 0;
jQuery(window).scroll(function(event) {
if(jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height()) {
touchedBottom = 1;
console.log("touched Bottom");
}
if(touchedBottom){
if(jQuery(window).scrollTop() < jQuery("#point_2").offset().top){
touchedBottom = 0;
console.log("touched point 1");
}
}
});
</script>
advertisements.refreshAd = function() {
var furthestPoint = false;
var point2 = 1700 //will be dynamic;
var lastScrollTop = 0;
var scrolledToPosition = false;
$(window).scroll(function() {
var st = $(this).scrollTop();
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
furthestPoint = true;
}
if (st < lastScrollTop && st < point2 && furthestPoint){
if (!scrolledToPosition) {
console.log('TRIGGER! - once only!');
scrolledToPosition = true;
}
}
lastScrollTop = st;
});
};
advertisements.refreshAd();

Catch 'mousewheel' event on a body with hidden overflow

how is it possible catch the "mousewheel" event on a body with an hidden overflow?
I have already tried this but it doesn't work on my case.
You can use jQuery mousewheel plugin.
EDIT: Here is the code from my plugin:
var self = this;
var scroll_object;
if (!navigator.userAgent.toLowerCase().match(/(webkit)[ \/]([\w.]+)/) &&
self[0].tagName.toLowerCase() == 'body') {
scroll_object = $('html');
} else {
scroll_object = self;
}
...
self = $.extend(self, {
scroll: function(amount) {
var pos;
amount = Math.round(amount);
if (scroll_object.prop) {
if (amount > scroll_object.prop('scrollTop') && amount > 0) {
scroll_object.prop('scrollTop', 0);
}
pos = scroll_object.prop('scrollTop');
scroll_object.scrollTop(pos + amount);
return self;
} else {
if (amount > scroll_object.attr('scrollTop') && amount > 0) {
scroll_object.attr('scrollTop', 0);
}
pos = scroll_object.attr('scrollTop');
scroll_object.scrollTop(pos + amount);
return self;
}
},
...
self.mousewheel(function(event, delta) {
if (delta > 0) {
self.scroll(-40);
} else {
self.scroll(40);
}
return false;
}, true);

Categories