Return element to original CSS after - jQuery / Javascript

Question

I have a fixed element (menu tab) on a page of a web app such that when the iPhone keyboard opens, the menu is repositioned on scroll to stay in the window. When the keyboard closes I want the element to return to its original position based on page load CSS.

How do I remove the scroll event I add on focus? It seems to be the problem and my code below is not working.

Additionally is there a way to keep the element in position and have the page smooth scroll behind it? My code snaps the element into place after the scroll happens.

Thanks!

MY CSS for the fixed element:

#fixed-floating-menu {
  position: fixed;
  right: 0;
  top: 103px;
  z-index: 9999;
  background-color: @navy;
  border: @gray;
  text-align: center;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-color: @box-border-color;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
  opacity: 0.7;

  tr td {
    padding: 10px;
  }

  .icon-popover-menu-side {
    color: @white;
  }
}

MY JS handingling the keyboard open / reposition of element:

// Adjust scrolling behaviour if iPhone
var iOS = /(iPad|iPhone|iPod)/g.test(navigator.userAgent);

if (iOS) {
    $("body").mobileFix({                           // Pass parent to apply to
        inputElements: "input, textarea, select",   // Pass activation child elements
        addClass: "fixfixed"                        // Pass class name
    });
}

// iPhone scroll fix with keyboard open
$.fn.mobileFix = function (options) {
var $parent = $(this);

$(document)
    .on('focus', options.inputElements, function(e) {
        $parent.addClass(options.addClass);

        setTimeout(function() {
            var handPosition = window.pageYOffset - 7;
            $("#fixed-floating-menu").css("position", "absolute").css("top", handPosition).css("right", -10);
        }, 1);

        $(window).scroll(function(e) {
            var handPosition = window.pageYOffset - 7;
            $("#fixed-floating-menu").css("position", "absolute").css("top", handPosition).css("right", -10);
        });

    })
    .on('blur', options.inputElements, function(e) {
        $parent.removeClass(options.addClass);

        // Fix for some scenarios where you need to start scrolling
        setTimeout(function() {
            $(document).scrollTop($(document).scrollTop());
        }, 1);

        $(window).off('scroll', function(e) {
            $("#fixed-floating-menu").css("position", "fixed").css("top", -7).css("right", -10);
            return true;
            });

        });

    return this; // Allowing chaining
};

.css() method adds inline styles. So you can reset them with .attr('style', '') or with .removeAttr('style'); — disstruct
– disstruct, Commented Mar 2, 2017 at 3:31
I don't know what's that you posted, but it's not plain CSS. It's most likely a preprocessor — Matheus Avellar
– Matheus Avellar, Commented Mar 2, 2017 at 4:31

Cristi Marian · Accepted Answer · 2017-03-02 09:42:54Z

1

$('elementSelector').removeAttr('style');

answered Mar 2, 2017 at 9:42

Cristi Marian

4538 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jagdish.narkar · Accepted Answer · 2017-03-02 04:00:35Z

0

Try changing your

$(window).scroll(function(e) { var handPosition = window.pageYOffset - 7; $("#fixed-floating-menu").css("position", "absolute").css("top", handPosition).css("right", -10); });

to

$(window).on("scroll", function(e) { var handPosition = window.pageYOffset - 7; $("#fixed-floating-menu").css("position", "absolute").css("top", handPosition).css("right", -10); });

As I know the .off() method removes event handler that were attached with .on() method.

answered Mar 2, 2017 at 4:00

jagdish.narkar

3171 silver badge7 bronze badges

Collectives™ on Stack Overflow

Return element to original CSS after - jQuery / Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related