Save a function value to a Global Variable in jQuery

Asked

Viewed 268 times

0

with a problem in the development of a dropdown simple, I’m not able to take the value of a function to pass to others, the values I’m looking for are $target and dropdown which corresponds to the click action given in the specific element. See Code:

$(document).ready(function() {
  var menu = $('.md-menu'),
    orign = $('.dropdown'),
    $target,
    dropdown,
    defaults = {
      inDuration: 400,
      outDuration: 400,
      show: 'easeOutSine',
      hide: 'easeOutCubic'
    };

  if (!menu.length) {
    return;
  }

  $('.md-menu li').each(function() {
    var delay = $(this).index() * 100 + 'ms';
    $(this).css({
      'transition-delay': delay
    });
  });

  function show(e) {
    $target = $(e.target);
    dropdown = $target.next();

    var offsetTop = ($target.offset() || {
        "top": NaN
      }).top - $(window).scrollTop(),
      windowHeight = window.innerHeight,
      verticalOffset = $target.innerHeight(),
      adjustedHeight = windowHeight - offsetTop - verticalOffset;

    dropdown.css({
      'padding': '0',
      'width': $target.outerWidth(),
      'max-height': adjustedHeight,
      'overflow-y': 'auto'
    }).show({
      'duration': defaults.inDuration,
      'easing': defaults.show
    }).addClass('active');
  };

  function position(e) {
    $target = $(e.target);
    dropdown = $target.next();

    dropdown.css({
      'top': ($target.offset().top + $target.outerHeight()) - $target.outerHeight(),
      'left': dropdown.hasClass('right') ?
        $target.offset().left - (dropdown.outerWidth() - $target.outerWidth()) : $target.offset().left
    });
  };

  orign.click(function(e) {
    e.preventDefault();
    show(e);
    position(e);
    
    $target = $(e.target);
    dropdown = $target.next(); console.log(dropdown);

    $(document).on('click', function(e) {
      if (!dropdown.is(e.target) && !$target.is(e.target)) {
        dropdown.hide({
          'duration': defaults.outDuration,
          'easing': defaults.hide
        }).removeClass('active');
        $(document).off('click');
      }
    });
  });
  $(window).on('resize', function(e) {
    if (menu.is(':visible')) {
      position(e);
    }
  });
});
.md-menu {
  position: absolute;
  display: none;
  list-style: none;
  z-index: 100;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #fff;
  -ms-box-shadow: 0 2px 5px rgba(0, 0, 0, .16), 0 2px 10px rgba(0, 0, 0, .12);
  -o-box-shadow: 0 2px 5px rgba(0, 0, 0, .16), 0 2px 10px rgba(0, 0, 0, .12);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .16), 0 2px 10px rgba(0, 0, 0, .12);
}
.md-menu li {
  clear: both;
  cursor: pointer;
  text-align: left;
  text-transform: none;
  padding: 14px 16px;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  -ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=0);
  filter: alpha(opacity=0);
  -webkit-transform: translateY(-30%);
  -moz-transform: translateY(-30%);
  -ms-transform: translateY(-30%);
  -o-transform: translateY(-30%);
  transform: translateY(-30%);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: #666;
}
.md-menu li:hover {
  background-color: #eee;
}
.md-menu li.divider {
  height: 1px;
  padding: 0;
  overflow: hidden;
  background-color: #e8eaea;
}
.md-menu li > a {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  text-decoration: none;
  color: #666;
}
.md-menu.active li {
  -khtml-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  -ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=100);
  filter: alpha(opacity=100);
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<div class="row">
  <a class="btn red dropdown">dropdown</a>
  <ul class="md-menu">
    <li><a href="#">Teste1</a>
    </li>
    <li><a href="#">Teste2</a>
    </li>
    <li><a href="#">Teste3</a>
    </li>
    <li><a href="#">Teste4</a>
    </li>
  </ul>
</div>

If you understand I repeat several times the $target and the dropdown and I wanted to reduce the use by trying to make a global variable or some other alternative and almost forgetting the window.resize is not sending the $target and the dropdown to perform the update.

  • 1

    Once you are extracting the element from the generated event in $(window).on('resize', function(e) { That’s not gonna give us an element of the DOM. Explain better which part doesn’t behave as you want and what the behavior should be so we can give more useful answers.

  • The correct execution occurs but I cannot update the values top and left when I modify the screen size, when running the window.resize it sends to blank function the variable, wanted a way to store this value.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.