Jquery Blur event on div scrolbar - javascript

I have a div with scroll bar.
Using Firefox when I click on scroll bar to drag it down to see the div list the blur event is fired and hides my div which I have set to hide when blur is fired.
How can I prevent the blur to fire when the scroll bar is used:
$("#mydiv").blur(function () {
$('#mydiv').fadeOut();
console.log("fadeout blur");
});
I display this div using:
$('#mydiv').fadeIn();
I want the div to hide when its not active but not hide when I try to click on the scroll bar.

May be this is what you are looking for
$(document).ready(function(){
$('#mydiv').fadeIn();
$("body").bind('click', function(ev) {
var myID = ev.target.id;
if (myID !== 'mydiv') {
$('#mydiv').fadeOut();
}
});
});
This will bind the click event with the body and also check the id of the element which triggers the click event. If it doesn't match the DIV, the div will be closed else the div will be always open.

You can do this one:
$(window).scroll(function() {
$('#mydiv').css('display','block');
});

var scrolling = false, scrollingTimeout, blurTimeout;
$(window).scroll(function () {
if (scrollingTimeout) {
clearTimeout(scrollingTimeout);
}
scrolling = true;
scrollingTimeout = setTimeout(function(){
scrollingTimeout = null;
scrolling = false;
}, 300);
});
$("#mydiv").blur(function () {
var that = $(this);
if (!scrolling) {
that.fadeOut();
} else {
if (blurTimeout) {
clearTimeout(blurTimeout);
}
blurTimeout = setTimeout(function () {
blurTimeout = null;
that.focus();
}, 600);
}
});
see jQuery scroll() detect when user stops scrolling and Can I declare logic on jQuery for the start and end of a scrolling event?

Seems your scroll bar is not formed within the div & clicking on it causes call to blur. Please check the css/style used for showing scroll for div is doing what you are expecting (forming scroll bar inside div), if this is the case then use a parent div over both(div & scroll bar) & use focusOut/blur event on parent div containing both.

Related

Hide div when User is scrolling on mobile / display div when the scroll stops

I didn't find the exact answer to my problem that I will explain here :
I want to hide a fixed element when the user is scrolling. When the scroll action is finished, the div is displayed again. This does not take into account a trigger on the height (with a scrollTop for example) but simply on the scroll action itself.
This behaviour is for mobile use.
I made a quick code snippet for trying something :
thanks a lot
window.addEventListener('scroll', function() {
document.getElementById('paragraph').classList.toggle('test');
});
p {
position:fixed;
background:wheat;
}
div {
height:2000px;
background-image: linear-gradient(red, yellow);
}
<div>
<p id="paragraph">Has to be hidden on scroll</p>
</div>
When scroll function is triggered we will hide the div and then we have to check whether the scrolling is stopped for this we can use setTimeout function
window.addEventListener("scroll", function () {
$("#paragraph").fadeOut(); //hide div
document.getElementById("paragraph").classList.toggle("test");
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
$("#paragraph").fadeIn(); //unhide div after few milliseconds
}, 550));
});
codepen
Here is a solution i have used in the past:
https://codepen.io/webdevjones/pen/GRybONR
//initialize scrollTimer
let scrollTimer = -1;
//add event listner
window.addEventListener("scroll", () => {
//get the element(s) to hide while scrolling
const elem = document.getElementById('paragraph')
//hide the element(s), you could also just use opacity
//or visibility depending on your use case
elem.style.display = 'none'
//while we are scrolling, restart the timer
if (scrollTimer != -1){
clearTimeout(scrollTimer)
}
//if the timer isnt cleared, we run the function to
//display the element(s) again
scrollTimer = window.setTimeout(() => {
elem.style.display = 'block'
}, 1);
//running the function 1ms after scroll stop,
//you could increase this number if neccesary
})

Iphone 5 jquery modal dialog

I have a prob that i think is common on iPhone devices. I have a jquery modal dialog popup and when i scroll on this modal and touch on a select element after touching the done button is scrolls me to the top. By default my modal position is fixed. I found an article that says if you change it to position absolute it will be fixed but actually it does not. Please find below my code and give some help guys. Thanks
j('.modal input[type=text], .modal select').each(function () {
if ('ontouchstart' in document.documentElement) {
var osVar = new UAParser().getOS();
var verticalPos = "";
if (osVar == "iOS") {
j(this).on('focus', function (e) {
verticalPos = j(this).offset().top;
j('.modal').css("position", "absolute");
});
j(this).on('blur', function (e) {
j('.modal').css("position", "fixed");
j(this).scrollTop(verticalPos);
});
}
}
});

jQuery Scrolling Length

I am working with a script to scroll an element on click. It's working properly, however it either scrolls all the way up, or all the way down. I'm new to jquery, and I'm wondering how to make it scroll a little at at time. For example, clicking to scroll down once will take you down a certain length, clicking again scrolls that length again. Also, sometimes it jitters and bugs out when scrolling back up. Any insight on how to fix this is appreciated as well!
Thanks.
Code below:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
$(function() {
var ele = $('#scroll');
var speed = 25, scroll = 5, scrolling;
$('#scroll-up').click(function() {
// Scroll the element up
scrolling = window.setInterval(function() {
ele.scrollTop( ele.scrollTop() - scroll );
}, speed);
});
$('#scroll-down').click(function() {
// Scroll the element down
scrolling = window.setInterval(function() {
ele.scrollTop( ele.scrollTop() + scroll );
}, speed);
});
$('#scroll-up, #scroll-down').bind({
click: function(e) {
// Prevent the default click action
e.preventDefault();
},
mouseleave: function() {
if (scrolling) {
window.clearInterval(scrolling);
scrolling = false;
}
}
});
});
</script>
You're saying you want to scroll little at a time but your code is saying scroll UNTIL mouse leaves. If you want to scroll little at a time why would you write a mouseleave which clearly stating if it's been scrolling stop now!
If you want to scroll up/down a bit on click, you should get rid of setInterval and mouseleave.
$(function() {
var ele = $('#scroll');
var speed = 25, scroll = 5;
$('#scroll-up').click(function() {
// Scroll the element up
ele.scrollTop( ele.scrollTop() - scroll );
});
$('#scroll-down').click(function() {
ele.scrollTop( ele.scrollTop() + scroll );
});
$('#scroll-up, #scroll-down').bind({
click: function(e) {
// Prevent the default click action
e.preventDefault();
}
});
});
jsfiddle

Javascript onResize trigger screws animation

I'm having a problem with my dropdown after in the midst of calling onResize. On a fresh page load the drop-down nav acts correctly but if you resize the browser and click the drop-down for the sub nav, it moves fast and doesn't stay open.
Here's a Live Demo.
Here's just the JS:
var res;
onResize = function() {
var responsive_viewport = $(window).width();
var mobile_menu = $('nav div span');
var mobile_list = $('nav div #main-nav');
if (res){ clearTimeout(res)};
res = setTimeout(function(){
console.log("resize triggered");
if (responsive_viewport <= 1024) {
mobile_menu.add(mobile_list).click(function(event) {
mobile_list.slideToggle('fast', 'swing', function() {
mobile_list.toggleClass('active');
});
event.stopPropagation();
});
$(document).click(function() {
if (mobile_list.hasClass('active')) {
mobile_list.slideToggle('fast', 'swing', function() {
mobile_list.removeClass('active');
});
}
});
}
if (responsive_viewport <= 768) {
console.log('on mobile');
nextvid.addClass('mobile');
} else {
nextvid.removeClass('mobile');
}
},200);
}
$(document).ready(onResize);
$(window).bind('resize', onResize);
Thanks!
What's happening is every time you resize the window (and I guess counting pageload) you bind to the event of clicking on the item. So when you resize the window once, the event fires twice and the dropdown opens then closes. If you resize the window again, the drop down now opens, closes, then opens again. So long story short you should bind only once! If you then want to change the binding (like if they switch to mobile view) you should then unbind then rebind a different way.
Best of luck!

enabling a button when a button is clicked in jquery

I am working on jQuery and I am rendering a graph. In that I have scrollable arrows on both right and left side of the graph. My requested functionality is:
Whenever the data is more and whenever we click the right arrow automatically the left scrollable arrow must be visible.
If there is not more data, the right button must be invisible.
If there is not enough data for scrolling, the left button must be invisible.
To sum up: buttons should only be available, if they can be used.
here is my code so far:
$(function() {
var $box2 = $('.column'), totalWidth = 900, cursor = 0;
$("#rightarrrowbutton").click(function() {
if (cursor != totalWidth) {
$box2.animate({
marginLeft : "-=15"
}, "fast");
cursor += 100;
}
});
if ($("#rightarrowbutton").click(){
$('#leftarrowbutton').click(function() {
if (cursor != 0) {
$box2.animate({
marginLeft : "+=15"
}, "fast");
cursor -= 100;
}
});
});
}
try like
$("#rightarrrowbutton").click(function() {
$("#leftarrowbutton").show();
});
$("#leftarrowbutton").click(function() {
$("#rightarrrowbutton").show();
});
Rather than trying to attach and remove click handlers, just add them when you page loads and .hide() or .show() your buttons as appropriate.
$('#rightarrowbutton').click() {
// do your stuff
if (/*there's no more stuff to the right*/) {
$('#rightarrowbutton').hide();
}
$('#leftarrowbutton').show();
}
and similar for the left button.
I know your description talks about visibility, but the title of your question mentions enabling. To disable, you can put the attribute "disabled" in the <button> element. If there, it will be disabled, if missing it will be enabled. So you could remove or add the property during the .click() callback.
For example:
$("#leftarrowbutton").click(function ()
{
// if meets ending criteria
if (true)
{
// enable other button
$("#rightarrowbutton").removeAttr("disabled");
// disable current button
$("#leftarrowbutton").attr("disabled", true);
}
});

Categories