We Keep Coding

How to trigger on blur in jQuery with exception of clicking a button?

I have an input field wrapped within a jQuery mobile 1.4.5 environment which will scroll up on focus to provide space on mobile for search suggestions.
Upon filling out the field, it will scroll back down.
$('#refn').on('blur',function(){
if ( (document.querySelector('.ui-input-clear-hidden') !== null) ) {
$("html, body").animate({ scrollTop: 0}, 200);
}
return false;
});
JQM will provide a clear link on the right, which will clear the text field. This is a problem, as clicking it will defocus and trigger the scroll down function. Resulting in a scroll down and up again effect.
I tried to exclude it by recognizing the class .ui-input-clear-hidden but this has no effect. I believe because it is a link that takes away focus from the field.
<a href="#" tabindex="-1" aria-hidden="true"
class="
ui-input-clear
ui-btn
ui-icon-delete
ui-btn-icon-notext
ui-corner-all"
title="Clear text">Clear text</a>
I want to trigger the function only if the clear button is not clicked. How can this be done?

If i understand, the issue is when you click on the clear text button, it execute your button that scroll down ?
I think you can try to get the focused element and if it's the clear button you do nothing
$('#refn').on('blur',function(){
var focused_element = document.querySelector(':focus') ; //Get the focused element.
if ( focused_element.hasClass('.ui-input-clear-hidden') ) {
//It's the clear button
return false;
}else{
//It's not your clear button
$("html, body").animate({ scrollTop: 0}, 200);
}
});
Edit :: try to store your clear_btn click in a var
//Function to force wait time
function timeout(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
var clear_btn_clicked = false;
//Event on click
$(document).on("click",function(){
//You clicked on the X btn
if( $(this).hasClass('ui-input-clear-hidden' ) ){
clear_btn_cliked = true;
}else{
clear_btn_clicked = false;
}
});
$('#refn').on('blur',function(){
await timeout(500); //Wait 0.5s to let JS do the clear_btn click event
if( clear_btn_clicked === false ){
$("html, body").animate({ scrollTop: 0}, 200); //You didn't click on the X
}else{
return false; //You clicked on the X
}
});
//You do same for your focus function
$('#refn').on('focus',function(){
await timeout(500); //Wait 0.5s to let JS do the clear_btn click event
if( clear_btn_clicked === false ){
//Scroll up
}else{
//Don't go up
}
});

Unwanted scroll after button click

I am not really sure what code to post here because I don't know what could cause this and the code for this page is quite long, there is still no live version.
Basically it's a form with a few panels, only 1 is visible, when you click next the user is moved to the next screen. What happens is that when you click next there is an unwanted scroll to the footer, any idea what could cause this? view gif below:
EDIT: This is the button code:
Next
and jQuery:
$('.btn-next').on('click', function(e){
if (!$("[name='amount_tobe_charged']").val()) {
alert('Please fill in amount');
} else if($("[name='amount_tobe_charged']").val() < 1) {
alert('Please enter amount');
} else {
var tab = $(this).closest('.tab-pane');
var nxt = $(tab).next();
var empty = $(tab).find('.required').filter(function(){
if($(this).attr('type') === 'email'){
return this.value.indexOf('#') < 0;
} else {
return $.trim(this.value) === '';
}
});
var error = $(empty[0]).attr('data-error') || 'Please fill in all fields';
if(nxt.attr('id') === 'finish-tab'){
submitForm(tab, nxt);
} else {
if(!empty.length) {
changeTab(tab, nxt);
} else {
alert(error);
}
}
}

You can see it happening in your gif. It's because you're hiding a column that comes before the form, therefore once the column does not exist. It will push you down. You can add a scroll to get around with issue with jQuery (or vanilla but I will only provide jQuery's smooth scroll). Either implement the below and remove the style="display: none;" that's causing it to shift.
$('html, body').animate({
scrollTop: $(".form-elem").offset().top
}, 2000);
You'll want to place this after the column is hidden in your JS code.

jQuery slide - dont close the previous accordion

Guys this is a jQuery accordion, where the previous accordion(tab) closes off when you open a new one. For example, when you open the first tab, and then you open the second tab, the first one closes off. Basically, when you open a tab, the other one closes off. How do i prevent the previous one from closing off? The tab should close only when the user clicks on it again.
Here's the jQuery -
jQuery(document).ready(function ($) {
var open = $('.openx'),
a = $('ul').find('a');
console.log(a.hasClass('active'));
open.click(function (e) {
e.preventDefault();
var $this = $(this),
speed = 500;
if ($this.hasClass('active') === true) {
$this.removeClass('active').next('.inneraccordionbox').slideUp(speed);
}
else if (a.hasClass('active') === false) {
$this.addClass('active').next('.inneraccordionbox').slideDown(speed);
} else {
a.removeClass('active').next('.inneraccordionbox').slideUp(speed);
$this.addClass('active').next('.inneraccordionbox').delay(speed).slideDown(speed);
}
});
});
The accordion is in ul li format, with a tag having the class openx

Simply commenting out the below line will work. as it is the one which closes all items.
a.removeClass('active').next('.inneraccordionbox').slideUp(speed);

Restore scroll position after mobile menu is closed

I'm having a mobile menu that opens and closes using jquery by adding a css class that has display:block while the menu div has display:none.
The jquery code has a part where it is supposed to close the menu when a click is registered outside the menu div. Everything works execept the: $("body").scrollTop(scrollpos) . This was supposed to scroll the user back where he left off after the scrollTop(0) took place and the menu has closed, but it does not scroll at all the scroll is stuck at the top. Any help will be appreciated. Thank you.
EDIT: Here is an example: https://jsfiddle.net/mufwwudj/
$(function () {
var menutoggle = $(".menu-toggle");
var sidenav = $(".side-nav");
menutoggle.click(function () {
var scrollpos = $('body').scrollTop();
if (!$("body").hasClass("m-nav-open")) {
$("body").scrollTop(0).addClass("m-nav-open");
}
$(document).mouseup(function (e){
if (!sidenav.is(e.target) && sidenav.has(e.target).length === 0 && !menutoggle.is(e.target) && menutoggle.has(e.target).length === 0){
if ($("body").hasClass("m-nav-open")) {
$("body").scrollTop(scrollpos).removeClass("m-nav-open");
}
}
});
});
});

One problem here is that you are assigning a new mouseup event every time the menutoggle.click function runs.
$(document).mouseup(function (e){
if (!sidenav.is(e.target) && sidenav.has(e.target).length === 0 && !menutoggle.is(e.target) && menutoggle.has(e.target).length === 0){
if ($("body").hasClass("m-nav-open")) {
$("body").scrollTop(scrollpos).removeClass("m-nav-open");
}
}
});
Only the first one passes the conditional, even though each one will fire and scrollpos will always equal whatever it was in the first mouseup event listener.
I don't know how you are testing it, or what the HTML looks like but if you are at the top of the page the first time you click it, scrollpos in the mouseup event will always be 0.
Try assigning the mouseup event once, and putting scrollpos outside both so it can be accessed in both.
$(function () {
var menutoggle = $(".menu-toggle");
var sidenav = $(".side-nav");
var scrollpos;
menutoggle.click(function () {
scrollpos = $('body').scrollTop();
if (!$("body").hasClass("m-nav-open")) {
$("body").scrollTop(0).addClass("m-nav-open");
}
});
$(document).mouseup(function (e){
if (!sidenav.is(e.target) && sidenav.has(e.target).length === 0 && !menutoggle.is(e.target) && menutoggle.has(e.target).length === 0){
if ($("body").hasClass("m-nav-open")) {
$("body").scrollTop(scrollpos).removeClass("m-nav-open");
}
}
});
});

function ScrollOnTopo() {
window.scrollTo(0, 0); //It scrolls page at top
}
This function may be useful to you.

Problem with event.target in IE

I'm writing js for a status update system to be used on various pages throughout a app that I'm working. I am really just starting to get more comfortable with javascript so it has been somewhat of a challenge to get to the point where I have everything now.
The status system is basically a facebook clone. For the most part everything is supposed to function the way that facebook's status updates and status comments do. The intended behavior is that when the user clicks in the status textarea, the div under the status textarea slides out revealing the submit button as well as some other checkboxes.
If the user clicks anywhere else on the page except a link or any element that has the class prevent_slideup the div slides up hiding the submit button and any checkboxes.
I'm using a document.body click function to determine what the user clicked on so I know which form elements to hide if I should even hide them. I do not want this slideup to take place on a textarea if that textarea has focus or the user is selecting a checkbox that goes with that form. Hence the prevent_slideup class. I also do not want to bother running the slideup logic if the user has clicked on a link. I'd prefer they just leave the page without having to wait for the animation.
The code that I was using to accomplish this task can be found in the $(document.body).click(function (e) section below where I'm doing a .is('a') check on the event target.
This code works as expected in chrome and firefox, however in ie when a link is clicked for the first time it seems that the element stored in var target is actually a div instead of an anchor. What ends up happening is that the submit div slides up and the user is not taken to the link that they just clicked on. If a link is clicked a second time the user is taken to the page as you would expect.
It seems to me that there's some kind of a lag in ie as to what the current event being fired is.
The entire status module is working other than this one strange ie bug regarding the users click on the link not being carried out the first time that they click a link after opening the status textarea. Does anything jump out in this script that would explain this behavior or does anyone have any other advice?
Thanks in advance for your help.
$(document).ready(function(){
$("textarea.autoresize").autoResize();
});
$(document.body).click(function (e){
var target = e.target || e.srcElement;
console.log(target);
console.log($(target).is('a'));
if($(target).hasClass('prevent_slideup') || $(target).is('a'))
{
return true;
}
else
{
var active_element = document.activeElement;
var active_status_id = $(active_element).attr('data-status_id');
var active_has_data_status_id = (typeof active_status_id !== 'undefined' && active_status_id !== false) ? true : false;
$('textarea').each(function(){
if($(this).hasClass('status_comment_textarea'))
{
var status_id = $(this).attr('data-status_id');
if($('#comment_textarea_'+status_id).val() === '' && (!active_has_data_status_id || active_status_id !== status_id))
{
hide_status_comment_submit(status_id);
}
}
else if($(this).attr('id') === 'status_textarea')
{
if($('#status_textarea').val() === '' && $(active_element).attr('id') !== 'status_textarea')
{
$('#status_textarea').html($("#status_textarea").attr('placeholder'));
hide_status_submit();
}
}
});
return true;
}
});
$("#status_textarea").live('click', function(){
if($('#status_textarea').val() === $("#status_textarea").attr('placeholder'))
{
$('#status_textarea').html('');
}
show_status_submit();
return false;
});
$(".comment_toggle").live('click', function(){
var status_id = $(this).attr('data-status_id');
show_status_comment_submit(status_id);
return false;
});
$(".status_comment_submit").live('click', function(){
var status_id = $(this).attr('data-status_id');
$('#status_comment_submit_wrapper_'+status_id).addClass('status_comment_submit_successful');
return false;
});
$(".show_hidden_comments").live('click', function(){
var status_id = $(this).attr('data-status_id');
$('#status_hidden_comments_'+status_id).show();
$(this).hide();
return false;
});
function hide_status_submit()
{
$("#status_textarea").removeAttr('style');
$("#status_textarea").blur();
$("#status_block").removeClass('padding_b10');
$("#status_submit_wrapper").slideUp("fast");
return false;
}
function show_status_submit()
{
if ($("#status_submit_wrapper").is(":hidden"))
{
$("#status_block").addClass('padding_b10');
$("#status_submit_wrapper").slideDown('fast');
}
return false;
}
function hide_status_comment_submit(status_id)
{
if(!$('#status_comment_submit_wrapper_'+status_id).is(":hidden"))
{
$('#status_comment_submit_wrapper_'+status_id).hide();
$('#fake_comment_input_'+status_id).show();
$('#comment_textarea_'+status_id).removeAttr('style');
}
return false;
}
function show_status_comment_submit(status_id)
{
if($('#status_comment_submit_wrapper_'+status_id).is(":hidden"))
{
$('#fake_comment_input_'+status_id).hide();
$('#status_comment_submit_wrapper_'+status_id).show();
$('#comment_textarea_'+status_id).focus();
}
return false;
}
function status_comment_submit_successful()
{
hide_status_comment_submit($('.status_comment_submit_successful').attr('data-status_id'));
$('.status_comment_submit_successful').removeClass('status_comment_submit_successful');
return false;
}

I figured out that there were two main issues with my script...
1.) The document.body function and the #status_textarea live click funtioins were conflicting with each other.
2.) After adding the logic for the #status_textarea function into the document.body function I noticed that the script still didn't quite work as expected in internet explorer unless I had an alert in the function. The problem at this point was that the autoresize plugin that I'm using on the textarea was also conflicting with the document.body function.
I was able to rectify the situation by adding a dummy text input and hiding the status textarea. On click of the dummy text input the status textarea is shown and the the dummy text input is hidden. I have no idea why this worked, but it seems to have solved my problems.