CODEWITHSUNDEEP
javascriptjquery
user7180853
user7180853

Reputation:

Use function as an "on" event?

I currently have this function:

function highlightBoxes() {
  var windowStart = $(window).scrollTop();
  var windowEnd = windowStart + $(window).height();

  $('.box').each(function() {
    var box = $(this);
    var start = box.offset().top;
    var end = start + box.height();

    if (windowStart <= start && windowEnd >= end) {
      box.addClass('active');
    } else {
      box.removeClass('active');
    }
  });
}

highlightBoxes();
$(document).scroll(highlightBoxes);
$(window).resize(highlightBoxes);

Which checks if an entire element (in this case .box) is in view (jsfiddle). However, I want to be able to use the function as an on event, so I can use it for many different elements. Something like:

$('.box').on('inview', function () {
    if (elementIsInView) {
        // make the box red
    } else {
        // make the box the original color
    }
});

How can I do this?

Upvotes: 1

Views: 94

Answers (4)

Ali
Ali

Reputation: 53

try this:

  function checkElementToBeInView(elem, callback) {
  $(elem).each(function() {
    var element = $(this);
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = element.offset().top;
    var elemBottom = elemTop + element.height();
    var isInView = ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    callback(element, isInView);
  });
}
$(window).on("load resize scroll", function(e) {
  checkElementToBeInView(".box", function(elem, isInView) {
    if (isInView)
      elem.addClass('active');
    else
      elem.removeClass('active');
  });

Upvotes: 0

prasanth
prasanth

Reputation: 22500

click ,hover ,drag all are events. Event is a action, apply from user. Function is a declare with javascript.Is not directly running.Its only run after event trigger.Event are declared by w3c

I think you need something like that:

Assign function with button click.Its works from button click event.

$('button').on('click',hello)

function hello(){
  console.log('button Clicked')
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button >hi</button>

or

$('button').on('click',function hello(){
  console.log('button Clicked')
  })

For your code do like this

$('.box').on('click', function inview() {
    if (elementIsInView) {
        // make the box red
    } else {
        // make the box the original color
    }
});

Upvotes: 0

aroundtheworld
aroundtheworld

Reputation: 782

using on means you will need to trigger an event with the same name, a super simple version of this is using document as the message bus like:

$(document).trigger('inview');

Therefore at the point in your code where you have decided that inview should be true, fire an event like the above, at which point the on event will run the function.

Base on the code above, you probably want to move the if statement out of the on event, and in fact run that as a separate function. When elementIsInView returns true, you could fire the inview event.

Upvotes: 2

lernyoung
lernyoung

Reputation: 263

You could use the hover event.

$(document).on('hover','.box', function () {
if (elementIsInView) {
    // make the box red
} else {
    // make the box the original color
}
});

If am not clear with your answer let me know.

Upvotes: 0

Related Questions